前言

此主题美化教程仅面对由Hexo + ButterFly搭建的个人博客 集成了搜索、看板娘等功能的教程

在信息爆炸、网页繁多的互联网中，搭建个人博客仍然是十分有意义的，等同于在互联网中得到属于自己的一片净土，但拥有了个人博客之后，我们肯定都有让页面变得丰富、高级、优雅的想法，但面对复杂的配置文件却无从下手，今天我整合了一些ButterFly主题的美化教程，希望大家喜欢

此次教程内容较为进阶 不针对基础层级

ButterFly主题美化

导航栏美化


你是否想拥有这样的导航栏？其实并不难

首页、归档、标签等菜单的实现

找到source文件夹[BlogRoot]\source
在此处新建四个文件夹 并在里面新建一个名为index.md的markdown文件

文件夹1·标签

文件夹名为tags、index.md内容为

1
2
3
4
---
title: 标签
type: tags
---

文件夹2·分类

文件夹名为categories、index.md内容为

1
2
3
4
---
title: 分类
type: categories
---

文件夹3·友链

文件夹名为link、index.md内容为

1
2
3
4
---
title: 友链
type: link
---

如果你想给友链这一页面添加上你想添加的链接 那么找到[BlogRoot]\source\_data 新建一个叫link.yml的文件
里面按这个格式加上你想添加的链接

1
2
3
4
5
6
7
8
9
10
11
- class_name: [标签]
  class_desc: [描述]
  link_list:
    - name: [网站一]
      link: [网址]
      avatar: [网站图标]
      descr: [网站介绍]
    - name: [网站二]
      link: [网址]
      avatar: [网站图标]
      descr: [网站介绍]

文件夹4·关于

文件夹名为about、index.md内容为

1
2
3
4
5
---
title: 关于
type: about
---
# 如果你想在这里写上关于你的内容的话，直接在下面写就可以了

配置_config.butterfly.yml

把menu这一部分改为

1
2
3
4
5
6
7
menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

Done!

搜索功能


其实想要实现搜索功能很简单
在_config.yml里面找到search部分
把它改成这样

1
2
3
4
5
search:
  path: search.json       # 改成 json（Butterfly 支持更好）
  field: post             # 或 all
  content: true           # 搜文章内容
  format: html

在_config.butterfly.yml里面找到search部分
把它改成这样

1
2
3
4
5
search:
  enable: true
  type: local
  preload: true //预加载功能 适合中小站 看自己情况修改

这样，搜索功能部分就大功告成了！

导航栏持续悬挂

如果你不想让导航栏在某些时候缩回去，而是一直悬挂在顶部，那么就在_config.buttergly.yml中
把fixed打开

1
2
3
4
5
6
nav:
  # Navigation bar logo image
  logo: 你的logo
  display_title: true
  display_post_title: true
  fixed: true #这里是关键

主页设置


有时候，看到别人华丽的主页背景和标题，还有励志的副标题
可自己又不知道从何下手？

背景设置

找到[RootBlog]\theme\butterfly\source\img，把你想换的背景丢进去
然后在_config.butterfly.yml中找到top_img部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 为false等于启用顶部图片 如果为true则禁用
disable_top_img: false
# 默认背景图片 background.png改为你丢进img的图片名
default_top_img: /img/background.png
# 以下图片如果不做修改留白，那么都为default_top_img引用的图片
index_img: /img/background.png

archive_img: /img/background.png

tag_img: /img/background.png

tag_per_img: /img/background.png

category_img: /img/background.png

category_per_img: /img/background.png

标题设置

在_config.yml中，找到title部分
改为你想要他展示的文字即可

1
title: 请输入文本

副标题设置

在_config.butterfly.yml中，找到subtitle部分
将它修改为这样

1
2
3
4
5
6
7
8
9
10
subtitle:
  enable: true #启用
  effect: true #是否启用打字效果
  loop: true #是否循环
  typed_option:
  source: true
  # 这里输入你想要的副标题
  sub: 
   - '<i class="fas fa-quote-left"></i> 做自己 Be yourself'
   - '<i class="fas fa-quote-left"></i> 不自由，毋宁死！ Give me liberty, or give me death!'

这样，完美的首页背景就大功告成了

个人卡片设置


有时看到别人的butterfly主题个人卡片上，社交按钮又多，鼠标悬浮在头像上也不会乱转，其实这些很简单就能做到

头像设置不转动

在[BlogRoot]\_config.butterfly.yml中，找到avatar部分
把它改为

1
2
3
avatar:
  img: /img/avatar.png
  effect: false //这里改成false

即可

社交图标

在[BlogRoot]\_config.butterfly.yml中，找到social部分
改动social部分

