This article is translated from ChatGPT.

๐Ÿ“š Table of Contents

๐Ÿš€ Get Started - ๐Ÿ“‘ Theme Pages - ๐Ÿ“Œ Theme Configuration - โš”๏ธ Tag Plugins - โ“ Q&A - โšก๏ธ Advanced Tutorials

Tag plugins are a unique feature of Hexo and are not part of the standard Markdown format.

The following syntax is only applicable to the Butterfly theme. It will not work on other themes and may even cause errors. Please be aware before using it.

Although tag plugins can provide additional functionality and UI enhancements to the theme, they also come with notable limitations. Please be mindful when using them.

Note (Bootstrap Callout)

Ported from the Next theme and modified.

1
2
3
4
5
6
7
8
9
10
11
12
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0
NameDescription
style[Optional] Tag style
(simple/modern/flat/disabled)
icons[Optional] Whether to display icons
border_radius[Optional] Border radius
light_bg_offset[Optional] Background color offset

icons and light_bg_offset only apply to Method 1

The Note tag plugin has two usages

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
NameDescription
class[Optional] Identifier, different identifiers have different color schemes
(default / primary / success / info / warning / danger)
no-icon[Optional] Do not display icon
style[Optional] Can override the style in the configuration
(simple/modern/flat/disabled)

simple

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
{% note simple %}
default tag
{% endnote %}

{% note default simple %}
default tag
{% endnote %}

{% note primary simple %}
primary tag
{% endnote %}

{% note success simple %}
success tag
{% endnote %}

{% note info simple %}
info tag
{% endnote %}

{% note warning simple %}
warning tag
{% endnote %}

{% note danger simple %}
danger tag
{% endnote %}

default tag

default tag

primary tag

success tag

info tag

warning tag

danger tag

modern

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
{% note modern %}
default tag
{% endnote %}

{% note default modern %}
default tag
{% endnote %}

{% note primary modern %}
primary tag
{% endnote %}

{% note success modern %}
success tag
{% endnote %}

{% note info modern %}
info tag
{% endnote %}

{% note warning modern %}
warning tag
{% endnote %}

{% note danger modern %}
danger tag
{% endnote %}

default tag

default tag

primary tag

success tag

info tag

warning tag

danger tag

flat

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
{% note flat %}
default tag
{% endnote %}

{% note default flat %}
default tag
{% endnote %}

{% note primary flat %}
primary tag
{% endnote %}

{% note success flat %}
success tag
{% endnote %}

{% note info flat %}
info tag
{% endnote %}

{% note warning flat %}
warning tag
{% endnote %}

{% note danger flat %}
danger tag
{% endnote %}

default tag

default tag

primary tag

success tag

info tag

warning tag

danger tag

disabled

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
{% note disabled %}
default tag
{% endnote %}

{% note default disabled %}
default tag
{% endnote %}

{% note primary disabled %}
primary tag
{% endnote %}

{% note success disabled %}
success tag
{% endnote %}

{% note info disabled %}
info tag
{% endnote %}

{% note warning disabled %}
warning tag
{% endnote %}

{% note danger disabled %}
danger tag
{% endnote %}

default tag

default tag

primary tag

success tag

info tag

warning tag

danger tag

no-icon

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
{% note no-icon %}
default tag
{% endnote %}

{% note default no-icon %}
default tag
{% endnote %}

{% note primary no-icon %}
primary tag
{% endnote %}

{% note success no-icon %}
success tag
{% endnote %}

{% note info no-icon %}
info tag
{% endnote %}

{% note warning no-icon %}
warning tag
{% endnote %}

{% note danger no-icon %}
danger tag
{% endnote %}

default tag

default tag

primary tag

success tag

info tag

warning tag

danger tag

Supported from version 3.2.0 and above

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
NameUsage
color[Optional] Color
(default / blue / pink / red / purple / orange / green)
icon[Optional] Customizable icon (only supports FontAwesome icons, can also configure no-icon)
style[Optional] Can override the style in the configuration
(simple/modern/flat/disabled)

simple

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' simple %}
Do you use Visa or UnionPay?
{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}
2021 is coming soon....
{% endnote %}
{% note pink 'fas fa-car-crash' simple %}
Drive carefully, safety first.
{% endnote %}
{% note red 'fas fa-fan' simple%}
Is this three pieces? Or four pieces?
{% endnote %}
{% note orange 'fas fa-battery-half' simple %}
Do you use Visa or UnionPay?
{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}
Rock, Paper, Scissors
{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}
The most hated browser by front-end developers
{% endnote %}

