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 百小时飞行员
- 先从读开发组的开发手册开始吧
- 噼里啪啦
- (打开手册,开始翻阅->😵)
- 这都是些啥
- 决定还是询问下群里大佬
|