安装主题

MyBlog根目录下使用git bash命令打开git窗口。执行下述命令，安装主题

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

选用主题

修改MyBlog根目录下的_config.yml，把主题改为butterfly

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

安装插件

安装pug以及stylus的渲染器

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

升级建议

​ 为了减少升级主题后带来的不便，可使用以下方法（建议，可以不做）
​ 在MyBlog根目录下创建一个文件_config.butterfly.yml，并把butterfly主题目录的_config.yml的内容复制到_config.butterfly.yml
​ 注意：复制的是主题内的_config.yml，而不是MyBlog的_config.yml。也不要把主题目录的_config.yml删掉。
​ 以后只需要在_config.butterfly.yml进行配置就行。
​ 如果使用了 _config.butterfly.yml配置主题的 _config.yml 將不会有效果。
​ Hexo会自动合并主题中的_config.yml和_config.butterfly.yml中的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度更高。

​ butterfly-docs-install-suggestion-1.png

标签页

1、前往你的 MyBlog 博客的根目录,打开git命令行
2、输入hexo new page tags
3、你会找到 source/tags/index.md 这个文件
4、修改这个文件，记得添加 type: “tags”

1
2
3
4
5
6
7
8
---
title: 标签
date: 2018-01-05 00:00:00
type: "tags"
orderby: random
order: 1
---

​ image.png

分类页

1、前往你的 Hexo 博客的根目录
2、输入hexo new page categories
3、你会找到 source/categories/index.md 这个文件
4、修改这个文件，记得添加 type: “categories”

1
2
3
4
5
---
title: 分类
date: 2018-01-05 00:00:00
type: "categories"
---

友情链接

创建友情链接页面

1、前往你的 Hexo 博客的根目录
2、输入hexo new page link
3、你会找到 source/link/index.md 这个文件
4、修改这个文件，记得添加 type: “link”

1
2
3
4
5
---
title: 友情链接
date: 2018-06-07 22:17:49
type: "link"
---

友情链接添加

在MyBlog博客的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
- class_name: 友情鏈接
  class_desc: 那些人，那些事
  link_list:
    - 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 格式，如不需要，也可以留空。

404页面

修改_config.butterfly.yml文件

1
2
3
4
5
# A simple 404 page
error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

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

语言

修改站点配置文件 _config.yml
默认语言是 en
主题支持三种语言
default(en) —— 默认英语
zh-CN (简体中文)
zh-TW (繁体中文)

网站资料

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Site
title: TranscodingBoy  #标题
subtitle: ''        #副标题
description: 为的就是这块技术   #个性签名
keywords:       
author: TranscodingBoy  #作者
language: zh-CN   #语言
timezone: ''    #时区

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://techniquenotes.github.io
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

导航栏设置

参数设置

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

1
2
3
4
nav:
  logo: #image
  display_title: true
  fixed: false # fixed navigation bar

​ image.png

菜单/目录

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Menu 目錄
menu:
  主页: / || fas fa-home
  博文 || fa fa-graduation-cap:
    分类: /categories/ || fa fa-archive
    标签: /tags/ || fa fa-tags
    归档: /archives/ || fa fa-folder-open
  # 生活 || fas fa-list:
  #   分享: /shuoshuo/ || fa fa-comments-o
  #   相册: /photos/ || fa fa-camera-retro
  #   音乐: /music/ || fa fa-music
  #   影视: /movies/ || fas fa-video
  友链: /link/ || fa fa-link
  #留言板: /comment/ || fa fa-paper-plane
  #留言板: /messageboard/ || fa fa-paper-plane
  关于笔者: /about/ || fas fa-heart

https://blog.csdn.net/mjh1667002013/article/details/129290903?spm=1001.2014.3001.5506
开头是图标名，/xxx/是存放内容的文件夹，后面||分开

代码高亮主题

https://cloud.tencent.com/developer/article/2145041

配置里启用 Highlight

修改 Hexo 根目录下的 _config.yml

