Hexo 编写插件配置实现图片标题,提示块,版权说明等

 
软件研究=) › 服务器维护&配置der日常

我的博客几年前从 wordpress 迁出后, 就一直在使用 Hexo 框架.
不得不说 Hexo 确实非常省心, 我也还算成功地将主要精力集中在了内容创作上, 写了不少文章.
SSG 生成的静态页面直接托管到 Cloudflare Pages/GitHub Pages/Vercel 中任意一个, 就能实现免维护还免费的个人博客了.

最近心血来潮, 重新设计了一下我博客的主页, 关于页, 同时换到了新的 Cactus 主题, 在迁移中还是发现了新旧参半的一些小问题, 本文主要记录其中可能有一定通用性的解决方案, 一些根据个人偏好改 css 之类的琐事就不再赘述.
虽然 Hexo 及其主题用的是我不太熟悉的 ejs 和 stylus 框架, 只能改改简单的 bug, 但 Hexo 的插件脚本还是普通的 js, 比较容易上手.
Hexo 的所有插件以文件的形式写在博客根目录的 scripts/xxx.js 中即可, Hexo 会自动识别.

添加图片标题

在本博客以前的 Fluid 主题下, 图片下方会显示图片对应的标题, 类似下面这样:

我之前写博客时已经添加了不少这样的标题, 但 cactus 没有选项启用这个图片标题.

于是按照 Hexo 的 Extension API 写了如下脚本, 注册一个 post 渲染成 HTML 以后的 Hook, 此时正则匹配 img 标签, 往后追加一个 caption 说明即可.

1
2
3
4
5
6
7
hexo.extend.filter.register('after_post_render', function(data) {
  var className = 'image-caption';
  if (data.layout == 'post' || data.layout == 'page' || data.layout == 'about') {
    data.content = data.content.replace(/(<img [^>]*alt="([^"]+)"[^>]*>)/g, '$1' + '<span style="text-align: center; display:block; color: grey;" class="' + className + '">$2</span>');
  }
  return data;
});

与 Markdown 兼容的提醒块

Fluid 主题中, 可以使用 {% note success/info/warning... %}` 和 `{% endnote %} 块包裹一段文本, 实现下面的效果:

原版 Fluid 的 note 块原版 Fluid 的 note 块

然而, 这个语法在我迁移到 cactus 后直接导致了生成错误, 因为 Hexo 不知道这个块该如何处理. 当然对于大部分 Markdown 编辑器, 也只能显示原本的内容, 不能正确地渲染标签.

有一些插件可以以各种不同的语法重新加入 Fluid 中的提醒块效果, 但和 Markdown 都不兼容, 并不理想.

我经过一番[搜索](How can I create a text box for a note in markdown?), 选择了 > ℹ️和> ⚠️这种方案. 也就是我直接在博客中写入 > ℹ️这是一条提醒, 在原版 Markdown 中会被渲染成正常的引用块:

原版 Markdown 效果原版 Markdown 效果

我再编写 Hexo 插件, 如果识别到这样的引用块, 就替换成更好看的形式, 如下:

这是一条提醒

具体代码全文较长, 关键部分是使用正则匹配 Markdown 文件中的 > ℹ️和> ⚠️, 并替换成对应的 div + css:

1
2
3
4
5
6
7
8
9
10
11
var md = require('marked').marked;

hexo.extend.filter.register('before_post_render', function(data) {
  let regex = />\s?(ℹ️|⚠️)((.|\n)*?)(?=\n\n|$)/gs;
  data.content = data.content.replace(regex, (match, p1, p2) => {
    let content = p2.replace(/^>\s?/gm, '').trim();
    let type = p1.trim() === 'ℹ️' ? 'info' : 'warning';
    return `<style>${style}</style><div class="admonition ${type}">${md.parse(content)}</div>`;
  });
  return data;
}, 10);

如此便实现了效果好看, 且和原版 Markdown 兼容的提示块效果.

版权提示

我写的文章选择使用 CC BY-NC-SA 4.0 发布, 所以可以在每篇文章末尾加个说明, 顺便也能放个打赏链接. 这个功能 cactus 也没有, 但自己实现起来非常简单:

1
2
3
4
5
hexo.extend.filter.register('before_post_render', function(data) {
  if (data.layout != "post") return data;
  data.content = data.content + '\n\n>  ℹ️ 本文采用 CC BY-NC-SA 4.0...\n\n'
  return data;
}, 5);

本文采用 CC BY-NC-SA 4.0 许可协议发布.

作者: lyc8503, 文章链接: https://blog.lyc8503.net/post/hexo-config-plugin/
如果本文给你带来了帮助或让你觉得有趣, 可以考虑赞助我¬_¬