Hexo-fluid 主题美化2

注意

本文中的 “博客配置” 指的 Hexo 博客目录下的 _config.yml。

“主题配置” 指的是 theme/fluid/_config.yml 或者 _config.fluid.yml 。

注意区别

使用npm安装的，主题文件在node_modules\hexo-theme-fluid

Fluid 注入代码

Fluid 主题也提供了一套注入代码功能，相较于 Hexo 注入功能更细致更丰富，并且支持注入 ejs 代码。

如果你想充分修改主题，又不想直接修改源码影响日后更新，本主题提供了代码注入功能，可以将代码无侵入式加入到主题里。

你可以直接注入 HTML 片段，不过建议你了解一下 EJS 模板引擎 (opens new window)，这样你就可以像主题里的 ejs 文件一样编写自己的组件再注入进去。

进入博客目录下 scripts 文件夹（如不存在则创建），在里面创建任意名称的 js 文件，在文件中写入如下内容：

hexo.extend.filter.register('theme_inject', function(injects) {
  injects.header.file('default', 'source/_inject/test1.ejs', { key: 'value' }, { cache: true }, -1);
  injects.footer.raw('default', '<script async src="https://xxxxxx" crossorigin="anonymous"></script>');
});

参考

[^1]: 进阶用法 | Hexo Fluid 用户手册 (fluid-dev.github.io)