安装与配置 Butterfly 主题

Butterfly 是 Hexo 的一个漂亮主题，这篇博客将指导你如何安装和配置 Butterfly 主题，使你的博客更加美观。

前言配置

前言（Front-matter）用于为每个页面或文章定义变量。它放置在 Markdown 文件的顶部，并用 --- 包围。

页面前言

页面的前言示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: 页面标题
date: 2024-06-10
updated: 2024-06-10
type: "page"
comments: true
description: "页面描述"
keywords: ["关键词1", "关键词2"]
top_img: /path/to/image.jpg
mathjax: false
katex: false
aside: true
aplayer: false
highlight_shrink: false
random: false
---

文章前言

文章的前言配置如下：

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
---
title: 文章标题
date: 2024-06-10
updated: 2024-06-10
tags: ["标签1", "标签2"]
categories: ["分类1", "分类2"]
keywords: ["关键词1", "关键词2"]
description: "文章描述"
top_img: /path/to/image.jpg
cover: /path/to/cover.jpg
comments: true
toc: true
toc_number: true
toc_style_simple: false
copyright: true
copyright_author: "作者姓名"
copyright_author_href: "https://authorwebsite.com"
copyright_url: "https://posturl.com"
copyright_info: "一些权利保留"
mathjax: false
katex: false
aplayer: false
highlight_shrink: true
aside: true
abcjs: false
---

创建自定义页面

标签页面

创建标签页面的步骤：

  1. 进入 Hexo 博客根目录。
  2. 运行命令 hexo new page tags。
  3. 修改 source/tags/index.md，添加以下前言：
1
2
3
4
5
6
7
---
title: 标签
date: 2024-06-10
type: "tags"
orderby: random
order: 1
---

分类页面

创建分类页面：

  1. 进入 Hexo 博客根目录。
  2. 运行命令 hexo new page categories。
  3. 修改 source/categories/index.md，添加以下前言：
1
2
3
4
5
---
title: 分类
date: 2024-06-10
type: "categories"
---

友链页面

添加友链页面：

  1. 进入 Hexo 博客根目录。
  2. 运行命令 hexo new page link。
  3. 修改 source/link/index.md，添加以下前言：
1
2
3
4
5
---
title: 友链
date: 2024-06-10
type: "link"
---

添加友链

在 source/_data 目录下创建 link.yml 文件，结构如下：

1
2
3
4
5
6
7
- class_name: "最爱的网站"
  class_desc: "我最喜欢的网站合集"
  link_list:
    - name: "Hexo"
      link: https://hexo.io/
      avatar: https://hexo.io/logo.png
      descr: "一个快速、简单而强大的博客框架"

启用友链随机排序

在 source/link/index.md 的前言中添加 random: true 以启用随机排序。

画廊页面

设置画廊页面：

  1. 运行 hexo n page gallery。
  2. 使用 galleryGroup 短代码组织图片：
1
2
3
<div class="gallery-group-main">
  {% galleryGroup '壁纸' '美丽壁纸合集' '/Gallery/wallpaper' 'https://example.com/wallpaper.png' %}
</div>

子页面

使用 gallery 短代码：

1
2
3
4
{% gallery %}
![图片1](https://example.com/image1.jpg)
![图片2](https://example.com/image2.jpg)
{% endgallery %}

404 页面

在主题设置中启用 404 页面：

1
2
3
4
error_404:
  enable: true
  subtitle: "页面未找到"
  background: /path/to/background.jpg

按照以上步骤配置 Butterfly 主题，可以让你的 Hexo 博客变得更加个性化和专业。更多详情请参考 Butterfly 官方文档。

Hexo Butterfly 主题

标签：技术博客, Hexo, Butterfly主题, 网站配置, 博客美化