Next更换背景图片或背景颜色

​ 我使用的的是Next的5.1.3版本的主题,想要更换背景颜色或者图片,在网上找了很多方法,有的建议是在custom.styl中添加一段代码,指定背景图片

body {
  background:url(/images/background.jpg);
  background-attachment: fixed;
}

​ 尝试了之后发现,在本地hexo s后背景图片可以很好地显示,但是部署到github上后背景图片就不显示了

​ 通过查看github上的css文件发现,custom.styl中的代码是加在了最后,可能这就是不显示的原因

​ 在css文件中找到body的另一段代码,通过上下关系感觉是主题样式的css代码,因为在next中有四种不同的风格模板

通过模板中的样式文件来修改背景颜色

1. 找到themes/next/sources/css/_schemes/文件夹,此文件夹下为四种模板
2. 进入你所使用的模板,打开index.styl发现模板由其他styl文件静态导入
3. 打开_brand.styl,文件中.site-meta代码段即为此模板的底层数据,修改background: $black-deep为其他颜色即可更改默认背景颜色
   1. 注意$black-deep值在themes/next/source/css/_variables中的base.styl中定义,此文件也定义了所有的基本配色

修改背景图片

1. 所要添加的背景图片先放到themes/next/sources/images或指定的url中

2. 打开themes/next/sources/css/_schemes/文件夹,打开index.styl将你要添加的代码放在后面即可,如将body代码块放入文件

   @import "_layout";
   @import "_brand";
   @import "_menu";
   @import "_sidebar";
   @import "_posts";
     
   body {
     background:url(/images/background.jpg);
     background-attachment: fixed;
   }

   1. background-attachment属性指定了背景图片的依附样式,fixed表示图片固定在背景上,不随滚动而动

3. 保存,生成,部署即可,效果如我的背景图片