【Hexo博客搭建】将其部署到GitHub Pages（四）：更换博客主题并进行个性化配置

前几篇文章教了大家如何在GitHub上部署hexo博客以及怎么写文章，这次我们一起换掉其默认的主题，并进行一些简单配置，让咱们的博客更充满特色。

一、挑选心仪的hexo主题

这是我们未更换前，默认主题的博客效果：

 去哪挑选心仪的主题呢？

去官方文档给的链接地址：Themes | Hexo，那里有好几百款其他朋友制作好的主题。

此外还可以去某乎上或其他地方看看别人分享的好看的主题样式，如果实在没有合自己口味的，先选个差不多的凑合用吧，以后可以对主题进行个性化魔改。

我这次演示的主题叫“Butterfly”，博客效果示例请见下方链接：

Butterfly - A Simple and Card UI Design theme for Hexo

更多朋友们的博客示例（可以看到很多朋友进行了魔改）：

示例 | Butterfly

该主题的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官方安装文档：

Butterfly 安裝文檔(一) 快速開始 | 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 %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% 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

等。