更换主题

安装

1
2
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

修改配置文件

1
theme: butterfly

自定义样式

外部引入

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

    1
    2
    3
    4
    5
    // 引入自定义css
    @import '_custom/*.css'

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

背景样式

背景样式

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
28
29
/* 页脚透明 */
#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;
}

字体样式

字体样式

引用参考：谷歌字体库，选择、预览字体，可查看API，引用链接和font-family

鼠标样式

鼠标样式

引用参考：致美化

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
28
29
30
31
32
33
34
35
36
37
/* 全局默认鼠标指针 */
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中添加

1
2
3
4
5
search:
  path: search.xml
  field: post
  content: true
  template: ./search.xml

网易云音乐全局引用

hexo项目根目录引入配置

1
2
3
aplayer:
  meting: true
  asset_inject: false

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

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

插入代码到页脚

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

1
2
3
4
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**

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

1
2
3
hexo new page music
npm install aplayer
npm install --save hexo-tag-aplayer

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

1
2
3
4
5
6
7
8
 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.

若不存在

1
2
3
4
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，若文件不存在。请创建文件并复制以下内容手动加上

1
2
3
4
link(rel="stylesheet" type='text/css', href="<https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css>")
script(type='text/javascript', src="<https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js>")
script(type='text/javascript', src="<https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js>")
1.2.3.

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

1
2
3
4
5
6
7
8
9
10
11
12
#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.

并调整

1
post_asset_folder: true

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

1
2
3
4
5
6
7
8
9
10
11
---
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

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