Do you use Visa or UnionPay?

2021 is coming soon....

Drive carefully, safety first.

Is this three pieces? Or four pieces?

Do you use Visa or UnionPay?

Rock, Paper, Scissors

The most hated browser by front-end developers

modern

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' modern %}
Do you use Visa or UnionPay?
{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}
2021 is coming soon....
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
Drive carefully, safety first.
{% endnote %}
{% note red 'fas fa-fan' modern%}
Is this three pieces? Or four pieces?
{% endnote %}
{% note orange 'fas fa-battery-half' modern %}
Do you use Visa or UnionPay?
{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}
Rock, Paper, Scissors
{% endnote %}
{% note green 'fab fa-internet-explorer' modern %}
The most hated browser by front-end developers
{% endnote %}

Do you use Visa or UnionPay?

2021 is coming soon....

Drive carefully, safety first.

Is this three pieces? Or four pieces?

Do you use Visa or UnionPay?

Rock, Paper, Scissors

The most hated browser by front-end developers

flat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' flat %}
Do you use Visa or UnionPay?
{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}
2021 is coming soon....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
Drive carefully, safety first.
{% endnote %}
{% note red 'fas fa-fan' flat%}
Is this three pieces? Or four pieces?
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
Do you use Visa or UnionPay?
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
Rock, Paper, Scissors
{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}
The most hated browser by front-end developers
{% endnote %}

Do you use Visa or UnionPay?

2021 is coming soon....

Drive carefully, safety first.

Is this three pieces? Or four pieces?

Do you use Visa or UnionPay?

Rock, Paper, Scissors

The most hated browser by front-end developers

disabled

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' disabled %}
Do you use Visa or UnionPay?
{% endnote %}
{% note blue 'fas fa-bullhorn' disabled %}
2021 is coming soon....
{% endnote %}
{% note pink 'fas fa-car-crash' disabled %}
Drive carefully, safety first.
{% endnote %}
{% note red 'fas fa-fan' disabled %}
Is this three pieces? Or four pieces?
{% endnote %}
{% note orange 'fas fa-battery-half' disabled %}
Do you use Visa or UnionPay?
{% endnote %}
{% note purple 'far fa-hand-scissors' disabled %}
Rock, Paper, Scissors
{% endnote %}
{% note green 'fab fa-internet-explorer' disabled %}
The most hated browser by front-end developers
{% endnote %}

Do you use Visa or UnionPay?

2021 is coming soon....

Drive carefully, safety first.

Is this three pieces? Or four pieces?

Do you use Visa or UnionPay?

Rock, Paper, Scissors

The most hated browser by front-end developers

no-icon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note no-icon %}
Do you use Visa or UnionPay?
{% endnote %}
{% note blue no-icon %}
2021 is coming soon....
{% endnote %}
{% note pink no-icon %}
Drive carefully, safety first.
{% endnote %}
{% note red no-icon %}
Is this three pieces? Or four pieces?
{% endnote %}
{% note orange no-icon %}
Do you use Visa or UnionPay?
{% endnote %}
{% note purple no-icon %}
Rock, Paper, Scissors
{% endnote %}
{% note green no-icon %}
The most hated browser by front-end developers
{% endnote %}

Do you use Visa or UnionPay?

2021 is coming soon....

Drive carefully, safety first.

Is this three pieces? Or four pieces?

Do you use Visa or UnionPay?

Rock, Paper, Scissors

The most hated browser by front-end developers

Available from version 2.2.0 and above

A gallery collection.

Usage:

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>
ParameterDescription
nameGallery name
descriptionGallery description
linkLink to the album
img-urlGallery cover URL

Sample

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup 'Wallpapers' 'A collection of wallpapers' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup 'Marvel' 'Images related to Marvel' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' 'Images related to OH MY GIRL' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>
Group Image Gallery
Wallpapers

A collection of wallpapers

Group Image Gallery
Marvel

Images related to Marvel

Group Image Gallery
OH MY GIRL

Images related to OH MY GIRL

Available from version 2.0.0 and above

Unlike the old version of the Gallery album, the new Gallery album automatically arranges images based on their length, making it easier to write, similar to the markdown format. It can be inserted into the corresponding markdown as needed.

