hexo个人博客优化用户体验增加每日一言功能


很多手机app都会有个功能就是首页每日一句英文,每日一句诗词,每日一句问候…确实是一个提升用户体验的功能。

小波遂想给廿壴(ganxb2)博客也增加此功能,度娘一番,一种方式是自己写json文件随机播报,另外一种则是利用一言网站提供的api,既然有api那就赶紧动手折腾一番。


😍廿壴(ganxb2)博客每日一言成品效果

廿壴(ganxb2)博客每日一言成品效果


😦一言官网返回接口参数

一言api接口文档[1]

今日诗词接口文档[2]

返回参数名称描述
id一言标识
hitokoto一言正文。编码方式 unicode。使用 utf-8。
type类型。请参考第三节参数的表格
from一言的出处
from_who一言的作者
creator添加者
creator_uid添加者用户标识
reviewer审核员标识
uuid一言唯一标识;可以链接到 https://hitokoto.cn/?uuid=[uuid] 查看这个一言的完整信息
commit_from提交方式
created_at添加时间
length句子长度

说明:

以上参数为api接口fetch第二个.then的内容

关于fetch的扩展阅读请参考mdn[3]


🧐第一步:定义请求接口方法

hexo博客还是用的jq语言,所以可以直接用ajax,$.get来获取,但是小波个人推荐用fetch

因为fetch是js为了补偿不用其他框架的面向未来的原生写法

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
Fluid.plugins = {
// 一言
getRecordHitokoto() {
return fetch('https://v1.hitokoto.cn?c=d&c=h&c=j&c=a')
.then(function (res){
return res.json();
})
.then(function (data) {
const text = document.querySelector('.yiyan-hitokoto span'),
from = document.querySelector('.yiyan-from span');
if(data.hitokoto) {
text.textContent = data.hitokoto;
}
if(data.from || data.from_who) {
// 返回为Null转一下为空
data.from = data.from || '';
data.from_who = data.from_who || '';
from.textContent = `《${data.from}${data.from_who}`;
}
})
.catch(function (err) {
console.error(err);
});
}
}

第一个.then返回值

1
2
3
4
5
6
7
8
9
10
11
12
response{
body: (...)
bodyUsed: true
headers: Headers
[[Prototype]]: Headers
ok: true
redirected: false
status: 200
statusText: ""
type: "cors"
url: "https://v1.hitokoto.cn/?c=d&c=h&c=j&c=a"
}

第二个.then返回值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"id":4096,
"uuid":"5119015d-60fb-4952-a7cf-7851c52c2510",
"hitokoto":"心有猛虎,细嗅蔷薇",
"type":"d",
"from":"猛虎与蔷薇",
"from_who":null,
"creator":"mzy231",
"creator_uid":2154,
"reviewer":0,
"commit_from":"web",
"created_at":"1538840129",
"length":9
}

友情提示:
第一个.then是接口状态返回值,第二个.then才是我们要的数据内容

如果不想调用一言api也可以自己写个Json文件来调用,或者调用今日诗词的api。

小波个人选择是一言,因为一言包含的分类较多,接口地址后的?c=d&c=h&c=j&c=a 即表示调用的分类

参数说明
a动画
b漫画
c游戏
d文学
e原创
f来自网络
g其他
h影视
i诗词
j网易云
k哲学
l抖机灵
其他作为 动画 类型处理

🤔第二步:增加html盒子和样式

  • html
1
2
3
4
<div class="yiyan hint--top" aria-label="点击切换下一言">
<p class="yiyan-hitokoto"><span></span></p>
<p class="yiyan-from"><span></span>&nbsp;</p>
</div>

友情提示:
hint--top和aria-label="点击切换下一言"是hint.css提示插件使用,如果你的博客未使用此插件可删除

  • css
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
html
--text-color: #d3d3d3;

.yiyan
display flex
justify-content center
font-size 1rem
padding 1rem

p
margin-bottom 0
background-color #f5f5f5
background linear-gradient(to top, #20c997 0, #28a745 10%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%)
color var(--text-color)

&:hover
p
background linear-gradient(to top, #20c997 0, #28a745 10%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%)


/* 手机兼容 */
@media (max-width 767.98px)
.yiyan
flex-direction column
p
background none


友情提示:
css使用stylus书写,hexo生成时会自动转成css
也可自己复制到css文件中补全花括号,冒号,分号


😚第三步:调用

1
2
3
4
5
6
7
8
document.addEventListener('DOMContentLoaded', function() {
// 一言api接口
const promiseHittokoto = Fluid.plugins.getRecordHitokoto();
// 点击刷新
document.querySelector(".yiyan").addEventListener("click", (e) => {
Fluid.plugins.getRecordHitokoto();
}, false);
});

🙂廿壴(ganxb2)博客每日一言功能相关链接

THE END
hexo个人博客优化用户体验增加每日一言功能
https://blog.ganxb2.com/1002.html
作者
chopin gump chopin gump
许可协议
小尾巴
Stay Hungry, Stay Foolish「求知若饥, 虚心若愚」 — 廿壴(ganxb2)
微信

微信

支付宝

支付宝

🕐如果评论显示“刷新”无法加载,过一会再来康康~🕢 _(≧∇≦」∠)_ (填写常用邮箱即可快速收到回复通知~)