文章摘要
青桔 GPT 4
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
投诉

本操作在anzhiyu主题下完成,其他主题也适配请自行研究!

效果

热评

loading...

loading...

HTML

  • 留言板的md文件中添加以下内容
1
2
3
4
5
6
7
<div class="poem-wrap">
<div class="poem-border poem-left"></div>
<div class="poem-border poem-right"></div>
<h1>热评</h1> //这里你可以根据不同句子类型来修改,比如每日一句诗词
<p id="poem">loading...</p>
<p id="info">loading...</p>
</div>

JS

  • 留言板的md文件中添加以下内容
  • 句子类型可以看这里随机一言接口进行更换
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
<script>
function updateComment() {
fetch("https://api.qjqq.cn/api/Yi?c=j") //句子类型可以更换
.then(response => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then(data => {

const poemElement = document.getElementById('poem');
const infoElement = document.getElementById('info');
poemElement.innerHTML = data.hitokoto;
if (data.from_who !== null) {
infoElement.innerHTML = data.from_who + " · " + "《 " + data.from + " 》";
} else {
infoElement.innerHTML = " “ " + data.from + " ” ";
}
})
.catch(error => {

const poemElement = document.getElementById('poem');
const infoElement = document.getElementById('info');
poemElement.innerHTML = "获取出错啦";
infoElement.innerHTML = "";
console.error('Fetch error:', error);
});
}

updateComment();

window.addEventListener('load', updateComment);
</script>

CSS

  • 放到自己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
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
/* 留言板增加每日一言模块 */
.poem-wrap {
position: relative;
width: 730px;
max-width: 80%;
border: 2px solid #797979;
border-top: 0;
text-align: center;
margin: 80px auto;
}

.poem-left {
left: 0;
}

.poem-border {
position: absolute;
height: 2px;
width: 27%;
background-color: #797979;
}

.poem-right {
right: 0;
}

.poem-wrap h1 {
position: relative;
margin-top: -20px;
display: inline-block;
letter-spacing: 4px;
color: #797979;
}

.poem-wrap p:nth-of-type(1) {
font-size: 25px;
text-align: center;
margin: 0 auto;
}

.poem-wrap p {
margin: auto;
line-height: 30px;
color: #797979;
font-family: "Linux Biolinum", "Noto Serif SC", Helvetica, Arial, Menlo, Monaco, monospace, sans-serif;
}

.poem-wrap p:nth-of-type(2) {
font-size: 18px;
margin: 15px auto;
}

.bozhushuo {
text-align: center;
font-size: 19px !important;
margin: 0 0 12px !important;
line-height: 1.9rem;
font-family: "Linux Biolinum", "Noto Serif SC", Helvetica, Arial, Menlo, Monaco, monospace, sans-serif;
}

.notice {
margin: 30px auto;
padding: 20px;
border: 1px dashed #e6e6e6;
color: #969696;
position: relative;
display: inline-block;
width: 95%;
background: #fbfbfb50;
border-radius: 10px;
font-size: 16px;
}

.notice-content {
display: initial;
vertical-align: middle;
}