设置博客背景图片

发表于 更新于 分类于 阅读次数： Changyan：

我一直使用的是Next的主题，这个主题默认是可以自定义一些样式的。

添加图片

首先选择一张心仪的背景图片，添加到themes/next/source/images/xx.jpg。我建议图片的大小最好控制一下，最好控制在400k-500K左右，动辄几兆大小的背景图片网页加载起来会很吃力，非常影响实际体验。

取消注释

然后需要打开这个开关，也就是取消style这个注释

折叠代码
1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

创建文件

取消注释以后，创建这样的一个文件source/_data/styles.styl，需要注意的是，这个source是站点目录下的source，而不是主题目录下的source。

创建好之后，在文件插入以下代码：

1
2
3
4
5
6
body {
  background:url(/images/xx.jpg);
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position:100% 100%;
}
  • background:url 为图片路径，也可以直接使用链接。
  • background-repeat：若果背景图片不能全屏，那么是否平铺显示，充满屏幕
  • background-attachment：背景是否随着网页上下滚动而滚动，fixed 为固定
  • background-size：图片展示大小，这里设置 100%，100% 的意义为：如果背景图片不能全屏，那么是否通过拉伸的方式将背景强制拉伸至全屏显示。

重新生成一下配置，就会出现效果了。

补充

已经取消注释的文件对应的功能和教程链接。

文件 功能
footer 背景”小飞棍”
bodyEnd 折叠代码
variable 设置圆角
style 背景图片、博客透明度、折叠代码