自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

自娱自乐，我的博客（二）——Butterfly主题与博客美化

前言：
阅读这篇文章我能学到什么？
  上一篇讲了如何搭建个人博客，我们期望博客更美观和个性化，因此之后的几篇文章都会讲解如何去美化我们的博客。即便是程序员懂网页前端的只是一小部分，另外也是使我们更简单容易的维护博客，通常我们都会选择一个喜欢的主体并在此基础上进行个性化设置。我推荐Butterfly作为博客主题，非常美观且配置丰富。

1 更换博客主题

  Butterfly主题你可以在Hexo官网的主题页搜索找到它，或者直接访问Butterfly 主题的首页，你可以先一览它的“美貌”，并且里面有关于该主题的使用教程。

1.1 安装Butterfly

  在你的hexo工作的根目录里执行cmd指令下载安装Butterfly主题。

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

1.2 配置Butterfly

  此时在themes目录下就会多一个butterfly目录，里面放的就是该主题的相关文件。但要使其生效还需要修改hexo根目录下的配置文件__config.yml中的 theme 关键字的值，其默认使用的是landscape主题（如果以后用不到就删除吧）。

1
theme: butterfly

  需要注意的是hexo对语法格式要求很严格，请不要省略冒号后面的空格。
  主题下载好后请将主题下的配置文件即themes/butterfly/__config.yml复制到source/_data目录下，并重命名为butterfly.yml，如果_data目录不存在就手动新建一个。之后对Butterfly主题的配置都在butterfly.yml文件中进行，因为该文件的修改会默认覆盖主题目录下的__config.yml文件里的修改，这样做是方便以后更新主题。

1.2 安装pug和stylus的渲染器

  由于该主题使用了这些渲染器所以要想正常显示必须安装它们。在hexo工作目录下执行cmd指令。

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

  现在准备就绪，让我们来看看效果。在hexo工作目录执行指令进行清空。

1
hexo clean

  然后执行指令重新生成站点文件。

1
hexo generate

  随后执行指令在本地预览。

1
hexo server

  在浏览器中输入网址 http://localhost:4000 进行本地访问。后续配置文件的修改都需要重新生成后才能看到效果，不再重复描述这个过程。

Butterfly.gif

2 设置站点资料

  在hexo工作目录的配置文件中__config.yml输入属于自己的配置信息。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，搜索引擎会搜索这些关键词
author 博主名字
language 网站语言，默认’’或 en 为英语，中文为 zh-CN
timezone 网站使用时区，默认使用访问电脑所在时区也可以指定比如使用上海时区Asia/Shanghai。建议使用默认就行了

  我的设置如下。

1
2
3
4
5
6
7
8
# Site
title: OnlyCalm's Blog
subtitle: 'onlycalm'
description: '自娱自乐，做大娱乐家'
keywords: OnlyCalm, Calm, Blog
author: OnlyCalm
language: zh-CN
timezone: ''

2 修改导航菜单

  导航菜单每一个按钮由图标和描述文字组成，我们可以修改图标和文字。
  Butterfly支持font-awesome图标，在配置文件source/_data/butterfly.yml进行配置文本和图标。

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  修改之后的效果如下。

New navigation menu.gif

  图标可以在Font Awesome网站上搜索，有很多免费的图标，不过更多是收费的图标(带pro的，目前收费是一年99)。从上到下的书写顺序对应页面从左到右的显示顺序。

Font awesome github.png

  使用方法网站会给出，我们只要照葫芦画瓢填写就行了。

Use icon.png

3 修改社交图标和头像

3.1 修改设计图标

  社交图标的语法格式为 图标名 : url || 描述，根据需要进行配置。

1
2
3
social:
  fab fa-github: https://github.com/onlycalm || GitHub
  fab fa-cuttlefish: https://blog.csdn.net/qq_42475711 || CSDN

