注意看，这个小哥正在…

---

---

有一些同学在配置主题配着配着发现一到上传即开始报错
那么这个报错除了全局配置文件_config.yml和主题配置文件_config.butterfly.yml出错外，其余文件代码敲错，导致报错问题微乎其微。
主要观察那两个配置文件，大不了就ctrl+Z回退重新配置

---

---

这篇文章是关于顶部图的问题。

修改前

文件有点大，上链接
https://img1.imgtp.com/2022/08/22/HTovUfOo.gif
再来一张修改前的
https://img1.imgtp.com/2022/08/22/ie0a0Yc1.gif

修改后

https://img1.imgtp.com/2022/08/22/ptEYTZOd.gif
当我们开始什么都不配置，默认顶部图是有颜色的，当然你要是禁用顶部图就什么事情没有，就不用看这篇文章。
熟悉此主题的应该知道，顶部图会自动根据文章的cover进行自动引入背景图片。
这就导致了当我们用全局css样式时，是无法禁用这个自动渲染出来的背景图的。
虽然最后还是会编程透明背景，但是由于网速等等原因，只是透明色遮挡了那张图，网慢的话体验很不好，那张图片可能来不及遮盖。处女座表示受不了

修改[Blog]\themes\butterfly\layout\includes\header\index.pug

此文件动态生成顶部图区域，原始完整代码 修改后：

if !theme.disable_top_img && page.top_img !== false
  if is_post()
    - var top_img = page.top_img || page.cover || page.randomcover
  else if is_page()
    - var top_img = page.top_img || theme.default_top_img
  else if is_tag()
    - var top_img = theme.tag_per_img && theme.tag_per_img[page.tag] 
    - top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
  else if is_category()
    - var top_img = theme.category_per_img && theme.category_per_img[page.category]
    - top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)
  else if is_home()
    - var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
  else if is_archive()
    - var top_img = theme.archive_img !== false ? theme.archive_img || theme.default_top_img : false
  else
    - var top_img = page.top_img || theme.default_top_img

  if top_img !== false
去掉此处：    - - var imgSource = top_img && top_img.indexOf('/') !== -1 ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
去掉此处：    - - var bg_img = top_img ? imgSource : ''
    - var site_title = page.title || page.tag || page.category || config.title
    - var isHomeClass = is_home() ? 'full_page' : 'not-home-page'
    - - is_post() ? isHomeClass = 'post-bg' : isHomeClass
  else
    - var isHomeClass = 'not-top-img'
else
  - var top_img = false
  - var isHomeClass = 'not-top-img'
  - 
下面这一行去掉style=bg_img，这是生成背景图的元凶
header#page-header(class=isHomeClass style=bg_img)
  !=partial('includes/header/nav', {}, {cache: true})
  if top_img !== false
    if is_post()
      include ./post-info.pug
    else if is_home() 
      #site-info
        h1#site-title=site_title
        if theme.subtitle.enable
          - var loadSubJs = true
          #site-subtitle
            span#subtitle
        if(theme.social)
          #site_social_icons
            !=fragment_cache('social', function(){return partial('includes/header/social')})
      #scroll-down
        i.fas.fa-angle-down.scroll-down-effects
    else
      #page-site-info
        h1#site-title=site_title
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
42
43
44
45
46
47
48
49
50
51

只需修改里面的一小部分代码逻辑即可，去掉生成加载背景图的代码块即可

由于还有一个默认顶部图颜色，所以还有需要修改的：

[blog]\themes\butterfly\source\css_layout\head.styl

这个控制头部css的随便改，反正已经设置顶部图透明了直接有关于color的属性都注释掉就行