下面的代码均在新建的 source\js\qwq.js 中使用。本文添加的css都是在qwq.jsjs注入的，参考下面 Butterfly多语种翻译(translate.js) 的方法。

Butterfly多语种翻译(translate.js)

之前使用过开源的 translate.js 来为静态页面实现翻译功能。在使用 Hexo Butterfly（经过大佬魔改的版本）时，虽然已经具备简体中文和繁体中文之间的切换功能，但不支持翻译成其他语言。
现在的浏览器自带翻译功能和各种翻译扩展已经非常强大,可以适当提醒用户进行翻译，网站右下角也提供选择翻译语言功能。

  1. 当用户的语言与网页语言不同时，会弹出提示，提醒用户是否启用翻译。点击 OK 后提示就不会再次出现，如果两者语言一致，则不会显示任何提示。
  2. 设置按钮新增了 language 按钮，点击后弹出翻译选择框，用户可以自行选择翻译语言，不用的时候自动隐藏。

翻译提醒通知代码：

翻译提醒通知效果图：
翻译提醒通知效果图

qwq.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
//翻译提醒通知
// 创建通知容器
function createNotificationContainer() {
  let notificationContainer = document.getElementById('translate-notification');
  if (!notificationContainer) {
    notificationContainer = document.createElement('div');
    notificationContainer.id = 'translate-notification';
    notificationContainer.style.cssText = `
    position: fixed;
    width: 50%;
    min-height: 50px;
    bottom: 10%;
    right: 25%;
    margin: auto;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    `;
    document.body.appendChild(notificationContainer);
  }
  return notificationContainer;
}

// 显示通知
function showNotification(message, duration = 5000) {
  const notification = createNotificationContainer();
  notification.innerHTML = `
    ${message}
    <span style="margin-left: 10px; cursor: pointer; color: #00aaff;" onclick="dismissNotification()">OK</span>
  `;
  notification.style.opacity = '1';
  notification.style.transform = 'translateY(0)';

  // 自动隐藏通知
  if (duration > 0) {
    setTimeout(() => {
      dismissNotification();
    }, duration);
  }
}

// 隐藏通知
function dismissNotification() {
  const notification = document.getElementById('translate-notification');
  if (notification) {
    notification.style.opacity = '0';
    notification.style.transform = 'translateY(20px)';
    setTimeout(() => {
      if (notification.parentNode) {
        notification.parentNode.removeChild(notification);
      }
    }, 300);
  }
}

// 提示浏览器翻译功能
function promptBrowserTranslate(targetLanguage) {
  const userLanguage = navigator.language || navigator.userLanguage;
  const htmlLanguage = document.documentElement.lang || 'zh';

  console.log('User browser language:', userLanguage);
  console.log('Page declared language:', htmlLanguage);

  const isChinesePage = htmlLanguage.startsWith('zh');
  const isChineseBrowser = userLanguage.startsWith('zh');

  // 如果用户浏览器是中文，且页面语言也是中文，无需翻译
  if (isChineseBrowser && isChinesePage) {
    // console.log('Both user language and page language are Chinese, no translation needed.');
    return;
  }

  // 检查用户是否已经处理过通知
  if (localStorage.getItem('translatePromptAcknowledged') === 'true') {
    // console.log('User has already acknowledged the translation prompt, no more popups.');
    return;
  }

// 非阻塞伪类通知
showNotification(
  `Detected that the current page is in Chinese. Would you like to enable the browser's translation feature to translate the page content into ${targetLanguage || 'the target language'}? You can also adjust the language in the blog's bottom-right corner settings - Language.:D`,
  0 // 不自动关闭，用户必须点击关闭
);


  // 用户确认后记录状态
  document
    .getElementById('translate-notification')
    .querySelector('span')
    .addEventListener('click', () => {
      localStorage.setItem('translatePromptAcknowledged', 'true');
    });
}

// 页面加载完成事件
document.addEventListener('DOMContentLoaded', () => {
  // console.log('Page loaded, initializing language detection...');
  promptBrowserTranslate('English');
});