3.2 修改头像

  继续修改butterfly.yml配置文件中关于头像的配置，在avatar的img参数后给出作为头像的图片地址。找好你需要作为头像的图片，将其拷贝到博客根目录下的source/images文件夹中，如果不存在就新建一个。不建议放在主题目录下的sourse/img文件夹内，这只作用于某个主题，并且未来更新升级也麻烦，也容易丢失图片。

1
2
3
avatar:
  img: /images/avatar.png
  effect: false

  如果将 effect 配置为 true 则头像会一直旋转。
  修改社交图标和头像后的效果为见下图。

Social avatar.gif

3.3 修改网站图标

  主题默认使用的网站图标是Hexo的图标，如果想要更加个性化可以将图标文件拷贝到博客根目录下source/images下。
  修改 butterfly.yml 配置文件，找到 favicon 关键字设置图标路径。

1
favicon: /images/favicon.png

Favicon.png

4 修改Footer和主题颜色

4.1 修改Footer设置

  Footer是对博客页脚的设置，你可以设置博客建站的年份，以及加入一段文本描述。默认会开启一个Hexo和Butterfly的版权声明，如果你不喜欢也可以将其关闭。

1
2
3
4
5
since: 2020

footer_custom_text: 生生灯火，明暗无辄</br>欢迎访问 <a href="https://onlycalm.github.io">OnlyCalm</a>! 的博客

footer_copyright: false

  since 参数用于配置博客建站年份，footer_custom_texto 是显示在页脚的描述文本，支持html语法。footer_copyright 配置为false可以将版权声明关闭。

4.2 修改主题

4.2.1 修改UI颜色

  在主题配置文件butterfly.yml中找到主题色调的修改项theme_color 。

参数 描述
main 主题主色调颜色。能修改大部分颜色
paginator 分页器颜色
button_hover 按钮悬浮状态颜色。比如页面右下键有回到顶部和设置按钮，将鼠标移动上去使其获得焦点时的颜色
text_selection 文本内容被选中时的背景色
link_color 链接颜色
meta_color meta 标签颜色
hr_color hr 标签颜色
code_foreground 代码前景色
code_background 代码背景色
toc_color 文章 toc 颜色
blockquote_padding_color 块引用填充色
blockquote_background_color 块引用背景色

  根据个人喜好配置，下面是我的配置供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
   enable: true
   main: "#8DB6CD"
   paginator: "#C6E2FF"
   button_hover: "#EE8262"
   text_selection: "#6fa8dc"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#CD6889"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

4.2.2 修改网站背景

  在主题配置文件butterfly.yml中找到关键字 background，该关键字之后可以直接设置颜色值也可以给出图片的url显示图片。白色有时候太亮太刺眼了，所以我将其配置为浅灰色。

1
background: "#d9d9d9"

4.2.2 修改Footer颜色

  Footer可以是top_img图片的一部分（图片的底部），也可以和主题色保持一致。

1
footer_bg: true

  我将其配置为 true 则显示top_img的下面一部分。
  下面是效果展示。

Color.gif

5 侧边栏设置

  很多博客平台都提供侧边栏罗列出“博客专栏”、“写作时间线”、“近期文章”等，同样的Butterfly也提供这样的功能，具体需要显示那些板块可由我们自己配置。下图是默认配置，已经符合我的习惯所以我就不需要修改它了，大家根据自己需要相应修改。

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
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

6 背景特效

6.1 彩带背景特效

6.1.1 静态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon 参数，使能该项功能。你可以配置彩带的大小、透明度、风格以及单机鼠标左键时是否更换彩带，是否在手机端显示彩带。

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

6.1.2 动态彩带背景

  在主题配置文件butterfly.yml中找到 canvas_ribbon_piao 参数，使能该项功能。你可以配置是否在手机端显示动态彩带。

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: true

6.2 Canvas_nest特效

  该特效会在屏幕上较为均匀的生成一些离散点运动，相邻的点较近时连成线，也能和鼠标进行互动。在主题配置文件中找到 canvas_nest 参数，使能该项功能。我们可以配置颜色、透明度、样式、点数量以及是否在手机端显示。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  color: '0, 205, 102' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 200 # the number of lines, default: 99.
  mobile: false

