Hexo博客搭建(7):NexT主题无custom.styl文件,如何自定义样式


我的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根目录中。

3. 致谢

NexT V7.2.0:How to change blog background?如何更改博客背景? #973

hexo个人博客 next主题添加背景图片(无custom.styl情况)


文章作者: Pamarus
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Pamarus !
评论
  目录