在上上篇文章中已经安装好git、node和hexo，且在上篇文章解决了图片上传的问题，那么接下来就是对博客进行个性化设置。

1 安装hexon

hexon是一个带有git的hexo图形化界面，可以运行命令和管理内容
下载地址： https://github.com/gethexon/hexon

1.1 安装pnpm

  1. 命令：npm install -g pnpm
  2. 使用pnpm -v验证

    出现版本号，说明安装成功

1.2 安装hexon

  1. 命令：git clone https://github.com/gethexon/hexon --depth 1
  2. 安装成功，可以在D:\Blogs目录下看到hexon文件夹

1.3 安装hexon依赖

使用cd hexon命令进入hexon目录下，运行pnpm install命令安装依赖包。

显示安装成功

1.4 hexon初始化与启动

  1. 使用pnpm run setup命令进行初始化。
    根据提示，依次输入端口5777，hexo博客路径D:\Blogs，创建用户名kukual和密码kukual

    完成初始化
  2. 输入pnpm start，启动，可以看到红色框内的地址

    另：运行pnpm prd可以使用pm2实现更好的DevOps。（可先运行npm install -g pm2命令安装pm2。）


    online显示正在运行。

1.5 登录hexon

  1. 在浏览器访问 http://localhost:5777 ，可以看到hexo登陆界面
  2. 输入之前设置好的用户名和密码，出现登陆失败 Authentication Error的错误。
    解决办法，打开D:\Blogs\hexon\server\data\common.db文件，进行查看。
    发现username部分为自己计算机的用户名，密码还是kukual。
    （试过修改username，但后面还是会变）

    用户名YHCX和密码kukual登录成功，可以进行文章编辑，添加标签、分类等操作。

2 更换butterfly主题

参考文章： https://blog.csdn.net/m0_74123949/article/details/145556911

  1. 安装命令
1
2
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
npm install hexo-renderer-pug hexo-renderer-stylus --save


2. 修改D:\Blogs\_config.yml文件，将theme项修改为butterfly

3. 将D:\Blogs\themes\butterfly\_config.yml复制一份重命名为_config.butterfly.yml，在移动到D:\Blogs\目录下

3 安装插件

3.1 搜索插件

  1. 命令
    npm install hexo-generator-search --save
  2. 修改D:\Blogs\_config.butterfly.yml文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
search:
  # Choose: algolia_search / local_search / docsearch
  # leave it empty if you don't need search
  use: local_search
  placeholder:
  # Algolia Search
  algolia_search:
    # Number of search results per page
    hitsPerPage: 6
  # Local Search
  local_search:
    enable: true
    labels:
      input_placeholder: "输入关键词…"  # 中文提示
      hits_empty: "没有找到与「${query}」相关的内容 😭"  # 中文空状态提示
    # 可选：增加搜索框动画效果（需主题支持或自定义 CSS）
    animation: 
      enable: true
      duration: 0.3
    # Preload the search data when the page loads.
    preload: false
    # Show top n results per article, show all results by setting to -1
    top_n_per_article: 1
    # Unescape html strings to the readable one.
    unescape: false
    CDN:
  1. 搜索框样式与聚焦效果
    修改文件：D:\Blogs\themes\butterfly\source\css\_search\local-search.styl
    在现有输入框样式中添加新属性（约第 7 行）：
1
2
3
4
5
6
7
8
9
10
input
    padding: 10px 20px !important  // 覆盖原 padding
    border: 2px solid #ff7eb6 !important  // 粉色边框
    border-radius: 25px !important  // 圆角
    background: var(--search-bg) no-repeat 95% center  // 图标
    transition: all 0.3s ease  // 动画
    
    &:focus
        box-shadow: 0 0 15px rgba(255, 126, 182, 0.5)  // 光晕
        outline: none
  1. 搜索结果卡片化
    修改文件：D:\Blogs\themes\butterfly\source\css\_search\local-search.styl
    在 .local-search-hit-item 块内添加：
