【博客搭建】_博客预览和部署时背景不同

发表于 | 分类于

【博客搭建】_博客预览和部署时背景不同

问题：hexo next主题博客预览和部署不一样，背景图片加载不出来的问题

思路：通过浏览器F12查看预览和部署时，执行的代码、执行的文件有什么不一样

经过对比发现，部署时的main.css文件比预览时的main.css文件少了几百行，其中就少了背景图片的加载和设置部分代码。仔细观察可以发现少掉的这部分代码其实就是我们自己创建和添加的博客主题next/source/css/_costom/costom.styl文件中的代码。

1
2
3
4
5
6
7
body {
  background: url("/images/background.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
  background-size: cover;
}

也就是说在预览时，浏览器直接在本地帮我们把_common、_custom、__mixins、_schemes、_variables五个文件夹中的styl格式文件代码合在一起生成main.css文件。

而在部署时，hexo g生成博客文件时，服务器就要通过博客主题next/source/css/main.styl文件来生成main.css文件。打开博客主题next/source/css/main.styl文件我们发现最后加载costom.styl文件的代码为

1
2
3
// Custom Layer
// --------------------------------------------------
@import "_custom/custom";

表示加载一个名为custom的文件夹中的文件，此处明显有误，多了一层文件夹，所以我们把这一句改成

1
@import "_custom/custom.styl";

再重新部署就可以了，浏览器调试可以看到预览和部署时的main.css文件内容也一样了。