为您的Hexo博客添加Hitokoto一言功能

今天又更新了呢，真棒！

最近看到许多网站都使用了一言，于是想给自己的博客加一个一言模块。
但是在上网寻找博客添加Hitokoto现成方案时，我发现仅有的方案都是采用下载许多句子并保存来调用的，我认为这样非常愚蠢，理由如下：

Hitokoto官方明明给了API不用，反而自己保存名言，这不是自找麻烦吗？
TXT文件的句子仅有内容，没有出处，对于我这样的强迫症患者，非常不爽。

因此我选择了自己写。

效果

请在电脑端最大化窗口见右下方侧边栏。

Next主题v7.3.0须知

使用NexT主题v7.3.0版本的用户请在blog/themes/next/_config.swig中将以下片段：

custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

根据下文所需要改动的自定义文件取消引用对应内容，并在blog/source/_data/...中添加改动内容。

Hitokoto官方API

点击此处访问米奇妙妙屋。
官方给出了API的格式以及使用声明。
最为重要的是其参数以及返回格式：

我们可以通过调用：https://v1.hitokoto.cn/ 获得任意的一个句子，默认返回json格式。
同时我们可以选择参数：https://v1.hitokoto.cn/?c=b 获得一个分类是漫画的句子，默认返回json格式。
如果想要获得txt格式的句子（仅有内容），可以调用：https://v1.hitokoto.cn/?encode=text
如果需要同时给多个参数赋值，其间用&符号连接，如：https://v1.hitokoto.cn/?c=f&encode=text

调用API

官方给出了API的使用示例，可以在上面的米奇妙妙屋里找到。
在此处基于Hexo-NexT主题加以适配（将一言添加到NexT主题的侧边栏中）。

在blog/themes/next/layout/_custom/sidebar.swig中添加以下内容：

<!-- none-select-br -->

<p></p>

<!-- hitokoto -->

<div class="hitokoto-title">
	<i class="fa fa-paragraph"></i>
	<b>一言</b>
</div>

<div id="hitokoto">:D 获取中...</div>
<i id="hitofrom">:D 获取中...</i>

<script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
<script>
  fetch('https://v1.hitokoto.cn')
    .then(function (res){
      return res.json();
    })
    .then(function (data) {
      var hitokoto = document.getElementById('hitokoto');
      hitokoto.innerText = '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + data.hitokoto;
      var hitofrom = document.getElementById('hitofrom');
      hitofrom.innerText = "——" + data.from + '\xa0'; 
    })
    .catch(function (err) {
      console.error(err);
    })
</script>

对代码加以解释：

none-select-br

首先部分是用于隔开侧边栏默认部分与接下来我们即将添加的一言模块。
实现方式是添加一个不能被选中的空行，因为我发现使用<br />，会出现一个可以被选中的空格，强迫症使我放弃了这样的写法，因此采用了这样比较笨拙的方法。
如果不添加这样一个空行，侧边栏默认部分会与一言模块挤在一起，非常难看，读者可以去掉这一部分自行尝试。

hitokoto-title

我们使用Font Awesome中的段落符号作为一言的标题图标。

hitokoto-content

通过一段js代码获取API中的json文件，代码中的fetch('https://v1.hitokoto.cn')可以根据上述添加不同参数（不建议改变返回格式）。
提取出json的“hitokoto”内容覆盖id为“hitokoto”的div从而实现显示一言正文内容。
此处我们在正文内容前添加了7个短空格来规范段首空格格式。为什么不直接添加空格要使用短空格？因为沙雕HTML会把添加的空格全部吞掉。
再提取出json的“from”内容覆盖id为“hitofrom”的文本从而实现显示一言来源。
此处我们在行首添加破折号并在行尾添加一个短空格。为何要在行尾添加一个短空格？后文会加以解释。

配置CSS

在blog/themes/next/source/css/_custom/custom.styl中添加以下内容：

//hitokoto

.hitokoto-title {
  text-align: center;
  font-size: 12px;
}

#hitokoto {
  text-align: left;
  font-family: "Microsoft YaHei";
  font-size: 11px;
}

#hitofrom {
  float: right;
  font-family: "Microsoft YaHei";
  font-size: 10px;
}

加以解释：

hitokoto-title

我们将一言的标题部分CSS设置为与NexT主题的Blogroll同样的样式，从而更加美观。

CSS-hitokoto

微软雅黑真好看。

CSS-hitofrom

~~微软雅黑真好看。~~
此处我们将句子来源向右靠齐，但是会出现一个问题。
因为我们将句子来源设置成了斜体（当然你可以不用斜体就不存在这个问题了），所以最后一个字符可能超出侧边栏的边框从而无法显示，因此我们需要在最后添加一个短空格。

结语

到此为止就全部结束啦！您可以观察一下侧边栏的一言有无正常运作，如果出现问题请在下方评论区反馈。

其实这篇文章早就应该写完了，但是我咕了很久，当我咕完准备发布的时候，发现我以前使用的API倒闭啦，因此我只好重新写这一篇文章，真累（猛男落泪）。