hexo个人博客优化用户体验增加每日一言功能
🙂前言
很多手机app都会有个功能就是首页每日一句英文，每日一句诗词，每日一句问候…确实是一个提升用户体验的功能。
小波遂想给廿壴博客也增加此功能，度娘一番，一种方式是自己写json文件随机播报，另外一种则是利用一言网站提供的api，既然有api那就赶紧动手折腾一番。
😍廿壴博客每日一言成品效果
😦一言官网返回接口参数
一言api接口文档
今日诗词接口文档
| 返回参数名称 | 描述 |
|---|
| 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
🧐第一步：定义请求接口方法
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) {
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盒子和样式
1
2
3
4
| <div class="yiyan hint--top" aria-label="点击切换下一言">
<p class="yiyan-hitokoto">『 <span></span>』</p>
<p class="yiyan-from"><span></span> </p>
</div>
|
友情提示：
hint--top和aria-label="点击切换下一言"是hint.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() {
const promiseHittokoto = Fluid.plugins.getRecordHitokoto();
document.querySelector(".yiyan").addEventListener("click", (e) => {
Fluid.plugins.getRecordHitokoto();
}, false);
});
|
🙂廿壴博客每日一言功能相关链接
『旅行者』，帮小波关注一波公众号吧。
小波需要100位关注者才能申请红包封面设计资格，万分感谢！
关注后可微信小波，前66的童鞋可以申请专属红包封面设计。
微信
支付宝