Hexo-Butterfly主题美化

## 更换主题

> 安装

```
git clone -b master [<https://github.com/jerryc127/hexo-theme-butterfly.git>](<https://github.com/jerryc127/hexo-theme-butterfly.git>) themes/butterfly
npm install hexo-renderer-pug hexo-renderer-stylus --save
```

hexo5.0版本以上：`npm i hexo-theme-butterfly`

安装渲染：`npm install hexo-renderer-pug hexo-renderer-stylus --save`

> 修改配置文件

```
theme: butterfly
```

## 自定义样式

> 外部引入

- `项目根路径\\themes\\butterfly\\source\\css\\index.styl`中引入自定义的css文件（为避免样式覆盖，放在最下面进行定义），也可在此引入外链css

```css
// 引入自定义css
@import '_custom/*.css'

// 引入外链
@import '<https://cdn.jsdelivr.net/gh/username/repo/css/xxx.css>'
```

### 背景样式

> 背景样式

```css
/* 页脚透明 */
#footer{
background: transparent!important;
}

/* 页脚黑色透明玻璃效果移除 */
#footer::before{
background: transparent!important;
}

/* 头图透明 */
#page-header{
background: transparent!important;
}

/* top-img黑色透明玻璃效果移除，不建议加，除非你执着于完全一图流或者背景图对比色明显 */
#page-header:not(.not-top-img):before {
background-color: transparent!important;
}

/*夜间模式伪类遮罩层透明*/
[data-theme="dark"]
#footer::before{
background: transparent!important;
}
[data-theme="dark"]
#page-header::before{
background: transparent!important;
}
```

### 字体样式

> 字体样式

引用参考：[谷歌字体库](https://link.juejin.cn/?target=https%3A%2F%2Ffonts.google.com%2F)，选择、预览字体，可查看`API`，引用链接和`font-family`

### 鼠标样式

> 鼠标样式

引用参考：[致美化](https://link.juejin.cn/?target=https%3A%2F%2Fzhutix.com%2Ftag%2Fcursors%2F)

```css
/* 全局默认鼠标指针 */
body,
html{
cursor: url('指定样式cur文件路径'),auto !important;
}
/* 悬停图片时的鼠标指针 */
img{
cursor: url('指定样式cur文件路径'),auto !important;
}
/* 选择链接标签时的鼠标指针 */
a:hover{
cursor: url('指定样式cur文件路径'),auto;
}
/* 选中输入框时的鼠标指针 */
input:hover{
cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停按钮时的鼠标指针 */
button:hover{
cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停列表标签时的鼠标指针 */
i:hover{
cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停页脚链接标签（例如页脚徽标）时的鼠标指针 */
#footer-wrap a:hover{
cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停页码时的鼠标指针 */
#pagination .page-number:hover{
cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停菜单栏时的鼠标指针 */
#nav .site-page:hover{
cursor: url('指定样式cur文件路径'),auto;
}
```

## 功能插件安装

### 本地搜索

> 修改主题配置文件

打开主题配置中`local_search`，安装`npm install hexo-generator-search --save`

主题`_config.yml`中添加

```
search:
path: search.xml
field: post
content: true
template: ./search.xml
```

### 网易云音乐全局引用

> hexo项目根目录引入配置

```
aplayer:
meting: true
asset_inject: false
```

> _config.butterfly.yml主题配置文件中配置aplayerInject

```
# Inject the css and script (aplayer/meting)
aplayerInject:
enable: true
per_page: true
```

> 插入代码到页脚

需要切换页面音乐不中断，则将主题配置文件中的pjax设置为true即可

```
inject:
head:
bottom:
- <div class="aplayer no-destroy" data-id="2643422422" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div>
```

注：网易云我喜欢列表似乎有bug，无法显示

## 音乐页面

> hexo-butterfly使用aplayer加载音乐页面

参考原文：https://blog.51cto.com/alexclownfish/3051070 作者：**[Alexclownfish](https://blog.51cto.com/alexclownfish)**

------

由于hexo butterfly主题作者没有详细说明如何加载aplayer，之指明了aplayer官网文档。但是官网文档的教程未免有些难懂（尤其是对于新手），因为网上找到的大多为ejs创造的主题，而本主题使用了pug，所以，我将我摸索的经验在此公布，希望能带给使用pug编写的主题的朋友们一些帮助

```
hexo new page music
npm install aplayer
npm install --save hexo-tag-aplayer
```

接着，假如安装成功，则可以定位到主题目录\layout\includes看看layout.pug应该出现以下字段

```
head
include ./head.pug
link(rel="stylesheet" href="APlayer.min.css")
div(id="aplayer")
script(src="<https://cdn.jsdelivr.net/gh/radium-bit/res@master/live2d/autoload.js>" async)
script(src="<https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js>" async)
body
1.2.3.4.5.6.7.
```

若不存在

```
link(rel="stylesheet" href="APlayer.min.css")
div(id="aplayer")
script(src="<https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js>" async)
1.2.3.
```

若不存在请手动加上。一定要注意缩进与上述结构一致！因为缩进是Pug的表达方式。接着，查看aplayer.pug，若文件不存在。请创建文件并复制以下内容手动加上

```
link(rel="stylesheet" type='text/css', href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css>")
script(type='text/javascript', src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js>")
script(type='text/javascript', src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js>")
1.2.3.
```

最后，返回博客根目录，查看_config.yml在最后添加以下代码

```
#aplayer
aplayer:
script_dir: js # Public 目录下脚本目录路径，默认: 'assets/js'
style_dir: css # Public 目录下样式目录路径，默认: 'assets/css'
#cdn: <http://xxx/aplayer.min.js> # 引用 APlayer.js 外部 CDN 地址 (默认不开启)
#style_cdn: <http://xxx/aplayer.min.css> # 引用 APlayer.css 外部 CDN 地址 (默认不开启)
meting: true # MetingJS 支持
#meting_api: <http://xxx/api.php> # 自定义 Meting API 地址
#meting_cdn: <http://xxx/Meing.min.js> # 引用 Meting.js 外部 CDN 地址 (默认不开启)
asset_inject: true # 自动插入 Aplayer.js 与 Meting.js 资源脚本, 默认开启
#externalLink: <http://xxx/aplayer.min.js> # 老版本参数，功能与参数 cdn 相同meting: true
1.2.3.4.5.6.7.8.9.10.11.
```

并调整

```
post_asset_folder: true
```

最后，在 博客根目录\source\music\index.md使用以下格式

```markdown
---
title: 我的歌单
date: 2019-05-17 16:14:00
cover: <https://cdn.jsdelivr.net/gh/radium-bit/res@latest/Music.jpg>
type: "music"
---

<font color=#0c74d6 size=3 face="黑体">**这是歌单介绍，如果不需要刻意留空**</font>

{% meting "697054881" "netease" "playlist" %}
1.2.3.4.5.6.7.8.9.10.
```

那一串数字是歌单ID，“netease”为网易云音乐。详细参数用法请参考官方文档歌单ID提取方法是以链接分享某个歌单例如https://music.163.com/playlist?id=313418853&userid=1362990007

红色部分就是歌单ID了

写入完毕后，回到CMD。输入`hexo g`

生成完毕！接下来就可以部署到你的服务器啦(…•˘_˘•…)