Butterfly一图流踩坑

网上参考了非常多的教程，基本的一图流还是很简单的，但是会发现主页头图（index-img）跟页脚一直有一个阴影遮罩，最后也是魔改去掉了。

首先，Hexo\themes\butterfly\source\css文件夹下新建css文件，如transpancy.css，在主题配置文件_config.yml（或者_config_butterfly.yml）中的inject中添加，例如：

1
2
3
4
inject:
  head:
    - '<link rel="stylesheet" href="/css/transpancy.css">'
  bottom:

文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

/* 头图透明 */
#page-header:before{
  background-color: transparent!important;
}


/* 头图透明 */
#page-header{
  background: transparent!important;
}

/* 页脚样式 */
#footer:before{
  background-color: transparent !important;   /* 页脚设置为透明 */
}

/* 页脚字体颜色 */ 
#footer-wrap {
  position: relative;
  color: #ffffff;                          
  text-align: center;
  padding: 2rem 1rem;
}

#page-header.post-bg:before {
  background-color: transparent!important;
}


 */
/*夜间模式伪类遮罩层透明*/
[data-theme="dark"]
  #footer::before{
      background: transparent!important;
    }
[data-theme="dark"]
  #page-header::before{
    background: transparent!important;
    }

这样写是有依据的，主要要根据你当前版本的样式文件进行魔改，比如我的样式文件中对头图与页脚的描述是：

Hexo\themes\butterfly\source\css\_layout目录下：

head.styl：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#page-header
  position: relative
  width: 100%
  background-color: $light-blue
  background-position: center center
  background-size: cover
  background-repeat: no-repeat
  transition: all .5s

  &:not(.not-top-img):before
    position: absolute
    width: 100%
    height: 100%
    # 我们要魔改的就是这个参数，正是0.5的透明度导致了遮罩
    #对应上面css文件中的#page-header:before部分
    background-color: alpha($dark-black, .5)
    content: ''

footer.styl中也是类似。

针对#page-header的更改是让每篇博客的top-img透明。

如果你配置完还有问题，检查主题配置文件_config.yml（或者_config_butterfly.yml）中与背景相关的设置即可。