效果预览
与本站首页的“诗词推荐-侧边栏卡片“同款
添加方法
创建页面文件
在[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-poem.card-widget
#poem_sentence
#poem_info
#poem_author
#poem_title
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
})
author.innerHTML = '（' + result.data.origin.dynasty + '）' + result.data.origin.author
title.innerHTML = '《 ' + result.data.origin.title + ' 》'
});
|
引入页面文件
将该结构插入到对应的位置，可以在当前文件夹[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;
}
}
});
}
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;
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
48
49
50
| [data-theme=light]
--poem-bg: rgba(230,230,235,0.8)
[data-theme=dark]
--poem-bg: rgba(25,35,60,0.8)
#aside-content
#card-poem.card-widget
display: flex
flex-direction: column
padding: 0.6rem
#poem_sentence
text-align: center
font-family: "Songti SC", "STSong", "SimSun", serif
white-space: pre-line
letter-spacing: 0.03em
line-height: 1.6
padding: 0.6rem 0.6rem
border-radius: 8px
background: var(--poem-bg)
color: var(--default-bg-color)
font-size: 1rem
min-height: 60px
#poem_info
display: flex
justify-content: center
align-items: center
gap: 0.5rem
flex-wrap: wrap
margin-top: 0.1rem
letter-spacing: 0em
color: var(--text-color)
#poem_title
font-size: 0.85rem
font-weight: 600
order: 0
color: var(--text-color)
#poem_author
font-size: 0.75rem
opacity: 0.85
order: 1
white-space: pre-line
|
