主题的安装和部署

1.应用主题

修改Hexo根目录下的**_config.yml**,把主题改为hexo-theme-butterfly

1
theme: hexo-theme-butterfly

2.安装插件

如果你没有pug以及stylus的渲染器，请先下载安装

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

3.Front-matter

Front-matter是markdown文件最上方以**- - -**分隔的区域，用来指定文件的参数

  • Page Front-matter用于页面配置
  • Post Front-matter用于文章页配置

Page Front-matter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
---
写法 解释
title 【必需】页面标题
date 【必需】页面创建日期
type 【必需】标签、分类、和友情链接三个页面需要配置
updated 【可选】页面更新日期
comments 【可选】页面描述
description 【可选】页面关键字
keywords [可选]展示页面评论板块(默认 true)
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
25
---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
---

title 【必需】文章标题
date 【必需】文章创建日期
updated 【可选】文章更新日期
tags 【可选】文章便签
categories 【可选】文章分类
keywords 【可选】文章关键字
description 【可选】文章描述
top_img 【可选】文章顶部照片
comments 【可选】展示文章评论（默认为true）
cover 【可选】文章缩略图
toc 【可选】展示文章TOC（默认为设置中toc的enable配置）
toc_number 【可选】展示toc_number(默认为设置中toc的number配置)
copyright 【可选】展示文章版权模块（默认为配置中post_copyright的enable配置）
copyrigth_author 【可选】文章版权模块的文章作者
copyrigth_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的配置)
aside 【可选】展示侧边栏（默认为true）

4.标签页面

  1. 前往你的Hexo博客的根目录
  2. 输入 hexo new page tags
  3. 找到source/tags/index.md
  4. 修改文件
1
2
3
4
5
---
title: 标签
date: 2021-12-03 16:43:01
type: "tags"
---

5.分类页面

  1. 前往你的hexo博客的根目录
  2. 输入hexo new page categories
  3. 找到source/categories/index.md
  4. 修改文件
1
2
3
4
5
---
title: 分类
date: 2021-12-03 16:44:45
type: "categories"
---

6.友链页面

  1. 前往你的hexo博客的根目录
  2. 输入hexo new page link
  3. 找到source/link/index.md
  4. 修改文件
1
2
3
4
5
---
title: 友情链接
date: 2021-12-03 16:45:46
type: "link"
---

7.友链的添加

在source/_data(如果没有 _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
27
28
29
- class_name: 优秀的程序员博客
  class_desc: 里面有很多优秀的程序员博客网站
  link_list:
    - name: 江南一点雨
      link: http://www.javaboy.org/
      avatar: https://s2.loli.net/2021/12/04/uEXelc3BgpmMfnK.png
      descr: 程序界大佬
    - name: KuangStudy
      link: https://www.kuangstudy.com/
      avatar: https://s2.loli.net/2021/12/04/tXacVTh7ObRDpl4.png
      descr: 程序界大佬

- class_name: 导航推荐
  class_desc: 这些导航很强大，肯定能帮你解决问题
  link_list:
    - name: marstab
      link: https://www.marstab.com/hero/O2OTHAAN246
      avatar: https://s2.loli.net/2021/12/05/C6wAalpUTcnQeYJ.png
      descr: 第一
    - name: 爱达杂货铺
      link: https://adzhp.cn/
      avatar: https://s2.loli.net/2021/12/05/Fpse1KWqkDVag8j.png
      descr: 第二
    - name: 怪叫兽
      link: http://www.giaoshou.com/
      avatar: https://s2.loli.net/2021/12/05/qFfSAbUV6E4TJwn.png
      descr: 第三

主题的美化

1.语言

修改hexo根目录配置文件_config.yml

默认语言是：en

主题支持三种语言

  • default(en)
  • zh_CN(简体文件)
  • zh_TW(繁体文件)

2.网站资料

1
2
3
4
5
6
7
8
# Site
title: 
subtitle: 
description: 
keywords:
author: 
language: 
timezone:

3.导航菜单

找到主题目录下的_config.yml文件

1
2
3
4
5
6
7
8
9
10
11
menu:
  Home: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  留言板: /messageboard/ || fa fa-paper-plane
  日志: /timeline/ || fa fa-bell
  友链: /link/ || fas fa-link
  关于: /about/ || fa fa-sitemap
  myself: /myself/ || fa fa-id-card

必须是 **/XXX/**，然后 || 分开，最后为图标名

4.代码相关

代码高亮主题

Butterfly支持六种代码高亮主题：

  • darker
  • pale night
  • light
  • ocean
  • mac
  • mac light

修改主题配置文件

1
2
# darker / pale night / light / ocean / mac / mac light / fals
highlight_theme: light

代码复制

修改主题配置文件

1
2
 # copy button
highlight_copy: true

代码框展开/关闭

  • true 全部代码框不展开，需点击>打开
  • false 代码框展开，有>点击按钮
  • none 不展示>按钮

修改主题配置文件

1
2
# true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_shrink: false

代码高度限制

超过一定高度的代码将会被隐藏，并展示展开按钮，如果需要的话直接在后面添加数字，例如highlight_height_limit: 200

1
2
# unit: px
highlight_height_limit: false

代码换行

在默认情况下，使用hexo编辑不会实现代码自动换行，如果你不希望在代码块的地方有滚动条，可以考虑开放代码换行的功能

修改主题配置文件：

1
code_word_wrap: ture

如果你是使用 highlight 渲染，需要找到hexo根目录的配置文件_config.yml，將line_number改成false:

1
2
3
4
5
6
7
highlight:
  enable: true
  line_number: false  # <- 改這裏
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

如果你是使用 prismjs 渲染，需要找到hexo根目录的配置文件_config.yml，將line_number改成false:

1
2
3
4
5
prismjs:
  enable: false
  preprocess: true
  line_number: false  # <- 改這裏
  tab_replace: ''