第5篇博客: Butterfly主题一图流背景与顶部图修改

前言

本文将详细介绍个人博客背景一图流与顶部图的修改过程，大家也可以根据自己的需求或者喜欢背景的样式进行调整，博客风格因人而异
内容参考：

Android

https://android99.com/

效果如下：

欢迎阅读第5篇博客，希望你有所收获！

主题配置

修改Butterfly的配置文件_config.butterfly.yml

编辑index_img、index_top_img_height、background、footer_bg、mask.header 选项
设置网站背景，将主页顶部图和页脚背景改为透明，调整主页顶部图高度，移除顶部图的黑色半透遮罩

# Image (圖片設置)
# --------------------------------------

# The banner image of home page
index_img: transparent

# Beautify/Effect (美化/效果)
# --------------------------------------

# The height of top_img, eg: 300px/300em/300rem (主頁top_img高度)
index_top_img_height:

# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: url(网站背景地址)

# Footer Background
footer_bg: transparent

# Add mask to header or footer (为 header 或 footer 添加黑色半透遮罩)
mask:
  header: false
  footer: true

引入相关样式

在Blog\themes\butterfly\source\css下新建modify.styl文件，并增加以下内容

@import 'nib'

// 顶部图
#page-header
  background: transparent !important

  &.post-bg, &.not-home-page
    height: 280px !important
  #post-info
    bottom: 40px !important
    text-align: center
  #page-site-info
    top: 140px !important

  @media screen and (max-width: 768px)
    &.not-home-page
      height: 200px !important
    #post-info
      bottom: 10px !important
    #page-site-info
      top: 100px !important

.top-img
  height: 250px
  margin: -50px -40px 50px
  border-top-left-radius: inherit
  border-top-right-radius: inherit
  background-position: center center
  background-size: cover
  transition: all 0.3s

  @media screen and (max-width: 768px)
    height: 230px
    margin: -36px -14px 36px

  [data-theme='dark'] &
    filter: brightness(0.8)

// 页脚
#footer:before
  background-color: alpha(#FFF, .5)

  [data-theme='dark'] &
    background-color: alpha(#000, .5)

#footer-wrap, #footer-wrap a
  color: #111
  transition: unset

  [data-theme='dark'] &
    color: var(--light-grey)

之后修改Butterfly的配置文件_config.butterfly.yml，在inject.head选项引入样式

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="/css/modify.css">

Hexo会将Stylus渲染成CSS文件，所以此处应为modify.css

增加插件脚本

首先使用cheerio来解析 HTML，所以需要先安装此插件

npm install cheerio

随后新建文件，位于Blog\themes\butterfly\scripts\modify.js，引入以下内容

'use strict';
const { filter } = hexo.extend;
const cheerio = require('cheerio');

/**
 * 在页面插入新顶部图
 * @param {cheerio.Root} $ Root
 */
function insertTopImg($) {
    const header = $('#page-header');
    if (header.length === 0) return;
    const background = header.css('background-image');
    if (!background) return;
    $('#post, #page, #archive, #tag, #category').prepend(`<div class="top-img" style="background-image: ${background};"></div>`);
}

// 修改 HTML
filter.register('after_render:html', (str, data) => {
    const $ = cheerio.load(str, {
        decodeEntities: false
    });
    insertTopImg($);
    return $.html();
});