一.前言

前段时间搭建好了 Hexo 框架并用上了 Fluid 主题，后来不知道怎么回事，我的 Fluid 主题出了点问题，正好对我来说 Fluid 主题有点太简约了，索性换了一个 Butterfly 主题。下面说的一些配置的效果可以参考我的博客：cofbro 的博客 - Hello I’m cofbro
如果还没有安装 Hexo，可以看看这篇文章——Hello Hexo！一款高效的个人博客框架

二.Butterfly 的下载

打开你的 Hexo 根目录，点击鼠标右键，进入 Git Bash Here，输入以下命令：

1
npm i hexo-theme-butterfly

随后咱们依次进入 Hexo -> themes -> butterfly 找到 _config.yml 文件，将里面的内容复制到 Hexo 根目录中的 _config.butterfly.yml(如果没有就创建)。

三.关于 Butterfly 配置

注意：本文仅展示部分配置，如需更多请参考Butterfly - A Simple and Card UI Design theme for Hexo

1._config.yml 中的配置

  • 打开根目录中的 _config.yml 文件，找到 theme 将其修改为 Butterfly ，以后配置更改就在这里面。

  • 看板娘功能：需要先安装

1
npm install --save hexo-helper-live2d

再进入 _config.yml 在最后加上：

1
2
3
4
5
6
7
8
9
10
11
live2d:
    enable: true #是否显示看板娘
    scriptFrom: local
    model:
        use: live2d-widget-model-tororo #需要与后面的命令相同，直接更换名字即可
    display:
        position: left #宽高以及位置自己看着调
        width: 200
        height: 300
    mobile:
        show: true #是否在手机进行显示

在通过 npm 下载对应的模型

1
npm install live2d-widget-model-tororo #对应的模型命令，这是只小白猫

其他的模型见 Hexo 添加 Live2D 看板娘+模型预览

2._config.butterfly.yml 中的配置

  • 创建页：
    刚换主题后，除了主页好像都是需要你自己去创建的，下面这些命令就是创建页的：
1
2
3
4
5
6
7
8
9
hexo new page about #创建关于页

hexo new page tags #创建标签页

hexo new page categories #创建分类页

hexo new page categories #创建分类页

hexo new page link #创建友链页
  • 其他基础配置
1
2
3
4
5
6
7
8
9
10
11
12
menu:
    首页: / || fas fa-home
    归档: /archives/ || fas fa-archive
    标签: /tags/ || fas fa-tags
    分类: /categories/ || fas fa-folder-open
    #菜单||fas fa-list:
    #音乐: /music/ || fas fa-music
    #电影: /movies/ || fas fa-video
    友链: /link/ || fas fa-link
    关于: /about/ || fas fa-heart

上面是一些右上角的标签，可以自定义选择
  • 下面这个是局部搜索，不过需要通过 npm 安装
1
npm install hexo-generator-search --save
1
2
3
4
5
6
7
8
local_search:
    enable: true
    preload: false
    CDN:
    labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}"
# 如果没有查到内容相关内容显示
  • 打字机效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
subtitle:
    enable: true
    # Typewriter Effect (打字效果)
    effect: true
    # loop (循環打字)
    loop: true
    # source 調用第三方服務
    # source: true
    # source: 1 https://hitokoto.cn/
    # source: 2 http://yijuzhan.com/
    # source: 3 https://www.jinrishici.com/
    # subtitle 會先顯示 source , 再顯示 sub 的內容
    source: 4
    # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
    sub:
        - 梦想这东西和经典一样 永远不会因为时间而褪色
        - 何其荣幸 何德何能 #注意这里的格式   空格和 '-'
  • 鼠标点击特效
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
activate_power_mode:
    enable: false
    colorful: true # open particle animation (冒光特效)
    shake: true #  open shake (抖動特效)
    mobile: false

# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
fireworks:
    enable: true
    zIndex: 9999 # -1 or 9999
    mobile: false

# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
click_heart:
    enable: false
    mobile: false

# Mouse click effects: words (鼠標點擊效果: 文字)
ClickShowText:
    enable: false
    text:
        # - I
        # - LOVE
        # - YOU
    fontSize: 15px
    random: false
    mobile: false

提示：主题中很多 js 是通过 CDN 服务下载的，Butterfly 用的 jsdeliver 在国内已经 g 了，如果想要正常显示特效请在 _config.butterfly.yml 找到 CDN 。

1
2
3
4
5
6
7
8
9
10
CDN:
    # The CDN provider of internal scripts (主題內部 js 的 cdn 配置)
    # option: local/jsdelivr
    # Dev version cannot choose jsdelivr (dev版的主題不能設置為 jsdelivr)
    internal_provider: local
    # The CDN provider of third party scripts (第三方 js 的 cdn 配置)
    # option: local/jsdelivr
    # when set it to local, you need to install hexo-butterfly-extjs
    third_party_provider: local #在这里改为local
    option:

之后依然要用到命令：

1
npm install hexo-butterfly-extjs

如果报错：npm WARN deprecated formidable@1.2.6: Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau

则先键入以下命令，就可以在本地加载 js 文件了：

1
npm install formidable@v3