Why
因为觉得hexo post的图片排版太烂了，手打html插入图片又很烦，于是乎决定写一个hexo的插件，能够通过一些关键字，识别图片组，然后再把这些图片以照片墙的方式组合在一起。
顺带可以了解一下hexo的渲染管道和javascript。
How
Hexo 渲染顺序
初始化阶段：
- Hexo 读取配置文件和初始化插件。
- 加载主题和其配置文件。
内容处理阶段：
- before_generate：生成前触发，可用于在生成前进行一些准备工作。
- before_post_render：在文章渲染之前触发，可用于在文章内容渲染之前对其进行修改。
- after_post_render：在文章渲染之后触发，可用于在文章内容渲染之后对其进行修改。
- before_exit：Hexo 退出前触发，可用于在退出前进行一些清理工作。
生成阶段：
- 生成静态文件，包括 HTML、CSS、JavaScript 等。
- 将内容写入 public 目录。
部署阶段：
我们需要做的就是在内容处理阶段，重新生成图片墙部分的html代码。
Hexo Filter
过滤器的工作原理
过滤器是通过 hexo.extend.filter.register() 方法来注册的。每个过滤器都绑定在特定的生命周期事件上，当这些事件触发时，Hexo 会依次执行所有注册在该事件上的过滤器。
- before_generate：生成站点之前触发。
- before_post_render：在文章内容渲染之前触发。
- after_post_render：在文章内容渲染之后触发。
- before_exit：Hexo 进程退出之前触发。
- after_render：HTML 内容渲染之后触发。
- after_render：CSS 内容渲染之后触发。
- after_render：JavaScript 内容渲染之后触发。
1
2
3
4
5
| hexo.extend.filter.register('after_post_render', function(data) {
data.content = data.content.replace(/<img src="http:\/\/(.*?)"/g, '<img src="https://$1"');
return data;
});
|
过滤器的返回值
- 对于大多数过滤器函数，需要返回处理后的数据。例如，
after_post_render 过滤器需要返回修改后的文章内容。
- 某些过滤器（如
before_exit）不需要返回值。
实现
首先创建一个存放插件的文件夹，我放在hexo_root/plugins/hexo-photo-wall
文件夹中创建一个js入口文件index.js
文件中注册filter并且实现替换功能
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
| hexo.extend.filter.register('before_generate', () => {
console.log('This is my custom Hexo plugin!');
});
hexo.extend.filter.register('before_post_render', function(data) {
const startTag = '此处的照片墙的排版和原本应该并没有区别，只是处于同一个class="picture-wall"的div下。后续需要通过修改css或者直接更改html来实现照片墙的效果。 Posted Updated Note2 minutes read (About 284 words) ECE3730J RC3_LAB4  For this RC, we will go through Lab 4 in detail. Posted Updated Note5 minutes read (About 757 words) ECE3730J RC2 Posted Updated Notea few seconds read (About 75 words) ECE3730J RC2_Input_Capture  IC is a peripheral that can monitor the input signal change (pos/neg edge) independent of the processor (Core). Posted Updated Notea few seconds read (About 52 words) ECE3730J RC2_Output_Compare  OC is a peripheral that can generate precise output signal independent of the processor (Core). Posted Updated Note2 minutes read (About 241 words) Mod 猫meme CUT1 Script Script感觉比起来边剪边想词，先把脚本写下来会更有效率
- 和围攻群友快乐空战
- 呀，鼠了
- 问答：
问：那个围攻不是个中世纪游戏吗
答：对
问：那为什么可以玩空战
答：沙盒玩家 和一些中世纪魔法
- 但中世纪终归是有极限的
- 好想体验原汁原味的现代空战啊
- 浏览创意工坊。。。
- 希望可以找到大佬做的空战mod
- 。。。
- 虽然有导弹mod
- 但是没有雷达和航电
- 总感觉缺了点什么
- 既然如此
- 只能我自己写啦
- 精通c/cpp的复制粘贴-熟读数据结构和算法-dcs Su25T 百小时飞行员
- 先从读开发组的开发手册开始吧
- 噼里啪啦
- （打开手册，开始翻阅->😵）
- 这都是些啥
- 决定还是询问下群里大佬
|
/FxkrbKwOGoAGYyxbrI5c3fDznSf.png)