1
2
3
4
5
6
7
8
   .local-search-hit-item
     background: rgba(255, 255, 255, 0.9)  // 半白背景
     border-radius: 10px  // 圆角
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)  // 阴影
     margin: 10px 0  // 调整外边距
     padding: 15px  // 内边距
     line-height: 1.8
// 原有样式保留...
  1. 动态光标特效的 CSS
    修改文件：D:\Blogs\themes\butterfly\source\css\_search\index.styl
    在文件末尾添加全局动画定义：
1
2
3
4
5
@keyframes cursor-blink
    0%, 100%
        border-color: #ff7eb6
    50%
        border-color: transparent
  1. 动态光标特效的 JavaScript 代码集成
    修改文件：D:\Blogs\themes\butterfly\source\js\search\local-search.js
    在 input 变量定义后直接添加事件监听（约第 246 行）：
1
2
3
4
5
6
7
const input = document.querySelector('#local-search-input input')
// 下面是新增光标动画代码
input.addEventListener('focus', function() {
  this.style.animation = 'cursor-blink 1s infinite'
})
// 上面是新增光标动画代码
const statsItem = document.getElementById('local-search-stats-wrap')

3.2 图片懒加载插件

  1. 命令
    npm install hexo-lazyload-image --save
  2. 在 D:\Blogs\_config.yml 中添加以下配置（注意是系统设置文件不是主题设置文件）：
1
2
3
lazyload:
  enable: true
  loadingImg: /img/04.gif

3.3 字数统计插件

  1. 命令
    npm install hexo-wordcount --save or yarn add hexo-wordcount

    在 D:\Blogs\_config.butterfly.yml 中修改以下配置：

1
2
3
4
5
6
7
8
9
# Need to install the hexo-wordcount plugin
wordcount:
  enable: true
  # Display the word count of the article in post meta
  post_wordcount: true
  # Display the time to read the article in post meta
  min2read: true
  # Display the total word count of the website in aside's webinfo
  total_wordcount: true

4. 个性化设置

4.1 修改顶部菜单

  1. 修改D:\Blogs\_config.butterfly.yml文件
1
2
3
4
5
6
7
8
9
10
11
12
menu:
  # Home: / || fas fa-home
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  留言板: /comments/ || fas fa-envelope-open
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart
  1. ||后面写图标名，如果不想显示图标，图标名可不写
  2. 新建对应的标签页：hexo new page tags、hexo new page comments、hexo new page link、hexo new page about、hexo new page categories
  3. 打开D:\Blogs\source\tags\index.md文件进行修改，内容如下：
1
2
3
4
5
---
title: tags
date: 2025-04-01 16:06:57
type: "tags"
---
  1. 安装插件
    标签聚合页需安装hexo-generator-tag，安装命令：npm install hexo-generator-tag --save
    分类聚合页需安装hexo-generator-category，安装命令：npm install hexo-generator-category --save

4.2 修改个人信息

修改D:\Blogs\_config.yml文件

1
2
3
4
5
6
7
8
# Site
title: kukual&blog #标题
subtitle: 酷库阿洛的博客 #副标题
description: Rising Star in Cybersecurity's Future #个性签名
keywords: 
author: kukual #作者
language: zh-CN #语言
timezone: Asia/Shanghai #时间

4.3 修改侧边栏

打开配置 D:\Blogs\_config.butterfly.yml文件进行修改

  1. 增加个人链接：
1
2
3
4
5
6
# 侧边栏的个人链接
# Social media links
# Formal:
#   icon: link || the description || color
social:
  fas fa-code-branch: https://blog.csdn.net/weixin_74811095 || CSDN || '5c0a5c'
  1. 在aside里的card_author更改个人信息：
1
2
3
4
5
6
7
8
9
10
11
card_author:
  enable: true
  description: 网安学习空间
  button:
    enable: true
    icon: fab fa-github
    text: Follow Me
    link: https://github.com/kukual
card_announcement:
  enable: true
  content: 欢迎来到我的网安学习空间