// PJAX 页面切换完成事件
document.addEventListener('pjax:complete', () => {
  // console.log('PJAX load completed, reinitializing language detection...');
  promptBrowserTranslate('English');
});

翻译按钮代码：

翻译按钮效果图：
翻译按钮效果图

qwq.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
// CSS 部分通过 JS 插入
const css = `
.translateSelectLanguage{
  position: fixed;
  bottom:50px;
  right:-300px;
  width: 10%;
  padding: 10px 15px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  appearance: none; /* 隐藏默认箭头 */
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: rgb(199, 199, 199);
}
[data-theme="dark"] .translateSelectLanguage{
  background-color: rgb(106, 106, 106);
  color: rgb(234, 234, 234);
}
.translateSelectLanguage:hover {
  border-color: #007bff;
}
.translateSelectLanguage:focus {
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
  border-color: #007bff;
}
`;

// 将 CSS 添加到页面
const style = document.createElement('style');
style.innerHTML = css;
document.head.appendChild(style);

//翻译选择框
// 控制 .translateSelectLanguage 的显示与隐藏
let languageBoxClickCount = 0;
function languageBox() {
  const languageBox = document.querySelector('.translateSelectLanguage');
  if (!languageBox) {
    console.warn('.translateSelectLanguage element not found.');
    return;
  }

  const isOpen = languageBox.style.right === '60px';

  if (isOpen) {
    languageBox.style.right = '-300px'; // 隐藏到屏幕外
  } else {
    languageBox.style.right = '60px'; // 显示在屏幕内

    // 点击页面其他地方时自动隐藏
    const clickHandler = (event) => {
      const target = event.target;
      if (!languageBox.contains(target) && target.closest('.translateSelectLanguage') === null) {
        languageBox.style.right = '-300px';
        document.removeEventListener('click', clickHandler); // 移除事件监听
      }
    };

    setTimeout(() => {
      document.addEventListener('click', clickHandler);
    }, 0); // 延迟绑定事件，避免点击按钮本身触发隐藏
  }

  languageBox.style.transition = 'right 0.4s ease-in-out'; // 添加动画过渡
}

//翻译
translate.selectLanguageTag.languages = 'english,chinese_simplified,korean,Japanese,chinese_traditional';
translate.request.listener.start();
translate.language.setLocal('chinese_simplified'); //设置本地语种（当前网页的语种）。如果不设置，默认自动识别当前网页显示文字的语种。 可填写如 'english'、'chinese_simplified' 等。
translate.service.use('client.edge'); //设置机器翻译服务通道，直接客户端本身，不依赖服务端 。
translate.execute();//进行翻译

themes\butterfly\layout\includes\rightside.pug中添加(关于language)代码：

1
2
3
4
5
6
7
8
9
10
11
12
mixin rightsideItem(array)
  each item in array
    case item
+      when 'language'
+        button.share(type="button" title='Language' onclick="languageBox()")
+          i.fas.fa-language

#rightside
    - const { enable, hide, show } = theme.rightside_item_order
+   - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside', 'mouse','language']
-   - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside', 'mouse']
    - const showArray = enable ? show && show.split(',') : ['toc','chat','share','comment'].

_config.butterfly.yml中添加的代码：

1
2
3
4
inject:
   bottom:
    - <script src="https://cdn.staticfile.net/translate.js/3.2.1/translate.js"></script>
    - <script src="/js/qwq.js"></script>

如果想隐藏原来繁简转换，可以在_config.butterfly.yml修改：

1
2
3
translate:
+  enable: false
-   enable: true

Twikoo评论头像位置错误修复

在使用Fomalhaut 3.5(大佬魔改的butterfly主题)Twikoo评论时，发现评论框的样式错误，打开f12开发者模式检测发现自适应代码在页面横像素大于1024px时会自动修改left的参数，导致头像框位置错误，评论框宽度width也被自动修改了。

原先评论框样式效果图：
原先评论框样式效果图

