惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

V
Visual Studio Blog
Recent Announcements
Recent Announcements
雷峰网
雷峰网
The GitHub Blog
The GitHub Blog
罗
罗磊的独立博客
月光博客
月光博客
J
Java Code Geeks
A
About on SuperTechFans
Microsoft Security Blog
Microsoft Security Blog
D
Docker
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
F
Fortinet All Blogs
U
Unit 42
C
Check Point Blog
Martin Fowler
Martin Fowler
有赞技术团队
有赞技术团队
博
博客园 - 叶小钗
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
酷 壳 – CoolShell
酷 壳 – CoolShell
Blog — PlanetScale
Blog — PlanetScale
大猫的无限游戏
大猫的无限游戏
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
阮一峰的网络日志
阮一峰的网络日志
MyScale Blog
MyScale Blog

Butterfly

Alternative Methods After Butterfly Removes Built-in APlayer / Meting Butterfly 5.6 Release Notes Butterfly 5.5 Release Notes Butterfly 5.4 Release Notes Butterfly 5.3 Release Notes Butterfly 5.2 Release Notes Butterfly 5.1 Release Notes Butterfly 5.0 Release Notes Butterfly 4.13 Release Notes Butterfly 4.12 Release Notes Butterfly 4.11 Release Notes Butterfly 4.10 Release Notes Butterfly Changelog Butterfly document - Advanced Tutorial Butterfly document - Q&A Butterfly document - Theme Configuration Butterfly document - Theme Pages Butterfly document - Get Started Custom Sidebar When Setting top_img to false Customize code coloring no cover Tag Plugins Markdown Style test
Butterfly document - Tag Plugins
Jerry · 2023-06-30 · via Butterfly

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.

Ported from the Next theme and modified.

1
2
3
4
5
6
7
8
9
10
11
12
note:
  
  
  
  
  
  style: simple
  icons: false
  border_radius: 3
  
  
  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)
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

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

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

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

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)
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?

Drive carefully, safety first.

Is this three pieces? Or four pieces?

Do you use Visa or UnionPay?

The most hated browser by front-end developers

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?

Drive carefully, safety first.

Is this three pieces? Or four pieces?

Do you use Visa or UnionPay?

The most hated browser by front-end developers

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?

Drive carefully, safety first.

Is this three pieces? Or four pieces?

Do you use Visa or UnionPay?

The most hated browser by front-end developers

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?

Drive carefully, safety first.

Is this three pieces? Or four pieces?

Do you use Visa or UnionPay?

The most hated browser by front-end developers

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

A gallery collection.

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>
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

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.

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.

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.

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

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.

I think she looks beautiful.

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.

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

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

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

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.

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

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.

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.

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。