1
2
3
4
5
6
7
#   格式：icon: link || the description || color
social:
   fab fa-github: 你的github主页链接 || Github || '#24292e'
   fab fa-youtube: 你的Youtube主页链接 || Github || '#24292e'
   fab fa-bilibili: 你的bilibili主页链接 || Bilibili || '#24292e'
   fas fa-envelope: mailto:你的邮箱 || Email || '#4a7dbe'
# 你可以添加更多如果你想的话

Follow Me按钮设置

在[BlogRoot]\_config.butterfly.yml中，找到aside部分
将其中的card_author部分修改

1
2
3
4
5
6
7
8
card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github # 如果你想改为bilibili,就改为fab fa-bilibili
      text: Follow Me
      link: 你想跳转的链接

RSS按钮

首先，打开终端，输入指令安装插件

1
npm install hexo-generator-feed --save

安装完成后，在_config.butterfly.yml的social部分添加

1
2
social:
   fab fa-rss: /atom.xml || rss || '#24292e'

然后重新部署页面

1
hexo cl && hexo g && hexo s

怎么样，是不是很简单？

发电部分

写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累写文章好累

公告部分

在_config.butterfly.yml中，找到card_announcment部分
将它修改成这样

1
2
3
card_announcement:
    enable: true
    content: 这里是遇晨Mornly的博客<br>用来发布一些技术文章与记录日常 #这里改成你的

Live2D看板娘

1.安装核心插件

打开你的Hexo博客根目录（就是存放「_config.yml」「themes」文件夹的目录），打开终端（CMD、PowerShell、Git Bash都可以），执行以下命令安装插件：

1
npm install --save hexo-helper-live2d

提示：如果执行命令报错（比如npm版本过低），先执行 npm install -g npm@latest 更新npm，再重新安装插件；如果用yarn管理依赖，可替换为 yarn add hexo-helper-live2d。

2.安装模型

在终端执行以下命令，安装你喜欢的模型（任选一个即可，也可以安装多个切换）：

1
2
3
4
5
6
7
8
# 示例1：安装 滴（shizuku，可爱女生形象）
npm install --save live2d-widget-model-shizuku
# 示例2：安装 初音未来（miku，人气形象）
npm install --save live2d-widget-model-miku
# 示例3：安装 春（haru，温柔女生形象）
npm install --save live2d-widget-model-haru
# 示例4：安装 黑猫（neko，俏皮形象）
npm install --save live2d-widget-model-neko

或者说你也可以跟我使用同款koharu模型

1
npm install --save live2d-widget-model-koharu

3.配置Live2D

打开博客根目录下的 _config.yml（站点配置文件，不是Butterfly主题的配置文件），拉到文件最底部，添加以下配置代码（所有参数都有注释，可按需修改）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Live2D看板娘配置（适配Butterfly主题）
# 插件地址：https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true # 启用看板娘（false为关闭）
  scriptFrom: local # 脚本来源：local（本地），无需联网加载
  pluginRootPath: live2dw/ # 插件根目录（默认即可，无需修改）
  pluginJsPath: lib/ # 脚本文件路径（默认即可）
  pluginModelPath: assets/ # 模型文件路径（默认即可）
  tagMode: false # 标签模式：false（全局显示看板娘），true仅在指定页面显示
  debug: false # 调试模式：false（正常显示），true会在控制台输出加载日志（排坑用）
  model:
    use: live2d-widget-model-koharu # 默认模型（汪酱，可爱小狗形象）
    # 模型说明：这里填写的是npm安装的模型名称，后续可更换其他模型
  display:
    position: left # 看板娘显示位置（right：右侧，left：左侧，适配Butterfly布局）
    width: 150 # 看板娘宽度（建议120-180，太大遮挡内容）
    height: 300 # 看板娘高度（建议280-350，比例协调）
    hOffset: 0 # 水平偏移（正数向右，负数向左，微调位置用）
    vOffset: -20 # 垂直偏移（正数向下，负数向上，避免遮挡底部导航）
  mobile:
    show: true # 移动端显示看板娘（true显示，false隐藏，移动端建议显示）
    scale: 0.6 # 移动端缩放比例（0.5-0.7，适配手机屏幕）
  react:
    opacity: 0.8 # 默认透明度（0-1，数值越大越不透明）

测试生效

Live2D插件需要重新启动才能生效

1
hexo clean && hexo g && hexo s

这样，你的Live2D看板娘就出来啦~

结语

这期更新了一些较为进阶的Butterfly配置与美化教程，希望能帮助到你的Butterfly的配置与美化，下期教程我会出更多相关内容的教学，Hope you like, cya!