Usage:

1
2
3
{% gallery [button] %}
markdown image format
{% endgallery %}
ParameterDescription
button[Optional] Load more images on button click, set to true/false. Default is false.

Sample

1
2
3
{% gallery %}
markdown image format
{% endgallery %}

ไพ‹ๅฆ‚

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 %}
[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":""}]

Usage:

1
2
{% gallery url,[link],[button] %}
{% endgallery %}
ParameterDescription
url[Required] Identifier
link[Required] Remote JSON link
button[Optional] Load more images on button click, set to true/false. Default is false.

Example of remote link JSON

There are three parameters: url is required, while alt and title are optional.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[
  {
    "url": "https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0556.jpg",
    "alt": "IMG_0556.jpg",
    "title": "title"
  },
  {
    "url": "https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0472.jpg",
    "alt": "IMG_0472.jpg"
  },
  {
    "url": "https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0453.jpg",
    "alt": ""
  },
  {
    "url": "https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0931.jpg",
    "alt": ""
  }
]

Sample

1
2
3
4
5
6
7
8
{% gallery url,https://xxxx.com/sss.json %}
{% endgallery %}

{% gallery url,https://xxxx.com/sss.json,true,220,10 %}
{% endgallery %}

{% gallery url,https://xxxx.com/sss.json,true,,10 %}
{% endgallery %}

Tag-hide

Available from version 2.2.0 and above

Please note that it is not recommended to have h1 - h6 headers within the tag-hide plugin content. This is because the Toc will display the hidden content headers, and if the hidden content is not displayed when scrolling the screen, it will cause abnormal scrolling of the Toc.

If you want to hide some text or content and provide a button for users to click to display it, you can use this tag plugin.

inline adds a button to hide content within the text, limited to text only.

(content cannot contain commas, use &sbquo; instead)

1
{% hideInline content,display,bg,color %}
ParameterDescription
contentText content
display[Optional] Text displayed on the button
bg[Optional] Background color of the button
color[Optional] Text color of the button

Sample

1
2
3
Which letter is the coolest? {% hideInline Because "C" is for Cool, See Answer, #FF7242, #fff %}

Who is standing behind the door? {% hideInline Flash %}

Which letter is the coolest? Because C is for Cool

Who is standing behind the door? Flash

block is an independent block for hiding content. It can hide a lot of content, including images, code blocks, etc.

(display cannot contain commas, use &sbquo; instead)

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
ParameterDescription
contentText content
display[Optional] Text displayed on the button
bg[Optional] Background color of the button
color[Optional] Text color of the button

Sample

1
2
3
4
See Answer
{% hideBlock See Answer %}
Fool, how could there be an answer
{% endhideBlock %}

See Answer

Fool, how could there be an answer

Supported from version 2.3.0 and above

If you need to display a lot of content, you can hide it in a collapsible box and expand it when needed.

(display cannot contain commas, use &sbquo;)

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}
ParameterDescription
displayText displayed on the button
bg[Optional] Background color
color[Optional] Text color

Sample

1
2
3
4
5
6
7
8
9
10
{% hideToggle Butterfly Installation Method %}
In your blog root directory

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

If you want to install the newer dev branch, you can

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

{% endhideToggle %}
Butterfly Installation Method

In your blog root directory

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

If you want to install the newer dev branch, you can

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

Mermaid

Using the mermaid tag, you can draw Flowcharts, Sequence diagrams, Class Diagrams, State Diagrams, Gantt charts, and Pie Charts. For more details, refer to the mermaid documentation.

1
2
3
4
5
6
7
8
9
10
# Mermaid
# https://github.com/mermaid-js/mermaid
mermaid:
  enable: false
  # Write Mermaid diagrams using code blocks
  code_write: false
  # built-in themes: default / forest / dark / neutral
  theme:
    light: default
    dark: dark

ๅฏซๆณ•๏ผš

1
2
3
{% mermaid %}
content
{% endmermaid %}

Sample

1
2
3
4
5
6
7
8
{% mermaid %}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{% endmermaid %}

Tabs

Ported from the NexT theme

Usage๏ผš

1
2
3
4
5
6
7
8
9
{% tabs Unique name, [index] %}

<!-- tab [Tab caption] [@icon] -->

Any content (support inline tags too).

<!-- endtab -->

{% endtabs %}
ParameterDescription
Unique nameThe unique name of the tabs block, without commas. It will be used as the #id prefix for each tab, appended with its index number. If the name contains spaces, they will be replaced with hyphens in the generated #id. Must be unique within the current article/page URL!
[index][Optional] The index number of the active tab. If not specified, the first tab (1) will be selected. If the index is -1, no tab will be selected, similar to collapsed content. Optional parameter.
[Tab caption]The title of the current tab. If not specified, the unique name with the tab index suffix will be used as the tab title. If no title is specified but an icon is provided, the title will be empty.
[@icon][Optional] FontAwesome icon name (full name, e.g., 'fas fa-font'). Can be with or without spaces; for example, 'Tab caption @icon' is similar to 'Tab caption@icon'.

Example 1 - Default to the first tab [default]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test1 %}

<!-- tab -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Example 2 - Default selected tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test2, 3 %}

<!-- tab -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Example 3 - No default value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test3, -1 %}

<!-- tab -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Example 4 - Custom Tab Name + Icon Only + Icon and Tab Name

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test4 %}

