自娱自乐,我的博客(二)——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