Butterfly主题安装文档(一)之快速开始

た入场券 2023-01-08 02:13 283阅读 0赞

# 介绍 #

有的人认为 hexo 自带的主题`landscape`非常难看，那么我们有没有好看的主题可选呢？  
\{% hideBlock 查看回答？,bg,color %\}  
当然是有的，有不少的人给我们提供了十分多的主题，查看主题库：https://hexo.io/themes/  
\{% endhideBlock %\}  
hexo-theme-butterfly 是基于 Molunerfinn 的 hexo-theme-melody 的基础上进行开发的。  
**接下来推荐几款觉得好看的主题库？**

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

# 安装 #

\{% tabs tab %\}

在您的项目根目录下：

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

\{% blockquote %\}  
此方法只支持 Hexo 5.0.0 以上版本  
\{% endblockquote %\}  
在您的项目根目录下：

npm i hexo-theme-butterfly

\{% endtabs %\}

# 应用主题 #

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

theme: butterfly

## 安装插件 ##

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

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

## 升级建议 ##

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

将
    - blog
      - themes
        - Butterfly
          - config.yml
    复制到
    - blog
      - _config.butterfly.yml (将_config.yml重命名)

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

将
    - blog
      - themes
        - Butterfly
          - config.yml
    复制到
    - blog
      - source
        - _data
          - butterfly.yml (将_config.yml重命名)

# 主题页面配置 #

## Front-matter ##

Front-matter 是每个markdown文件最上方以 — 分隔的区域，用于指定文章的参数。  
\{% note info %\}  
如果可选的参数，可根据自己的需要添加，不用全部都写在 markdown里， 是在每一个markdown文件里配置  
\{% endnote %\}

### Page Front-matter ###

---
    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 ###

---
    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 的配置)
    ---

# 标签页 #

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

hexo new page tags

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

---
    title: 标签
    date: 2020-08-28 14:17:49
    type: "tags"
    ---

# 分类页 #

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

hexo new page categories

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

---
    title: 分类
    date: 2020-08-28 14:17:49
    type: "categories"
    ---

# 友情链接 #

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

hexo new page link

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

---
    title: 友情链接
    date: 2020-08-28 14:17:49
    type: "link"
    ---

## 新增友情链接 ##

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

- 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/`就可会出现如下效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]

# 音乐 #

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

# 电影 #

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

# 404页面 #

主题内置了一个简单的 404 页面，可在设置中开启  
\{% note warning %\}  
本地预览时，访问出错的网站是不会跳到 404 页面的。如需本地预览，请访问 `http://localhost:4000/404.html`  
\{% endnote %\}  
修改配置文件`_config.butterfly.yml`:

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20221119/8446d9b3773440a08b17d1cd611904a8.png
[Link 1]: https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
[Link 2]: https://github.com/mythsman/hexo-douban
[404]: https://img-blog.csdnimg.cn/20200828145513853.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzY1MzY3,size_16,color_FFFFFF,t_70