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;
}

意外

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