所以在themes\butterfly\source\css\_custom\custom.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
/* 自适应内容 */
@media screen and (min-width: 1024px) {
  /* 设置宽度上限，避免挤压博主头像 */
  .tk-content {
    max-width: 75%;
    width: fit-content;
  }
-  .tk-master .tk-content {
-    width: 75%;
-  }
-  .tk-master .tk-content::before {
-    left: 100%;
-    border-left: 15px solid transparent;
-    border-right: 0px solid transparent;
-  }
-  .tk-master .tk-avatar {
-    position: relative;
-    left: calc(75% + 70px);
-  }
  .tk-master .tk-row[data-v-d82ce9a0] {
    position: relative;
    top: 0px;
    left: calc(75% - 230px);
  }
-  [data-theme="dark"] .tk-master .tk-content::before {
-    border-left: 15px solid #000;
-    border-right: 0px solid transparent;
-  }
}

Twikoo添加想要的表情包

在twikoo评论时默认的表情包没有自己想要的表情包。

添加表情包

就想自己添加表情包，经过学习大佬的文章给twikoo添加自定义表情包，明白了owo.json文件的格式。(设置owo.json的操作就不再赘述)

标签 释义
typet 表情包的类别
text 表情包名字
icon 表情包图标(一般由img标签引入)

在 owo.json 文件格式是这样的(注意。。不要漏,)：

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
{ 
"表情包1":{
      "type":"image",
      "container":[
        {
          "text":"表情包1名字1",
          "icon":"<img src='图片链接'>"
        },
        {
          "text":"表情包1名字2",
          "icon":"<img src='图片链接'>"
        }
      ]
    }
    ,"表情包2":{
      "type":"image",
      "container":[
        {
          "text":"表情包2名字1",
          "icon":"<img src='图片链接'>"
        },
        {
          "text":"表情包2名字2",
          "icon":"<img src='图片链接'>"
        }
      ]
    }
}

表情包下载

因为表情包在B站(BiliBili),所以借助BiliResourceDownloader 开源工具 (具体的使用方式请看原作者的仓库文档)下载自己喜欢的表情包。例如，站长这里添加鹿乃的表情包：



效果展示

将表情包存放在图床或其他地方，按照格式填写owo.json文件，刷新页面即可。

