Next-Mist 主题最上面一栏的默认背景是灰色的,略微有些淡。想要更换这张图片可按以下步骤操作。

Hexo-Next-Mist主题头部顶栏背景图片设置

Next-Mist 主题最上面一栏的默认背景是灰色的,略微有些淡。想要更换这张图片可按以下步骤操作。

设置好的效果 Yeureka’s study

图片存放位置

选择一张心仪的图片),命名为 background.jpg,放到 source 文件夹下的 image 文件夹内。

1
Hexo\source\image

图片大小我选择的是“50厘米*5厘米”,太小的话无法覆盖整个背景。

背景图片设置

找到如下位置:

1
hexo\themes\next\source\css\_schemes\Mist\_header.styl

打开 _header.styl,将第一行 background: 后的内容改为如下形式:

1
.header { background: url('../image/background.jpg'); }

保存,重新生成网页即可。

以图床上的图片作为背景

url() 内的链接可以是绝对地址的形式。因为我的静态博客在 github 上面,打开比较慢,所以将背景图片放到图床上以提高打开速度。设置形式如下:

1
.header { background: url('http://xx.xx.xx.com/hexo/image/header-backgroud.jpg'); }

设置了图床以后,每次打开博客都是图片最先刷出来。囧( ╯□╰ )