一直想修改butterfly主题中的首页图，首页图就是大家点进来我的博客有个满屏的背景图～一直看着静态图片蛮单调的，之前我不是做了动态壁纸嘛，然后发现添加不了就放弃了_(:з)∠)_ 然后我又不死心去搜了下，终于搜到了有人写了教程！！天哪终于找到了！就是这篇文章：Butterfly 主题设置视频为头图
看了下博主的修改代码，原来是在layout\includes\header\index.pug这里修改啊，我之前还傻傻在layout\includes\layout.pug这里修改，真是欲哭无泪……

我的Butterfly版本：4.12
如果你的版本也是4.x，基本上代码差不多，就对照代码修改就可以了。

代码修改

首先在主题配置_config.yml找到 Image (图片设置) 分类，找到index_img这行，添加你的图片地址。

~\themes\butterfly-4.12\_config.yml

# 首页图
index_img: 你的图片地址.jpg

然后找到主题目录的layout\includes\header\index.pug文件，我们将添加几处代码。

在第3行添加- var top_img = false代码，这表示禁用默认的首页图图片。

~\themes\butterfly-4.12\layout\includes\header\index.pug

if !theme.disable_top_img && page.top_img !== false
  if is_post()
    - var top_img = false
    - var top_img = page.top_img || page.cover || theme.default_top_img

然后在38行和41行处添加两个代码，video(src=后面改成你的视频地址，注意代码缩进，否则会无法显示标题文字。

~\themes\butterfly-4.12\layout\includes\header\index.pug

if !theme.disable_top_img && page.top_img !== false
header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
  !=partial('includes/header/nav', {}, {cache: true})
  if top_img !== false
    if is_post()
      - var isHomeClass = 'not-top-img'
      include ./post-info.pug
    else if is_home() 
      video(src='你的视频地址.mp4' autoplay="" loop="" muted="" style='min-height:100%;height:100%;width:100%;object-fit:cover')
      #site-info
        h1#site-title=site_title

最后我们可以在CSS样式文件中添加下面代码，这表示在低于1080P分辨率情况下会自动变成静态图片，节省下资源～

@media screen and (max-width: 767px) {
    video { 
        width: 100%;
        height: auto;
        display: none;
        background: url(图片地址.jpg);
    } 
}