It has been 830 days since the last update, the content of the article may be outdated.

【Hexo】博客一图流

以下 [blogRoot] 为你的博客根目录

  1. 在 [BlogRoot]\source 文件夹下新建一个文件夹 css，该文件夹用于存放自定义的 css样式，再新建一个名为 custom.css，在里面写入以下代码：

    css
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    /* 页脚与头图透明 */
    #footer {
      background: transparent !important;
    }
    #page-header {
      background: transparent !important;
    }

    /* 白天模式遮罩透明 */
    #footer::before {
      background: transparent !important;
    }
    #page-header::before {
      background: transparent !important;
    }

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

  2. 在主题配置文件 [BlogRoot]\_config.butterfly.yml 文件中的 inject 配置项的 head 子项加入以下代码，代表引入刚刚创建的 custom.css 文件（这是相对路径的写法）

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

  3. 在主题配置文件 [BlogRoot]\_config.butterfly.yml 文件中的 index_img 和 footer_bg 配置项取消头图与页脚图的加载项避免冗余加载

    yml
    1
    2
    3
    4
    5
    # The banner image of home page
    index_img: 

    # Footer Background
    footer_bg: false

  4. 如果一图流改完了背景图也没了，那大概率是你之前没设置背景图。在主题配置文件 [BlogRoot]\_config.butterfly.yml 文件中的 background 配置项设置背景图

    yml
    1
    background: url(https://source.fomal.cc/img/home_bg.webp)