前言

本文为个人目前对于一言(Hitokoto)相关修改的集合。


一言返回内容类型个性化

关于首页设置一言的配置,在 _config.butterfly.yml中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# the subtitle on homepage (主頁subtitle)
subtitle:
enable: true
# Typewriter Effect (打字效果)
effect: true
# loop (循環打字)
loop: true
# source 調用第三方服務
# source: false 關閉調用
# source: 1 調用一言網的一句話(簡體) https://hitokoto.cn/
# source: 2 調用一句網(簡體) http://yijuzhan.com/
# source: 3 調用今日詩詞(簡體) https://www.jinrishici.com/
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: 1
# 如果關閉打字效果,subtitle 只會顯示 sub 的第一行文字
sub:

subtitle 开启并且其 source 设定为 1 即可使用一言。

实现一言模块的具体代码,则来自于 themes/butterfly/layout/includes/third-party/subtitle.pug

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
script.
function subtitleType () {
fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
if (!{effect}) {
const from = '出自 ' + data.from
const sub = !{JSON.stringify(subContent)}
sub.unshift(data.hitokoto, from)
window.typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: !{loop},
backSpeed: 50,
})
} else {
document.getElementById('subtitle').innerHTML = data.hitokoto
}
})
}

if (!{effect}) {
if (typeof Typed === 'function') {
subtitleType()
} else {
getScript('!{url_for(theme.CDN.typed)}').then(subtitleType)
}
} else {
subtitleType()
}

关于一言板块,其核心就是一行:

1
https://v1.hitokoto.cn

根据官方文档[^1],后面的一些参数我们所需要的只是句子类型那个:

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

可选择多个分类,例如: ?c=a&c=c

比如个人,想让其返回 ACG 类型的文字,将核心代码修改为如下即可:

1
https://v1.hitokoto.cn?c=a&c=b&c=c
1
2
3
4
5
6
case source
when 1
script.
function subtitleType () {
- fetch('https://v1.hitokoto.cn')
+ fetch('https://v1.hitokoto.cn?c=a&c=b&c=c')

页面头部显示一言


文章侧边栏一言卡片

参考:Butterfly侧边栏引入一言 - Flipped1121 - 博客园 (cnblogs.com)

Butterfly/layout/includes/widget目录下创建card_hitokoto.pug文件,内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if theme.aside.card_hitokoto.enable
.card-widget.card-hitokoto
.card-content
.item-headline
i.fas.fa-quote-left
span= _p('一言')
#hitokoto :D 获取中...
i#hitofrom :D 获取中...
script.
fetch('https://v1.hitokoto.cn?c=a&c=b&c=c')
.then(function (res){
return res.json();
})
.then(function (data) {
var hitokoto = document.getElementById('hitokoto');
hitokoto.innerText = data.hitokoto;
var hitofrom = document.getElementById('hitofrom');
hitofrom.innerText = "    ——" + data.from + '';
})
.catch(function (err) {
console.error(err);
})

Butterfly/layout/includes/widget/index.pug添加代码:

1
2
3
4
5
6
7
8
9
10
11
12
#aside-content.aside-content
//- post
if is_post()
- const tocStyle = page.toc_style_simple
- const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
if showToc && tocStyleVal
.sticky_layout
include ./card_post_toc.pug
else
!=partial('includes/widget/card_author', {}, {cache: true})
!=partial('includes/widget/card_announcement', {}, {cache: true})
+ !=partial('includes/widget/card_hitokoto', {}, {cache: true})

因为位置跟之前站点资讯的位置不同,是处于sticky_layout上面的块的,所以我们还得对_config.butterfly.yml进行修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    # aside (側邊欄)
# --------------------------------------

aside:
enable: true
hide: false
button: true
mobile: true # display on mobile
position: right # left or right
card_author:
enable: true
description:
button:
enable: true
icon: fab fa-github
text: Follow Me
link: https://github.com/btmuli
card_announcement:
enable: true
content: When the moon fallen into the star ?
+ card_hitokoto:
+ enable: true

自定义卡片显示一言

这方面的内容详见:小试个性名片 | 棃星落月

因为文末卡片内容是可以直接写html的,所以我就把一言写进去了,不过因为怎么调都不对劲,就直接拿的官方现成的[1]来:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 自定义卡片
card:
enable: true #总开关
QR_code: /img/paimon.jpg #加群二维码
master: BTMuli #群主ID
group: 棃星落月 #QQ群号
created: 04/018/2022 #建群时间
front: Welcome to BTmuli's site #卡面正面描述语
back1: sitelink #背面从上到下四行文字内容自定义
back2: <a href="https://btmuli.top">https://www.btmuli.top</a>
back3: <p id="hitokoto"><a href="#" id="hitokoto_text">:D 获取中...</a></p>
<script>
fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
const hitokoto = document.getElementById('hitokoto_text')
hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
hitokoto.innerText = data.hitokoto
})
.catch(console.error)
</script>
back4: Welcome to BTMuli's site,wish you a nice day .

  1. 使用示例 | 一言开发者中心 (hitokoto.cn) ↩︎