Next主题个性化之自动更换背景图片

Next主题个性化之自动更换背景图片

如果觉得next的空白主题看腻了或者太多人用觉得不够个性化,那么不妨试试自动更新背景图片(简单且酷)。

实现的原理:调用了网站的接口。
自动更换背景的实现是修改添加背景的css样式实现。图片来源是 :https://source.unsplash.com/

这个网站,里面不仅免费提供了很多高清美图,而且还提供api接口调用,实在是良心。

1 .修改背景样式

修改themes\next\source\css\ _custom\custom.styl文件,这个是Next故意留给用户自己个性化定制一些样式的文件,添加以下代码:

body {
background:url(https://source.unsplash.com/random/1600x900);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}
如果自己不喜欢这个网址提供的图片做背景,那么修改url()里面的路径即可。repeat、attachment、position就是调整图片的位置,不重复出现、不滚动等等。

2.修改不透明度

完成这一步其实背景就会自动更换了,但是会出现一个问题,因为next主题的背景是纯透明的,这样子就造成背景图片的影响看不见文字,这对于博客来说肯定不行。

那么就需要调整背景的不透明度了。同样是修改themes\next\source\css\ _custom\custom.styl文件。在后面添加如下代码

body {
background:url(https://source.unsplash.com/random/1600x900);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}

.content-wrap {
opacity: 0.86;
}

(实际需要根据选择的主题来添加)

然后 hexo clean hexo g hexo d 便可以实现了

参考链接:https://blog.csdn.net/mango_haoming/article/details/78473243

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

本文标题:Next主题个性化之自动更换背景图片

文章作者:Hou Linchao

发布时间:2018年01月25日 - 20:14

原始链接:https://linchao1002.github.io/2018/01/25/Next主题个性化之自动更换背景图片/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请我吃辣条吧~~ 谢谢打赏
0%