4.4 背景/网站等图片设置

  1. 网站图标
    打开配置 D:\Blogs\_config.butterfly.yml文件进行修改
1
favicon: /img/01.png
  1. 头像
    打开配置 D:\Blogs\_config.butterfly.yml文件进行修改
1
2
3
avatar:
  img: /img/02.png  # 头像图片路径
  effect: ture     # 是否启用头像特效（如旋转等）
  1. 背景
    打开配置 D:\Blogs\_config.butterfly.yml文件进行修改
    第一步设置背景图：
1
2
3
4
5
6
# The background image of footer
footer_img: true

# Website Background
# Can set it to color or image url
background: /img/07.jpg
第二步设置顶部图像为透明：

1
default_top_img: rgba(0, 0, 0, 0)
  1. 文章封面图
    打开配置 D:\Blogs\_config.butterfly.yml文件进行修改
1
2
3
4
5
6
7
8
9
10
# 封面图片设置
cover:
  # 首页是否启用封面
  index_enable: true
  # 侧边栏是否启用封面
  aside_enable: true
  # 归档页是否启用封面
  archives_enable: true
  # 默认封面图片（当未设置封面时使用）
  default_cover: /img/08.jpg
打开`D:\Blogs\source\_posts\xxx.md`文章：

1
2
3
4
5
6
7
8
9
10
---
title: 标题
date: 发表时间
updated: '更新时间'
categories: 分类
tags: 标签
description: 描述一下这篇文章讲了什么
top_img: 文章顶部背景图
cover: 封面
---
  1. 加载失败图片设置
1
2
3
4
5
6
7
8
9
10
# 图片加载失败时的替代图片
error_img:
  flink: /img/09.jpg      # 友链页面错误图片
  post_page: /img/10.jpg  # 文章页面错误图片

# 404页面设置
error_404:
  enable: false            # 是否启用自定义404页面
  subtitle: '页面不存在'   # 404提示文字
  background: /img/11.png  # 404背景图片

4.5 代码块样式

  1. 打开D:\Blogs\_config.butterfly.yml文件添加下面代码
1
2
3
4
5
6
highlight_theme: mac  #  darker / pale night / light / ocean / mac / mac light / false 代码主题
highlight_copy: true # 复制按钮
highlight_lang: false # 是否显示代码语言
highlight_shrink: false # true: 代码块默认不展开 / false: 代码块默认展开 | none: 展开并隐藏折叠按钮
highlight_height_limit: false # unit: px
code_word_wrap: true #代码自动换行，关闭滚动条
  1. 打开D:\Blogs\_config.yml文件，把highlight项设置为true
1
2
3
4
5
6
7
highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

4.6 副标题循环打字效果

  1. 打开D:\Blogs\_config.butterfly.yml文件进行修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
subtitle:
  enable: true
  # Typewriter Effect
  effect: true
  loop: true
  # Customize typed.js
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # Source - Call the third-party service API (Chinese only)
  # It will show the source first, then show the content of sub
  # Choose: false/1/2/3
  # false - disable the function
  # 1 - hitokoto.cn
  # 2 - https://api.aa1.cn/doc/yiyan.html
  # 3 - jinrishici.com
  source: false
  # If you close the typewriter effect, the subtitle will only show the first line of sub
  sub:
    - 会当凌绝顶，一览众山小。——杜甫《望岳》
    - 学无止境。——荀子
    - 日日行，不怕千万里；常常做，不怕千万事。——金樱
    - 尚未实现的崇高目标，要比已经达到的渺小目标尤为珍贵。——歌德

4.7 修改网页页脚的显示内容

  1. 打开D:\Blogs\_config.butterfly.yml文件进行修改
