avatar

目录
Hexo-Theme-Butterfly快速入门及全面配置优化

在转载了原作者的配置文章基础之上,对语言对配置进行了优化和整合,尽量做到更加贴合零基础博客爱好者的配置和使用。原作者博客地址,原配置文档链接

快速开始

hexo 4.2以上的系统需要安装cheerio

npm install cheerio@0.22.0 –save

主题安装

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

安装pub和stylus渲染器

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

主题升级

为了主题的平滑升级,Butterfly 使用了 data files特性。
推荐把主题默认的配置文件_config.yml复製到 Hexo 工作目录下的source/_data/butterfly.yml,如果source/_data的目录不存在那就创建一个。

注意,如果你创建了butterfly.yml, 它将会替换主题默认配置文件_config.yml里的配置项 (不是合并而是替换), 之后你就只需要通过git pull的方式就可以平滑地升级 theme-butterfly了。

主题页面

Page Front -matter

markdown
1
2
3
4
5
6
7
8
9
10
---
title:
date:
type: (tags,link,categories这三个页面需要配置)
comments: (是否需要显示评论,默认true)
description:
top_img: (设置顶部图)
mathjax:
katex:
---

Post Front-matter

markdown
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title:
date:
tags:
categories:
keywords:
description:
top_img: (除非特定需要,可以不写)
comments 是否显示评论(除非设置false,可以不写)
cover: 缩略图
toc: 是否显示toc (除非特定文章设置,可以不写)
toc_number: 是否显示toc数字 (除非特定文章设置,可以不写)
copyright: 是否显示版权 (除非特定文章设置,可以不写)
mathjax:
katex
hide: 是否隐藏文章
---

标签(tags)页

  1. 到 Hexo 博客的根目录
  2. 命令行输入hexo new page tags
  3. 修改source/tags/index.md文件
    markdown
    1
    2
    3
    4
    5
    ---
    title: 标籤
    date: 2018-01-05 00:00:00
    type: "tags"(添加项)
    ---

    分类(categories)页

  4. 到 Hexo 博客的根目录
  5. 命令行输入hexo new page categories
  6. 修改source/categories/index.md文件
    markdown
    1
    2
    3
    4
    5
    ---
    title: 分类
    date: 2018-01-05 00:00:00
    type: "categories" (添加项)
    ---

    留言板(messageboard)页

  7. 到 Hexo 博客的根目录
  8. 命令行输入hexo new page messageboard
  9. 修改source/messageboard/index.md文件
    markdown
    1
    2
    3
    4
    ---
    title: 留下你的想法~
    date: 2018-01-05 00:00:00
    ---

    音乐(music)页

  10. 到 Hexo 博客的根目录
  11. 命令行输入hexo new page music
  12. 修改source/music/index.md文件
    markdown
    1
    2
    3
    4
    ---
    title: 那些年,我们听过的音乐
    date: 2018-01-05 00:00:00
    ---

    电影(movies)页

  13. 到 Hexo 博客的根目录
  14. 命令行输入hexo new page movies
  15. 修改source/movies/index.md文件
    markdown
    1
    2
    3
    4
    ---
    title: 那些年,我们看过的电影
    date: 2018-01-05 00:00:00
    ---

    照片(photos)页

  16. 到 Hexo 博客的根目录
  17. 命令行输入hexo new page photos
  18. 修改source/photos/index.md文件
    markdown
    1
    2
    3
    4
    ---
    title: 那些年,我们拍过的回忆
    date: 2018-01-05 00:00:00
    ---

    友情链接

    创建友情链接页面

  19. 到 Hexo 博客的根目录
  20. 命令行输入hexo new page link
  21. 修改source/link/index.md文件
    markdown
    1
    2
    3
    4
    5
    ---
    title: 友情链接
    date: 2018-06-07 22:17:49
    type: "link" (添加项)
    ---

    友情链接添加

    在Hexo博客目录中的source/_data,创建一个文件link.yml,内容如下:
    yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    class:
    class_name: 友情链接
    link_list:
    1:
    name: xxx
    link: https://blog.xxx.com
    avatar: https://cdn.xxxxx.top/avatar.png
    descr: xxxxxxx
    2:
    name: xxxxxx
    link: https://www.xxxxxxcn/
    avatar: https://xxxxx/avatar.png
    descr: xxxxxxx

    友情链接界面设置

    需要添加友情链接,可以在Butterfly.yml配置
    可在友情链接上写上自己的个人资料,方便其他人添加。
    yml
    1
    2
    3
    4
    5
    6
    7
    8
    Flink:
    headline: 友情链接
    info_headline: 我的Blog资料
    name: Blog 名字: JerryC
    address: Blog 地址: https://jerryc.me/
    avatar: Blog 头像:https://jerryc.me/img/avatar.png
    info: Blog 简介: 今日事,今日毕
    comment: 如果需要交换友链,请留言

    音乐

  • 音乐界面使用了插件hexo-tag-aplayer

  • 使用方法请参考插件的文档

  • 音乐页面只是普通的page页,按普通页面操作生成就行。

电影

  • 电影界面使用了插件hexo-douban

  • 使用方法请参考插件的文档。

    配置

    语言

    修改站点配置文件 _config.yml
    默认语言是en
    主题支持三种语言

  • default(en)

  • zh-CN (简体中文)

  • zh-TW (繁体中文)

    网站资料

    修改网站各种资料,例如标题、副标题和邮箱等个人资料,请修改博客根目录的_config.yml

    yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Site
    title: 可乐不加冰。
    subtitle: 'Diary'
    description: '生命不息,创作不止'
    keywords:
    author: 初晴
    language: zh-CN
    timezone: ''
    email:

    导航菜单

    配置butterfly.yml

    yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    menu:
    Home: / || fa fa-home
    Archives: /archives/ || fa fa-archive
    Tags: /tags/ || fa fa-tags
    Categories: /categories/ || fa fa-folder-open
    Link: /link/ || fa fa-link
    About: /about/ || fa fa-heart
    List||fa fa-list:
    - Music || /music/ || fa fa-music
    - Movie || /movies/ || fa fa-film
    Code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    menu:
    首页: / || fa fa-home
    时间轴: /archives/ || fa fa-archive
    标签: /tags/ || fa fa-tags
    分类: /categories/ || fa fa-folder-open
    清单||fa fa-heartbeat:
    - 音乐 || /music/ || fa fa-music
    - 照片 || /Gallery/ || fa fa-picture-o
    - 电影 || /movies/ || fa fa-film
    友链: /link/ || fa fa-link
    关于: /about/ || fa fa-heart
    留言板: /messageboard/ || fa fa-link

    以上的各个案件的顺序可以自定义

    代码

    代码高亮主题

    Butterfly 支持了 Material Theme全部 5 种代码高亮样式:

  • default

  • darker

  • pale night

  • light

  • ocean

配置 butterfly.yml

yml
1
highlight_theme: light

代码复制

主题支持代码复制功能,默认开启。

配置butterfly.yml

yml
1
highlight_copy: true

代码框展开关闭

点击>可展开代码或收起,默认开启。
配置butterfly.yml

yml
1
highlight_shrink: true

代码换行

在代码块的区域开启或关闭横向滚动条,默认开启滚动条。
配置butterfly.yml

yml
1
code_word_wrap: true # 关闭滚动条

然后找到你站点的 Hexo 配置文件_config.yml,将line_number改成false:

yml
1
2
3
4
5
highlight:
enable: true
line_number: false # 改为false
auto_detect: false
tab_replace:

社交图标

Butterfly支持font-awesome v4font-awesome v5. 如需开启font-awesome v5,需要在Butterfly.yml上开启

yml
1
2
3
4
CDN_USE:
css:
- https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
- https://use.fontawesome.com/releases/v5.8.1/css/all.css

无论V4还是V5,书写格式都是一样的图标名:url

yml
1
2
3
social:
fa fa-github: https://github.com/Fzyproj
fa fa-rss: /atom.xml

主页文章节选(自动节选和文章页description)

这里我们不难看出,我们通常用more标签来截断文章的做法无效了。只能使用auto_excerpt字段和文章post中的description字段来设置在首页文章的梗概信息。

注意:如果开启了自动节选功能,代码块的显示将有可能不正常。

顶部图

顶部图有2种配置:具体url 和(留空,true和false,三个效果一样)

page页

当具体url时

主页的顶部图可以在Butterfly.yml设置index_img
archives页的顶部图可以在Butterfly.yml设置archive_img
其他page页的顶部图可以在各自的md页面设置front-matter中的top_img

页面如果没有设置各自的top_img,则会显示default_top_img图片

当顶部图留空,true和false

主页会显示纯颜色的顶部图
其他page的顶部图没有设置时,也会显示纯颜色的顶部图

post页

post页的顶部图会优先显示各自front-matter中的top_img,如果没有设置,则会缩略图(即各自front-matter中的cover),如果没有则会显示显示default_top_img图片

文章相关项

打赏
  • 微信
    微信
  • 支付宝
    支付宝