外挂标签演示

外挂标签

Butterfly 主题是 Hexo 中非常受欢迎的一款主题，支持丰富的自定义功能，尤其是通过外挂标签（Tag Plugins）可以实现更多样化的内容展示效果。以下是关于 Butterfly 外挂标签的详细教程，涵盖基本概念、使用方法以及一些实用示例。

Butterfly 外挂标签简介

外挂标签是 Butterfly 主题提供的一种扩展功能，允许用户在 Markdown 文件中通过特定的语法插入自定义内容，例如彩色文字、提示框、超链接卡片等。这些标签通过简单的语法即可实现复杂的样式效果，非常适合美化博客内容。

外挂标签的基本使用方法

1. 标签语法

Butterfly 外挂标签的基本语法格式为：

1
2
3
{% 标签名 参数 %}
内容
{% end标签名 %}

部分标签不需要 end 结束符，具体取决于标签的定义。

2. 常用标签示例

以下是一些常用的外挂标签及其效果：

（1）行内文本样式

  • 下划线：文本内容
  • 着重号：文本内容
  • 波浪线：文本内容
  • 删除线：文本内容
  • 键盘样式：文本内容
  • 密码样式：文本内容

（2）彩色文字

使用 span 标签可以实现彩色文字效果：

1
{% span 颜色, 文本内容 %}

支持的颜色参数：red、yellow、green、cyan、blue、gray 等。

示例：

彩色文字：红色、黄色、绿色

超大号文字：

（3）提示框（Note）

Butterfly 提供了多种样式的提示框，可以通过 note 标签实现：

1
2
3
{% note [class] [no-icon] [style] %}
提示内容
{% endnote %}
  • class：可选参数，支持 default、primary、success、info、warning、danger 等样式。
  • no-icon：可选参数，隐藏图标。
  • style：可选参数，支持 simple、modern、flat 等样式。

示例：

这是一个成功的提示框！

（4）超链接卡片

通过自定义标签可以实现超链接卡片效果，显示网站的 Favicon 和标题：

1
{% link 标题, 网站名, 链接 %}

示例：

自定义外挂标签

如果默认的标签无法满足需求，可以通过自定义标签实现更多功能。以下是自定义标签的基本步骤：

1. 创建标签脚本

在 themes/butterfly/scripts/tag/ 目录下新建一个 JavaScript 文件，例如 link.js，并编写标签逻辑：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function link(args) {
    args = args.join(' ').split(',');
    let title = args[0];
    let sitename = args[1];
    let link = args[2];
    let imgUrl = "https://api.iowen.cn/favicon/" + link.replace(/^https?\:\/\//i, "") + ".png";
    return `<a class="tag-Link" target="_blank" href="${link}">
        <div class="tag-link-tips">引用站外地址</div>
        <div class="tag-link-bottom">
            <div class="tag-link-left" style="background-image: url(${imgUrl});"></div>
            <div class="tag-link-right">
                <div class="tag-link-title">${title}</div>
                <div class="tag-link-sitename">${sitename}</div>
            </div>
        </div>
    </a>`;
}
hexo.extend.tag.register('link', link, { ends: false });

2. 添加 CSS 样式

在 themes/butterfly/source/css/ 目录下新建 CSS 文件，例如 tag-link.css，并编写样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.tag-Link {
    display: block;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    color: inherit;
}
.tag-link-bottom {
    display: flex;
    align-items: center;
}
.tag-link-left {
    width: 50px;
    height: 50px;
    background-size: cover;
}
.tag-link-right {
    margin-left: 10px;
}

3. 引用 CSS 文件

在主题配置文件 _config.butterfly.yml 中引用 CSS 文件：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/tag-link.css">