前几篇文章教了大家如何在GitHub上部署hexo博客以及怎么写文章，这次我们一起换掉其默认的主题，并进行一些简单配置，让咱们的博客更充满特色。
一、挑选心仪的hexo主题
这是我们未更换前，默认主题的博客效果：
?去哪挑选心仪的主题呢？
去官方文档给的链接地址：Themes | Hexo，那里有好几百款其他朋友制作好的主题。
此外还可以去某乎上或其他地方看看别人分享的好看的主题样式，如果实在没有合自己口味的，先选个差不多的凑合用吧，以后可以对主题进行个性化魔改。
我这次演示的主题叫“Butterfly”，博客效果示例请见下方链接：
Butterfly - A Simple and Card UI Design theme for Hexo
更多朋友们的博客示例（可以看到很多朋友进行了魔改）：
该主题的GitHub地址是：
jerryc127/hexo-theme-butterfly: 🦋 A Hexo Theme: Butterfly (github.com)
二、安装hexo主题
方法很简单，就一行命令。
老规矩，打开cmd，通过cd命令进入存放你博客源文件的文件夹进行操作，
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
注意一下，butterfly主题的作者建了两个分支，
为了追求稳定，这里安装的是其稳定分支 （master分支），
当然你也可以选择去安装作者的开发测试版（dev分支），但可能存在 bug。
想了解更多请见butterfly官方安装文档：
回车后非常快，就在本地克隆下载好了，这时可以发现在themes（主题）文件夹下出现了butterfly的文件夹。
三、应用hexo主题
1.应用主题
用VScode打开Hexo 根目录（博客源文件的文件夹）下的 _config.yml，
拉到代码最下面，把主题（默认是theme:?landscape）修改 为butterfly，
theme: butterfly?Ctrl+S保存，最小化VScode。
2.安装插件
如果你没有 pug 以及 stylus 的渲染器，请下载安装：
npm install hexo-renderer-pug hexo-renderer-stylus --save?因为该主题的HTML文件和CSS样式文件是用 pug 以及 stylus写出来的，不安装没法正常显示。
在国内下载过程可能会很慢，可以咳咳咳一下那个墙....
3.查看效果
我们先清理一下，
hexo clean再生成一下，
hexo g启动一下本地的服务器先瞅瞅，
hexo s?浏览器地址栏输入：http://localhost:4000，
?OK，更换成功！之后进行一些简单的更改就行了。Ctrl+C关闭本地预览。
四、如何创建新页面
刚刚安装并应用的主题只有一个页面，如何向其他博客一样创建一些其他的页面呢？
1.创建标签页
在cmd博客根目录执行命令，
hexo new page tags会创建 source/tags/index.md 这个文件，
用vscode打开它，加上 type: "tags" 这行代码，并Ctrl+S保存，如下：
---
title: tags
date: 2021-09-09 14:31:10
type: "tags"
---
2.创建分类页
?在cmd博客根目录执行命令，
hexo new page categories会创建 \source\categories\index.md 这个文件，
用vscode打开它，加上 type: "categories" 这行代码，并Ctrl+S保存，如下：
---
title: tags
date: 2021-09-09 14:31:10
type: "categories"
---
3.创建友情链接页
?在cmd博客根目录执行命令，
hexo new page link会创建 \source\link\index.md 这个文件，
用vscode打开它，加上 type: "link" 这行代码，并Ctrl+S保存，如下：
---
title: tags
date: 2021-09-09 14:31:10
type: "link"
---
（1）关于添加友情链接
在Hexo博客目录中的 source/_data（如果没有 _data 文件夹，请自行创建），
创建一个文件link.yml，并用vscode按如下格式即可，
不会创建的朋友吗你们可以新建个txt，名称改成link.yml就行了，
用vscode打开它进行编辑即可，如以下代码所示：
（每个友情链接包括“名称”、“网址”、“头像地址”以及简单的“描述”等部分）
- class_name: 友情链接
class_desc: 那些人，那些事
link_list:
- name: Hexo
link: https://hexo.io/zh-tw/
avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
descr: 快速、简单且强大的网誌框架
- class_name: 网站
class_desc: 值得推荐的网站
link_list:
- name: Youtube
link: https://www.youtube.com/
avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
descr: 视频网站
- name: Weibo
link: https://www.weibo.com/
avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
descr: 中国最大社交分享平台
- name: Twitter
link: https://twitter.com/
avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
descr: 社交分享平台
（2）关于友情链接界面的设置
由butterfly主题 2.2.0 版本起，友情链接界面可以由用户自己自定义，只需要在友情链接的md文档中设置就行，以普通的Markdown格式书写。
4.创建图库页面
图库页面就是全放那些有着不同分类的图片库的页面，它只是普通的页面，
你只需要hexo n page "xxxxx" 创建你的页面就行，然后使用标签外挂 galleryGroup，
比如我想在一个页面中创建插入以下三个图库：
?代码就可以用vscode照着这样写，
<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>
galleryGroup后面的代码分别是：
“图库名”、“该图库的简单描述”、“该图库文件夹的相对地址”以及“该图库的封面图的链接地址”。
· 然后创建图库子页面
子页面就是通过点击图库封面后，进入的全是该图库里的图片的页面。
比如我点击进入上方漫威图库，我跳转的页面是：
?
图库子页面也只是普通的页面，只需要hexo n page "xxxxx" 创建就行，然后使用标签外挂 gallery，写这样一个子页面按照如下即可：
{% gallery %}
{% endgallery %}
如果你想要使用 /photo/marvel这样的链接显示你的图片内容
你可以把创建好的装着漫威图片的 marvel整个文件夹移到 photo文件夹里去
五、创建404页面
butterfly主题内置了一个简单的404页面，可在设置中开启，样子是这样的：
本地预览时，访问出错的网站是不会跳到404页面的。
如需本地预览，请开启本地服务器后访问http://localhost:4000/404.html
?你可以用vscode打开：根目录/themes/butterfly/_config.yml 文件对以下配置进行一些编辑
# A simple 404 page
error_404:
enable: true
subtitle: "页面没有找到"
background: 更多内容...
更多配置教程请去看作者写的官方文档吧，人家写的很详细的。
Butterfly 安裝文檔(二) 主題頁面 | Butterfly
Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
Butterfly 安裝文檔(四) 主題配置-2 | Butterfly
Butterfly 安裝文檔(五) 主題問答 | Butterfly
Butterfly 安裝文檔(六) 進階教程 | Butterfly
等。