<!-- tab First Tab -->

**Tab name is First Tab**

<!-- endtab -->

<!-- tab @fab fa-apple-pay -->

**Icon only, no Tab name**

<!-- endtab -->

<!-- tab Bomb@fas fa-bomb -->

**Name + icon**

<!-- endtab -->

{% endtabs %}

Tab name is First Tab

Icon only, no Tab name

Name + icon

Button

Applicable for version 3.0 and above

Usage:

1
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}
ParameterDescription
url[Required] Link address
text[Required] Button text
icon[Optional] Icon
color[Optional] Button background color (default style) or button font and border color (outline style)
Options: default/blue/pink/red/purple/orange/green
style[Optional] Button style, default is solid
Options: outline/empty
layout[Optional] Button layout, default is line
Options: block/empty
position[Optional] Button position, applicable when layout is set to block, default is left
Options: center/right/empty
size[Optional] Button size
Options: larger/empty

Sample

1
2
3
4
5
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,,outline %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}

This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly

1
2
3
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block center larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block right outline larger %}
Butterfly Butterfly Butterfly

more than one button in center

1
2
3
4
5
6
7
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,green larger %}
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline green larger %}
</div>
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

InlineImg

Images in the theme are displayed as block elements by default. If you want to display them as inline elements, you can use this tag plugin.

1
{% inlineImg [src] [height] %}
ParameterDescription
srcImage URL
height[Optional] Image height limit

Sample

1
2
3
4
5
Do you think she looks beautiful?

![](https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png)

I think she looks beautiful. {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 150px %}

Do you think she looks beautiful?

I think she looks beautiful.

Label

Due to the rendering limitations of Hexo, using the label tag plugin at the beginning of a paragraph can cause some issues. For example, paragraphs that consecutively start with the label tag plugin cannot break lines.

It is recommended not to use the label tag plugin at the beginning of a paragraph.

Text to be highlighted

1
{% label text color %}
ParameterDescription
textText
color[Optional] Background color, default is default
Options: default/blue/pink/red/purple/orange/green

Sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% label "Shall I compare thee to a summer's day?" blue %}  
Thou art more lovely and more temperate:  
{% label "Rough winds do shake the darling buds of May," purple %}  
And summer's lease hath all too short a date:  

{% label "Sometime too hot the eye of heaven shines," red %}  
And often is his gold complexion dimmed;  
And every fair from fair sometime declines,  
{% label "By chance or nature's changing course untrimmed;" yellow %}  

{% label "But thy eternal summer shall not fade," green %}  
Nor lose possession of that fair thou owest;  
Nor shall Death brag thou wanderest in his shade,  
{% label "When in eternal lines to time thou growest:" pink %}  

So long as men can breathe or eyes can see,  
So long lives this, and this gives life to thee.
Shall I compare thee to a summer's day?

Thou art more lovely and more temperate:

Rough winds do shake the darling buds of May,

And summer's lease hath all too short a date:

Sometime too hot the eye of heaven shines,

And often is his gold complexion dimmed;
And every fair from fair sometime declines,

By chance or nature's changing course untrimmed; But thy eternal summer shall not fade,

Nor lose possession of that fair thou owest;
Nor shall Death brag thou wanderest in his shade,

When in eternal lines to time thou growest:

So long as men can breathe or eyes can see,
So long lives this, and this gives life to thee.

Timeline

Supported from version 4.0.0 and above

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% timeline title,color %}