修复评论框样式效果图：
修复评论框样式效果图

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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
{    
    "鹿乃":{
      "type":"image",
      "container":[
        {
          "text":"？？？",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/？？？.png'>"
        },
        {
          "text":"awsl",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/awsl.png'>"
        },
        {
          "text":"DD斩",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/DD斩.png'>"
        },
        {
          "text":"OK",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/OK.png'>"
        },
        {
          "text":"比心",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/比心.png'>"
        },
        {
          "text":"别在意",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/别在意.png'>"
        },
        {
          "text":"吃瓜",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/吃瓜.png'>"
        },
        {
          "text":"吃桃",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/吃桃.png'>"
        },
        {
          "text":"打call",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/打call.png'>"
        },
        {
          "text":"打扰了",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/打扰了.png'>"
        },
        {
          "text":"点赞",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/点赞.png'>"
        },
        {
          "text":"对不起",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/对不起.png'>"
        },
        {
          "text":"饿了",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/饿了.png'>"
        },
        {
          "text":"哈哈",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/哈哈.png'>"
        },
        {
          "text":"好吃",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/好吃.png'>"
        },
        {
          "text":"哼歌",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/哼歌.png'>"
        },
        {
          "text":"欢迎回来",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/欢迎回来.png'>"
        },
        {
          "text":"加油",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/加油.png'>"
        },
        {
          "text":"惊",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/惊.png'>"
        },
        {
          "text":"买买买",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/买买买.png'>"
        },
        {
          "text":"奇怪的知识",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/奇怪的知识.png'>"
        },
        {
          "text":"生气",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/生气.png'>"
        },
        {
          "text":"晚安",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/晚安.png'>"
        },
        {
          "text":"我回来了",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/我回来了.png'>"
        },
        {
          "text":"喜欢",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/喜欢.png'>"
        },
        {
          "text":"邪魅一笑",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/邪魅一笑.png'>"
        },
        {
          "text":"谢谢",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/谢谢.png'>"
        },
        {
          "text":"再见",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/再见.png'>"
        },
        {
          "text":"早安",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/早安.png'>"
        },
        {
          "text":"真的",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃表情包/真的.png'>"
        }
      ]
    }
    ,"鹿乃桜帆":{
      "type":"image",
      "container":[
        {
          "text":"。。。",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/。。。.png'>"
        },
        {
          "text":"？？？",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/？？？.png'>"
        },
        {
          "text":"3Q",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/3Q.png'>"
        },
        {
          "text":"NG",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/NG.png'>"
        },
        {
          "text":"OK",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/OK.png'>"
        },
        {
          "text":"Yeah",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/Yeah.png'>"
        },
        {
          "text":"爱了",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/爱了.png'>"
        },
        {
          "text":"拜拜~",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/拜拜~.png'>"
        },
        {
          "text":"草莓",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/草莓.png'>"
        },
        {
          "text":"呆呆",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/呆呆.png'>"
        },
        {
          "text":"待机",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/待机.png'>"
        },
        {
          "text":"恭喜",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/恭喜.png'>"
        },
        {
          "text":"机智",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/机智.png'>"
        },
        {
          "text":"惊",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/惊.png'>"
        },
        {
          "text":"哭哭",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/哭哭.png'>"
        },
        {
          "text":"酷",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/酷.png'>"
        },
        {
          "text":"困",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/困.png'>"
        },
        {
          "text":"泪目",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/泪目.png'>"
        },
        {
          "text":"期待",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/期待.png'>"
        },
        {
          "text":"气气",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/气气.png'>"
        },
        {
          "text":"请多关照",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/请多关照.png'>"
        },
        {
          "text":"生神气",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/神.png'>"
        },
        {
          "text":"受到打击",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/受到打击.png'>"
        },
        {
          "text":"晚安",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/晚安.png'>"
        },
        {
          "text":"我记一下",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/我记一下.png'>"
        },
        {
          "text":"心动...",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/心动....png'>"
        },
        {
          "text":"辛苦啦",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/辛苦啦.png'>"
        },
        {
          "text":"晕",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/晕.png'>"
        },
        {
          "text":"早上好",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/早上好.png'>"
        },
        {
          "text":"尊い",
          "icon":"<img src='https://img.qwqsky.top/owo/鹿乃桜帆表情包/尊い.png'>"
        }
      ]
    }
    ,"涩谷音韵":{
      "type":"image",
      "container":[
        {
          "text":"cool",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/cool.png'>"
        },
        {
          "text":"fight!",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/fight!.png'>"
        },
        {
          "text":"爱了",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/爱了.png'>"
        },
        {
          "text":"拜托",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/拜托.png'>"
        },
        {
          "text":"冲啊",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/冲啊.png'>"
        },
        {
          "text":"出窍了",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/出窍了.png'>"
        },
        {
          "text":"待机",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/待机.png'>"
        },
        {
          "text":"感动哭了",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/感动哭了.png'>"
        },
        {
          "text":"感谢",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/感谢.png'>"
        },
        {
          "text":"干杯",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/干杯.png'>"
        },
        {
          "text":"开麦",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/开麦.png'>"
        },
        {
          "text":"口水",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/口水.png'>"
        },
        {
          "text":"了解",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/了解.png'>"
        },
        {
          "text":"你好",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/你好.png'>"
        },
        {
          "text":"怒了",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/怒了.png'>"
        },
        {
          "text":"撒花！",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/撒花！.png'>"
        },
        {
          "text":"太神了",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/太神了.png'>"
        },
        {
          "text":"笑拥了",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/笑拥了.png'>"
        },
        {
          "text":"要哭了",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/要哭了.png'>"
        },
        {
          "text":"应援",
          "icon":"<img src='https://img.qwqsky.top/owo/涩谷音韵表情包/应援.png'>"
        }
      ]
    }
}

调整 Aplayer 收回方式、隐藏歌词和美化

调整 Aplayer 收回方式及隐藏歌词

Butterfly：添加全局吸底 Aplayer 播放器
CSS transition 小技巧！如何保留 hover 的状态？

Aplayer 收回方式

参考并添加了一点小动画:

