Butterfly主题魔改教程，实现一图流博客背景。


我的博客主题版本为：hexo5.4、Butterfly3.6.2

如果与我的版本不一样可能会有略微差别，届时请自行百度。

本文参考文章：Akilarの糖果屋的《Custom Beautify》文章中的透明度修改（含一图流方案）。

1.步骤一：去除背景配置

ps:最好不要使用背景美化的背景特效。

  1. 打开主题配置文件（注意：不是博客配置文件）_config.yml，按Ctrl+F快捷键弹出搜索框，输入banner关键词，将以下图片链接去掉。修改如下配置项：

    # Disable all banner image
    disable_top_img: false

    # The banner image of home page
    index_img: 

    # If the banner of page not setting, it will show the top_img
    default_top_img: transparent

    # The banner image of archive page
    archive_img:

    # If the banner of tag page not setting, it will show the top_img
    # note: tag page, not tags page (子標籤頁面的 top_img)
    tag_img:

    # The banner image of tag page
    # format:
    #  - tag name: xxxxx
    tag_per_img:

    # If the banner of category page not setting, it will show the top_img
    # note: category page, not categories page (子分類頁面的 top_img)
    category_img:

    # The banner image of category page
    # format:
    #  - category name: xxxxx
    category_per_img:

  2. 搜索关键词background, 将颜色设置为：

    # Website Background (設置網站背景)
    # can set it to color or image (可設置圖片 或者 顔色)
    # The formal of image: url(http://xxxxxx.com/xxx.jpg)
    background: url(/img/banner.jpg) # 修改为自己的图片

    # Footer Background
    footer_bg: transparent

2.步骤二：引入魔改样式，修改CSS样式

  1. 引入魔改样式的方法很简单，自建一个css文件，然后引入即可：

    以butterfly主题为例，可以在[博客根目录]\themes\butterfly\source\css\目录下新建custom.css文件，然后在[博客根目录]\themes\butterfly\_config.yml的inject配置项中引入自定义样式文件。

    inject:
      head:
        - <link rel="stylesheet" href="/css/custom.css"  media="defer" onload="this.media='all'">

    其中media="defer" onload="this.media='all'"是异步加载配置项，确保自定义样式会在页面加载完成后才继续渲染。如果没有需求或效果不好可以不加这个。

  2. 对于页面的透明度配置有多种方案，此处讨论三种：

    点击查看方案

    1. background: rgba(255,255,255,0.5);

      background属性的配置应该算是我们最期望的效果了，它只会使被添加了的该属性的页面元素背景变得透明，而不会对这一页面元素下的其他元素(包括div、span、p、a等任何标签)有任何影响。一般用来对文章内容或页面卡片添加透明度。这样可以保证字体不会变透明

      /* 首页文章卡片 */
      #recent-posts > .recent-post-item{
          background:rgba(255, 255, 255, 0.9);
      }
      /* 首页侧栏卡片 */
      .card-widget{
        background:rgba(255, 255, 255, 0.9)!important;
      }
      /* 文章页面正文背景 */
      div#post{
        background: rgba(255, 255, 255, 0.9);
      }
      /* 分页页面 */
      div#page{
        background: rgba(255, 255, 255, 0.9);
      }
      /* 归档页面 */
      div#archive{
        background: rgba(255, 255, 255, 0.9);
      }
      /* 标签页面 */
      div#tag{
        background: rgba(255, 255, 255, 0.9);
      }
      /* 分类页面 */
      div#category{
        background: rgba(255, 255, 255, 0.9);
      }

    2. opacity: 0.5;

      opacity定义的是全局的透明度，会影响添加该属性的页面元素及其下属元素。

      #footer{
        opacity: 0.5;
      }

    3. background: transparent;

      这一属性会让定义了该属性的页面元素背景变完全透明，但不会影响下属元素，效果等同于background:rgba(255,255,255,0)。
      实例：定义头图或页脚全透明以实现一图流。

      /* 页脚透明 */
      #footer{
        background: transparent!important;
      }
      /* 头图透明 */
      #page-header{
        background: transparent!important;
      }
      /*top-img黑色透明玻璃效果移除，不建议加，除非你执着于完全一图流或者背景图对比色明显 */
      #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;
          }

  3. 我的博客一图流css样式设置如下，修改custom.css文件：

    /* 首页文章卡片 */
    #recent-posts > .recent-post-item{
      background:rgba(255, 255, 255, 0.8);
    }
    /* 首页侧栏卡片 */
    .card-widget{
    background:rgba(255, 255, 255, 0.8)!important;
    }
    /* 文章页面正文背景 */
    div#post{
    background: rgba(255, 255, 255, 0.8);
    }
    /* 分页页面 */
    div#page{
    background: rgba(255, 255, 255, 0.8);
    }
    /* 归档页面 */
    div#archive{
    background: rgba(255, 255, 255, 0.8);
    }
    /* 标签页面 */
    div#tag{
    background: rgba(255, 255, 255, 0.8);
    }
    /* 分类页面 */
    div#category{
    background: rgba(255, 255, 255, 0.8);
    }

    /* 页脚透明 */
    #footer{
      background: transparent!important;
    }
    /* 头图透明 */
    #page-header{
      background: transparent!important;
    }
    /*白天模式伪类遮罩层透明*/
    [data-theme="light"]
      #footer::before{
          background: transparent!important;
        }
    /*夜间模式伪类遮罩层透明*/
    [data-theme="dark"]
      #footer::before{
          background: transparent!important;
        }
    [data-theme="dark"]
      #page-header::before{
        background: transparent!important;
        }
    /*夜间模式页面背景设置为半透明*/
    [data-theme="dark"]
      div.recent-post-item{
          background: rgba(0, 0, 0, 0.5)!important;
        }
    [data-theme="dark"]
      #aside-content .card-widget{
          background: rgba(0, 0, 0, 0.5)!important;
        }
    [data-theme="dark"]
      div#post{
        background: rgba(0, 0, 0, 0.5)!important;
        }
    [data-theme="dark"]
      div#page{
        background: rgba(0, 0, 0, 0.5)!important;
        }
    [data-theme="dark"]
      div#archive{
        background: rgba(0, 0, 0, 0.5)!important;
        }
    [data-theme="dark"]
      div#tag{
        background: rgba(0, 0, 0, 0.5)!important;
      }
    [data-theme="dark"]
      div#category{
        background: rgba(0, 0, 0, 0.5)!important;
      }
      
    /*阅读模式*/
    .read-mode #aside-content .card-widget{
          background: rgba(158, 204, 171, 0.5)!important;
        }
    .read-mode div#post{
        background: rgba(158, 204, 171, 0.5)!important;
        }
    /*夜间阅读模式*/
    [data-theme="dark"]
      .read-mode #aside-content .card-widget{
            background: rgba(0, 0, 0, 0.5)!important;
            color: #eeeeee;
          }
    [data-theme="dark"]  
      .read-mode div#post{
          background: rgba(0, 0, 0, 0.5)!important;
          color: #eeeeee;
          }

如有错误，欢迎评论区留言！