1
2
3
4
5
6
7
8
9
footer:
  owner:
    enable: true
    since: 2025
  custom_text: |
    <span style='color:#9B59B6; font-weight:bold;'>在浩瀚的数字宇宙中，每一串代码都如星辰般闪烁，守护着数据洪流中的秘密轨迹。</span><br>
    <span style='color:#E67E22; font-weight:bold;'>当黄昏降临，防火墙如古老城堡般屹立，抵御着暗影中的无形侵袭。</span><br>
    <span style='color:#FF69B4; font-weight:bold;'>而某个加密的隧道尽头，或许正有一把密钥，在量子风暴中等待与它共鸣的密码学星辰。</span>
  copyright: false

4.8 修改主题颜色

  1. 打开D:\Blogs\_config.butterfly.yml文件进行修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
theme_color:
  enable: true
  main: "#E67E22"          # 主色调 - 黄昏橙（导航栏等主要UI元素）
  paginator: "#D35400"     # 分页器颜色 - 深橙色
  button_hover: "#A04000"  # 按钮悬停色 - 暗红褐色
  text_selection: "#F39C12" # 文本选中背景色 - 金黄色
  link_color: "#E74C3C"    # 超链接颜色 - 红橙色
  meta_color: "#B9770E"    # 元信息文字色 - 古铜色
  hr_color: "#D68910"      # 水平线颜色 - 暗金色
  code_foreground: "#6E2C00" # 代码文字色 - 深棕红色
  code_background: "rgba(253, 236, 200, 0.7)" # 代码块背景 - 淡黄色半透明
  toc_color: "#BA4A00"     # 目录文字色 - 锈红色
  blockquote_padding_color: "#CA6F1E"  # 引用框边框色 - 黄昏金
  blockquote_background_color: "rgba(230, 126, 34, 0.1)" # 引用框背景 - 淡橙色半透明
  scrollbar_color: "#A04000"  # 滚动条颜色 - 深红褐色
  meta_theme_color_light: "#FBEEE6"  # 浅色模式主题色 - 淡橙白
  meta_theme_color_dark: "#1A1110"   # 深色模式主题色 - 深咖啡（保持不变）

5 鼠标样式魔改：黄昏主题流光粒子跟随效果

效果图

5.1 js样式

新建文件D:\Blogs\themes\butterfly\source\js\cursor.js，（默认是没有的），在里面写上如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
/**
 * 自定义光标效果 - 黄昏色系流光粒子跟随
 * 包含主光标、粒子跟随效果和点击烟花特效
 */

// 全局光标变量
var CURSOR;

// 数学辅助函数
Math.lerp = (a, b, n) => (1 - n) * a + n * b; // 线性插值
Math.clamp = (val, min, max) => Math.max(min, Math.min(max, val)); // 数值限制

class Cursor {
    constructor() {
        // 初始化光标位置
        this.pos = { curr: null, prev: null };
        
        // 粒子数组
        this.particles = [];
        
        // 创建主光标元素
        this.cursor = document.createElement("div");
        this.cursor.id = "cursor";
        this.cursor.classList.add("hidden");
        document.body.append(this.cursor);
        
        // 创建跟随粒子
        this.particleCount = 12;
        for (let i = 0; i < this.particleCount; i++) {
            const particle = document.createElement("div");
            particle.className = "cursor-particle";
            
            // 设置粒子颜色渐变 (黄昏色系)
            particle.style.backgroundColor = `hsl(${25 + i * 3}, 100%, 60%)`;
            
            // 粒子大小递减
            particle.style.width = `${8 - i * 0.5}px`;
            particle.style.height = `${8 - i * 0.5}px`;
            
            document.body.appendChild(particle);
            this.particles.push({
                el: particle,
                pos: { x: 0, y: 0 },
                delay: i * 0.02, // 粒子延迟效果
                size: 8 - i * 0.5 // 粒子大小
            });
        }
        
        // 初始化事件监听和动画循环
        this.init();
        this.render();
    }

