一、butterfly主题下载与主题更换

在hexo根目录下输入以下命令进行下载

git下载方法

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

npm下载方法

1
npm install hexo-theme-butterfly

修改根目录_config.yml主题

查找theme关键字，将默认主题修改为butterfly

1
theme: butterfly

主题配置文件

新建主题盘配置文件**_config.butterfly.yml，并将theme文件夹下主题配置文件_config..yml内容复制粘贴在_config.butterfly.yml**中。

二、修改网站主页信息

导航栏

将先要添加的目录注释解除掉，并输入以下命令新建相关目录文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
\# Menu 目錄

menu:

 首页: / || fas fa-home

 归档: /archives/ || fas fa-archive

 标签: /tags/ || fas fa-tags

 分类: /categories/ || fas fa-folder-open

 \# 清单||fas fa-list:

  \# 音乐: /music/ || fas fa-music

 \#  电影: /movies/ || fas fa-video

 友链: /link/ || fas fa-link

 关于: /about/ || fas fa-heart
1
hexo new page xxx

社交图标

取消注释并修改相关链接

1
2
3
social:
  fab fa-github: https://github.com/xxxxx || Github || "#hdhfbb"
  fas fa-envelope: mailto:[email protected] || Email || "#000000"

头像

在站点根目录/source下新建img文件夹，将要使用的图片放入，之后修改下列配置

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

代码

代码复制

1
highlight_copy: true

代码高度限制

1
highlight_height_limit: false # unit: px（修改时写入数字）

文章

文章封面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#显示文章相关信息 
post_meta:
  page:
    date_type: both # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
    date_format: relative # 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: relative # 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
7
8
9
# 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: false

页面美化

页脚自定义文本

1
custom_text: Hi, welcome to my <a href="https://butterfly.js.org/">blog</a>!

公告栏

1
2
3
card_announcement:
 enable: true
 content: 欢迎来到ourobrosの博客

评论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
comments:

  # Up to two comments system, the first will be shown as default

  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk

  use: # Valine,Disqus
  text: true # Display the comment name next to the button

  # lazyload: The comment system will be load when comment element enters the browser's viewport.

  # If you set it to true, the comment count will be invalid

  lazyload: true
  count: true # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

页面美化

1
2
3
4
5
6
7
8
9
10
11
\# Beautify (美化頁面顯示)

beautify:

 enable: true

 field: post # site/post

 title-prefix-icon: # '\f0c1'

 title-prefix-icon-color: # '#F47466'

主题魔改参考教程

https://www.fomal.cc/