本操作在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;
}