hexo博客一图流

实现效果展示

头部背景与主体部分背景无缝连接
upload successful

实现方法

通过开启butterfly主题留下的inject模块功能

添加css代码

先在主题的css文件夹中创建custom.css文件

1
cd themes/butterfly/source/css/

upload successful

编辑让顶部背景和页脚背景透明的css文件
vim custom.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#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;
}

_config.yml中开启inject部分功能

将head部分注释取消
upload successful

更换背景

vim搜索背景，更换background

1
vim /hexo/themes/butterfly/_config.yml

upload successful

效果实现

启动hexo查看效果

1
2
3
hexo clean
hexo g
hexo s

刷新页面
upload successful

文章封面

封面

修改部分为：

1
2
3
4
5
6
7
8
9
10
11
12
13
vim themes/butterfly/_config.yml

cover:
  #display the cover or not (是否顯示文章封面)
  index_enable: false	#首页
  aside_enable: false	#侧边
  archives_enable: false#归档
  #the position of cover in home page (封面顯示的位置)
  #left/right/both
  position: both
  #When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover: 
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

分页

分页，也就是文章内中显示的下一页上一页按钮，可通过配置文章封面显示图片，也可以通过设置主题色改变其颜色。

置顶文章滚动页

NPM 插件安装

1
npm i hexo-swiper-bar --save

新增网站根目录_config 配置项 (不是主题的)

添加以下代码

1
2
3
4
5
6
7
8
9
10
swiper:
  enable: true
  priority: 2
  enable_page: /
  layout:
    type: id
    name: recent-posts
    index: 0
  temple_html: '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container">${temple_html_item}</div></div>'
  plus_style: ""

相关含义小冰老师解释的很详细
https://zfe.space/post/hexo-swiper.html

最后在文章中加入以下内容

1
2
3
swiper_index: 8
swiper_desc: 简单好用的 hexo 博客文章置顶插件！
swiper_cover: /images/letter/p.png

最后一行可不写，默认使用文章封面

看板娘

添加代码

  1. 打开主题配置文件\hexo\themes\butterfly\_config.yml，inject部分添加代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    inject:
      head:
        - <link rel="stylesheet" href="/css/custom.css">
      bottom:
        - |
          <script src="https://cdn.jsdelivr.net/npm/live2d-widget@latest/lib/L2Dwidget.min.js"></script>
          <script>
            L2Dwidget.init({
              model: {
                jsonPath: 'https://raw.githubusercontent.com/iCharlesZ/vscode-live2d-models/master/model-library/girls-frontline/HK416-2/normal/model.json'
              },
              display: { position: 'right', width: 250, height: 320 },
              mobile: { show: false }
            });
          </script>
    • 上面使用的是HK416-2-normal，修改model的jsonpath即可修改看板娘
  2. 看板娘开源项目GitHub 大合集

模型json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 22
https://raw.githubusercontent.com/iCharlesZ/vscode-live2d-models/master/model-library/bilibili-22/index.json

# 33
https://raw.githubusercontent.com/iCharlesZ/vscode-live2d-models/master/model-library/bilibili-33/index.json

# HK416-2-normal
https://raw.githubusercontent.com/iCharlesZ/vscode-live2d-models/master/model-library/girls-frontline/HK416-2/normal/model.json

# HK416-2-destroy
https://raw.githubusercontent.com/iCharlesZ/vscode-live2d-models/master/model-library/girls-frontline/HK416-2/destroy/model.json

# UMP45-3-destroy
https://raw.githubusercontent.com/iCharlesZ/vscode-live2d-models/master/model-library/girls-frontline/UMP45-3/destroy/model.json

主题色

修改以下内容即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
vim themes/butterfly/_config.yml

 theme_color:
   enable: true
   main: "#49B1F5"
   paginator: "#00c4b6"
   button_hover: "#FF7242"
   text_selection: "#00c4b6"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#00c4b6"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"
   scrollbar_color: "#49b1f5"
   meta_theme_color_light: "ffffff"
   meta_theme_color_dark: "#0d0d0d"

隐藏首页文章

安装插件

卸载原版插件后安装社区插件

1
2
npm un hexo-generator-index -S
npm i hexo-generator-indexed -S

使用

文章中插入参数：

1
2
3
4
5
---
title: 这是一篇隐藏首页的文章
hide: true        # 新增
date: 2025-07-26 12:00:00
---

三件套

1
2
3
hexo cl
hexo g
hexo s -p 80