我的Hexo博客主题版本是 v4.2.0,NexT主题版本是 v7.8.0,没有 next/source/css/_custom/
文件夹和 custom.styl
文件,而网上很多教程都是在这个 custom.styl
文件中添加自定义CSS代码,针对这种情况,搜索查看了一些文章和官方issues,找到了新版本自定义CSS代码的方法。
注:如何查看Hexo博客和NexT主题版本
分别在博客文件夹和主题文件夹中,找到并打开
package.json
文件,即可看到版本信息,如下:
"name": "hexo-theme-next",
"version": "7.8.0",
"hexo": {
"version": "4.2.0"
},
1. 问题
在参考网上文章配置博客网页端显示样式时,发现教程中都是说在~next/source/css/_custom/custom.styl
文件中添加CSS代码。但我的NexT文件夹中并没有这个文件。
2. 解决方法
使用自定义CSS的方法:
- 在主题配置文件
_config.yml
中找到custom_file_path
,如下
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl
- 按照提示,新建
~blog/source/_data
文件夹,再在文件夹内新建styles.styl
文件。 - 将
style: source/_data/styles.styl
前的#号删掉,使其生效。
之后将自定义样式的代码放在这个文件中即可。
注意:
~blog/source/_data
文件夹和styles.styl
文件是在blog根目录中新建,而不是在next根目录中。