hexo博客butterfly主题美化
博客代码展示
代码高亮样式
Butterfly 支持6种代码高亮样式：
- default
- darker
- pale night
- light
- ocean
- mac
只需要配置主题配置文件(配置butterfly.yml)
找到这一行highlight_theme: light然后进行将light更换成你喜欢的代码高亮格式就可以了，个人喜欢mac，样式如下:
代码展开和关闭
官方一共支持，这3中样式，
- true 全部代码框不展开，需点击>打開
- false 代码框展开，有>点击按钮
- none 不展示>按钮
只需要配置主题配置文件(配置butterfly.yml)
找到这一行highlight_theme: false然后进行将false更换成你喜欢的的样式就可以了
代码复制按钮
只需要配置主题配置文件(配置butterfly.yml)
更改highlight_copy: true这一行就可以了，默认有复制按钮
代码换行
默认是不换行,如果你要想设置换行功能，可以
更改主题配置文件中的code_word_wrap: false，将false改成true
然后找到博客配置文件，將line_number改成false:
highlight:
enable: true
line_number: false
auto_detect: false
tab_replace:
社交图标
- Font-awesome图标的添加
打开主题的配置文件,进行对应位置的替换就可以啦
social:
fa fa-github: https://github.com/jerryc127 || Github
- 其他图标的添加
这里比较复杂，待补充，有兴趣可以参考这篇文章点击出发
文章封面
在我们文章的首页按照这个格式进行添加cover: xxxx其中xxxx是我们图片的链接
例如我的文章是这样的:
cover: https://s1.ax1x.com/2020/07/05/US3MkD.md.jpg
评论系统
打开主题的配置文件，将xxxx替换成你想要用的评论系统，接下来我给大家推荐两个评论系统.
- 按照 Valine的教程配置一下LeanCloud应用.然后照着我的配置去配置一下，主要是添加appId和appKey
valine:
appId: 替换成你的appId
appKey: 替换成你的appKey
pageSize: 10 # comment list page size
avatar: monsterid # gravatar style https://valine.js.org/#/avatar
lang: zh-CN/ # i18n: zh-CN/zh-TW/en/ja
placeholder: 说些什么吧 # valine comment input placeholder(like: Please leave your footprints )
guest_info: nick,mail,link #valine comment header info (nick/mail/link)
recordIP: false # Record reviewer IP
serverURLs: https://ophsiskh.lc-cn-n1-shared.com
bg: # valine background
emojiCDN: # emoji CDN
enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
requiredFields: nick,mail # required fields (nick/mail)
- 注册來必力，注册账号，配置你自己的來必力设置,找到你的UID，最后模仿我的配置文件进行配置
livere:
uid: 你的uid
404页面
本主题内置了404页面，如果想打开只需要模仿我下面的主题配置文档即可
error_404:
enable: true
subtitle: 'Page Not Found'
background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png
音乐界面
首先我们先安装一个插件，有了这个插件后我们才能进行获取歌单
1、 第一步安装 hexo-tag-aplayer：
npm install --save hexo-tag-aplayer
2、首先要在站点配置文件中开启meting模式，添加以下代码在配置文件的最后：
aplayer:
meting: true
3、创建音乐界面
命令如下
hexo new page music
4、复制歌单的链接，然后复制歌单的id，例如 https://music.163.com/playlist?id=523845661&userid=46562117 ，这个歌单的id就是523845661，公司名可以是tencent、netease或是其他公司，打开/Hexo/source/playlist/index.md文件，
这里我用的是网易云，相同复制即可
输入：
{
% meting "2627135799" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}
这样歌单就创建完成啦~
添加静态链接
解决了博客链接过长的问题
安装步骤
- 安装插件:
npm install hexo-abbrlink --save
- 修改根目录下的config.yml文件中的permalink
修改后如下图所示
permalink: posts/:abbrlink/
abbrlink:
alg: crc32 #support crc16(default) and crc32
rep: hex #support dec(default) and hex
- 其他可选
crc16 & hex
crc16 & dec
crc32 & hex
crc32 & dec
因为你的文章目录结构已经改变，和之前的年月日文章路径产生冲突，所以你需要重新生成文章 hexo clean 和 hexo g，不然会报undefined 错
增加搜索功能
可以装插件，方法如下:
npm install hexo-generator-search --save
然后在编辑我们的butterfly.yml文件，打开本地搜索功能即可.
local_search:
enable: true
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
最后
博客地址：https://lannanhai.cn