Hexo 博客搭建与美化导航

特别说明
欢迎来到我的网站，此博客由【Hexo + Butterfly】来进行搭建。
本站所有内容仅供学习交流使用，不构成任何商业用途。内容因版本差异导致的问题，博主将尽力修正但不承担法律责任。
Hexo 博客版本：7.3.0
Butterfly 主题版本：5.3.5

🍎Hexo博客(一) 安装博客

🍐Hexo博客(二) 安装主题

🍓Hexo博客(三) 基础设置 ⇦ 当前位置🍁

🍏Hexo博客(四) 主题美化

🍅Hexo博客(五) 迁移操作

🥝Hexo博客(六) 图片视频

🍒Hexo博客(七) 常用命令

设‮导置‬航菜单

点击查看教程

打开主题配置文件 _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
  标签: /tags/ || fa fa-tags
  分类: /categories/ || fa fa-archive
  归档: /archives/ || fa fa-folder-open
  友链: /link/ || fa fa-link
  关于: /about/ || fas fa-heart 
  留言板: /comment/ || fa fa-paper-plane

创建 page 模板

  • 修改 \scaffolds\page.md
1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
type: {{ title }}
---

创建文件夹

  • 根‮前据‬面设置的导‮菜航‬单创建文件夹
1
2
3
4
5
6
7
8
9
10
11
12
- 标签
  hexo new page tags
- 分类
  hexo new page categories
- 归档
  hexo new page archives
- 友链
  hexo new page link
- 关于
  hexo new page about
- 留言板
  hexo new page comment

格式如下：

1
2
3
4
5
---
title: 标签
date: 2025-03-08 15:58:58
type: tags
---

友链模板

  • 在 Hexo 博客目录中的 source/_data（如果没有 _data 文件夹，请自行创建），创建一个文件 link.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

动态彩带

点击查看教程
  • 打开主题配置文件 _config.butterfly.yml 修改以下配置：
1
2
3
canvas_fluttering_ribbon:
  enable: true
  mobile: false # false 手机端不显示 true

鼠标点击的效果

点击查看教程
  • 打开主题配置文件 _config.butterfly.yml 修改以下配置：
1
2
3
4
5
# 鼠标点击的烟花特效
fireworks:
  enable: false
  zIndex: 9999
  mobile: false

页‮加面‬载动画

点击查看教程
  • 打开主题配置文件 _config.butterfly.yml 修改以下配置：
1
2
3
4
5
# 加载动画
preloader:
  enable: true
  source: 1 #可选值1=fullpage或2=progress bar，可查看https://codebyzach.github.io/pace/
  pace_css_url:

字数统计插件

点击查看教程 
1
npm install hexo-wordcount --save or yarn add hexo-wordcount
  • 打开主题配置文件 _config.butterfly.yml 修改以下配置：
1
2
3
4
5
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

搜索插件

点击查看教程

安装搜索插件

1
npm install hexo-generator-search --save

Hexo博客的配置文件_config.yml，添加以下配置

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

打开主题配置文件 _config.butterfly.yml 修改以下配置：

1
2
3
4
5
6
use: local_search

...

local_search:
  enable: true

主题添加随机图 API 支持

点击查看教程

hexo根目录 \themes\butterfly\scripts 新建一个 random_img.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
/**
 * Butterfly
 * random cover
 */

'use strict'

// 提取正则表达式作为常量，避免每次调用时都重新创建
const IMG_TEST_REG = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/;

// 注册过滤器，在文章渲染前处理文章数据
hexo.extend.filter.register('before_post_render', function (data) {
    const { config } = this;
    const { post_asset_folder } = config;

    // 如果启用了文章资源文件夹
    if (post_asset_folder) {
        processImagePath(data, 'top_img');
        processImagePath(data, 'cover');
    }

    // 如果文章的 cover 为 false，使用随机封面
    if (data.cover === false) {
        data.randomcover = getRandomCover();
    } else {
        // 否则，使用文章的 cover 或者随机封面
        data.cover = data.cover || getRandomCover();
    }

    return data;
}, 0);

// 处理图片路径的函数
function processImagePath(data, key) {
    const image = data[key];
    if (image && image.indexOf('/') === -1 && IMG_TEST_REG.test(image)) {
        data[key] = data.path + image;
    }
}