    /**
     * 初始化事件监听
     */
    init() {
        // 鼠标移动事件
        document.onmousemove = e => {
            if (this.pos.curr === null) {
                this.move(e.clientX - 8, e.clientY - 8);
            }
            this.pos.curr = { x: e.clientX, y: e.clientY };
            this.cursor.classList.remove("hidden");
        };
        
        // 鼠标进入/离开页面事件
        document.onmouseenter = e => this.cursor.classList.remove("hidden");
        document.onmouseleave = e => this.cursor.classList.add("hidden");
        
        // 鼠标按下/抬起事件
        document.onmousedown = e => this.cursor.classList.add("active");
        document.onmouseup = e => this.cursor.classList.remove("active");
        
        // 点击烟花效果
        document.addEventListener('click', (e) => {
            this.createFirework(e.clientX, e.clientY);
        });
    }

    /**
     * 移动主光标位置
     * @param {number} left - 左偏移量
     * @param {number} top - 上偏移量
     */
    move(left, top) {
        this.cursor.style.left = `${left}px`;
        this.cursor.style.top = `${top}px`;
    }

    /**
     * 创建点击烟花效果
     * @param {number} x - 点击X坐标
     * @param {number} y - 点击Y坐标
     */
    createFirework(x, y) {
        // 黄昏色系颜色数组
        const colors = ['#FF7F50', '#FFA07A', '#FF8C00', '#FFD700', '#FF6347'];
        const particleCount = 30;
        
        for (let i = 0; i < particleCount; i++) {
            const particle = document.createElement('div');
            particle.className = 'firework-particle';
            particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            particle.style.left = `${x}px`;
            particle.style.top = `${y}px`;
            document.body.appendChild(particle);
            
            // 随机角度和速度
            const angle = Math.random() * Math.PI * 2;
            const velocity = 2 + Math.random() * 3;
            const lifetime = 1000 + Math.random() * 500;
            
            // 烟花粒子动画
            const animate = (startTime) => {
                const now = Date.now();
                const progress = (now - startTime) / lifetime;
                
                // 动画结束条件
                if (progress >= 1) {
                    particle.remove();
                    return;
                }
                
                // 计算当前位置和透明度
                const distance = velocity * progress * 100;
                const currentX = x + Math.cos(angle) * distance;
                const currentY = y + Math.sin(angle) * distance;
                const opacity = 1 - progress;
                
                // 更新粒子位置和透明度
                particle.style.transform = `translate(${currentX - x}px, ${currentY - y}px)`;
                particle.style.opacity = opacity;
                
                requestAnimationFrame(() => animate(startTime));
            };
            
            requestAnimationFrame(() => animate(Date.now()));
        }
    }

    /**
     * 渲染动画循环
     */
    render() {
        if (this.pos.prev) {
            // 平滑移动主光标
            this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.2);
            this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.2);
            this.move(this.pos.prev.x - 8, this.pos.prev.y - 8);
            
            // 更新粒子位置
            this.particles.forEach((particle, i) => {
                const delay = particle.delay;
                const targetX = this.pos.prev.x - particle.size / 2;
                const targetY = this.pos.prev.y - particle.size / 2;
                
                // 平滑移动粒子
                particle.pos.x = Math.lerp(particle.pos.x, targetX, 0.2 - i * 0.01);
                particle.pos.y = Math.lerp(particle.pos.y, targetY, 0.2 - i * 0.01);
                
                particle.el.style.left = `${particle.pos.x}px`;
                particle.el.style.top = `${particle.pos.y}px`;
                
                // 粒子颜色动态变化 (黄昏色系)
                const hue = 25 + Math.sin(Date.now() * 0.002 + i * 0.2) * 15;
                particle.el.style.backgroundColor = `hsl(${hue}, 100%, 60%)`;
            });
        } else {
            this.pos.prev = this.pos.curr;
        }
        
        // 继续动画循环
        requestAnimationFrame(() => this.render());
    }
}

// 初始化光标效果
(() => {
    CURSOR = new Cursor();
    // 修复页面滚动时的位置计算
    document.addEventListener('scroll', () => {
        if (CURSOR.pos.curr) {
            CURSOR.pos.curr.y = CURSOR.pos.curr.y - window.scrollY;
        }
    });
})();