1
2
3
4
5
6
highlight:
 enable: true
 line_number: true
 auto_detect: false
 tab_replace:
 hljs: true

然后修改 butterfly 主题目录下的配置文件

1
highlight_theme: false

选择自己想要的高亮主题

​ 先请大家打开 科学上网工具，然后登录 Github，接着进入该项目目录下：传送门
​ 选择你想要的代码高亮主题，我这里以 vs 为例 （如果是 AcWing 社区的同学，应该会比较喜欢这个主题）将 vs.css 文件里的内容全部复制下来

修改 CSS 样式文件

​ 新建好一个接下来要 inject 进 butterfly 的 css 文件（如果不会的话，跟好我接下来的每一步）
​ 在 Hexo 根目录下打开文件夹 source，在此处新建一个文件夹 source/css，然后进入 css 文件夹。新建一个文件 custom.css，把 Github 上 vs.css 里的内容先全部复制到该文件里。然后在最开头加上下面几段代码：
source/css/custom.css

1
2
3
4
5
6
7
8
9
10
:root {
  --hl-color: #d3af86;      /*代码框字体顔色 【必须】 (把下面.hljs的 color复製到这里来)*/
  --hl-bg: #221a0f;         /*代码框背景色 【必须】 (把下面.hljs的 background复製到这里来)*/
  --hltools-bg: #321a0f;    /*代码框顶部工具栏背景色 【可选】(如果你关掉了 copy、lang 和 shrink,可不用配置这个）*/
  --hltools-color: #fff;    /*代码框顶部工具栏字体顔色 【可选】(如果你关掉了 copy、lang 和 shrink,可不用配置这个）*/
  --hlnumber-bg: #221a0f;   /*代码框行数背景色 【可选】(如果已经关掉 line_number,可以不用配置这个)*/
  --hlnumber-color: #fff;   /*代码框行数字体顔色 【可选】 (如果已经关掉 line_number,可以不用配置这个)*/
  --hlscrollbar-bg: #d3af86;/*代码框滚动条顔色 【可选】（默认为主题主顔色）*/
  --hlexpand-bg: #d3af86;   /*代码框底部展开背景色 【可选】(如果已经关掉 highlight_height_limit,可以不用配置这个)*/
}

​ 这里填写的 :root 内容，是对于最终渲染到前端时，代码框的样式，这里的参数你先默认填上，后面我会教你怎么调最快。
​ 最后，我们配置 butterfly 主题下的配置文件，引入该 css 文件

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">

总结一下当前已经完成了哪些内容：

  1. 已经将 hljs 配置设好，接下来会用 hljs 对代码块部分进行渲染
  2. 已经完成了对于代码字体高亮的主题配置，接下来代码高亮主题会用 vs2015

配置代码块的样式

推荐配色方案

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/* 代码高亮字体 */
:root {
  --hl-color: #24292e;
  --hl-bg: rgb(246 248 250);
  --hltools-bg: #49b1f587;
  --hltools-color: #ffffff;
  --hlnumber-bg: rgb(235 239 241);
  --hlnumber-color: #221a0f52;
}
.hljs {
  background: white;
  color: black;
}

.hljs-comment,
.hljs-quote,
.hljs-variable {
  color: #008000;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
  color: #00f;
}

.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
  color: #a31515;
}

.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
  color: #2b91af;
}

.hljs-doctag {
  color: #808080;
}

.hljs-attr {
  color: #f00;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link {
  color: #00b0e8;
}


.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

社交图表

书写格式为图标名：url || 描述文字 || color

1
2
3
social:
  fab fa-github: https://github.com/xxxxx || Github || "#hdhfbb"
  fas fa-envelope: mailto:xxxxxx@gmail.com || Email || "#000000"

头像

修改主题配置文件

1
2
3
avatar:
  img: /img/avatar.png
  effect: true # 头像会一直转圈

顶部图

如果不要显示顶部图，可直接配制disable_top_img:true

