博客侧边栏最新评论

修改自「星日语」大佬的

原文链接Stellar展示最新评论 - 星日语 (weekdaycare.cn)

声明：

以下"最新评论"组件是基于twikoo的配置, stellar版本1.28.1，当然，目前代码中，已知的，还有一些博主解决不了的bug，文内也给予了说明，期待有大佬来解决。

注意：博主没学过任何的脚本语言，代码改修全靠gpt以及修仙悟道，至于它为什么最后能运行起来的，本人也不知道，但看起来它确实运行起来了

实现效果如下：

  1. 修复了评论区图片评论不显示的问题（修改自「星日语」大佬的代码）
  3. 添加了评论者的头像显示，去掉了评论时间的时分秒显示，只保留了年月日，这样可以防止因为评论者昵称过长导致user-info溢出第一行容器，显得难看。当然如果这样处理还是越行，那我也没啥办法了（那我走？....）
  5. 已知的副作用...好像也不是副作用，已知会给memos也增加了发布者头像展示，不过你还别说，这小东西，还挺好看。

已知的bug： 1. wiki以及单独页面的评论可以被显示在最新评论组件，但是点击后，链接跳转会失败，因为wiki或者单独页面的网址往往多一层文件地址，类似/wiki/sitename.html，但是目前代码的twikoo的数据id只会以/sitename.html/#id的网址进行链接，导致网址解析失败。但是，很不幸，这直接把我cpu干烧了。所以...期待巨佬来接解决。

以下为需要修改的文件位置➡️

services.ejs

位置:~/themes/stellar/layout/_partial/scripts/services.ejs

修改代码17行 - 源代码 

1
            if (id == 'timeline' || 'memos' || 'marked') { //
- 修改后 
1
            if (id == 'timeline' || 'memos' || 'marked' || 'twikoo') {

fancybox.ejs

位置：~/themes/stellar/layout/_plugins/fancybox.ejs

  • 添加如下代码

    文内位于第17行的}后，也就是ds-memos那个if语句后。第一个if缩进一个tab。

1
2
3
4
5
6
  if (!needFancybox) {
    const els = document.getElementsByClassName('ds-twikoo');
    if (els != undefined && els.length > 0) {
      needFancybox = true;
    }
  }

timeline.styl

位置：~/themes/stellar/source/css/_components/tag-plugins/timeline.styl

  • 添加如下代码

    文内位于第17行display: none后，注意以下代码第一行不缩进，其他行按照第一行相对位置就行。

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
.tag-plugin.timeline .timenode-memos 

  position: relative

  display: flex

  flex-direction: column

  align-items: flex-start

  box-sizing: border-box

  max-width: 100%

  >.header, >.body

    box-sizing: border-box

    max-width: @max-width

  &[highlight] .header:before

    background: $color-theme

  &+.timenode

    margin-top: 1rem

  &:hover .header

    span

      color: var(--text-p1)

    &:before

      background: $color-theme

      height: 16px

      top: 'calc(50% - 0.5 * %s)' % @height

      transform: scale(1)

  

.tag-plugin.timeline .timenode-memos .header

  display: flex

  align-items: center

  position: relative

  margin: 0.25rem 0

  font-size: $fs-13

  a.user-info span

    font-weight: 600

  .user-info

    display: flex

    align-items: center

    font-size: $fs-13

    font-weight: 500

    color: var(--text-p1)

    margin-right: 8px

    line-height: 1

    border-radius: 16px

    img

      background: white

      height: 16px

      border-radius: 16px

      display: inline

      margin: 0 4px 0 0

      object-fit: contain

  &,span

    font-weight: 500

    color: var(--text-p3)

    line-height: 1

  &:before

    content: ''

    position: absolute

    left: -16px

    width: 4px

    border-radius: 12px

    height: 4px

    top: 'calc(50% - 0.5 * %s)' % @height

    background: var(--text-meta)

    trans4 background height top transform

    transform: scale(2)

timeline.styl

位置：~/themes/stellar/source/css/_components/widgets/timeline.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
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
.widget-wrapper.timeline

  .tag-plugin.timeline

    padding-left: 0

    &:before

      left: 6px

  .widget-body

    overflow hidden

  .body

    a

      trans1 all

      word-break: break-all

      --fsp: $fsp2

  .tag-plugin.timeline .timenode

    z-index 1

    margin-top: 0.25rem

    .header

      margin: 0.25rem var(--gap-padding)

      .user-info

        background: none

        padding-right: 0

      img

        display: none

      /*cicada add 1*/

      .user-avatar

        background: white;

        height: 16px; /* 或者您希望的任何尺寸 */

        border-radius: 16px;

        display: inline;

        margin: 0 4px 0 0;

        object-fit: contain;

      /*cicada 0*/

    .header:before

      left: calc(6px - var(--gap-padding))

    .body

      border-radius: $border-card

      border-top-left-radius: 2px /*cicada add*/

      padding: 0.5rem 1rem

      margin: 0rem 1rem 0rem 1rem; /*cicada add*/

      img

        background: none

        height: auto

        border-radius: 0rem 0.4rem 0.4rem 0.4rem

      p,li

        --fsp: $fsp3

      code

        background: none

        padding: 0

        margin: 0

      .highlight, pre:not([class]):has(>code)

        background: var(--alpha50)

  

  /*cicada 1 add*/  

  .tag-plugin.timeline .timenode-memos

      z-index 1

      margin-top: 0.25rem

      .header

        margin: 0.25rem var(--gap-padding)

        .user-info

          background: none

          padding-right: 0

        img

          background: none

          height: 16px !important

          border-radius: 16px

          display: inline

          margin: 0 4px 0 0

          object-fit: contain  

      .header:before

        left: calc(6px - var(--gap-padding))

      .body

        border-radius: $border-card

        border-top-left-radius: 2px /*cicada*/

        padding: 0.5rem 1rem /*cicada */

        margin: 0rem 1rem 0rem 0.4rem; /*cicada add*/

        /*cicada add 1*/

        img

          background: none

          height: auto

          border-radius: 0rem 0.4rem 0.4rem 0.4rem

        /*cicada add 0*/

        p,li

          --fsp: $fsp3

        code

          background: none

          padding: 0

          margin: 0

        .highlight, pre:not([class]):has(>code)

          background: var(--alpha50)    

  /*cicada 0*/  

  
  

  .tag-plugin.timeline[api] .body .footer

    background: none

  

.l_left .widget-wrapper.timeline

  .tag-plugin.timeline

    padding-left: 0

    &:before

      content: none

.l_left .widget-wrapper.timeline .body

  box-shadow: none

  background: var(--alpha50)

twikoo_new.js

代码修改自「星日语」大佬的代码请在~/themes/stellar/source/js/services/twikoo_new.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
utils.jq(() => {

    const el = document.querySelector('.ds-twikoo');

    utils.onLoading(el); // 加载动画

    const api = el.getAttribute('api');

    const limit = parseInt(el.getAttribute('limit')) || 10;

    const reply = el.getAttribute('hide') !== 'reply';

    if (!api) return;

    fetch(api, {

      method: "POST",

      body: JSON.stringify({

        "event": "GET_RECENT_COMMENTS",

        "envId": api,

        "pageSize": limit,

        "includeReply": reply

      }),

      headers: { 'Content-Type': 'application/json' }

    })

    .then(res => res.json())

    .then(({ data }) => {

      utils.onLoadSuccess(el); // 移除动画

      //cicada 1

      data.forEach((comment, j) => {

        //cicada 1

        // let commentText = comment.commentText;

        // //if (!commentText || commentText.trim() === '') return; // 跳过空评论 //cicada comment 1

        // // 转义字符

        // commentText = commentText.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");

        // commentText = commentText.length > 50 ? commentText.substring(0, 50) + '...' : commentText;

        //cicada 0

        var cell = '<div class="timenode" index="' + j + '">';

        cell += '<div class="header">';

          // 添加用户头像

        cell += '<div class="user-info">';

        const avatarImg = `<img class="user-avatar" src="${comment.avatar}" alt="Avatar">`;

        cell += avatarImg;

        cell += '<span>' + comment.nick + '</span>';

        cell += '</div>';

        //cell += '<span>' + new Date(comment.created).toLocaleString() + '</span>';

        cell += '<span>' + new Date(comment.created).toLocaleDateString() + '</span>'; //cicada modify

        cell += '</div>';

        let commentHTML = comment.comment;

        let tempDiv = document.createElement('div');

        tempDiv.innerHTML = commentHTML;      

        //cicada comment 1

        // cell += '<a class="body" href="' + comment.url + '#' + comment.id + '">';

        // cell += commentText; //

        // cell += '</a>';

        //cicada comment 0

        // 提取文本内容

        let textContent = tempDiv.textContent || tempDiv.innerText;          

        // 创建一个变量用于存储图片HTML

        let imagesHTML = '';

        const images = tempDiv.querySelectorAll('img');

        // 遍历所有图片，构建图片HTML字符串，并设置样式属性

        images.forEach(img => {

          let imgSrc = img.src;

          // 此处应添加逻辑以确保图片URL是可接受的

          if (imgSrc) {

            let imgTag = `<img src="${imgSrc}" style="max-height: 50px; width: auto;" alt="Image from comment">`;

            imagesHTML += imgTag; // 将图片添加到imagesHTML字符串

          }

        });

        // 构建带有文本和图片的完整评论内容

        let commentContent = textContent + '<div style="clear: both;"></div>' + imagesHTML;

  

        cell += '<a class="body" href="' + comment.url + '#' + comment.id + '">';

        cell += commentContent; // 将文本和图片添加到cell中

        cell += '</a>';

        cell += '</div>';

  

        // 使用jQuery的append方法将cell添加到页面中的元素el中

        $(el).append(cell);

      });

    })

    .catch(() => utils.onLoadFailure(el));

  });

添加组件twikoo

位置：_config.stellar.yml

  • 添加
1
2
3
4
5
data_services:

  twikoo:

    js: /js/services/twikoo_new.js

然后再在

位置：~/_data/widgets.yml

  • 添加 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    new_comment:

      layout: timeline

      title: Recent-Comments

      api: https://twikoo.le1.me # 此处为 Twikoo 函数，末尾不要加 /

      type: twikoo

      limit: 3 # 限制获取数量，默认为 10

      hide: reply # 是否隐藏回复，不填默认不隐藏

最后在你想要的地方的添加rightbar: new_comment（site_tree选项下，或者md文件的front-matter中），至此最新评论组件已经修改完毕。

stellar添加live2d

位置: _config.stellar.yml

  • 添加
1
2
3
4
5
6
7
inject:

  head:

    - <script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script> ###live 2d start cicada

    - <script src="https://cdn.jsdelivr.net/combine/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js,npm/pixi.js@6.5.2/dist/browser/pixi.min.js,npm/pixi-live2d-display/dist/index.min.js,gh/Weidows-projects/Live2dLoader/dist/Live2dLoader.min.js"></script>

以及在同位置处添加

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
footer:

  content: |

    <script>

      addEventListener("DOMContentLoaded", function () {

        let models = [

          {

            width: 230,

            height: 350,

            bottom: "0px",

            right: "0px",

            role: "https://cdn.jsdelivr.net/gh/imuncle/live2d@master/model/snow_miku/model.json",

            background: "",

            opacity: 1,

            mobile: false,

            draggable: false,

            scale: 0.07,

          },

        ];

        new Live2dLoader(models);

      });

    </script>

live2d文件仓库位于https://github.com/imuncle/live2d，这个网站可以实时预览live2d模型。

References
Info
Title: stellar+twikoo配置最新评论以及配置live2d
Categories: Hexo-Theme
Tags: hexo-stellar
License

This work is licensed under CC BY-NC-SA 4.0.

Join Discussion