Canvas.gif

7 鼠标点击特效

7.1 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 fireworks 参数，如果需要使能功能即可。

1
2
3
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999

7.2 鼠标点击烟花特效

  在主题配置文件butterfly.yml中找到 click_heart 参数，如果需要使能功能即可。

1
click_heart: false

7.3 鼠标点击浮现字符特效

  在主题配置文件butterfly.yml中找到 ClickShowText 参数，使能功能。text 参数下可以添加文本，鼠标点击时会从上到下轮循显示，fontSize 文本为大小。

1
2
3
4
5
6
7
8
9
ClickShowText:
  enable: true
  text:
    - 于心有愧
    - 信心花舍
    - 时光隧道
    - 四季
    - 不求人
  fontSize: 15px

Click.gif

8 副标题字体

  在Butterfly主题的主页上，网站标题下有个副标题栏，以动画的形式显示一串文本的键入又删除，而且内容可变，如果你想修改这个文本内容可以在主题配置文件butterfly.yml下找到 subtitle 关键字配置。你可以使能该项功能，配置是否以打字动画效果展示，是否循环显示字符串以及字符串内容。

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
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 纪念我过去 为人如此风趣
    - 活得精彩 结尾切勿流眼泪
    - 友情爱情两边都发现 亏欠
    - 没求过你 你就当我骄傲
    - 离时代远远 无人间烟火
    - 从今天开始 相识当做别离
    - 做喜欢的工作和享受游戏 一死了 怎细味

Roll string.gif

9 更换页首图片

  Butterfly主题可以修改主页的图片，page页首图片也可以被修改。

9.1 更换主页图片

  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定主页所用的图片路径。

1
2
# the banner image of home page
index_img: /images/index_img.jpg

9.2 设置顶部图default_top_img和top_img

  top_img是在md文件的front-matter中配置的，它可以为每个md生成的页面指定页首的图片，未设置top_img的md文件会使用default_top_img指定的图片作为页首图。
  将你要使用的图片拷贝到sourse/images文件夹内。在博客根目录的sourse/_data文件夹下butterfly.yml配置文件中进行配置，指定default_top_img所用的图片路径。

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /images/default_top_img.png

  我们尝试给music页面通过top_img指定一个页首图片。将图片拷贝至sourse/images，打开music对应的index.md文件进行配置top_img参数。当然其他页面也可以指定顶部图。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
top_img: /images/music_top_img.jpg
---

Top img.png

9.3 设置封面图default_cover

  上面我们提到了顶部图，如果文章设置了封面图，则文章封面和顶部都将显示为指定的封面图。在配置文件中可指定多个封面图，会随机显示一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
default_cover:
  - /images/default_top_img_1.jpg
  - /images/default_top_img_2.jpg
  - /images/default_top_img_3.jpg
  - /images/default_top_img_4.jpg
  - /images/default_top_img_5.jpg
  - /images/default_top_img_6.jpg
  - /images/default_top_img_7.jpg
  - /images/default_top_img_8.jpg
  - /images/default_top_img_9.jpg
  - /images/default_top_img_10.jpg
  - /images/default_top_img_11.jpg
  - /images/default_top_img_12.jpg
  - /images/default_top_img_13.jpg

  我们也可以在front-matter中指定文章的封面图，同时也相当于指定了顶部图了。

1
2
3
4
5
6
7
---
title: music
date: 2020-07-17 22:12:10
type: music
aplayer: true
cover: /images/index_img.jpg
---

10 页面透明化

  我们在Hexo根目录下source/css目录下新建文件butterfly.css，如果没有css文件夹则自己新建。
  打开butterfly.yml配置文件，配置刚才添加的css文件路径。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    # - <script src="xxxx"></script>

  可以配置博文的背景、首页卡背景、页面页背景、页脚背景等的透明度，透明度和颜色可直接由rgba函数设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*页脚背景设置白色透明*/
#footer {
    background: rgba(255,255,255,.3);
}

