Butterfly document - Tag Plugins

推荐订阅源

Stack Overflow Blog

Simon Willison's Weblog

Blog

Visual Studio Blog

Google Developers Blog

Darknet – Hacking Tools, Hacker News & Cyber Security

宝玉的分享

Netflix TechBlog - Medium

Secure Thoughts

Hugging Face - Blog

Exploit-DB.com RSS Feed

IT之家

Hackread – Cybersecurity News, Data Breaches, AI and More

阮一峰的网络日志

Privacy International News Feed

News and Events Feed by Topic

Hacker News: Front Page

MongoDB | Blog

Google DeepMind News

Full Disclosure

Google Online Security Blog

cs.CL updates on arXiv.org

Heimdal Security Blog

Project Zero

CERT Recently Published Vulnerability Notes

MyScale Blog

月光博客

Cyber Attacks, Cyber Crime and Cyber Security

cs.CV updates on arXiv.org

WordPress大学

Lohrmann on Cybersecurity

TaoSecurity Blog

Spread Privacy

Apple Machine Learning Research

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.

note:
  
  
  
  
  
  style: simple
  icons: false
  border_radius: 3
  
  
  light_bg_offset: 0

Name	Description
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 %}

Name	Description
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)

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

primary tag

success tag

info tag

warning tag

danger tag

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

primary tag

success tag

info tag

warning tag

danger tag

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

primary tag

success tag

info tag

warning tag

danger tag

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

primary tag

success tag

info tag

warning tag

danger tag

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

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

Name	Usage
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)

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

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

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

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

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

<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

<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

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.

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.

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

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

{% 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阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。