相关记录

推动提示换行的问题

git config –global core.autocrlf false

插入哔哩哔哩视频

1
2
3
<div style="position: relative; padding: 30% 45%;margin-top: 10px;margin-bottom: 10px">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=428386715&bvid=BV1AG411p7zM&cid=774674211&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>

博客调用snackbar

1
GLOBAL_CONFIG.Snackbar && btf.snackbarShow('111111');

哔哔图片代码

  1. 单图片
    1
    <img src="">
  2. 多图片
    1
    <div id="bbimages"><img src=""><img src=""></div>

博客夜间模式

1
2
3
4
5
6
7
8
9
10
11
12
function switchDarkMode() {
"light" == ("dark" === document.documentElement.getAttribute("data-theme") ? "dark" : "light") ? (activateDarkMode(),
saveToLocal.set("theme", "dark", 2),
void 0 !== GLOBAL_CONFIG.Snackbar && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)) : (activateLightMode(),
saveToLocal.set("theme", "light", 2),
void 0 !== GLOBAL_CONFIG.Snackbar && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)),
"function" == typeof utterancesTheme && utterancesTheme(),
"object" === ("undefined" == typeof FB ? "undefined" : _typeof(FB)) && window.loadFBComment(),
window.DISQUS && document.getElementById("disqus_thread").children.length && setTimeout(function() {
return window.disqusReset()
}, 200)
}

标签外挂

Note

用法一

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称 用法
class 【可选】标识,不同的标识有不同的配色
( default / primary / success / info / warning / danger )
no-icon 【可选】不显示 icon
style 【可选】可以覆盖配置中的 style
(simple/modern/flat/disabled)

用法二

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称 用法
class 【可选】颜色
(default / blue / pink / red / purple / orange / green)
icon 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )
style 【可选】可以覆盖配置中的 style
(simple/modern/flat/disabled)

tag-hide

参数

  • content: 文本内容
  • display: 按钮显示的文字(可选)
  • bg: 按钮的背景颜色(可选)
  • color: 按钮文字的颜色(可选)

inline

1
{% hideInline content,display,bg,color %}

block

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}

toggle

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

Tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name : Unique name of tabs block tag without comma.
Will be used in #id's as prefix for each tab with their index numbers.
If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
Only for current url of post/page must be unique!
[index] : Index number of active tab.
If not specified, first tab (1) will be selected.
If index is -1, no tab will be selected. It's will be something like spoiler.
Optional parameter.
[Tab caption] : Caption of current tab.
If not caption specified, unique name with tab index suffix will be used as caption of tab.
If not caption specified, but specified icon, caption will empty.
Optional parameter.
[@icon] : FontAwesome icon name (full-name, look like 'fas fa-font')
Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
Optional parameter.

button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url] : 链接
[text] : 按钮文字
[icon] : [可选] 图标
[color] : [可选] 按钮背景顔色(默认style时)
按钮字体和边框顔色(outline时)
default/blue/pink/red/purple/orange/green
[style] : [可选] 按钮样式 默认实心
outline/留空
[layout] : [可选] 按钮佈局 默认为line
block/留空
[position] : [可选] 按钮位置 前提是设置了layout为block 默认为左边
center/right/留空
[size] : [可选] 按钮大小
larger/留空

inlineImg

1
2
3
4
{% inlineImg [src] [height] %}

[src] : 图片链接
[height] : 图片高度限制【可选】

lable

1
2
3
4
{% label text color %}

[color] : 【可选】背景颜色,默认为 default
default/blue/pink/red/purple/orange/green

timeline

1
2
3
4
5
6
7
8
{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}

魔改记录

zh-CN.yml

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
footer:
framework: 框架
theme: 主题

copy:
success: 复制成功
error: 复制错误
noSupport: 浏览器不支持

page:
articles: 文章
tag: 标签
category: 分类
archives: 归档

card_post_count: 条评论

sticky: 置顶
no_title: 无题

post:
created: 发表于
wordcount: 字数总计
min2read: 阅读时长
min2read_unit: 分钟
page_pv: 阅读量
comments: 评论数
copyright:
author: 文章作者
link: 文章链接
copyright_notice: 版权声明
copyright_content: '本博客所有文章除特别声明外,均采用
<a href="%s" target="_blank">%s</a> 许可协议。转载请注明来自 <a href="%s" target="_blank">%s</a>!'
recommend: 相关推荐
edit: 编辑

search:
title: 搜索
load_data: 数据库加载中
algolia_search:
input_placeholder: 搜索文章
hits_empty: "找不到您查询的内容:${query}"
hits_stats: "找到 ${hits} 条结果,用时 ${time} 毫秒"

local_search:
input_placeholder: 搜索文章
hits_empty: "找不到您查询的内容:${query}"

pagination:
prev: 上一篇
next: 下一篇

comment: 评论

aside:
articles: 文章数
tags: 标签数
categories: 分类
card_announcement: 公告
card_categories: 分类
card_tags: 文章标签
card_archives: 文章归档
card_recent_post: 最新文章
card_webinfo:
headline: 网站资讯
article_name: 文章数目
runtime:
name: 运行时长
unit:
last_push_date:
name: 最后更新
site_wordcount: 全站字数
site_uv_name: 本站访客数
site_pv_name: 本站总访问量
more_button: 查看更多
card_newest_comments:
headline: 最新评论
loading_text: 正在加载中...
error: 无法获取评论,请确认相关配置是否正确
zero: 没有评论
image: 图片
link: 链接
code: 代码
card_toc: 目录

date_suffix:
just: 刚刚
min: 分钟前
hour: 小时前
day: 天前
month: 个月前

donate: 打赏
share: 分享

rightside:
readmode_title: 阅读模式
translate_title: 简繁转换
night_mode_title: 浅色和深色模式转换
back_to_top: 回到顶部
toc: 目录
scroll_to_comment: 直达评论
setting: 设置
aside: 单栏和双栏切换
chat: 聊天

copy_copyright:
author: 作者
link: 链接
source: 来源
info: 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Snackbar:
chs_to_cht: 你已切换为繁体
cht_to_chs: 你已切换为简体
day_to_night: 你已切换为深色模式
night_to_day: 你已切换为浅色模式

loading: 加载中...

error404: 页面没有找到

使用阿里图标

个人卡片使用图标

修改butterfly\layout\includes\header\social.pug

1
2
3
4
5
6
7
8
9
each url, icon in theme.social
a.social-icon(href=url_for(trim(url.split('||')[0])) target="_blank"
title=url.split('||')[1] === undefined ? '' : trim(url.split('||')[1]))
- i(class=icon)
+ if icon.substring(0,2)=="fa"
+ i.fa-fw(class=icon)
+ else if icon.substring(0,4)=="icon"
+ svg.icon(aria-hidden="true")
+ use(xlink:href=`#`+ icon)

index.pug

1
2
3
4
5
6
7
8
extends includes/layout.pug

block content
include ./includes/mixins/post-ui.pug
#recent-posts.recent-posts
#categoryBox.recent-post-item
+postUI
include includes/pagination.pug
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
nav#nav
#nav_group
.nav_left
span#blog_name
a#site-name(href=url_for('/') title="博客首页")
span #[=config.title]
i.fas.fa-home.fa-fw

!=partial('includes/header/menu_item', {}, {cache: true})

#buttons
div
a.site-page.social-icon.search(href="javascript:;" onclick="leonus.randomPost()" title="随便看看 - 随机访问一篇本站文章")
i.fas.fa-splotch.fa-fw

#travellings
a.site-page.social-icon.search(href="https://travellings.cn" title="开往 - 随机跳转到另一个加入开往的网页")
i.fas.fa-subway.fa-fw

div
a.site-page.social-icon.search(href="javascript:;" onclick="leonus.toggleWinbox()" title="切换背景 - 换一个背景,换一种感觉。")
i.fas.fa-image.fa-fw

if (theme.algolia_search.enable || theme.local_search.enable)
#search-button
a.site-page.social-icon.search(title="搜索内容 - 搜一搜,省时又省力。")
i.fas.fa-search.fa-fw

#switch-bg
a.site-page.social-icon(onclick='leonus.switchDarkMode()' title="切换模式 - 日夜交替,黑白互换。")
i.fas.fa-moon.fa-fw

#toggle-menu
a.site-page(title="打开菜单")
i.fas.fa-bars.fa-fw

rightside.pug

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
- const { readmode, translate, darkmode, aside, chat_btn } = theme
mixin rightsideItem(array)
each item in array
case item
when 'readmode'
if is_post() && readmode
button#readmode(type="button" title=_p('rightside.readmode_title'))
i.fas.fa-book-open
when 'translate'
if translate.enable
button#translateLink(type="button" title=_p('rightside.translate_title'))= translate.default
when 'darkmode'
if darkmode.enable && darkmode.button
button#darkmode(type="button" title=_p('rightside.night_mode_title'))
i.fas.fa-adjust
when 'hideAside'
if aside.enable && aside.button && page.aside !== false
button#hide-aside-btn(type="button" title=_p('rightside.aside'))
i.fas.fa-arrows-alt-h
when 'toc'
if showToc
button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
i.fas.fa-list-ul
when 'chat'
if chat_btn
button#chat_btn(type="button" title=_p("rightside.chat"))
i.fas.fa-sms
when 'comment'
if commentsJsLoad
a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
i.fas.fa-message
when 'share'
button.share(type="button" title='分享链接' onclick="leonus.share()")
i.fas.fa-share-nodes
when 'rightSidePosition'
button#rightSidePosition(type="button" title='移至左侧' onclick="leonus.setRightSide()")
i.fas.fa-caret-left

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


//- #rightside-config-hide
//- if hideArray
//- +rightsideItem(hideArray)
#rightside-config-show
if enable
if hide
button#rightside_config(type="button" title=_p("rightside.setting"))
i.fas.fa-cog.fa-spin
else
if is_post()
if (readmode || translate.enable || (darkmode.enable && darkmode.button))
button#rightside_config(type="button" title=_p("rightside.setting"))
i.fas.fa-cog.fa-spin
else if translate.enable || (darkmode.enable && darkmode.button)
button#rightside_config(type="button" title=_p("rightside.setting"))
i.fas.fa-cog.fa-spin

if showArray
+rightsideItem(showArray)

button#go-up(type="button" title=_p("rightside.back_to_top"))
i.fas.fa-caret-up
span#percent 0

button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")
i.fas.fa-caret-down
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
#article-container
.flink
if page.flink_url
script.
(()=>{
const replaceSymbol = (str) => {
return str.replace(/[\p{P}\p{S}]/gu, "-")
}

let result = ""
fetch("!{url_for(page.flink_url)}")
.then(response => response.json())
.then(str => {
for(let i = 0; i < str.length; i++){
const replaceClassName = replaceSymbol(str[i].class_name)
const className = str[i].class_name ? `<h2 id="${replaceClassName}"><a href="#${replaceClassName}" class="headerlink" title="${str[i].class_name}"></a>${str[i].class_name}</h2>` : ""
const classDesc = str[i].class_desc ? `<div class="flink-desc">${str[i].class_desc}</div>` : ""

let listResult = ""
const lists = str[i].link_list
for(let j = 0; j < lists.length; j++){
listResult += `
<div class="flink-list-item">
<a href="${lists[j].link}" title="${lists[j].name}" target="_blank">
<div class="flink-item-icon">
<img class="no-lightbox" src="${lists[j].avatar}" onerror='this.onerror=null;this.src="!{url_for(theme.error_img.flink)}"' alt="${lists[j].name}" />
</div>
<div class="flink-item-name">${lists[j].name}</div>
<div class="flink-item-desc" title="${lists[j].descr}">${lists[j].descr}</div>
</a>
</div>`
}

result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`
}

document.querySelector(".flink").insertAdjacentHTML("afterbegin", result)
})
})()

else
if site.data.link
- let result = ""
each i in site.data.link
- let className = i.class_name ? markdown(`## ${i.class_name} (${i.link_list.length})`) : ""
- let classDesc = i.class_desc ? `<div class="flink-desc">${i.class_desc}</div>` : ""

- let listResult = ""

each j in i.link_list
-
listResult += `
<div class="flink-list-item" title="${j.icon}">
<a href="${j.link}" style="color:${j.theme_color}" title="${j.name}" target="_blank">
<div class="flink-item-icon">
<img class="no-lightbox" src="${j.avatar}" onerror='this.onerror=null;this.src="${url_for(theme.error_img.flink)}"' alt="${j.name}" />
</div>
<div class="flink-item-name">${j.name}</div>
<div class="flink-item-desc" title="${j.descr}">${j.descr}</div>
</a>
</div>`
-

- result += `${className}${classDesc} <div class="flink-list" title="${i.icons}">${listResult}</div>`

- page.content = result + page.content
!= page.content

图片跳过fancybox

修改 butterfly\source\js\utils.js 第234行
然后只需要给图片添加class nofancybox即可跳过fancybox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
if (service === 'fancybox') {
ele.forEach(i => {
- if (i.parentNode.tagName !== 'A') {
+ if (i.parentNode.tagName !== 'A' && i.className != 'nofancybox') {
const dataSrc = i.dataset.lazySrc || i.src
const dataCaption = i.title || i.alt || ''
btf.wrap(i, 'a', { href: dataSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': dataSrc })
}
})

if (!window.fancyboxRun) {
Fancybox.bind('[data-fancybox]', {
Hash: false,
Thumbs: {
autoStart: false
}
})
window.fancyboxRun = true
}
}

51la统计

butterfly/layout/includes/head/preconnect.pug添加

1
link(rel="preconnect" href="//sdk.51.la")

butterfly/layout/includes/head/analytics.pug末尾添加

1
2
3
4
5
6
7
8
9
10
11
12
13
if theme.woyaola_analytics
script.
!function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"!{theme.woyaola_analytics}",ck:"!{theme.woyaola_analytics}"});

if theme.woyaola_perf
script.
!(function(c,i,e,b){
var h=i.createElement("script");
var f=i.getElementsByTagName("script")[0];
h.type="text/javascript";
h.crossorigin=true;
h.onload=function(){new c[b]["Monitor"]().init({id:"!{theme.woyaola_perf}"});};
f.parentNode.insertBefore(h,f);h.src=e;})(window,document,"https://sdk.51.la/perf/js-sdk-perf.min.js","LingQue");

echarts

详细参考:https://blog.eurkon.com/post/1213ef82.html

charts.js

新建 \butterfly\scripts\helpers\charts.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
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
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
const cheerio = require('cheerio')
const moment = require('moment')

hexo.extend.filter.register('after_render:html', function(locals) {
const $ = cheerio.load(locals)
const post = $('#posts-chart')
const tag = $('#tags-chart')
const category = $('#categories-chart')
const sta = $('#site-statistic')
const htmlEncode = false

if (post.length > 0 || tag.length > 0 || category.length > 0 || sta.length > 0) {
if (post.length > 0 && $('#postsChart').length === 0) {
if (post.attr('data-encode') === 'true') htmlEncode = true
post.after(postsChart(post.attr('data-start')))
}
if (tag.length > 0 && $('#tagsChart').length === 0) {
if (tag.attr('data-encode') === 'true') htmlEncode = true
tag.after(tagsChart(tag.attr('data-length')))
}
if (category.length > 0 && $('#categoriesChart').length === 0) {
if (category.attr('data-encode') === 'true') htmlEncode = true
category.after(categoriesChart())
}
if (sta.length > 0) {
sta.append(`
<div><span>文章数量</span><span class="num">${hexo.locals.get('posts').length}</span></div>
<div><span>标签数量</span><span class="num">${hexo.locals.get('tags').length}</span></div>
<div><span>分类数量</span><span class="num">${hexo.locals.get('categories').length}</span></div>
<div><span>友链数量</span><span class="num">0</span></div>
<div><span>评论数量</span><span class="num">0</span></div>
`)
}

if (htmlEncode) {
return $.root().html().replace(/&amp;#/g, '&#')
} else {
return $.root().html()
}
} else {
return locals
}
}, 15);


function postsChart(startMonth) {
const startDate = moment(startMonth || '2020-01')
const endDate = moment()

const monthMap = new Map()
const dayTime = 3600 * 24 * 1000
for (let time = startDate; time <= endDate; time += dayTime) {
const month = moment(time).format('YYYY-MM')
if (!monthMap.has(month)) {
monthMap.set(month, 0)
}
}
hexo.locals.get('posts').forEach(function(post) {
const month = post.date.format('YYYY-MM')
if (monthMap.has(month)) {
monthMap.set(month, monthMap.get(month) + 1)
}
})
const monthArr = JSON.stringify([...monthMap.keys()])
const monthValueArr = JSON.stringify([...monthMap.values()])

return `
<script id="postsChart">
var color = document.documentElement.getAttribute('data-theme') === 'light' ? '#4c4948' : 'rgba(255,255,255,0.7)'
var postsChart = echarts.init(document.getElementById('posts-chart'), 'light');
var postsOption = {
title: {
text: '文章发布统计图',
x: 'center',
textStyle: {
color: color
}
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false
},
axisLabel: {
show: true,
color: color
},
axisLine: {
show: true,
lineStyle: {
color: color
}
},
data: ${monthArr}
},
yAxis: {
name: '文章篇数',
type: 'value',
nameTextStyle: {
color: color
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
color: color
},
axisLine: {
show: true,
lineStyle: {
color: color
}
}
},
series: [{
name: '文章篇数',
type: 'line',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
itemStyle: {
opacity: 1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(128, 255, 165)'
},
{
offset: 1,
color: 'rgba(1, 191, 236)'
}])
},
areaStyle: {
opacity: 1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(128, 255, 165)'
}, {
offset: 1,
color: 'rgba(1, 191, 236)'
}])
},
data: ${monthValueArr},
markLine: {
data: [{
name: '平均值',
type: 'average',
label: {
position: 'end',
color: color
}
}]
}
}]
};
postsChart.setOption(postsOption);
postsChart.on('click', 'series', (event) => {
window.location.href = '/archives';
});
window.addEventListener('resize', () => {
postsChart.resize();
});
</script>`
}

function tagsChart(len) {
const tagArr = []
hexo.locals.get('tags').map(function(tag) {
tagArr.push({ name: tag.name, value: tag.length })
})
tagArr.sort((a, b) => { return b.value - a.value })

const dataLength = Math.min(tagArr.length, len) || tagArr.length
const tagNameArr = []
const tagCountArr = []
for (let i = 0; i < dataLength; i++) {
tagNameArr.push(tagArr[i].name)
tagCountArr.push(tagArr[i].value)
}
const tagNameArrJson = JSON.stringify(tagNameArr)
const tagCountArrJson = JSON.stringify(tagCountArr)

return `
<script id="tagsChart">
var color = document.documentElement.getAttribute('data-theme') === 'light' ? '#4c4948' : 'rgba(255,255,255,0.7)'
var tagsChart = echarts.init(document.getElementById('tags-chart'), 'light');
var tagsOption = {
title: {
text: 'Top ${dataLength} 标签统计图',
x: 'center',
textStyle: {
color: color
}
},
tooltip: {},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLabel: {
interval:0,
show: true,
color: color
},
axisLine: {
show: true,
lineStyle: {
color: color
}
},
data: ${tagNameArrJson}
},
yAxis: {
name: '文章篇数',
type: 'value',
splitLine: {
show: false
},
nameTextStyle: {
color: color
},
axisTick: {
show: false
},
axisLabel: {
show: true,
color: color
},
axisLine: {
show: true,
lineStyle: {
color: color
}
}
},
series: [{
name: '文章篇数',
type: 'bar',
data: ${tagCountArrJson},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(128, 255, 165)'
},
{
offset: 1,
color: 'rgba(1, 191, 236)'
}])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(128, 255, 195)'
},
{
offset: 1,
color: 'rgba(1, 211, 255)'
}])
}
},
markLine: {
data: [{
name: '平均值',
type: 'average',
label: {
position: 'end',
color: color
}
}]
}
}]
};
setRotate();
window.addEventListener('resize', () => {
setRotate();
tagsChart.resize();
});
function setRotate() {
if (document.body.clientWidth<=768) {
tagsOption.xAxis.axisLabel.rotate = -90
}else{
tagsOption.xAxis.axisLabel.rotate = 0
}
tagsChart.setOption(tagsOption)
}
tagsChart.on('click', 'series', (event) => {
let href = ''
if (event.name == '平均值') href = '/tags';
else href = '/tags/' + event.name;
window.location.href = href;
});
</script>`
}

function categoriesChart() {
const categoryArr = []
hexo.locals.get('categories').map(function(category) {
categoryArr.push({ name: category.name, value: category.length })
})
categoryArr.sort((a, b) => { return b.value - a.value });
const categoryArrJson = JSON.stringify(categoryArr)

return `
<script id="categoriesChart">
var color = document.documentElement.getAttribute('data-theme') === 'light' ? '#4c4948' : 'rgba(255,255,255,0.7)'
var categoriesChart = echarts.init(document.getElementById('categories-chart'), 'light');
var categoriesOption = {
title: {
text: '文章分类统计图',
x: 'center',
textStyle: {
color: color
}
},
legend: {
type: 'scroll',
top: 'bottom',
textStyle: {
color: color
},
pageIconColor: "#49b1f5",
pageTextStyle: {
color: color
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [{
name: '文章篇数',
type: 'pie',
radius: [30, 80],
center: ['50%', '50%'],
label: {
color: color,
formatter: '{b}'
},
labelLine: {
show: true,
length: 10,
length2: 5
},
data: ${categoryArrJson},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(255, 255, 255, 0.5)'
}
}
}]
};
function setLine() {
if (document.body.clientWidth<=768) {
categoriesOption.series[0].labelLine.length = 10
categoriesOption.series[0].labelLine.length2 = 5
}else{
categoriesOption.series[0].labelLine.length = 20
categoriesOption.series[0].labelLine.length2 = 30
}
categoriesChart.setOption(categoriesOption);
}
setLine();
window.addEventListener('resize', () => {
setLine();
categoriesChart.resize();
});
categoriesChart.on('click', 'series', (event) => {
let href = '/categories/' + event.name + '/';
window.location.href = href;
});
</script>`
}

评论icon

butterfly\layout\includes\third-party\comments\index.pug

i.fa-solid.fa-message.fa-fw

article-sort.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
mixin articleSort(posts)
.article-sort
- var year
- posts.each(function (article) {
- let tempYear = date(article.date, 'YYYY')
- let no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
- let title = article.title || _p('no_title')
.article-sort-item(class=no_cover)
if article.cover && theme.cover.archives_enable
a.article-sort-item-img(href=url_for(article.path) title=title)
img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
.article-sort-item-info
a.article-sort-item-title(href=url_for(article.path) title=title)= title
.article-sort-item-time
i.far.fa-calendar-alt
time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
- })

archives.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
.article-sort

&-title
position: relative
margin-bottom: 10px
font-size: 1.72em

&-item
position: relative
display: flex
align-items: center
margin: 0 0 20px 0
transition: all .2s ease-in-out

&.no-article-cover
height: 80px

.article-sort-item-info
padding: 0

&.year
font-size: 1.43em

&-time
color: $theme-meta-color
font-size: 95%

time
padding-left: 6px
cursor: default

&-title
@extend .limit-more-line
line-height: 1.3;
font-weight: 600
font-size: 1.2rem !important
color: var(--font-color)
font-size: 1.1em
transition: all .3s
-webkit-line-clamp: 2

&:hover
color: $text-hover
transform: translateX(10px)

&-img
border: 2px solid #49b1f5
padding: 10px
border-radius: 10px
overflow: hidden
width: 150px
height: 80px

@media screen and (max-width: 768px)
width: 125px
img
@extend .imgHover

&-info
flex: 1
padding: 0 16px

底部pagination

butterfly\source\css\_layout\pagination.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
#pagination
.pagination
position: relative
margin-top: 20px
text-align: center

.page-number
&.current
background: $button-bg
color: var(--white)

.pagination-info
position: absolute
top: 50%
padding: 20px 40px
width: 100%
transform: translate(0, -50%)

.prev_info,
.next_info
@extend .limit-one-line
color: var(--font-color)
font-weight: 500

.next-post
.pagination-info
text-align: right

.pull-full
width: 100% !important

.prev-post .label,
.next-post .label
color: var(--font-color)
text-transform: uppercase
font-size: 90%

.prev-post,
.next-post
@extend .postImgHover
width: 50%

+maxWidth768()
width: 100%

a
position: relative
display: block
overflow: hidden
height: 150px

&.pagination-post
overflow: hidden
margin-top: 40px
width: 100%
background: $dark-black

.layout
& > .recent-posts
.pagination
& > *:not(.space)
@extend .cardHover

& > div
.pagination
& > *:not(.space)
border: 1px solid #e3e8f7

&:hover
background: var(--btn-bg)
color: white !important

& > *
display: inline-block
margin: 0 6px
width: w = 2.5em
height: w
line-height: w
color: var(--font-color)
box-shadow: none !important
border-radius: 8px;
text-align: center
cursor: pointer

@media screen and (max-width: 768px)
margin: 0 3px

.next,.prev
width: 4rem !important
position: absolute
right: 0

@media screen and (max-width: 768px)
width: 2.5rem !important
position:relative

.prev
left: 0
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
#footer_icon
.icon_left
a.icon_link(href="http://foreverblog.cn/go.html" title="虫洞-随机访问十年之约成员博客")
i.fa-solid.fa-circle-notch.fa-fw

a.icon_link(href="https://travellings.cn" title="开往-随机跳转到另一个加入开往的网页")
i.fa-solid.fa-subway.fa-fw

a.icon_link(href="https://github.com/Lea321" title="我的Github主页")
i.fa-brands.fa-github.fa-fw

a.icon_link(href="/message/" title="留言")
i.fa-regular.fa-comment.fa-fw

img.footer_logo(src='https://q1.qlogo.cn/g?b=qq&nk=553344777&s=4' onclick="btf.scrollToDest(0,500)" title="返回顶部")

.icon_left
a.icon_link(href="https://www.leonus.cn/" title="我的主页")
i.fa-solid.fa-compass.fa-fw

a.icon_link(href="https://res.abeim.cn/api/qq/?qq=553344777" title="联系QQ")
i.fa-brands.fa-qq.fa-fw

a.icon_link(href="/wechat/" title="联系微信")
i.fa-brands.fa-weixin.fa-fw

a.icon_link(href="mailto:553344777@qq.com" title="发送邮件")
i.fa-solid.fa-envelope.fa-fw

#footer_content
.footer-group
h3.footer-title 直达
.footer-links
a.footer-item(href="https://www.leonus.cn/") 个人主页
a.footer-item(href="/talk") 空间说说
a.footer-item(href="/sentence") 名言警句
a.footer-item(href="/wallpaper") 壁纸收藏
a.footer-item(href="/bg") 切换背景
.footer-group
h3.footer-title 关于
.footer-links
a.footer-item(href="/about/#关于我") 关于我
a.footer-item(href="/about/#站点统计") 站点统计
a.footer-item(href="/about/#文章统计") 文章统计
a.footer-item(href="/about/#打赏名单") 打赏名单
a.footer-item(href="/update/") 更新记录
.footer-group#friend-links
h3.footer-title 分类
.footer-links
a.footer-item(href="/categories/博客相关") 博客相关
a.footer-item(href="/categories/学习笔记") 学习笔记
a.footer-item(href="/categories/实用教程") 实用教程
a.footer-item(href="/categories/生活记录") 生活记录
a.footer-item(href="/categories/随便写写") 随便写写
a.footer-item(href="/categories/优质好文") 优质好文
.footer-group#friend-links-in-footer
h3.footer-title 友链
a(href="javascript:;" onclick="leonus.randomLink()") 随 机
.footer-links
a.footer-item(target="_blank" href="") 随机加载中...
a.footer-item(target="_blank" href="") 随机加载中...
a.footer-item(target="_blank" href="") 随机加载中...
a.footer-item(target="_blank" href="") 随机加载中...
a.footer-item(target="_blank" href="") 随机加载中...
a.footer-item(href="/link") 查看更多
#footer-bottom
.footer-bottom-links
.footer-bottom-left
#runtime(title="已运行时长")
.footer-bottom-right
a.footer-bottom-link(target="_blank" href="https://hexo.io/zh-cn/" title="框架") Hexo
a.footer-bottom-link |
a.footer-bottom-link(target="_blank" href="https://butterfly.js.org/" title="主题") Butterfly
a.footer-bottom-link |
a.footer-bottom-link(target="_blank" href="https://beian.miit.gov.cn/" title="备案号") 豫ICP备20005146号
svg.china(t='1631772151823', viewBox='0 0 1546 1024', version='1.1', xmlns='https://www.w3.org/2000/svg', p-id='2637', width='24', height='12')
path(d='M11.322 1017.71h1520.904V6.29H11.322v1011.42zM1536 1021.484v-3.774 3.774zM5.032 1024V0h1533.484v1024H5.032z', fill='#353636', p-id='2638')
path(d='M8.806 2.516H1536v1017.71H8.806z', fill='#D64B24', p-id='2639')
path(d='M264.177 118.25l32.708 99.381h104.412l-84.285 60.384 31.45 99.38-84.285-61.64-84.285 61.64 32.708-99.38-84.286-60.384h104.413z m271.725-52.835l-1.258 35.224 31.45 12.58-33.966 8.806-1.258 33.965L512 127.057l-32.708 7.547 21.386-26.417-17.612-28.934 31.45 13.838z m116.992 111.96L637.8 207.569l23.901 23.901-33.965-5.032-15.096 30.192-5.032-33.966-33.966-5.032 30.192-15.095-5.032-33.966 23.902 23.902z m-35.223 138.38l11.322 32.707h33.965l-27.675 20.128 10.063 32.707-27.675-20.127-27.676 20.127 11.322-32.707-27.676-20.128h33.966z m-81.77 105.67l-2.515 33.966 32.707 12.58-33.965 8.805-2.516 33.966L512 481.808l-33.966 8.806 22.644-26.417-18.87-28.934 32.708 12.58z', fill='#FBDC00', p-id='2640')

twikoo加载完成

1
2
3
4
5
6
7
8
9
10
11
const init = () => {
twikoo.init(Object.assign({
el: '#twikoo-wrap',
envId: '!{envId}',
region: '!{region}',
onCommentLoaded: function (e) {
+ leonus.twIcon();
btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
}
}, !{JSON.stringify(option)}))
}

post-ui.pug

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
mixin postUI(posts)
- let newTitle= newPost()
each article , index in page.posts.data
.recent-post-item
-
let link = article.link || article.path
let title = article.title || _p('no_title')
const position = theme.cover.position
let leftOrRight = position === 'both'
? index%2 == 0 ? 'left' : 'right'
: position === 'left' ? 'left' : 'right'
let post_cover = article.cover
let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
-
if post_cover && theme.cover.index_enable
.post_cover(class=leftOrRight)
a(href=url_for(link) title=title)
img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
.recent-post-info(class=no_cover)
if newTitle == title
span(class=`newPost-${leftOrRight=='left'?'right':'left'}`) 最新
a.article-title(href=url_for(link) title=title)= title
.article-meta-wrap
if (is_home() && (article.top || article.sticky > 0))
span.article-meta
i.fas.fa-thumbtack.sticky
span.sticky= _p('sticky')
span.article-meta-separator |
if (theme.post_meta.page.date_type)
span.post-meta-date
if (theme.post_meta.page.date_type === 'both')
svg.icon(aria-hidden='true')
use(href='#icon-shalou')
time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format)
span.article-meta-label=_p('post.created')
span.article-meta-separator |
svg.icon(aria-hidden='true')
use(href='#icon-gengxin')
time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format)
span.article-meta-label=_p('post.updated')
else
- let data_type_updated = theme.post_meta.page.date_type === 'updated'
- let date_type = data_type_updated ? 'updated' : 'date'
- let date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt'
- let date_title = data_type_updated ? _p('post.updated') : _p('post.created')
i(class=date_icon)
span.article-meta-label=date_title
time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format)
if (theme.post_meta.page.categories && article.categories.data.length > 0)
span.article-meta
span.article-meta-separator |
i.fas.fa-inbox
each item, index in article.categories.data
a(href=url_for(item.path)).article-meta__categories #[=item.name]
if (index < article.categories.data.length - 1)
i.fas.fa-angle-right.article-meta-link
if (theme.post_meta.page.tags && article.tags.data.length > 0)
span.article-meta.tags
span.article-meta-separator |
svg.icon(aria-hidden='true')
use(href='#icon-biaoqian')
each item, index in article.tags.data
a(href=url_for(item.path)).article-meta__tags #[=item.name]
if (index < article.tags.data.length - 1)
span.article-meta-link #[='•']

mixin countBlockInIndex
- needLoadCountJs = true
span.article-meta
span.article-meta-separator |
i.fas.fa-comments
if block
block
span.article-meta-label= ' ' + _p('card_post_count')

if theme.comments.card_post_count
case theme.comments.use[0]
when 'Disqus'
+countBlockInIndex
a(href=full_url_for(link) + '#disqus_thread')
i.fa-solid.fa-spinner.fa-spin
when 'Disqusjs'
+countBlockInIndex
a(href=full_url_for(link) + '#disqusjs')
span.disqus-comment-count(data-disqus-url=full_url_for(link))
i.fa-solid.fa-spinner.fa-spin
when 'Valine'
+countBlockInIndex
a(href=url_for(link) + '#post-comment')
span.valine-comment-count(data-xid=url_for(link))
i.fa-solid.fa-spinner.fa-spin
when 'Waline'
+countBlockInIndex
a(href=url_for(link) + '#post-comment')
span.waline-comment-count(id=url_for(link))
i.fa-solid.fa-spinner.fa-spin
when 'Twikoo'
+countBlockInIndex
a.twikoo-count(href=url_for(link) + '#post-comment')
i.fa-solid.fa-spinner.fa-spin
when 'Facebook Comments'
+countBlockInIndex
a(href=url_for(link) + '#post-comment')
span.fb-comments-count(data-href=urlNoIndex(article.permalink))
i.fa-solid.fa-spinner.fa-spin
when 'Remark42'
+countBlockInIndex
a(href=url_for(link) + '#post-comment')
span.remark42__counter(data-url=urlNoIndex(article.permalink))
i.fa-solid.fa-spinner.fa-spin

//- Display the article introduction on homepage
case theme.index_post_content.method
when false
- break
when 1
.content!= article.description
when 2
if article.description
.content!= article.description
else
- const content = strip_html(article.content)
- let expert = content.substring(0, theme.index_post_content.length)
- content.length > theme.index_post_content.length ? expert += ' ...' : ''
.content!= expert
default
- const content = strip_html(article.content)
- let expert = content.substring(0, theme.index_post_content.length)
- content.length > theme.index_post_content.length ? expert += ' ...' : ''
.content!= expert

if theme.ad && theme.ad.index
if (index + 1) % 3 == 0
.recent-post-item.ads-wrap!=theme.ad.index

打赏

butterfly\layout\includes\post\reward.pug

1
2
3
4
5
6
7
8
9
10
11
12
.post-reward
.reward-button
i.fas.fa-gift
= ' ' + _p('donate')
.reward-main
ul.reward-all
each item in theme.reward.QR_code
- var clickTo = item.link ? item.link : item.img
li.reward-item
a(href=url_for(clickTo) data-fancybox="group")
img.post-qr-code-img(src=url_for(item.img) alt=item.text)
.post-qr-code-desc=item.text

标签

butterfly\scripts\helpers\page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
hexo.extend.helper.register('cloudTags', function(options = {}) {
const env = this
let source = options.source
const limit = options.limit
source = source.sort('length').reverse()
let result = ''
if (limit > 0) source = source.limit(limit)

source.forEach(tag => {
const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
result += `<a href="${env.url_for(tag.path)}" style="color: ${color}">${tag.name} (${tag.length})</a>`
})
return result
})

card_author.pug

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
if theme.aside.card_author.enable
.card-widget.card-info
.is-center
.avatar-img
img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
.author-info__name= config.author
.author-info__description!= theme.aside.card_author.description || config.description

.card-info-data.site-data.is-center
a(href=url_for(config.archive_dir) + '/' title=`累计${_p('aside.articles')}: ${site.posts.length}`)
.length-num= site.posts.length
.headline= _p('aside.articles')
a(href=url_for(config.tag_dir) + '/' title=`累计${_p('aside.tags')}: ${site.tags.length}`)
.length-num= site.tags.length
.headline= _p('aside.tags')
a(href="/message/")
.card_comment.length-num= 0
.headline= '评论数'

if theme.aside.card_author.button.enable
a#card-info-btn(href=theme.aside.card_author.button.link)
i(class=theme.aside.card_author.button.icon)
span=theme.aside.card_author.button.text

if(theme.social)
.card-info-social-icons.is-center
!=fragment_cache('social', function(){return partial('includes/header/social')})

layout.pug

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
- var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
- page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside
- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
- var pageType = is_post() ? 'post' : 'page'

doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
head
include ./head.pug
body
if theme.preloader
!=partial('includes/loading/loading', {}, {cache: true})

if theme.background
#web_bg

!=partial('includes/sidebar', {}, {cache: true})

if page.type !== '404'
#body-wrap(class=pageType)
include ./header/index.pug
if (is_home())
#main_top
#bber-talk.wow.animate__flipInX(onclick=`pjax.loadUrl("/zone/")`)
svg.icon(t='1660960757124', viewBox='0 0 1024 1024', version='1.1', xmlns='http://www.w3.org/2000/svg', p-id='3946', width='200', height='200')
path(d='M526.432 924.064c-20.96 0-44.16-12.576-68.96-37.344L274.752 704H192c-52.928 0-96-43.072-96-96V416c0-52.928 43.072-96 96-96h82.752l182.624-182.624c24.576-24.576 47.744-37.024 68.864-37.024C549.184 100.352 576 116 576 160v704c0 44.352-26.72 60.064-49.568 60.064zM192 384c-17.632 0-32 14.368-32 32v192c0 17.664 14.368 32 32 32h96c8.48 0 16.64 3.36 22.624 9.376l192.064 192.096c3.392 3.36 6.496 6.208 9.312 8.576V174.016a145.824 145.824 0 0 0-9.376 8.608l-192 192C304.64 380.64 296.48 384 288 384h-96zM687.584 730.368a31.898 31.898 0 0 1-18.656-6.016c-14.336-10.304-17.632-30.304-7.328-44.672l12.672-17.344C707.392 617.44 736 578.624 736 512c0-69.024-25.344-102.528-57.44-144.928-5.664-7.456-11.328-15.008-16.928-22.784-10.304-14.336-7.04-34.336 7.328-44.672 14.368-10.368 34.336-7.04 44.672 7.328 5.248 7.328 10.656 14.464 15.968 21.504C764.224 374.208 800 421.504 800 512c0 87.648-39.392 141.12-74.144 188.32l-12.224 16.736c-6.272 8.704-16.064 13.312-26.048 13.312z', p-id='3947')
path(d='M796.448 839.008a31.906 31.906 0 0 1-21.088-7.936c-13.28-11.648-14.624-31.872-2.976-45.152C836.608 712.672 896 628.864 896 512s-59.392-200.704-123.616-273.888c-11.648-13.312-10.304-33.504 2.976-45.184 13.216-11.648 33.44-10.336 45.152 2.944C889.472 274.56 960 373.6 960 512s-70.528 237.472-139.488 316.096c-6.368 7.232-15.2 10.912-24.064 10.912z', p-id='3948')
ul.talk-list 说说加载中。。。
main#content-inner.layout(class=hideAside)
if body
div!= body
else
block content
if theme.aside.enable && page.aside !== false
include widget/index.pug

- var footerBg = theme.footer_bg
if (footerBg)
if (footerBg === true)
- var footer_bg = bg_img
else
- var footer_bg = theme.footer_bg.indexOf('/') !== -1 ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}`
else
- var footer_bg = ''

footer#footer(style=footer_bg)
!=partial('includes/footer', {}, {cache: true})

else
include ./404.pug

include ./rightside.pug
!=partial('includes/third-party/search/index', {}, {cache: true})
include ./additional-js.pug

categories.pug

1
.category-lists!= list_categories({orderby: '-length'})

card_tags.pug

1
2
3
4
5
6
7
8
9
10
if theme.aside.card_tags.enable
if site.tags.length
.card-widget.card-tags
.item-headline
i.fas.fa-tags
span= _p('aside.card_tags')
a.card-more-btn(href=url_for(config.tag_dir) title=_p('aside.more_button'))
i.fas.fa-angle-right
- let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40
.card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.15, maxfontsize: 1.45, limit: tagLimit, unit: 'em'})

post-info.pug

1
2
-h1.post-title= page.title || _p('no_title')
+h1.post-title!= postTitle(page.title) || _p('no_title')

加载动画

教程:http://anzhiy.cn/posts/52d8.html

loading.pug

1
2
3
#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
.loading-bg
img.loading-img(src='https://q1.qlogo.cn/g?b=qq&nk=553344777&s=640',data-lazy-src="https://q1.qlogo.cn/g?b=qq&nk=553344777&s=640")

loading.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
if hexo-config('preloader')
.loading-bg
display: flex;
width: 100%;
height: 100%;
position: fixed;
background: var(--tab-button-active-bg);
z-index: 1001;
opacity: 1;
transition: .3s;

#loading-box
.loading-img
width: 100px;
border-radius: 50%;
margin: auto;
animation-duration: .3s;
animation-name: loadingAction;
animation-iteration-count: infinite;
animation-direction: alternate;
&.loaded
.loading-bg
opacity: 0;
z-index: -1000;

@keyframes loadingAction
0% {
opacity: 1;
}

100% {
opacity: .4;
}

page.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
// 最新文章
hexo.extend.helper.register('newPost', function() {
let name, time;
hexo.locals.get('posts').map((item, index) => {
if (index == 0) name = item.title, time = item.date
else if (item.date > time) { name = item.title, time = item.date }
});
return name
})

hexo.extend.helper.register('postTitle', function(text) {
if (text.length <= 11) return text
let ls = [],
result = '';
text.split('').forEach(i => {
let last = ls[ls.length - 1]
if (ls.length && last.length == 1 && i.search(/[A-Za-z0-9]/g) != -1 && last.search(/[A-Za-z0-9]/g) != -1) ls[ls.length - 1] += i
else ls.push(i)
});
let len = ls.length
if (len > 11) {
let index = Math.floor(len / 2) - 1
for (let i = 0; i < len; i++) {
if (i == index) result += '<br>'
result += ls[i]
}
return result
}
return text
})


hexo.extend.helper.register('cloudTags', function(options = {}) {
const env = this
let source = options.source
const limit = options.limit
source = source.sort('length').reverse()
let result = ''
if (limit > 0) source = source.limit(limit)

source.forEach(tag => {
const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
result += `<a href="${env.url_for(tag.path)}" style="color: ${color}">${tag.name} (${tag.length})</a>`
})
return result
})