效果预览

与本站首页的“诗词推荐-侧边栏卡片“同款

添加方法

创建页面文件

在[blogroot]/themes/butterfly/layout/includes/widget中新建card_poem.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
32
33
34
.card-widget.card-poem
  .poem_sentence
  .poem_info
    .poem_title
    .poem_author
script(src='/js/jinrishici.js', charset='utf-8')
script(type='text/javascript').
  jinrishici.load(function(result) {
    var sentence = document.querySelector(".poem_sentence")
    var author = document.querySelector(".poem_author")
    var title = document.querySelector(".poem_title")

    //- 名句
    var sentenceText = result.data.content
    sentenceText = sentenceText.substr(0, sentenceText.length - 1);

    //- 全文
    var fullText = result.data.origin.content.join('\n')

    //- 默认显示名句
    sentence.innerHTML = sentenceText

    //- mouse hover 显示全文
    sentence.addEventListener('mouseenter', function () {
      sentence.innerText = fullText
    })
    sentence.addEventListener('mouseleave', function () {
      sentence.innerText = sentenceText
    })
    
    title.innerHTML = '《 ' + result.data.origin.title + ' 》'
    author.innerHTML = '( ' + result.data.origin.dynasty + ' ) ' + result.data.origin.author
  });

引入页面文件

将该结构插入到对应的位置，可以在当前文件夹[blogroot]/themes/butterfly/layout/includes/widget中的index.pug找到对应内容，如下：

  • 修改前
1
2
3
4
5
else
  //- page
  !=partial('includes/widget/card_author', {}, {cache: true})
  !=partial('includes/widget/card_announcement', {}, {cache: true})
  !=partial('includes/widget/card_top_self', {}, {cache: true})
  • 修改后
1
2
3
4
5
6
else
  //- page
  !=partial('includes/widget/card_author', {}, {cache: true})
  !=partial('includes/widget/card_announcement', {}, {cache: true})
  !=partial('includes/widget/card_poem', {}, {cache: true})
  !=partial('includes/widget/card_top_self', {}, {cache: true})

插入位置可以根据顺序自行调整

创建脚本文件

在[blogroot]/source/js中新建jinrishici.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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
!(function (window) {
  var onReadyCallback,
    jinrishici = {},
    TOKEN_KEY = "jinrishici-token";

  // 检测页面中是否存在诗句容器
  function hasSentenceElement() {
    return (
      document.getElementById("jinrishici-sentence") ||
      document.getElementsByClassName("jinrishici-sentence").length !== 0
    );
  }

  // 自动填充诗句
  function autoRenderSentence() {
    jinrishici.load(function (response) {
      var sentenceById = document.getElementById("jinrishici-sentence"),
        sentenceByClass = document.getElementsByClassName(
          "jinrishici-sentence",
        );

      if (sentenceById) {
        sentenceById.innerText = response.data.content;
      }

      if (sentenceByClass.length !== 0) {
        for (var i = 0; i < sentenceByClass.length; i++) {
          sentenceByClass[i].innerText = response.data.content;
        }
      }
    });
  }

  // 发起 API 请求
  function requestApi(callback, url) {
    var xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.withCredentials = true;
    xhr.send();

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        var result = JSON.parse(xhr.responseText);
        if (result.status === "success") {
          callback(result);
        } else {
          console.error("今日诗词API加载失败，错误原因：" + result.errMessage);
        }
      }
    };
  }

  // 加载诗词数据
  jinrishici.load = function (callback) {
    if (window.localStorage && window.localStorage.getItem(TOKEN_KEY)) {
      return requestApi(
        callback,
        "https://v2.jinrishici.com/one.json?client=browser-sdk/1.2&X-User-Token=" +
          encodeURIComponent(window.localStorage.getItem(TOKEN_KEY)),
      );
    } else {
      return requestApi(function (response) {
        window.localStorage.setItem(TOKEN_KEY, response.token);
        callback(response);
      }, "https://v2.jinrishici.com/one.json?client=browser-sdk/1.2");
    }
  };

  // 暴露到全局
  window.jinrishici = jinrishici;

  // DOM 就绪处理
  if (hasSentenceElement()) {
    autoRenderSentence();
  } else {
    onReadyCallback = function () {
      hasSentenceElement() && autoRenderSentence();
    };

    if (document.readyState !== "loading") {
      onReadyCallback();
    } else if (document.addEventListener) {
      document.addEventListener("DOMContentLoaded", onReadyCallback);
    } else {
      document.attachEvent("onreadystatechange", function () {
        if (document.readyState === "complete") {
          onReadyCallback();
        }
      });
    }
  }
})(window);

创建样式文件

在[blogroot]/themes/source/css/_layout中新建card_poem.styl文件，并添加如下内容

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
[data-theme='light']
  --poem-bg rgba(230,230,235,0.8)

[data-theme='dark']
  --poem-bg rgba(25,35,60,0.8)

.card-poem
  // 卡片整体
  display flex
  flex-direction column
  padding .6rem
  line-height 1.2

  // 诗句
  .poem_sentence
    text-align center
    font-family "Songti SC", "STSong", "SimSun", serif
    white-space pre-line
    letter-spacing .03em
    line-height 1.6
    padding .6rem
    border-radius 8px
    background var(--poem-bg)
    color var(--text-highlight-color)
    font-size 1rem
    font-weight 500

  // 底部信息
  .poem_info
    display flex
    justify-content center
    align-items center
    gap .5rem
    flex-wrap wrap
    margin-top .1rem
    color var(--text-highlight-color)

  // 标题
  .poem_title
    font-size .85rem
    font-weight 500

  // 作者
  .poem_author
    font-size .85rem
    font-weight 500
    color var(--card-meta)