其中比较重要的参数就是鼠标的尺寸和颜色，已经在上面的代码中标出，可以自行调节。

5.2 css样式

创建D:\Blogs\themes\butterfly\source\css\custom.css文件，添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/* 
 * 黄昏主题自定义光标样式
 * 包含主光标、粒子跟随和烟花效果样式
 */

/* 主光标样式 */
#cursor {
    position: fixed;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /* 黄昏色渐变背景 */
    background: linear-gradient(135deg, #FF8C00, #FFD700);
    /* 发光效果 */
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.7),
                0 0 20px rgba(255, 215, 0, 0.5),
                0 0 30px rgba(255, 165, 0, 0.3);
    z-index: 9999; /* 确保在最上层 */
    pointer-events: none; /* 不干扰鼠标事件 */
    transform: translate(-50%, -50%); /* 居中 */
    mix-blend-mode: screen; /* 混合模式 */
    transition: transform 0.1s ease; /* 平滑过渡 */
}

/* 隐藏状态 */
#cursor.hidden {
    opacity: 0;
}

/* 点击状态 */
#cursor.active {
    transform: translate(-50%, -50%) scale(0.7);
    background: linear-gradient(135deg, #FF6347, #FF7F50);
}

/* 粒子跟随样式 */
.cursor-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998; /* 在主光标下方 */
    transition: transform 0.1s ease;
    filter: blur(1px); /* 模糊效果 */
    opacity: 0.8;
    transform: translate(-50%, -50%); /* 确保居中 */
}

/* 烟花粒子样式 */
.firework-particle {
    position: fixed; /* 改为fixed定位，不受页面滚动影响 */
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9997; /* 在粒子下方 */
    transform-origin: center;
    filter: blur(0.5px);
    box-shadow: 0 0 5px currentColor; /* 发光效果 */
    transform: translate(-50%, -50%); /* 确保居中 */
}

/* 
 * 自定义指针样式 
 * 使用外部指针图标 (可替换为黄昏主题指针)
 */
* {
    cursor: url('https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/normal.cur'), auto !important;
}

/* 链接和按钮的特殊指针 */
a, button, input[type="button"], input[type="submit"] {
    cursor: url('https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/link.cur'), pointer !important;
}

5.3 inject

在D:\Blogs\_config.butterfly.yml文件的inject配置项引入刚刚创建的 css  文件和 js文件：

1
2
3
4
5
6
7
8
9
10
# 注入自定义CSS和JS
inject:
  head:
    # 自定义样式
    - <link rel="stylesheet" href="/css/custom.css">
    # 动画库 (用于可能的扩展效果)
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
  bottom:
    # 延迟加载光标脚本
    - <script defer src="/js/cursor.js"></script>

6 Live2D看板娘

  1. 安装依赖
    npm install --save hexo-helper-live2d
  2. 安装模型
    npm install live2d-widget-model-shizuku
  3. 打开D:\Blogs\_config.yml文件，添加以下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
# ========================
# Live2D看板娘配置
# ========================
# 参考文档：https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true          # 总开关，是否启用Live2D看板娘功能
  scriptFrom: local     # 脚本来源，默认从本地加载
  pluginRootPath: live2dw/      # 插件在站点中的根目录(相对路径)
  pluginJsPath: lib/            # JavaScript文件相对于插件根目录的路径
  pluginModelPath: assets/      # 模型文件相对于插件根目录的路径
  # 以下是可选的CDN加载方式(需要取消注释使用)
  # scriptFrom: jsdelivr       # 使用jsdelivr CDN
  # scriptFrom: unpkg          # 使用unpkg CDN
  # scriptFrom: https://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js  # 使用自定义URL
  tagMode: false        # 标签模式，若为true则只替换<live2d>标签，false则插入到所有页面
  debug: false          # 调试模式，true时会在控制台输出日志

  # 模型配置
  model: 
    use: live2d-widget-model-unitychan  # 使用的模型名称(npm包名)
    # 推荐模型：
    # live2d-widget-model-hibiki
    # live2d-widget-model-shizuku
    # live2d-widget-model-haru_01
    # live2d-widget-model-haru_02
    # live2d-widget-model-unitychan
    # 以下是其他模型加载方式(需要取消注释使用)
    # use: wanko                       # 使用博客根目录/live2d_models/下的目录名
    # use: ./wives/wanko               # 使用相对于博客根目录的路径
    # use: https://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json  # 使用自定义URL

  # 显示设置
  display:
    position: left      # 看板娘显示位置(left/right)
    width: 200          # 看板娘宽度(px)
    height: 400         # 看板娘高度(px)

  # 移动端设置
  mobile:
    show: true          # 是否在移动设备上显示
    scale: 0.5          # 移动端缩放比例

