再次升级Next 8.x主题


theme-next已经不在维护了,所以最近换成了next-theme,后续的所有有关于next主题的优化,版本都是8.X的,这里记录一下next中对各个自定义文件的使用

由于最新版本的hexo-cli的模板不在支持.swig.所以next主题的模版文件也都换成了.njk

安装的部分我就不做重复了,之前的博客有介绍,现在说一下和之前的不同

自定义备用主题

新版的hexo-cli支持备用主题,所以我们就不在原来的主题中的_config.yml做修改了,可以直接在根目录下创建 _config.next.yml, 这样配置会优先使用我们自己自定义的主题配置

自定义文件位置

source/_data 目录下创建需要自定义的文件,后续都放在这个目录下。例如:

source/_data/
├── head.njk
├── header.njk
├── body-end.njk
├── sidebar.njk
├── footer.njk
├── post-meta.njk

自定义CSS

在 source/data 目录下创建一个 styles.styl 文件,并添加你想要的自定义样式。例如

1
2
3
4
body {
background-color: #f5f5f5;
}

Next 主题允许我们通过 _config.yml 文件中的 custom_file_path 选项来引用自定义文件

1
2
custom_file_path:
style: source/_data/styles.styl

主要全局都可以用到这个样式了

自定义组件

我们需要在 Hexo 项目的 source/_data 目录下创建一个自定义 footer.njk 文件,并添加你的自定义内容:

1
2
3
4
<div>
<p>© 2024 Your Name. All rights reserved.</p>
<p>Built with Hexo & Next Theme</p>
</div>

Next 主题允许我们通过 _config.yml 文件中的 custom_file_path 选项来引用自定义文件

1
2
custom_file_path:
footer: source/_data/footer.njk

这时候就会发现,footer加入了我们的自定义文件

后续会持续更新next的优化

以上就是我对next中对各个自定义文件使用的理解,如有错误,欢迎大佬指出

-------------本文结束感谢您的阅读-------------