<!-- timeline title -->

xxxxx

<!-- endtimeline -->
<!-- timeline title -->

xxxxx

<!-- endtimeline -->

{% endtimeline %}
ParameterDescription
titleTitle/Timeline
colorTimeline color
default (leave blank) / blue / pink / red / purple / orange / green

Example

1
2
3
4
5
6
7
8
9
{% timeline 2022 %}

<!-- timeline 01-02 -->

This is a test page

<!-- endtimeline -->

{% endtimeline %}

2022

01-02

This is a test page

1
2
3
4
5
6
7
8
9
{% timeline 2022,blue %}

<!-- timeline 01-02 -->

This is a test page

<!-- endtimeline -->

{% endtimeline %}

2022

01-02

This is a test page

1
2
3
4
5
6
7
8
9
{% timeline 2022,pink %}

<!-- timeline 01-02 -->

This is a test page

<!-- endtimeline -->

{% endtimeline %}

2022

01-02

This is a test page

1
2
3
4
5
6
7
8
9
{% timeline 2022,red %}

<!-- timeline 01-02 -->

This is a test page

<!-- endtimeline -->

{% endtimeline %}

2022

01-02

This is a test page

1
2
3
4
5
6
7
8
9
{% timeline 2022,purple %}

<!-- timeline 01-02 -->

This is a test page

<!-- endtimeline -->

{% endtimeline %}

2022

01-02

This is a test page

1
2
3
4
5
6
7
8
9
{% timeline 2022,orange %}

<!-- timeline 01-02 -->

This is a test page

<!-- endtimeline -->

{% endtimeline %}

2022

01-02

This is a test page

1
2
3
4
5
6
7
8
9
{% timeline 2022,green %}

<!-- timeline 01-02 -->

This is a test page

<!-- endtimeline -->

{% endtimeline %}

2022

01-02

This is a test page

Support for version 4.1.0

You can insert a friend link list effect on any page.

The content format is the same as the friend link page and supports the yml format.

1
2
3
{% flink %}
xxxxxx
{% endflink %}

Example

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
{% flink %}
- class_name: Friend Links
  class_desc: People and Stories
  link_list:
    - name: JerryC
      link: https://jerryc.me/
      avatar: https://jerryc.me/img/avatar.png
      descr: Todayโ€™s tasks completed today
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: A 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 platform
    - 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
{% endflink %}
Friend Links
People and Stories
JerryC
JerryC
Todayโ€™s tasks completed today
Hexo
Hexo
A fast, simple, and powerful blogging framework
Websites
Recommended Websites
Youtube
Youtube
Video sharing platform
Weibo
Weibo
Chinaโ€™s largest social sharing platform
Twitter
Twitter
Social sharing platform

ABCJS Score

Render musical scores on the page

1
2
3
4
5
6
# abcjs
# See https://github.com/paulrosen/abcjs
# ---------------
abcjs:
  enable: true
  per_page: true
ParameterDescription
enableEnable ABCJS or not
per_pageLoad ABCJS on every page. If set to false, you need to add abcjs: true in the front-matter of the pages where you use ABCJS

Usage:

1
2
3
{% score %}
Score
{% endscore %}

Sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% score %}
X:1
T:alternate heads
M:C
L:1/8
U:n=!style=normal!
K:C treble style=rhythm
"Am" BBBB B2 B>B | "Dm" B2 B/B/B "C" B4 |"Am" B2 nGnB B2 nGnA | "Dm" nDB/B/ nDB/B/ "C" nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |]
%%text This translates to:
[M:C][K:style=normal]
[A,EAce][A,EAce][A,EAce][A,EAce] [A,EAce]2 [A,EAce]>[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |]
GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb|
[K: style=x]
C/A,/ C/C/E C/zz2|
w:Rock-y did-nt like that
{% endscore %}
X:1 T:alternate heads M:C L:1/8 U:n=!style=normal! K:C treble style=rhythm "Am" BBBB B2 B>B | "Dm" B2 B/B/B "C" B4 |"Am" B2 nGnB B2 nGnA | "Dm" nDB/B/ nDB/B/ "C" nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |] %%text This translates to: [M:C][K:style=normal] [A,EAce][A,EAce][A,EAce][A,EAce] [A,EAce]2 [A,EAce]>[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |] GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb| [K: style=x] C/A,/ C/C/E C/zz2| w:Rock-y did-nt like that

