为您的Hexo博客添加Hitokoto一言功能 | Bill Yang's Blog
0%

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

今天又更新了呢,真棒!

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

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

因此我选择了自己写。

效果

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

Next主题v7.3.0须知

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

1
2
3
4
5
6
7
8
9
10
11
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中添加以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- 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

首先<!-- 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中添加以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//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倒闭啦,因此我只好重新写这一篇文章,真累(猛 男 落 泪)。

姥爷们赏瓶冰阔落吧~