Hexo-Layout 允许用户在不修改主题源码情况下对主题局部模板进行替换.

node 版本要求 >= v14

npm install hexo-layout --save

将配置写入站点的配置文件 _config.yml 里(不是主题的配置文件).

配置主要需要修改是 custom 字段, 建立原模板与新模板关系

layout:
  path: layout # 自定义模板存放文件夹, 相对于根目录
  prefix: _hexo_layout_ # 模板名称前缀, 避免与原主题中模板命名冲突
  custom:
    原模版: 新模板

参考 在线使用示例

举例:

原主题存在 _widget/archive 模块, 想要替换掉, 修改配置如下

layout:
  custom:
    _widget/archive: archive

在 layout 目录下添加 archive.ejs (也可以时任何其他渲染器支持类型文件: archive.pug archive.html 等), 在 archive.ejs 里写入新的模板即可

┌── blog
│   └── layout
│          └── archive.ejs
│   └── scaffolds
│   └── source

插件加载后, 原模版 会被替换成 我们自定义的模板, 我们自定义的模板 会 存在原模板, 所以要替换后的原模版 只需要按新的自定义模板路径加载即可

新的自定义模板路径规则 = prefix + 模板到 layout 文件夹相对路径

默认 prefix 值为 hexo_layout , 新的自定义模板路径为 hexo_layout/archive

  <%- partial('_hexo_layout_/archive') %>

在自定义模板中 也是可以引入其他自定义模板的, 在上面基础上添加个 othre.ejs

┌── blog
│   └── layout
│          └── archive.ejs
│          └── othre.ejs
│   └── scaffolds
│   └── source

在 archive.ejs 引入 othre.ejs , 路径规则和上面一样 (prefix + 模板到 layout 文件夹相对路径)

  <%- partial('_hexo_layout_/othre') %>

在 hexo server 后添加 --showlayout 参数, 会打印出当前主题注册的模板名称

hexo server --showlayout

在 devtools 可以看到添加注释信息, 通过注释标签查看 对应模块 生成的 HTML

<!--模块名 START --> 生成 HTML <!--模块名 END -->

MIT