为留言板添加一言动态题头

在 主题>留言板 里面 有一个叫 标题 的设置项目，可以嵌入一段自定义网页。思考片刻，觉得静态的内容一成不变，不好，便希望放置一个「一言」的句摘。总会有人不经意的与这些句子相遇，并被感动。

实现起来并不难，

<div align="center">
  <div id="comments_body">
    <p id="front_text">留言板</p>
    <p id="limit_left">『</p>
    <p> <a href="#" id="hitokoto_main_text">:D 获取中...</a> </p>
    <p id="hitokoto_author_text">:D 获取中...</p>
    <p id="limit_right">』</p>
  </div>
</div>

<style>
  #limit_left{
    text-align: left;
    font-size: 25px;
  }

  #limit_right{
    text-align: right;
    font-size: 25px;
  }

  #front_text{
    font-size: larger;
    font-size: 30px;
  }

  #comments_body{
    max-width: 920px;
  }

  #hitokoto_main_text{
    font-size: larger;
  }

  #hitokoto_author_text{
    font-size: large;
  }
</style>

<script>
  fetch('https://v1.hitokoto.cn/?c=d&c=k&c=c&select=json')
    .then(response => response.json())
    .then(data => {
      const main_text = document.querySelector('#hitokoto_main_text')
      main_text.href = `https://hitokoto.cn/?uuid=${data.uuid}`
      main_text.innerText = data.hitokoto

      if (data.from_who == null) {
        Front = ``
      }else{
        Front = data.from_who + ` · `
      }

      const author_text = document.querySelector('#hitokoto_author_text')
      author_text.innerText = Front + `《` + data.from + `》`
    })
    .catch(console.error)
</script>

不难理解，设置了几个可替换元素，用 Javascript 简单替换了一下。

如果需要修改返回句子的分类属性，可以修改 ：

fetch('https://v1.hitokoto.cn/?c=d&c=k&c=c&select=json')

里面的请求链接

这里引用官方文档里面的一段内容：

详细 API 说明请见一言的 官方文档

如果要隐藏自动书记人偶，可以增加一段CSS：

<style>
  #article-container {
    display: none;
}
</style>

最后，顺嘴一提，我的博客是直接改模板实现的，不习惯原版的信封动画，索性就直接去掉了。实现也比较简单，只需要在主题里面关掉信封动画，然后在 comments.html 里面的

<div id="page"> 后面添加我提到的代码即可。

更新：上面的CSS已经可以不破坏模板实现隐藏了