// 获取随机封面的函数
function getRandomCover() {
    const theme = hexo.theme.config;
    let cover;
    let num;

    const defaultCovers = theme.cover && theme.cover.default_cover;
    if (defaultCovers) {
        if (!Array.isArray(defaultCovers)) {
            cover = defaultCovers;
        } else {
            num = Math.floor(Math.random() * defaultCovers.length);
            cover = defaultCovers[num];
        }
    } else {
        cover = theme.default_top_img || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
    }

    // 根据配置添加随机后缀
    if (theme.cover && theme.cover.suffix) {
        const randomValue = Math.ceil(Math.random() * 10000);
        if (theme.cover.suffix === 1) {
            cover += `?${randomValue}`;
        } else if (theme.cover.suffix === 2) {
            cover += `&${randomValue}`;
        }
    }

    return cover;
}

效果

在 _config.butterfly.yml 中修改以下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
# 封面设置
cover:
  # 是否禁用封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 主页封面的位置
  # 选择: left/right/both
  position: both
  suffix: 1
  # 当未设置封面时，显示默认封面
  default_cover: 
  - https://api.mobufan.eu.org:666

最后运行以下命令查看是否生效：

1
hexo clean; hexo generate; hexo serve

首页的副标题设置

点击查看教程

打开主题配置文件 _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
  # 是否启用打字机效果
  effect: true
  # 自定义 typed.js
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # source 调用第三方服务
  # source: false 关闭调用
  # source: 1  调用一言网的一句话（简体） https://hitokoto.cn/
  # source: 2  调用一句网（简体） https://yijuzhan.com/
  # source: 3  调用今日诗词（简体） https://www.jinrishici.com/
  # subtitle 会先显示 source , 再显示 sub 的内容
  source: 1
  # 如果关闭打字效果，subtitle 只会显示 sub 的第一行文字
  sub:
    - 你在抱怨什么呢
    - 为明天到来的事，说人生像是没有意义
    - 没有选择会是唯一的路
    - 这不是你自己的问题，人终归要好好去生活

侧边栏样式

点击查看教程

修‮主改‬题配置文件 _config.butterfly.yml 调整侧‮栏边‬出现位置

1
2
3
4
5
6
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right

个人信息

1
2
3
4
5
social:
   fab fa-github: https://github.com/ || Github
   fa fa-book-open: https://blog.csdn.net/mjh1667002013 || CSDN
   fab fa-qq:  tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=728831102&website=www.oicqzone.com || QQ
   fas fa-envelope-open-text: mailto:1976083684@qq.com || Email

生成永久链接

点击查看教程

Hexo文章链接默认的生成规则是：:year/:month/:day/:title，是按照年、月、日、标题来生成的。生成的链接非常长，如果标题中含中文的话，复制URL链接会转一大串编码字符。

此插件，不论你如何修改文章的日期、名称，只要不改变 footer-matter 中的 id 值，那么文章链接永远不会变。

插件链接: xo-abbrlink](https://github.com/ohroy/hexo-abbrlink)

安装插件

1
npm install hexo-abbrlink --save

使用方法

修改博客_config.yml配置文件

默认：permalink: :year/:month/:day/:title/

永久连接有两种写法都可：

permalink: posts/:abbrlink/

permalink: posts/:abbrlink.html

以下完整的配置

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
permalink_defaults: #永久链接_默认值
permalink: posts/:abbrlink.html
# abbrlink 配置，用于生成文章的缩写链接
abbrlink:
  # 算法类型，支持 crc16（默认）和 crc32 两种，这里设置为 crc32 进制
  alg: crc32      
  # 表示缩写链接的表示形式，支持 dec（十进制，默认）和 hex（十六进制），这里设置为十六进制
  rep: hex        
  # 是否处理草稿文章，true 表示处理，false 表示不处理，默认为 false
  drafts: false   
  ## 从目录树自动生成文章分类
  ## depth: 想要生成分类的目录树的最大深度，该值必须大于 0
  auto_category:
    # 是否启用自动生成分类功能，true 为启用（默认）
    enable: true  
    # 自动生成分类时目录树的最大深度，默认为 3
    depth:        
    # 是否覆盖已有的分类设置，false 表示不覆盖
    over_write: false 
  # 是否启用自动生成文章标题功能，启用后会根据文章路径自动填充标题
  auto_title: false 
  # 是否启用自动生成文章日期功能，启用后会使用当前日期自动填充文章日期
  auto_date: false 
  # 是否启用强制模式，启用后插件会忽略缓存，为每篇文章重新计算缩写链接，即使文章已经有缩写链接
  force: false 
pretty_urls: #美化链接
  trailing_index: true 
  #设置为false以从永久链接中删除尾随的“index.html”
  trailing_html: true 
  #设置为false以删除结尾'。来自永久链接的“html”