HEXO - Butterfly 主题的一图流

參考

步骤一：去除背景配置
ps: 最好不要使用背景美化的背景特效。

打开主题配置文件（注意：不是博客配置文件）_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:

搜索关键词 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

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

引入魔改样式的方法很简单，自建一个 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’” 是异步加载配置项，确保自定义样式会在页面加载完成后才继续渲染。如果没有需求或效果不好可以不加这个。

我的博客一图流 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;
      }