Hexo框架(十七):更换博客背景图片及图片压缩

博客背景我也是很早之前就配置过了,不过之前一直觉得博客加载很慢,中途有段时间又去掉了背景图片,包括动态背景什么的都去掉了,毕竟加载速度实在太影响使用体验了。最近检查了一下,发现是因为图片资源的原因导致加载速度太慢,这里简要记录一下。

更换背景图片

这个我也说过很多次了,我是用数据文件的方式进行配置,详情参考我之前的文章。

source/_data/style.styl文件中添加:

1
2
3
4
5
6
7
8
9
// 背景
body {
background-image:url(../images/bg.webp);
height:100%;
width:100%;
background-repeat:repeat-x;
background-attachment:fixed;
background-size:cover;
}

background-image 就是你的背景图啦。

因为懒得去themes/next/source/images 文件夹下添加图片,所以我所有的自定义的图片资源都放在了hexo/source/images文件下,当然啦,本来是没有这个文件夹的,但是我们自己新建一个就好啦!

设置透明度

不设置一点透明度的话,我觉得白色的背景还是很突兀,而且完全看不到背景啊,所以我们继续在source/_data/style.styl文件中添加代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//侧边框的透明度设置
.sidebar-inner {
background: rgba(255,255,255,0.8);
}

//菜单栏的透明度设置
.header-inner {
background: rgba(255,255,255,0.8);
}

//搜索框(local-search)的透明度设置
.popup {
opacity: 0.8;
}

这样就好啦!

压缩图片

图片资源真的是在是太影响加载速度了,不过把图片压缩就好啦,别看我这么大一张背景图,其实只有7kb大小。加载起来就很快啊!

背景图片

方法也很简单啊,图片格式我们使用webp,不建议使用png或者jpg。

我们只需要简单转换一下就好啦,你可以点击 这里 来进行转换。

注意哦:webp图片存在兼容性问题哦,详情:图片自适应webp格式

------ 本文结束  感谢阅读 ------