Butterfly document - Theme Pages

Front-matter

Front-matter is the section at the top of a Markdown file, separated by ---, and is used to specify variables for individual files.

• Page Front-matter is used for configuring a page.
• Post Front-matter is used for configuring a post.

Page Front-matter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
random:
---

Post Front-matter

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:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
abcjs:
---

Tags Page

1. Go to the root directory of your Hexo blog.

2. Run hexo new page tags.

3. You will find the file source/tags/index.md.

4. Modify this file:

   Remember to add type: "tags"

1
2
3
4
5
6
7

---
title: Tags
date: 2018-01-05 00:00:00
type: "tags"
orderby: random
order: 1
---

Categories Page

1. Go to the root directory of your Hexo blog.

2. Run hexo new page categories.

3. You will find the file source/categories/index.md.

4. Modify this file:

   Remember to add type: "categories"

1
2
3
4
5

---
title: Categories
date: 2018-01-05 00:00:00
type: "categories"
---

Friends Links

Create a page for your blog's friends links!

Create Friends Links Page

1. Go to the root directory of your Hexo blog.

2. Run hexo new page link.

3. You will find the file source/link/index.md.

4. Modify this file:

   Remember to add type: "link"

1
2
3
4
5

---
title: Friends Links
date: 2018-06-07 22:17:49
type: "link"
---

Add Friends Links

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

- class_name: Friends Links
  class_desc: Those people, those things
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: Fast, simple, and powerful blogging framework

- class_name: Websites
  class_desc: Recommended websites
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: Video-sharing website
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: China's largest social sharing platform
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: Social sharing platform

1

flink_url: xxxxx

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
29
30
31
32
33
34
35
36
37
38
39
40

[
  {
    "class_name": "Friends Links",
    "class_desc": "Those people, those things",
    "link_list": [
      {
        "name": "Hexo",
        "link": "https://hexo.io/zh-tw/",
        "avatar": "https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg",
        "descr": "Fast, simple, and powerful blogging framework"
      }
    ]
  },
  {
    "class_name": "Websites",
    "class_desc": "Recommended websites",
    "link_list": [
      {
        "name": "Youtube",
        "link": "https://www.youtube.com/",
        "avatar": "https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png",
        "descr": "Video-sharing website"
      },
      {
        "name": "Weibo

",
        "link": "https://www.weibo.com/",
        "avatar": "https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png",
        "descr": "China's largest social sharing platform"
      },
      {
        "name": "Twitter",
        "link": "https://twitter.com/",
        "avatar": "https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png",
        "descr": "Social sharing platform"
      }
    ]
  }
]

Random Sorting of Friends Links

The theme supports random sorting of friends links. Just add random: true in the top front-matter.

Friends Links Page Customization

Starting from version 2.2.0, the friends links page can be customized by the user. You only need to set it in the MD file for friends links using regular Markdown formatting.

Gallery

The gallery page is just a regular page. You only need to create your page using hexo n page xxxxx.

Then, you can use the galleryGroup tag plugin galleryGroup for specific usage details.

1
2
3
4
5

<div class="gallery-group-main">
{% galleryGroup 'Wallpapers' 'Collection of some wallpapers' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup 'Marvel' 'Pictures related to Marvel' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' 'Pictures related to OH MY GIRL' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>

Subpage

Subpages are also regular pages. You only need to create your page using hexo n page xxxxx.

Then, you can use the gallery tag plugin gallery for specific usage details.

1
2
3
4
5
6
7
8
9
10

{% 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 %}

404 Page

The theme comes with a simple 404 page, which you can enable in the settings.

1
2
3
4
5

# A simple 404 page
error_404:
  enable: true
  subtitle: "Page not found"
  background: