LifeBlog

本文用于记录本人搭建 Hexo 博客的完整过程，侧重实际操作中的取舍与踩坑经验。

本文并非新手入门教程，也不会覆盖所有可选方案。目前已有大量成熟的搭建教程，且不同环境、主题与插件组合并不存在唯一解。

写作目的仅为对个人搭建流程进行归档，供后续维护与环境迁移时参考。

为什么选用Hexo？

Hexo 是一个快速、简洁且高效的静态博客框架，基于 Node.js 运行。其核心特性是使用 Markdown（或其他标记语言）编写内容，并在极短时间内生成完整的静态网页。

相比动态博客系统，Hexo 在部署成本、运行性能以及可控性方面具有明显优势。同时，其社区生态成熟，拥有大量高质量主题与插件，能够在保持性能的前提下实现高度定制化，因此最终选择 Hexo 作为博客框架。

安装 Hexo

本地环境已预先安装 Node.js 与 Git，因此不再赘述相关安装过程。

需要注意的是，不同版本的 Hexo 对 Node.js 版本存在兼容性要求，实际使用前应确认当前 Node.js 版本符合官方文档说明。

博客使用 VS Code 进行本地开发、构建与调试。

基本流程如下：

  • 新建文件夹作为博客根目录
  • 在终端中通过 npm 安装 Hexo CLI
1
npm install hexo-cli -g

使用初始化命令，初始化仓库

1
hexo init

至此，一个基础的 Hexo 项目已创建完成。

安装并配置主题

完成 Hexo 初始化后，选择合适的主题并安装至 themes 目录中。

除 Hexo 官方主题库外，GitHub 上也存在大量由社区维护的高质量主题。本博客选用的是 Reimu 主题：

1
2
cd themes
git clone https://github.com/D-Sketon/hexo-theme-reimu.git

主题的完整配置项与说明已由作者在文档中详细给出，本文仅记录配置过程中个人遇到问题的部分。

配置评论插件

评论系统这里我只要选择使用了 waline

请参考其官方文档完成LeanCloud 的配置，并在内层 _config.yml 中将 waline.enable 改为 true，并填入对应的 serverURL

要注意，Waline 官方文档中关于 Vercel 部署的部分截图存在一定滞后，但整体流程与思路仍然是正确的，配置过程中跟官方文档图片不一致属于正常情况。

  • 创建 LeanCloud 应用
    使用免费开发版即可。建议选择国际版，国内版通常需要备案域名与独立IP。
    image
    进入应用，选择左下角的 设置 > 应用 Key。可以看到 APP ID,APP Key 和 Master Key。记录它们，以便后续使用.
    image

  • 部署 Vercel服务器

TIP

如果未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。

输入一个你喜欢的 Vercel 项目名称并点击 Create 继续
此链接会基于Waline模版直接完成新建和初始化仓库，仓库名为输入的项目名
点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。
image

IMPORTANT

这里的环境变量配置页面，一定是项目的Setting里面

环境变量配置完成之后点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。
此时会跳转到 Overview 界面开始部署，等待片刻后 STATUS 会变成 Ready。此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址(但是这个跟填入配置文件的url还不是同一个)
这里我填的是域名 Domains 的地址
image
部署完成后，请访问 <serverURL>/ui/register 进行注册。首个注册的人会被设定成管理员。

  • 绑定域名(可选)
    点击上图红色方框中的加号 跳转设置界面
    点击Add Domain添加域名
    image
    之后会出现这个 按照里面给的信息去域名服务商解析DNS即可(图中域名自定义)
    image
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
waline:
  enable: true
  serverURL: "your server url"
  locale: {} # https://waline.js.org/guide/features/i18n.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E8%A8%80
  emoji:
    - https://unpkg.com/@waline/emojis@1.2.0/weibo
    - https://unpkg.com/@waline/emojis@1.2.0/alus
    - https://unpkg.com/@waline/emojis@1.2.0/bilibili
    - https://unpkg.com/@waline/emojis@1.2.0/qq
    - https://unpkg.com/@waline/emojis@1.2.0/tieba
    - https://unpkg.com/@waline/emojis@1.2.0/tw-emoji
  meta:
    - nick
    - mail
    - link
  requiredMeta:
    - nick
    - mail
  wordLimit: 0
  pageSize: 10
  pageview: true

配置搜索插件

搜索插件选择使用 Algolia，先去安装 @reimujs/hexo-algoliasearch

1
npm install @reimujs/hexo-algoliasearch --save

进入 Algolia 官网注册账号 为了方便都是使用github快捷登录
进入控制面板

新建一个application

image

回到控制面板 你的首页应该会有key 但没关系 先去建立index索引

image

现在去查看API Keys 保存并填入配置文件

image

image

在外层 _config.yml 中添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#搜索
algolia:
  appId: 'appid'
  apiKey: 'Search API Key'
  adminApiKey: 'Admin API key'
  indexName: '创建的索引名'
  chunkSize: 5000
  fields:
  - content:strip:truncate,0,500
  - excerpt:strip
  - gallery
  - permalink
  - photos
  - slug
  - tags
  - title

在内层 _config.yml 中将 algolia_search.enable 改为 true

1
2
algolia_search:
  enable: true

主题个性化调整

完整主题使用说明可参考官方文档。此处仅记录部分高频修改项与实际使用中遇到的问题。

头像

在 source/_data/avatar/ 中

封面

封面显示逻辑如下

如果文章的 Front matter 中包含 cover 的 url，则该文章头图和首页缩略图均显示该 url

1
2
3
4
---
title: Hello World
cover: https://example.com
---

如果文章的 Front matter 中包含 cover 为false，则该文章不显示头图（首页上仍然是随机图片）

1
2
3
4
---
title: Hello World
cover: false
---

如果文章的 Front matter 中包含 cover 为rgb(xxx,xxx,xxx)，则该文章头图为对应的渐变纯色（首页上仍然是随机图片）

1
2
3
4
---
title: Hello World
cover: rgb(255,117,117)
---

否则查找 covers 文件夹和 covers.yml，并从中随机挑选图片
若上述文件均不存在，则显示头图

头图

头图保存于 themes/reimu/source/images/banner.webp，可在内层 _config.yml中修改

1
banner: "/images/banner.webp"

favicon 图标

favicon 保存于 themes/reimu/source/images/favicon.ico，可在内层 _config.yml中修改

1
favicon: "/images/favicon.ico"

IMPORTANT

图片进行了格式的压缩转换 可以提高网页加载的速度
同时对banner图使用ps进行不同分辨率的切割 配合响应式头图后可以在一定程度上提高移动端的 LCP
其中的taichi图标也使用了png与svg格式 并且为了适应日夜模式 也用ps抠图做了填充

在内存config.yml中进行自定义主题的设置 这个配色可以直接使用ai完成 效果应该不会太差

增加追番表

追番功能通过 hexo-bilibili-bangumi 插件实现，数据源使用 Bangumi。

1
npm install hexo-bilibili-bangumi --save

将以下配置写入外层 _config.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
#追番 https://github.com/HCLonely/hexo-bilibili-bangumi
#注：不能设置私密
bangumi: # 追番设置
  enable: true
  source: bgmv0 # 数据源
  # bgmInfoSource: 'bgmv0' # 数据源选择。bili, bgmv0: BgmApi源(api.bgm.tv), bangumi: Bangumi源(bangumi.tv), bgm: Bangumi源(bgm.tv), anilist: AniList源, simkl: Simkl源
  path: "anime/index.html" # 页面的地址(注意是填html 真有笨蛋填了md啊)
  vmid:  # Bangumi的用户id，直接点到个人主页看头像那里就有 纯数字
  title: '我的追番' # 页面的标题
  quote: '看番还是要想看才是最舒服的！' # 页面顶部的引言，支持HTML
  show: 1 # 初始显示的内容类型：0=想看，1=在看，2=看过
  lazyload: false # 是否启用图片懒加载，可避免首次加载时间过长 如果与主题的懒加载冲突请关闭
  srcValue: '__image__' # 设置封面图的默认src值，__image__为封面链接，__loading__为loading图片链接
  showMyComment: false # 使用`bgm`源时显示自己的评价及评论，默认`false`
  pagination: false # 分页优化，只将第一页的数据渲染到`html`文件中，其余数据将通过异步请求加载，避免番剧过多时html文件过大导致页面加载缓慢，建议番剧较多时使用，默认`false`
  metaColor: # meta 部分(简介上方)字体颜色 支持CSS颜色值（如'#FFFFFF'）
  color: # 简介文字的字体颜色
  webp: # 番剧封面使用`webp`格式(此格式在`safari`浏览器下不显示，但是图片大小可以缩小 100 倍左右，仅支持哔哩哔哩源), 默认`true`
  progress: true # 获取番剧数据时是否显示进度条，默认`true`
  progressBar: true # 是否在追番页面显示观看进度条（仅支持bili和bgmv0源）
  extraOrder: # 手动添加的番剧/追剧数据是否优先显示，`1`为优先，其它为不优先
  order: latest  # 排序方式：score=评分升序，-score=评分降序 ，其他=默认顺序
  # proxy:
  #   host: '代理host'
  #   port: '代理端口'
  extra_options: # 扩展配置，会被注入到Hexo的page变量中
    comments: false # 禁用评论
    share: false # 禁用分享
    #lazyload:
     # enable: false # 关闭主题自带的懒加载(只关闭番剧页，不影响其他页面) 实测下来不如直接关闭插件懒加载能用
  coverMirror: # "https://images.weserv.nl/?url="

更改追番表样式

TIP

并没学过css和js前端的知识 这部分基本是ai完成，直接上源码

在外层soure新建js和css文件夹 这里不需要再主题内的source，且不要命名冲突，会被覆盖文件 外层才是自己自定义的，这也避免了后面更新主题导致覆盖更改文件造成麻烦。

[bangumi-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
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
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
.bangumi-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  border-bottom: 2px solid var(--red-5, #f8e9fb) !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  gap: 0 !important;
}

.bangumi-tab {
  padding: 12px 24px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  color: var(--highlight-comment, #8a7b94) !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  text-decoration: none !important;
  margin: 0 0 -2px 0 !important;
  position: relative !important;
}

.bangumi-tab::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 3px !important;
  background: var(--red-0, #8e1f84) !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bangumi-tab:hover {
  color: var(--red-1, #b766b8) !important;
  background: var(--red-6, #fdf9fe) !important;
}

.bangumi-tab:hover::after {
  width: 100% !important;
}

.bangumi-tab.bangumi-active {
  border-bottom-color: var(--red-0, #8e1f84) !important;
  color: var(--red-0, #8e1f84) !important;
  background: transparent !important;
}

.bangumi-tab.bangumi-active::after {
  width: 100% !important;
}

.bangumi-container {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -8px !important;
  padding: 0 !important;
}

.bangumi-item {
  display: inline-block !important;
  width: calc(20% - 16px) !important;
  margin: 8px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--red-6, #fdf9fe) !important;
  box-shadow: 0 2px 8px var(--color-red-3-shadow, rgba(183, 102, 184, 0.15)) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  vertical-align: top !important;
  position: relative !important;
  clear: none !important;
  min-height: auto !important;
  will-change: transform, box-shadow !important;
}

.bangumi-item:hover {
  box-shadow: 0 8px 24px var(--color-red-6-shadow, rgba(142, 31, 132, 0.35)) !important;
  transform: translateY(-8px) scale(1.02) !important;
}

.bangumi-picture {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 133.33% !important;
  overflow: hidden !important;
  margin: 0 !important;
  left: 0 !important;
  top: 0 !important;
  pointer-events: none !important;
  background: var(--highlight-background, #f5f5f5) !important;
}

.bangumi-picture img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 0 !important;
  pointer-events: none !important;
  will-change: transform !important;
}

.bangumi-item:hover .bangumi-picture img {
  transform: scale(1.08) !important;
}

.bangumi-item .episode-count,
.bangumi-item [class*="episode"],
.bangumi-item [class*="Episode"],
.bangumi-item [class*="count"],
.bangumi-picture .episode-count,
.bangumi-picture [class*="episode"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.bangumi-info {
  padding: 12px !important;
  position: static !important;
  margin: 0 !important;
  min-height: auto !important;
  background: transparent !important;
  margin-top: 0 !important;
}

.bangumi-title {
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  min-height: 2.4rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bangumi-title a {
  color: var(--highlight-foreground, #3b2b58) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
  line-height: 1.5 !important;
  display: block !important;
}

.bangumi-title a:hover {
  color: var(--red-0, #8e1f84) !important;
}

.bangumi-meta {
  display: none !important;
}

.bangumi-info-items {
  display: none !important;
}

.bangumi-progress-text {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.bangumi-progress-info {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
  font-size: 12px !important;
  color: var(--highlight-comment, #8a7b94) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.bangumi-progress-info .progress-text {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: var(--highlight-comment, #8a7b94) !important;
  font-weight: 500 !important;
}

.bangumi-progress-info .progress-text .current,
.bangumi-progress-info .progress-text .total {
  color: var(--red-1, #b766b8) !important;
  font-weight: 600 !important;
}

.bangumi-progress-info .progress-percentage {
  color: var(--red-1, #b766b8) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

.bangumi-info-item {
  display: none !important;
}

.bangumi-info-item-score {
  display: none !important;
}

.bangumi-info .bangumi-progress {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: 6px !important;
  background: var(--red-5, #f8e9fb) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  opacity: 1 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.bangumi-info .bangumi-progress .progress-bar {
  display: block !important;
  visibility: visible !important;
  height: 100% !important;
  background: linear-gradient(90deg, 
    var(--red-0, #8e1f84) 0%, 
    var(--red-1, #b766b8) 50%,
    var(--red-0, #8e1f84) 100%) !important;
  background-size: 200% 100% !important;
  border-radius: 999px !important;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
  opacity: 1 !important;
  min-width: 0% !important;

  width: 0%;
  animation: progressShine 2s ease-in-out infinite !important;
  box-shadow: 0 0 8px rgba(142, 31, 132, 0.4) !important;
}

@keyframes progressShine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.bangumi-info .bangumi-progress .progress-bar.progress-loaded {
  animation: progressShine 2s ease-in-out infinite !important;
}

.bangumi-summary {
  display: none !important;
}

.bangumi-pagination {
  display: none !important;
}

@media (min-width: 1200px) {
  .bangumi-item {
    width: calc(20% - 16px) !important;
  }
}

@media (max-width: 1199px) and (min-width: 900px) {
  .bangumi-item {
    width: calc(25% - 16px) !important;
  }
  
  .bangumi-tab {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 899px) and (min-width: 640px) {
  .bangumi-item {
    width: calc(33.333% - 16px) !important;
  }
  
  .bangumi-tabs {
    margin-bottom: 20px !important;
  }
  
  .bangumi-tab {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  
  .bangumi-title {
    font-size: 13px !important;
    min-height: 2.2rem !important;
    margin-bottom: 6px !important;
  }
}

@media (max-width: 639px) and (min-width: 400px) {
  .bangumi-item {
    width: calc(50% - 16px) !important;
    margin: 6px !important;
  }
  
  .bangumi-container {
    margin: 0 -6px !important;
  }
  
  .bangumi-tabs {
    margin-bottom: 16px !important;
    border-bottom-width: 1.5px !important;
  }
  
  .bangumi-tab {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  
  .bangumi-info {
    padding: 12px !important;
  }
  
  .bangumi-title {
    font-size: 12px !important;
    min-height: 2rem !important;
    margin-bottom: 6px !important;
  }
  
  .bangumi-info .bangumi-progress {
    height: 5px !important;
  }
}

@media (max-width: 399px) {
  .bangumi-item {
    width: calc(100% - 12px) !important;
    margin: 6px !important;
  }
  
  .bangumi-container {
    margin: 0 -6px !important;
  }
  
  .bangumi-tabs {
    margin-bottom: 12px !important;
    border-bottom-width: 1.5px !important;
  }
  
  .bangumi-tab {
    padding: 8px 10px !important;
    font-size: 12px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  
  .bangumi-info {
    padding: 10px !important;
  }
  
  .bangumi-title {
    font-size: 12px !important;
    min-height: 1.8rem !important;
    margin-bottom: 6px !important;
  }
  
  .bangumi-info .bangumi-progress {
    height: 4px !important;
  }
  
}

@media (prefers-color-scheme: dark) {
  .bangumi-tabs {
    border-bottom-color: var(--red-5, rgba(183, 102, 184, 0.2)) !important;
  }
  
  .bangumi-tab {
    color: var(--highlight-comment, #9c8aa0) !important;
  }
  
  .bangumi-tab:hover {
    color: var(--red-1, #b842ad) !important;
    background: var(--red-4, rgba(142, 31, 132, 0.3)) !important;
  }
  
  .bangumi-tab.bangumi-active {
    border-bottom-color: var(--red-0, #b842ad) !important;
    color: var(--red-0, #b842ad) !important;
  }
  
  .bangumi-tab::after {
    background: var(--red-0, #b842ad) !important;
  }
  
  .bangumi-item {
    background: var(--highlight-nav, #261433) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  }
  
  .bangumi-item:hover {
    box-shadow: 0 8px 24px rgba(184, 66, 173, 0.25) !important;
  }
  
  .bangumi-picture {
    background: var(--highlight-background, #1a1a1a) !important;
  }
  
  .bangumi-title a {
    color: var(--highlight-foreground, #d8c2e0) !important;
  }
  
  .bangumi-title a:hover {
    color: var(--red-0, #b842ad) !important;
  }
  
  
  .bangumi-progress-info {
    color: var(--highlight-comment, #9c8aa0) !important;
  }
  
  .bangumi-progress-info .progress-text .current,
  .bangumi-progress-info .progress-text .total,
  .bangumi-progress-info .progress-percentage {
    color: var(--red-1, #d6769d) !important;
  }
  
  .bangumi-info .bangumi-progress {
    background: var(--highlight-selection, #4a2a70) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  }
  
  .bangumi-info .bangumi-progress .progress-bar {
    background: linear-gradient(90deg, 
      var(--red-0, #b842ad) 0%, 
      var(--highlight-purple, #d6769d) 50%,
      var(--red-0, #b842ad) 100%) !important;
    box-shadow: 0 0 10px rgba(184, 66, 173, 0.5) !important;
  }
  
}

.bangumi-item,
.bangumi-picture img,
.bangumi-info .bangumi-progress .progress-bar {
  will-change: transform, opacity !important;
}

@media (prefers-reduced-motion: reduce) {
  .bangumi-item,
  .bangumi-picture img,
  .bangumi-info .bangumi-progress .progress-bar,
  .bangumi-tab {
    transition: none !important;
    animation: none !important;
  }
}

[bangumi-progress.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
(function() {
  'use strict';
  
  function extractProgress(text) {
    if (!text) return null;
    
    const match = text.match(/(\d+)\s*\/\s*(\d+)/);
    if (match) {
      return {
        current: parseInt(match[1]),
        total: parseInt(match[2])
      };
    }
    
    return null;
  }
  
  function processProgressBar(progressContainer) {
    if (progressContainer.dataset.processed === 'true') {
      return;
    }
    
    const progressText = progressContainer.querySelector('.bangumi-progress-text');
    const progressBar = progressContainer.querySelector('.progress-bar');
    
    if (!progressText || !progressBar) return;
    
    const text = progressText.textContent || '';
    const progress = extractProgress(text);
    
    if (progress && progress.total > 0) {
      const percentage = Math.round((progress.current / progress.total) * 100);
      
      progressContainer.style.setProperty('--progress-current', progress.current);
      progressContainer.style.setProperty('--progress-total', progress.total);
      progressContainer.style.setProperty('--progress-percentage', percentage + '%');
      
      progressContainer.dataset.processed = 'true';
    }
  }
  
  function initProgressBars() {
    const progressContainers = document.querySelectorAll('.bangumi-progress');
    progressContainers.forEach(processProgressBar);
  }
  
  function createProgressInfo() {
    const progressContainers = document.querySelectorAll('.bangumi-progress');
    
    progressContainers.forEach(function(container) {
      const existingInfo = container.parentElement.querySelector('.bangumi-progress-info');
      if (existingInfo) return;
      
      const progressText = container.querySelector('.bangumi-progress-text');
      if (!progressText) return;
      
      const text = progressText.textContent || '';
      const progress = extractProgress(text);
      
      if (progress && progress.total > 0) {
        const percentage = Math.round((progress.current / progress.total) * 100);
        
        const progressInfo = document.createElement('div');
        progressInfo.className = 'bangumi-progress-info';
        progressInfo.innerHTML = `
          <span class="progress-text">
            <span class="current">${progress.current}</span>
            <span>/</span>
            <span class="total">${progress.total}</span>
          </span>
          <span class="progress-percentage">${percentage}%</span>
        `;
        
        container.parentElement.insertBefore(progressInfo, container);
      }
    });
  }
  
  let textCleaned = false;
  function cleanDuplicateText() {
    if (textCleaned) return;
    
    const infoItems = document.querySelectorAll('.bangumi-info-item:first-child');
    infoItems.forEach(function(item) {
      const labels = item.querySelectorAll('.bangumi-info-label, .bangumi-info-label-em, [class*="label"]');
      labels.forEach(function(label) {
        label.style.display = 'none';
        label.style.visibility = 'hidden';
        label.style.width = '0';
        label.style.height = '0';
        label.style.opacity = '0';
        label.style.fontSize = '0';
        label.style.lineHeight = '0';
        label.style.margin = '0';
        label.style.padding = '0';
        label.style.overflow = 'hidden';
        label.style.position = 'absolute';
        label.style.left = '-9999px';
      });
    });
    
    textCleaned = true;
  }
  
  function init() {
    cleanDuplicateText();
    createProgressInfo();
    initProgressBars();
  }
  
  function initWithRAF() {
    if (window.requestAnimationFrame) {
      requestAnimationFrame(function() {
        requestAnimationFrame(init);
      });
    } else {
      setTimeout(init, 0);
    }
  }
  
  initWithRAF();
  
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    initWithRAF();
  }
  
  if (window.pjax) {
    document.addEventListener('pjax:complete', function() {
      textCleaned = false;
      setTimeout(init, 50);
    });
  }

  window.addEventListener('load', function() {
    setTimeout(init, 100);
  });
  
  if (window.MutationObserver) {
    const observer = new MutationObserver(function(mutations) {
      let shouldInit = false;
      mutations.forEach(function(mutation) {
        if (mutation.addedNodes.length > 0) {
          mutation.addedNodes.forEach(function(node) {
            if (node.nodeType === 1 && (
              node.classList && node.classList.contains('bangumi-progress') ||
              node.querySelector && node.querySelector('.bangumi-progress')
            )) {
              shouldInit = true;
            }
          });
        }
      });
      if (shouldInit) {
        textCleaned = false;
        setTimeout(init, 50);
      }
    });
    
    if (document.body) {
      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
    } else {
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
          observer.observe(document.body, {
            childList: true,
            subtree: true
          });
        });
      }
    }
  }
})();

将两个脚本注入到内层配置文件中,使其生效

1
2
3
4
5
6
7
8
9
10
# 用于注入自定义代码 https://hexo.io/api/injector
injector:
  head_begin: # 在 <head> 标签后注入代码
  head_end: 
    - <link rel="stylesheet" href="/css/custom/bangumi-custom.css"> # 在 </head> 标签前注入代码
  body_begin: 
    - <script src="/js/custom/bangumi-progress.js"></script> # 在 <body> 标签后注入代码
  body_end: # 在 </body> 标签前注入代码
  sidebar_begin: # 在 <aside> 标签后注入代码
  sidebar_end: # 在 </aside> 标签前注入代码

搭建 PicGo + GitHub 私库 + Cloudflare 代理图床

构建用于博客资源管理的图床体系，解决图片访问速度与仓库路径暴露问题。

TIP

多数现有方案默认基于 GitHub 公共仓库实现，而私有仓库场景下需通过 Cloudflare 进行代理转发。
相关实现源码未进行细看，直接采用成熟方案完成部署。

需要注意，上述方案要求拥有已注册的顶级域名，且涉及 DNS 服务商的修改，因此额外完成了域名注册与解析配置。

说些什么吧！

waline