7 文章置顶滚动栏

  1. 安装插件
    npm install hexo-butterfly-swiper --save
  2. 打开D:\Blogs\_config.butterfly.yml文件进行添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  timemode: date #date/updated
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  default_descr: 再怎么看我也不知道怎么描述它的啦！
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
  custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法

8 网站字体配置

  1. 打开D:\Blogs\_config.butterfly.yml文件进行修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 文章内容美化配置
beautify:
  # 是否启用美化功能
  enable: true
  # 指定美化范围（站点site或文章post）
  field: site
  # 标题前缀图标（使用Font Awesome图标unicode值，例如'\f0c1'）
  title_prefix_icon: "\f0c1"
  # 标题前缀图标的颜色（十六进制颜色码，例如'#F47466'）
  title_prefix_icon_color: "#F47466"

# 全局字体设置
# 除非您清楚这些设置的作用，否则请勿修改
font:
  # 全局字体大小
  global_font_size: "16px"
  # 代码字体大小
  code_font_size: "15px"
  # 正文字体
  font_family: "YSHST, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif"
  # 代码字体
  code_font_family: Consolas, "YSHST", "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif
# Font settings for the site title and site subtitle
# https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
# Titillium Web, 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft JhengHei' , 'Microsoft YaHei' , sans-serif

# 博客标题和副标题的字体设置
blog_title_font:
  # 字体链接
  font_link:
  # 字体名称
  font_family: "YSHST"

9 修改导航栏布局

打开D:\Blogs\themes\butterfly\source\css\_layout\head.styl 文件，修改以下代码：

  1. 找到#nav相关的代码块，有注释的地方为增加的代码：
1
2
3
4
5
6
7
#nav
  position: absolute
  top: 0
  z-index: 90
  display: flex
  justify-content: center  // 新增：让导航内容居中
  align-items: center
  1. 找到#blog-info相关的代码块，有注释的地方为增加或修改的代码：
1
2
3
4
5
6
7
8
9
#blog-info
  position: absolute  // 修改：将博客信息定位到左侧
  left: 36px          // 左侧间距
  flex: 0             // 取消 flex 拉伸
  color: var(--light-grey)
  @extend .limit-one-line

  +maxWidth768() // 增加
    left: 16px
  1. 找到#search-button相关的代码块，有注释的地方为增加或修改的代码：
1
2
3
4
5
6
7
8
9
10
11
12
// 新增：搜索按钮固定在右上角
#search-button
  position: absolute
  right: 36px
  padding: 0
  color: var(--light-grey)

  +maxWidth768()
    right: 16px

  &:hover
    color: var(--white)
  1. 找到.menus_items相关的代码块，有注释的地方为增加或修改的代码：
1
2
3
4
5
6
7
8
9
10
11
12
// 修改：菜单项居中
.menus_items
  display: inline-block  // 改为 inline-block 方便居中
  margin: 0 auto         // 水平居中
  text-align: center     // 子元素居中

  .menus_item
    position: relative
    display: inline-block
    padding: 0 0 0 14px

    // 保持原有的悬停和子菜单样式...
  1. 在 Hexo 根目录的 _config.yml 中启用资源文件夹功能：

npm install hexo-asset-img –save

9.