前言

为每一篇文章选择一个好看的封面不是一件容易的事,尤其当文章数量很多的时候。比如我只是把博客当成一个随机记录知识点的地方,这样更新频率就很高,犯不上给每一篇文章选择封面,所以把首页展示封面给关掉了。但是点进文章的时候,还是有个顶图比较好。

于是我就想采用二图流解决问题,只用准备两张图片,每次也不主动设置,浅色模式一个顶图,深色模式一个顶图,让它自动检测更换。

效果展示

夜间:

image-20230110213153407

日间:

image-20230110213238921

因为只是见到到默认图片才进行改动, 所以如果在一篇文章的front-matter主动设置一个cover项的话,还是可以展示设置的cover,不设置就用默认的两张图。

教程

设置主题配置文件

_config.butterfly.yml中选择如下设置:

1
2
3
4
5
6
7
8
9
10
11
cover:
# display the cover or not (是否顯示文章封面)
index_enable: false
aside_enable: false
archives_enable: false
# the position of cover in home page (封面顯示的位置)
# left/right/both
position: right
# When cover is not set, the default cover is displayed (當沒有設置cover時,默認的封面顯示)
default_cover: https://eamonimgbed.oss-cn-beijing.aliyuncs.com/cover/default_top_dark.webp

重点是default_cover那一项,放上自己想要的夜间模式的图片地址,注意一定要是完整的url,不要写相对路径。

编写js文件

在你自定义的js文件中补充以下内容:

1
2
3
4
5
6
7
//根据日间和夜间模式自动更换默认封面
var zzz= $("#page-header").css("background-image");
//if括号里面的url内容写刚才的夜间模式默认封面的地址,下面return后面的url写日间模式默认封面的地址
if(zzz == 'url("https://eamonimgbed.oss-cn-beijing.aliyuncs.com/cover/default_top_dark.webp")' && (document.documentElement.getAttribute('data-theme') === 'light')
{
$("#page-header").css("background-image",function(){return 'url("https://eamonimgbed.oss-cn-beijing.aliyuncs.com/cover/default_top_light.webp")'})
}

引入js

_config.butterfly.ymlinject上面的js,因为用了一点Jquery,所以在记得也要引入Jquery的库。

1
2
3
inject:
head:
- <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

然后部署就可以啦。可能存在切换时闪一下的bug,我准备的两张图是只有颜色不一样的。本人不是很懂JS,大佬们可以自己修改一下。