起因是我想在博客的主页就看到水友们的评论，这样方便我一一回复，而不是每次都点进去。
有时候回复多了，会忘记是在哪个页面出现的评论。
正巧我看到 姜先森 的博客，是如下的样式。
这不刚好能借鉴一下，随后对本博客进行了一个小范围的改造。

去除了网页右侧的最近8条评论，添加了首页的文章前五条评论预览


我这边风格是比较朴素的，所以去掉了前面的icon。

twikoo API 调用注意事项

我发现了twikoo的getRecentComments API ，给它限定数量的话他会累积所有post url的评论总和前x条评论。
很显然这不符合需要，正常我们需要的都是每条post的前几条评论，随后对这个API进行每个URL分别调用。

老规矩放下代码,感兴趣的可以直接参考下面的代码进行调整：

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
94
!function () {
  const elements = document.querySelectorAll('.twikoo-comment-count');
  const postUrls = [];

  elements.forEach(element => {
    const url = element.getAttribute('url');
    if (url) {
      postUrls.push(url);
    }
  });

  twikoo.getCommentsCount({
    envId: 'https://twikoo.vrast.cn',
    urls: postUrls,
    includeReply: false
  }).then(function (res) {
    elements.forEach((element, index) => {
      const elementUrl = element.getAttribute('url');
      const matchingRes = res.find(item => item.url === elementUrl);
      if (matchingRes) {
        element.textContent = `${matchingRes.count} 条评论`;
      }
    });
  }).catch(function (err) {
    console.error(err);
  });

  //需求2 预览部分评论
  const commlistElements = document.querySelectorAll('.commlist');
  const postUrls2 = [];

  commlistElements.forEach(element => {
    const url = element.getAttribute('url');
    if (url) {
      postUrls2.push(url);
    }
  });


    postUrls2.forEach(postUrl => {
      twikoo.getRecentComments({
        envId: 'https://twikoo.vrast.cn',
        urls: [postUrl],
        pageSize: 5,
        includeReply: false
      }).then(function (res) {
        commlistElements.forEach(commlistElement => {
          if (commlistElement.getAttribute('url') === postUrl) {
            let commentCount = 0;
            res.forEach(item => {
              if (commentCount <= 5) {
                const li = document.createElement('li');
                // const divAvatar = document.createElement('div');
                // divAvatar.classList.add('avatar', 'letter-fallback');
                // divAvatar.setAttribute('data-fallback', item.nick[0]);
                // divAvatar.style.backgroundColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
                // divAvatar.style.transform = 'rotate(0deg)';
                // divAvatar.style.transition = 'transform 0.5s ease-in-out';

                const a = document.createElement('a');
                a.href = item.url + '#' + item.id;
                a.title = item.comment;

                // 使用 DOMParser 解析评论内容
                const parser = new DOMParser();
                const commentFragment = parser.parseFromString(item.comment, 'text/html').body;

                // 将评论内容添加到昵称后面
                a.textContent = item.nick + ': ' + commentFragment.textContent;

                const spanContent = document.createElement('span');
                spanContent.classList.add('comment-content');
                spanContent.appendChild(a);

                const spanRight = document.createElement('span');
                spanRight.classList.add('right');
                spanRight.textContent = item.relativeTime;//new Date(item.created).toLocaleDateString();

                // li.appendChild(divAvatar);
                li.appendChild(spanRight);
                li.appendChild(spanContent);

                commlistElement.appendChild(li);
                commentCount++;
              }
            });
          }
        });
      }).catch(function (err) {
        console.error(err);
      });
    });
}()