0%

NexT 添加今日诗词

今日诗词

今日诗词的调用并不复杂,之前使用的 footer.custom_text 选项由于 theme_inject 的合并已经废弃,所以对本文进行一次更新,另外将标签转移到了正文结束的位置。

准备工作

首先通过 _config.yml 启用选项:

1
2
3
4
custom_file_path:
postBodyEnd: source/_data/post-body-end.swig
bodyEnd: source/_data/body-end.swig
style: source/_data/styles.styl

简单使用

最基础的设置参考 通用简单安装代码

首先在 source/_data/body-end.swig 文件内引入今日诗词的 SDK:

1
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js"></script>

然后在 source/_data/post-body-end.swig 文件内放入标签:

1
<span id="jinrishici-sentence">正在加载今日诗词....</span>

高级使用

简单使用的话不显示作者、朝代等信息,参考 通用高级安装代码 以及 接口返回结果格式,值得注意的地方是这一句话:

使用定制加载时,不要将标签的 id 或者 class 设置为 jinrishici-sentence ,否则SDK会自动加载一次。

也就是说插入的标签不应该使用之前的 jinrishici-sentence,需要重新命名。参考上一节配置的两个文件,把内容修改一下即可:

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
<script src="//sdk.jinrishici.com/v2/browser/jinrishici.js"></script>
<script>
console.log('今日诗词 - 开始加载...');
jinrishici.load((result) => {
let jrsc = document.getElementById('jrsc');
if (jrsc) {
console.log('今日诗词 - 标签获取成功.');
} else {
console.log('今日诗词 - 标签获取失败!');
return;
}
const data = result.data;
let author = data.origin.author;
let title = '《' + data.origin.title + '》';
let content = data.content.substr(0, data.content.length - 1);
let dynasty = data.origin.dynasty.substr(0, data.origin.dynasty.length - 1);
jrsc.innerText = content + ' @ ' + dynasty + '·' + author + title;
console.log('今日诗词 - 载入完毕.');
if (data.origin.author == '李白') {
let audio = document.createElement("audio");
audio.src = "/ding.mp3";
audio.play();
}
});
</script>
1
<div style="text-align: center"><span id="jrsc" >正在加载今日诗词....</span></div>

标签样式

NexT 支持自定义样式,在 source/_data/styles.styl 内写入如下内容,请自行发挥:

1
2
3
4
5
#jrsc {
font-style: italic;
font-size: initial;
color: midnightblue;
}

意外

因为今日诗词是网页客户端调用以及它本身的地理推荐机制,我竟然被 《春江花月夜》 困住了,😂。

正在加载今日诗词....