安知鱼主题是一款非常不错的主题，今天我们在博客的右侧添加每日一言功能，不仅能增加博客的趣味性，还能为读者带来每日的灵感和思考。本文将详细介绍如何在博客中实现这一功能，包括 HTML 、 CSS 和 JavaScript 代码。
1.添加主题设置
打开主题文件夹下面的 _config.yml 文件，搜索 # aside (侧边栏) ，在 aside: 里面添加如下设置
1
2
3
4
|
daily_quote:
enable: true
title: 每日一言
|
2.添加标题设置
打开根目录下面的 /themes/anzhiyu/languages 文件夹，在里面找到 default.yml 文件，打开之后找到如下代码
1
2
3
4
5
6
7
8
9
| aside:
articles: 文章
tags: 标签
categories: 分类
card_announcement: 公告
card_categories: 分类
card_tags: 标签
card_archives: 归档
card_recent_post: 最近发布
|
代码之后还有很多行代码，主要是在
下面，添加如下代码
添加之后的效果
1
2
3
4
5
6
7
8
9
10
11
| aside:
articles: 文章
tags: 标签
categories: 分类
card_announcement: 公告
card_categories: 分类
card_tags: 标签
card_archives: 归档
card_recent_post: 最近发布
card_daily_quote: 每日一言
card_webinfo:
|
3.添加 pug 模板代码
打开 /themes/anzhiyu/layout/includes/widget 文件夹，在里面新建 card_daily_quote.pug 文件，之后复制下面的代码粘贴到文件中
1
2
3
4
5
6
7
8
| if theme.aside.daily_quote.enable
.card-widget.card-daily-quote
.item-headline
i.anzhiyufont.anzhiyu-icon-pencil
span= theme.aside.daily_quote.title || '每日一言'
.daily-quote-wrapper
p#daily_quote_text 正在读取灵感...
p#daily_quote_author
|
4.CSS样式
接下来，在博客根目录 /themes/anzhiyu/source/css/ 下面，新建 daily-quote.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
| #daily-quote-display {
display: block;
max-width: 300px;
background: transparent;
margin: 10px 0;
}
#daily_quote_text {
font-family: "Noto Serif SC", serif;
font-size: 12px;
line-height: 2;
margin: 0;
text-align: justify;
text-justify: inter-character;
word-break: break-all;
animation: fadeIn 0.8s ease;
}
#daily_quote_author {
margin-top: 8px;
font-size: 10px;
opacity: 0.6;
text-align: right;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
在这个样式表中，我们设置了每日一言容器的最大宽度、背景颜色、边距等属性。同时，我们还为文本和作者信息设置了字体、大小、行高等样式。
5.添加 JavaScript 代码
核心的 JavaScript 代码，在 /themes/anzhiyu/source/js/ 文件夹下，新建 daily_quote.js 文件。
我们需要使用 JavaScript 来从 API 获取每日一言的数据，并将其显示在页面上。以下是一个简单的 JavaScript 代码示例：
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
32
| (function() {
const textEl = document.getElementById('daily_quote_text');
const authorEl = document.getElementById('daily_quote_author');
let timer = null;
const refresh = () => {
fetch('https://v1.hitokoto.cn')
.then(res => res.json())
.then(data => {
textEl.style.animation = 'none';
textEl.offsetHeight;
textEl.style.animation = null;
textEl.innerText = data.hitokoto;
const meta = (data.from_who || "") + (data.from ? `「${data.from}」` : "");
authorEl.innerText = meta ? `— ${meta}` : "";
})
.catch(err => {
console.error('一言请求异常，详情参考 [Hitokoto 状态页](https://status.hitokoto.cn):', err);
});
clearInterval(timer);
timer = setInterval(refresh, 10000);
};
if (textEl && authorEl) {
refresh();
} else {
console.warn('每日一言组件：未找到匹配的DOM元素');
}
})();
|
在这个代码中，我们首先获取了每日一言文本和作者信息的元素，然后定义了一个 refresh 函数来从 API 获取数据。我们使用 fetch 函数向 API 发送请求，并处理返回的 JSON 数据。当获取到数据后，我们将文本和作者信息显示在页面上。此外，我们还设置了一个定时器，每隔10秒刷新一次每日一言的内容。
6.引入 CSS 和 JS 文件
在安知鱼主题的配置文件中搜索 inject ，就会找到如下代码
1
2
3
4
5
6
7
8
9
10
11
| # Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# 自定义css
# - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
bottom:
# 自定义js
# - <script src="/js/xxx"></script>
|
在 head 处进行自定义 CSS 的引入工作
1
| - <link rel="stylesheet" href="/css/daily_quote.css" media="defer" onload="this.media='all'">
|
在 bottom 处进行自定义 js 的引入工作：
1
| - <script src="/js/daily_quote.js"></script>
|
修改完之后的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
|
inject:
head:
- <link rel="stylesheet" href="/css/time_flies.css" media="defer" onload="this.media='all'">
bottom:
- <script src="/js/time_flies.js"></script>
|
7.检查效果生成
最后 Hexo 三连（hexo c && hexo g && hexo s）就可以看到文章中第二张图调用的效果。