Series

Display series articles on the page

1
2
3
4
5
series:
  enable: true
  orderBy: 'title' # Order by title or date
  order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
  number: true
ParameterParameter
enableEnable series or not
orderBySorting method, default is title, options are title / date
orderSorting order, default is 1, options are 1 (ascending) / -1 (descending)
numberDisplay sequence number

Usage:

1
2
{% series %}
{% series [series name] %}

Add the series parameter in the front-matter of the article and give it an identifier.

Using this tag plugin will display articles with the same identifier in a list format.

If the series identifier is not specified, it defaults to the series identifier of the article where this tag plugin is used.

Sample

1
{% series docs %}
  1. Butterfly document - Get Started
  2. Butterfly document - Theme Pages
  3. Butterfly document - Theme Configuration
  4. Butterfly document - Tag Plugins
  5. Butterfly document - Q&A
  6. Butterfly document - Advanced Tutorial

Chartjs

Another way to add charts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# chartjs
# see https://www.chartjs.org/docs/latest/
chartjs:
  enable: false
  # Do not modify unless you understand how they work.
  # The default settings are only used when the MD syntax is not specified.
  # General font color for the chart
  fontColor:
    light: "rgba(0, 0, 0, 0.8)"
    dark: "rgba(255, 255, 255, 0.8)"
  # General border color for the chart
  borderColor:
    light: "rgba(0, 0, 0, 0.1)"
    dark: "rgba(255, 255, 255, 0.2)"
  # Background color for scale labels on radar and polar area charts
  scale_ticks_backdropColor:
    light: "transparent"
    dark: "transparent"
ParameterDescription
enableWhether to enable chartjs
fontColorFont color of the chart
borderColorBorder color of the chart
scale_ticks_backdropColorBackground color of the scale labels for radar and polar area charts

Usage:

1
2
3
4
5
6
{% chartjs [width, abreast, chartId] %}
<!-- chart -->
<!-- endchart -->
<!-- desc -->
<!-- enddesc -->
{% endchartjs %}
ParameterDescription
width[Optional] Chart width
abreast[Optional] Whether to display side by side. When you write <!-- desc -->, the chart and description will be displayed side by side.
When abreast is true, the width value needs to be configured
chartId[Optional] Chart ID

Sample

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

<!-- chart -->
{
    "type": "line",
    "data": {
        "labels": ["January", "February", "March", "April", "May", "June", "July"],
        "datasets": [{
            "label": "My First dataset",
            "backgroundColor": "rgb(255, 99, 132)",
            "borderColor": "rgb(255, 99, 132)",
            "data": [0, 10, 5, 2, 20, 30, 45]
        }]
    },
    "options": {
        "responsive": true,
        "title": {
            "display": true,
            "text": "Chart.js Line Chart"
        }
    }
}
<!-- endchart -->

{% endchartjs %}
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
41
42
43
44
45
46
47
48
49
50
{% chartjs %}