顶部图的获取顺序

1、页面顶部图的获取顺序：各自配置的top_img > 配置文件的default_top_img
2、文章页顶部图的获取顺序：各自配置的top_img > cover > 配置文件的default_top_img

配置中的值

  • index_img：主页的top_img
  • default_top_img：默认的top_img，当页面的top_img没有配置时，会显示default_top_img
  • archive_img：归档页面的top_img
  • tag_img：tag子页面的默认top_img
  • tag_per_umg：tag子页面的top_img，可配置每个tag的top_img
  • category_img：category子页面的默认top_img
  • category_per_img：category子页面的top_img，可配置每个category的top_img
  • 其他页面(tags/categories/自建页面)和文章页的top_img，请到对应的md页面设置front-matter中的top_img

页面meta显示

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
  page:
    date_type: both # created or updated or both 主页文章日期是创建日或者更新日期或都显示
    date_format: data # date/relative 绝对日期还是相对日期
    categories: true # true or false 主页是否显示分类
    tags: true # true or false 主页是否显示标签
    label: true # true or false 显示描述性文字
  post:
    date_type: both # created or updated or both 文章页日期是创建日或者更新日期或都显示
    date_format: data # date/relative 绝对日期還是相对日期
    categories: true # true or false 文章页是否显示分类
    tags: true # true or false 文章页是否显示标签
    label: true # true or false 显示描述性文字

复制相关配置

可配置网站是否可以复制、复制的內容是否添加版权信息

1
2
3
4
5
6
7
# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
  enable: true //是否开放网站复制权限
  copyright:  //复制的内容后面加上版权信息
    enable: true  //是否开放复制版权信息添加
    limit_count: 50 //字数限制，当复制文字大于这个字数限制时，将在复制内容后加上版权信息

文章页相关配置

文章版权

为你的博客文章展示文章版权和许可。
修改主题配置文件

1
2
3
4
5
6
post_copyright:
  enable: true
  decode: false
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

文章打赏

​ 在你每篇文章的結尾，可以添加打赏按钮。相关二维码可以自行配置。
​ 对于沒有提供二维码的，可配置一张软件的icon图片，然后在link上添加相应的打上链接。用户点击图片就会跳转到链接去。
​ link可以不写，会默认为图片的链接。

1
2
3
4
5
6
7
8
9
reward:
  enable: true
  QR_code:
    - img: /img/wechat.jpg
      link:
      text: 微信
    - img: /img/alipay.jpg
      link:
      text: 支付寶

TOC目录

在文章页，会有一个目录，用于显示TOC
修改主题配置文件

1
2
3
4
5
6
7
toc:
  post: true  //文章页是否显示TOC
  page: true  //普通页面是否显示TOC
  number: true  //是否显示章节数
  expand: false  //是否展开TOC
  style_simple: false # for post   //简洁模式，侧边栏只显示TOC，只对文章页有效
  scroll_percent: true  //是否显示滚动进度百分比

相关文章

修改主题配置文件

1
2
3
4
related_post:
  enable: true
  limit: 6 # 顯示推薦文章數目
  date_type: created # or created or updated 文章日期顯示創建日或者更新日

文章过期提醒

可设置是否显示文章过期提醒，以更新时间为基准。

1
2
3
4
5
6
7
8
# Displays outdated notice for a post (文章過期提醒)
noticeOutdate:
  enable: true
  style: flat # style: simple/flat
  limit_day: 365 # When will it be shown
  position: top # position: top/bottom
  message_prev: It has been
  message_next: days since the last update, the content of the article may be outdated.

文章分页按钮

1
2
3
4
5
6
# post_pagination (分頁)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: 2

博客年份和页脚自定义文本

修改主题配置文件

1
2
3
4
5
6
footer:
  owner:
    enable: true
    since: 2023
  custom_text: Hi, welcome to my <a href="https://techniquenotes.github.io">blog</a>!
  copyright: true # Copyright of theme and framework