/*文章背景*/
.layout_post>#post {
    background: rgba(255,255,255,.7);
}

/*其他背景*/
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}

  将这些代码添加到刚才新建的butterfly.css文件中即可。
  还需要注意的是，如果你的footer配置了显示top_img图片将不能被透明，需要配置为false。请在博客根目录的配置文件_config.yml中确保如下配置

1
2
# Show the footer background image (same as top_img)
footer_bg: false

Transparent.png

11 动态渐变

11.1 页面背景动态渐变

  在butterfly.css文件里添加如下代码，即可实现背景动态渐变色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#web_bg {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

  根据自己喜好可修改linear-gradient函数中的四个颜色参数。

11.2 footer背景动态渐变

  类似的，页脚的背景也可以实现动态渐变，在butterfly.css中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#footer {
    background: linear-gradient(-45deg, #ead1dc, #cfe2f3, #fff2cc, #d9d2e9);
    background-size: 400% 500%;
    animation: gradientBG 15s ease infinite;
}

  如果你想实现背景和footer同步的渐变效果，建议将背景配置动态渐变，footer配置透明。下面是我配置的效果展示。

Transparent gradient.gif

  为了使得页脚的字体在背景动态渐变的时候依旧能显示清晰，我还修改了页脚字体的颜色。同样的，在butterfly.css文件中添加如下代码修改页脚字体颜色。

1
2
3
4
5
6
7
8
9
/*页脚 字体默认设为黑色*/
#footer-wrap {
    color: rgb(0,0,0);
}

/*页脚 a 标签字体默认设为蓝色*/
#footer-wrap a {
    color: rgb(0,0,255);
}

12 修改鼠标样式

  需要将鼠标样式的icon图片放到themes/butterfly/source/img目录下。
  在themes/butterfly/source/css/butterfly.css文件里添加如下代码，即可实现修改鼠标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
body,
title{
    cursor: url(/img/Normal.cur),
        default;
}

a,
img,
button,
address{
    cursor: url(/img/Link.cur),
        default;
}

Cursor.gif

  这么改好像有个Bug，如果配置了鼠标点击时浮现文字，那么鼠标样式在点击时会短暂出现默认样式。

13 打字特效

  Butterfly已经整合了打字特效插件activate-power-mode，我们只需要在配置文件butterfly.yml中开启这个功能即可。

1
2
3
4
5
6
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)

Typing effect.gif

14 友链

  在博客中可以给浏览者推荐其他优秀的博客或者网站，Butterfly能创建出漂亮的友链页面。
  首先需要为友链创建一个page页，在hexo根目录下执行指令

1
hexo new page link

  然后在source/link/index.md文件头添加如下内容。

1
2
3
4
5
---
title: 友链
date: 2020-08-02 13:11:11
type: link
----

  之后在source/_data目录下创建文件link.yml在其中添加如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 友情链接
  class_desc: 人来人往
  link_list:
    - name: onlycalm
      link: https://onlycalm.github.io
      avatar: /images/avatar.png
      descr: 自娱自乐，做大娱乐家

- class_name: 网站
  class_desc: 推荐访问
  link_list:
    - name: CSDN
      link: https://www.csdn.net
      avatar: https://csdnimg.cn/public/favicon.ico
      descr: 国内最大的程序员博客平台

    - name: GitHub
      link: https://github.com
      avatar: https://github.com/fluidicon.png
      descr: 全球最大的代码托管平台

Link.png

15 添加樱花飘落效果

  Buterfly添加动态飘落效果非常方便，我们只需要下载相应的js文件，然后修改butterfly.yml配置即可，不需要修改源码文件。
  将文件 sakura.js 下载到本地（点击然后右键另存为），在Hexo根目录下找到source/js目录，如果js目录不存在则自己新建，将sakura.js放到js目录下。
  在配置文件butterfly.yml中进行如下配置。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/css/butterfly.css">
  bottom:
    - <script src="/js/sakura.js"></script>                   #加载sakura.js

  重新部署网站后可看到如下效果。

Sakura.png