<!-- chart -->
{
  "type": "radar",
  "data": {
    "labels": [
      "Eating",
      "Drinking",
      "Sleeping",
      "Designing",
      "Coding",
      "Cycling",
      "Running"
    ],
    "datasets": [
      {
        "label": "My First Dataset",
        "data": [65, 59, 90, 81, 56, 55, 40],
        "fill": true,
        "backgroundColor": "rgba(255, 99, 132, 0.2)",
        "borderColor": "rgb(255, 99, 132)",
        "pointBackgroundColor": "rgb(255, 99, 132)",
        "pointBorderColor": "#fff",
        "pointHoverBackgroundColor": "#fff",
        "pointHoverBorderColor": "rgb(255, 99, 132)"
      },
      {
        "label": "My Second Dataset",
        "data": [28, 48, 40, 19, 96, 27, 100],
        "fill": true,
        "backgroundColor": "rgba(54, 162, 235, 0.2)",
        "borderColor": "rgb(54, 162, 235)",
        "pointBackgroundColor": "rgb(54, 162, 235)",
        "pointBorderColor": "#fff",
        "pointHoverBackgroundColor": "#fff",
        "pointHoverBorderColor": "rgb(54, 162, 235)"
      }
    ]
  },
  "options": {
    "elements": {
      "line": {
        "borderWidth": 3
      }
    }
  }
}
<!-- endchart -->
{% endchartjs %}
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
{% chartjs 40,true %}
<!-- chart -->
{
    "type": "pie",
    "data": {
        "labels": [
            "Programming",
            "Music",
            "Reading",
            "Gaming",
            "Fitness",
            "Travel"
        ],
        "datasets": [
            {
                "label": "Favorite Index",
                "data": [
                    30,
                    24,
                    19,
                    14,
                    9,
                    4
                ],
                "backgroundColor": {
                    "dark-mode": [
                        "rgba(255, 99, 132, 0.5)",
                        "rgba(54, 162, 235, 0.5)",
                        "rgba(255, 206, 86, 0.5)",
                        "rgba(75, 192, 192, 0.5)",
                        "rgba(153, 102, 255, 0.5)",
                        "rgba(255, 159, 64, 0.5)"
                    ],
                    "light-mode": [
                        "rgba(255, 99, 132, 0.2)",
                        "rgba(54, 162, 235, 0.2)",
                        "rgba(255, 206, 86, 0.2)",
                        "rgba(75, 192, 192, 0.2)",
                        "rgba(153, 102, 255, 0.2)",
                        "rgba(255, 159, 64, 0.2)"
                    ]
                },
                "borderColor": {
                    "dark-mode": [
                        "rgba(255, 99, 132, 1)",
                        "rgba(54, 162, 235, 1)",
                        "rgba(255, 206, 86, 1)",
                        "rgba(75, 192, 192, 1)",
                        "rgba(153, 102, 255, 1)",
                        "rgba(255, 159, 64, 1)"
                    ],
                    "light-mode": [
                        "rgba(255, 99, 132, 1)",
                        "rgba(54, 162, 235, 1)",
                        "rgba(255, 206, 86, 1)",
                        "rgba(75, 192, 192, 1)",
                        "rgba(153, 102, 255, 1)",
                        "rgba(255, 159, 64, 1)"
                    ]
                }
            }
        ]
    },
    "options": {
        "plugins": {
            "legend": {
                "labels": {
                    "color": {
                        "dark-mode": "rgba(255, 255, 255, 0.8)",
                        "light-mode": "rgba(0, 0, 0, 0.8)"
                    }
                }
            }
        }
    }
}
<!-- endchart -->
<!-- desc -->
้™คไบ†**่ฎก็ฎ—ๆœบ็ผ–็จ‹**ๅค–๏ผŒๆˆ‘ๆƒณไธๅ‡บ่ฟ˜ๆœ‰ๅ…ถไป–่ฎฉๆˆ‘ๆ„Ÿๅ…ด่ถฃ็š„ๅทฅไฝœใ€‚
ๆˆ‘ๅฏไปฅๆ— ไธญ็”Ÿๆœ‰ๅœฐๅˆ›้€ ๅ‡บ**็ฒพ็พŽ็š„่Œƒๅผ**ๅ’Œ**็ป“ๆž„**๏ผŒ
ๅœจๆญค่ฟ‡็จ‹ไธญไนŸ่งฃๅ†ณไบ†ๆ— ๆ•ฐ็š„ๅฐ่ฐœๅ›ขใ€‚
<span style="font-size:0.8em;color: var(--sep-secondtext);">I can't think of any other job other than **computer programming** that interests me.
I can create **beautiful paradigms** and **structures** out of nothing,
Countless small mysteries are also solved in the process.</span>
<!-- enddesc -->
{% endchartjs %}

้™คไบ†่ฎก็ฎ—ๆœบ็ผ–็จ‹ๅค–๏ผŒๆˆ‘ๆƒณไธๅ‡บ่ฟ˜ๆœ‰ๅ…ถไป–่ฎฉๆˆ‘ๆ„Ÿๅ…ด่ถฃ็š„ๅทฅไฝœใ€‚
ๆˆ‘ๅฏไปฅๆ— ไธญ็”Ÿๆœ‰ๅœฐๅˆ›้€ ๅ‡บ็ฒพ็พŽ็š„่Œƒๅผๅ’Œ็ป“ๆž„๏ผŒ
ๅœจๆญค่ฟ‡็จ‹ไธญไนŸ่งฃๅ†ณไบ†ๆ— ๆ•ฐ็š„ๅฐ่ฐœๅ›ขใ€‚
I can't think of any other job other than computer programming that interests me.
I can create beautiful paradigms and structures out of nothing,
Countless small mysteries are also solved in the process.

โ“ Butterfly document - Q&A