一.前言
前段时间搭建好了Hexo框架并用上了Fluid主题，后来不知道怎么回事，我的Fluid主题出了点问题，正好对我来说Fluid主题有点太简约了，索性换了一个Butterfly主题。下面说的一些配置的效果可以参考我的博客：cofbro的博客 - Hello I'm cofbro
如果还没有安装Hexo，可以看看这篇文章——Hello Hexo！一款高效的个人博客框架
二.Butterfly的下载
打开你的Hexo根目录，点击鼠标右键，进入 Git Bash Here，输入以下命令：
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，以后配置更改就在这里面。 -
看板娘功能：需要先安装
npm install --save hexo-helper-live2d
再进入 _config.yml 在最后加上：
live2d:
enable: true #是否显示看板娘
scriptFrom: local
model:
use: live2d-widget-model-tororo #需要与后面的命令相同，直接更换名字即可
display:
position: left #宽高以及位置自己看着调
width: 200
height: 300
mobile:
show: true #是否在手机进行显示
通过npm下载对应的模型
npm install live2d-widget-model-tororo #对应的模型命令，这是只小白猫
其他的模型见 Hexo添加Live2D看板娘+模型预览
2._config.butterfly.yml中的配置
- 创建页：
更换主题后，除了主页好像都是需要你自己去创建的，下面这些命令就是创建页的：
hexo new page about #创建关于页
hexo new page tags #创建标签页
hexo new page categories #创建分类页
hexo new page categories #创建分类页
hexo new page link #创建友链页
- 其他基础配置
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安装
npm install hexo-generator-search --save
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}"
# 如果没有查到内容相关内容显示
- 打字机效果
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:
- 梦想这东西和经典一样 永远不会因为时间而褪色
- 何其荣幸 何德何能 #注意这里的格式 空格和 '-'
- 鼠标点击特效
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 。
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:
之后依然要用到命令：
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 文件了：
npm install formidable@v3
网友评论