前言

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

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

效果展示

夜间：

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.yml中inject上面的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，大佬们可以自己修改一下。