1
2
3
4
5
6
7
8
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body{
    left:-66px!important;
    transition-delay: 2s;
}/*隐藏播放器*/
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover{
    left:0!important;
    transition-delay: 0s;
}

隐藏歌词

歌词默认显示,在_config.butterfly.yml替换CDN模拟点击关闭歌词。
例如：

1
2
3
4
5
bottom:
    aplayer_css: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css
    aplayer_js: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js
+    meting_js: https://cdn.akioi.eu.org/meting.min.js
-     meting_js: https://cdn1.tianli0.top/npm/js-heo@1.0.12/metingjs/Meting.min.js

美化(2025/8/13)

参考hexo博客butterfly主题aplyer音乐播放器美化与深色模式
效果本站播放器。大佬的样式，豪康(好看)！

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
/*aplayer日间模式调整*/
/*背景色*/
.aplayer{
	background: rgba(255, 255, 255, 0.60)!important;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07),0 1px 5px 0 rgba(0,0,0,.1);
	position: relative;
}
.aplayer.aplayer-fixed .aplayer-lrc:after,.aplayer.aplayer-fixed .aplayer-lrc:before {
	display: none
}
.aplayer.aplayer.aplayer-fixed .aplayer-body{
	background:rgba(255, 255, 255, 0.60)!important;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
	position: fixed;
}
/*毛玻璃效果*/
.aplayer-list{
	backdrop-filter: blur(3px);
}
.aplayer-info{
	backdrop-filter: blur(3px);
}
/*滚动条*/
.aplayer .aplayer-list ol::-webkit-scrollbar {
	width: 5px
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background-color: #b0e1ff
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
	background-color: #b0e1ff
}
/*圆角*/
.aplayer.aplayer-fixed .aplayer-list{
    border-radius: 6px 6px 0 0!important;
}
.aplayer.aplayer-fixed .aplayer-miniswitcher{
    border-radius: 0 6px 6px 0!important;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body{
    border-radius: 6px!important;
}	
.aplayer-body{
    border-radius:0 6px 6px 0!important;
}
.aplayer.no-destroy.no-reload.aplayer-withlist.aplayer-fixed{
    border-radius:6px 6px 0 0!important;
}
/*选中与播放中歌曲激活颜色*/
.aplayer .aplayer-list ol li:hover{
    background: #b0e1ff!important;
}
.aplayer .aplayer-list ol li.aplayer-list-light{
    background: #ffdffa!important;
}
/*aplayer黑暗模式*/
[data-theme=dark]
.aplayer{
    background: rgba(22, 22, 22, 0.60)!important;
    color: rgb(255, 255, 255);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
}
[data-theme=dark]
.aplayer.aplayer-fixed .aplayer-body{
    background: rgba(22, 22, 22, 0.60)!important;
    color: rgb(255, 255, 255);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
}
[data-theme=dark]
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{
	fill: #d4d4d4;
}
[data-theme=dark]	
.aplayer .aplayer-list ol li:hover{
    background: #407290!important;
}
[data-theme=dark]
.aplayer .aplayer-list ol li.aplayer-list-light{
    background: #9c8098!important;
}
[data-theme=dark]
.aplayer .aplayer-info .aplayer-controller .aplayer-time{
    color: #d4d4d4;
}
[data-theme=dark]
.aplayer .aplayer-list ol li .aplayer-list-index{
    color: #d4d4d4;
}
[data-theme=dark]
.aplayer .aplayer-list ol li .aplayer-list-author{
    color: #d4d4d4;
}

首页分类磁贴1.0出现两组临时处理

hexo-magnet 插件 1.0

首页分类磁贴1.0（小冰）
教程：hexo-magnet 插件 1.0

不知道为什么用着用着就会变成两组，直接F12大法，去掉顺序第二个磁贴.recent-post-item(具体样式看自己页面源码情况)。

1
2
3
.recent-post-item:nth-child(2){
    display: none;/*隐藏多余冰箱贴*/
}

Blog朋友圈(Friend-Circle-Lite)

教程

Friend-Circle-Lite:轻量友链朋友圈

效果：RoHananの朋友圈