介绍

有的人认为 hexo 自带的主题landscape非常难看，那么我们有没有好看的主题可选呢？

当然是有的，有不少的人给我们提供了十分多的主题，查看主题库：https://hexo.io/themes/

hexo-theme-butterfly 是基于 Molunerfinn 的 hexo-theme-melody 的基础上进行开发的。
接下来推荐几款觉得好看的主题库？

  • Butterfly：这款主题非常好看，好用，功能十分齐全，当然本站也是用的该主题

安装

在您的项目根目录下：

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

此方法只支持 Hexo 5.0.0 以上版本

在您的项目根目录下： 
1
npm i hexo-theme-butterfly

应用主题

修改站点配置文件_config.yml，把主题改为 butterfly

1
theme: butterfly

安装插件

如果沒有 pug 以及 stylus 的渲染器，还需要下载，否则在项目运行时会报错：

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

升级建议

为了減少升级主题带来的不便，我们还需要做以下操作：采用如下两种方式中的任意一种都行
方式一：
把主题文件夹中的 _config.yml 复制到 Hexo 根目录下，同时重命名为 _config.butterfly.yml。

1
2
3
4
5
6
7
8
将
- blog
  - themes
    - Butterfly
      - config.yml
复制到
- blog
  - _config.butterfly.yml (将_config.yml重命名)

方式二：
推荐把主题默认的配置文件_config.yml 复制到 Hexo 根目录下的source/_data/目录下，然后将文件名改为butterfly.yml（如果 source/_data/ 的目录不存在则创建一个）。

1
2
3
4
5
6
7
8
9
10
将
- blog
  - themes
    - Butterfly
      - config.yml
复制到
- blog
  - source
    - _data
      - butterfly.yml (将_config.yml重命名)

主题页面配置

Front-matter

Front-matter 是每个markdown文件最上方以 — 分隔的区域，用于指定文章的参数。

如果可选的参数，可根据自己的需要添加，不用全部都写在 markdown里， 是在每一个markdown文件里配置

Page Front-matter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: 【必填】页面标题
date: 【必填】页面创建日期
type: 【必填】标签、分类和友情链接三个页面必须填写
updated: 【可选】页面更新日期
comments: 【可选】页面评论模块(默认为true)
description: 【可选】页面描述
keywords: 【可选】页面关键字
top_img: 【可选】页面顶部图片
mathjax: 【可选】展示 mathjax (当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex: 【可选】展示 katex (当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aside: 【可选】展示侧边栏 (默认 true)
aplayer： 【可选】在需要的页面加载 aplayer 的 js 和 css, 请参考文章下面的音乐配置
highlight_shrink： 【可选】配置代码框是否展开 (true/false)(默认设置为 highlight_shrink 的配置)
---

Post Front-matter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
---
title: 【必需】文章标题
date: 【必需】文章创建日期
updated: 【可选】文章更新日期
tags: 【可选】文章标签
categories: 【可选】文章分类
keywords: 【可选】文章关键字
description: 【可选】文章描述
top_img: 【可选】文章顶部图片
comments： 【可选】显示文章评论模块 (默认 true)
cover: 【可选】文章缩略图 (如果没有设置 top_img, 文章页顶部将显示缩略图，可设为 false / 图片地址 / 留空)
toc: 【可选】显示文章 TOC (默认为设置中 toc 的 enable 配置)
toc_number: 【可选】显示 toc_number (默认为设置中 toc 的 number 配置)
auto_open: 【可选】是否自动打开 TOC (默认为设置中 toc 的 auto_open 配置)
copyright: 【可选】显示文章版权模块 (默认为设置中 post_copyright 的 enable 配置)
copyright_author: 【可选】文章版权模块的文章作者
copyright_author_href: 【可选】文章版权模块的文章作者链接
copyright_url: 【可选】文章版权模块的文章连结链接
copyright_info: 【可选】文章版权模块的版权声明文字
mathjax: 【可选】显示 mathjax (当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex: 【可选】显示 katex (当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aplayer: 【可选】在需要的页面加载 aplayer 的 js 和 css, 请参考文章下面的音乐 配置
highlight_shrink：【可选】配置代码框是否展开 (true/false)(默认为设置中 highlight_shrink 的配置)
---

标签页

在项目根目录下，在命令行输入：

1
hexo new page tags

你会找到 source/tags/index.md 这个文件, 修改这个文件内容：

1
2
3
4
5
---
title: 标签
date: 2020-08-28 14:17:49
type: "tags"
---

分类页

在项目根目录下，在命令行输入：

1
hexo new page categories

你会找到 source/categories/index.md 这个文件, 修改这个文件内容：

1
2
3
4
5
---
title: 分类
date: 2020-08-28 14:17:49
type: "categories"
---

友情链接

在项目根目录下，在命令行输入：

1
hexo new page link

你会找到 source/link/index.md 这个文件, 修改这个文件内容：

1
2
3
4
5
---
title: 友情链接
date: 2020-08-28 14:17:49
type: "link"
---

新增友情链接

在 Hexo 项目目录中的 source/_data，创建一个文件 link.yml, 并写入如下内容：

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
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: JerryC
      link: https://jerryc.me/
      avatar: https://jerryc.me/image/avatar.png
      descr: 今日事,今日毕
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网誌框架
- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

class_name 和 class_desc 支持 html 格式书写，如不需要，也可以留空。
友情链接界面也可以由用户自己自定义，只需要在友情链接的 md 档设置就行，以普通的 Markdown 格式书写。
浏览器地址栏输入：http://localhost:4000/link/就可会出现如下效果

音乐

音乐界面使用了插件 hexo-tag-aplayer
具体使用方法请参考插件文档

电影

电影界面使用了插件 hexo-douban
具体使用方法请参考插件的文档。
注意：hexo-douban 会主动生成页面，所以不需要自己创建。对应网页的 top_img 可以在主题配置文件中修改。

404页面

主题内置了一个简单的 404 页面，可在设置中开启

本地预览时，访问出错的网站是不会跳到 404 页面的。如需本地预览，请访问 http://localhost:4000/404.html

修改配置文件_config.butterfly.yml:

1
2
3
4
5
6
# 404页面
# A simple 404 page
error_404:
  enable: true
  subtitle: 页面没有找到
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

404页面如下：
404页面
原文链接：https://demo.jerryc.me/posts/dc584b87/