转载自

糖果屋教程贴

https://akilar.top/posts/615e2dec/

用来为自己日后写文章提供便利。

npm插件下载

1
npm install hexo-butterfly-tag-plugins-plus --save

配置

在_config.yml中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
  enable: true # 开关
  priority: 5 #过滤器优先权
  issues: false #issues标签依赖注入开关
  link:
    placeholder: /img/link.png #link_card标签默认的图标图片
  CDN:
    anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
    jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
    issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
    iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
    carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
    tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

行内文本样式 text

1
2
3
4
5
6
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
  1. 带 下划线 的文本
  2. 带 着重号 的文本
  3. 带 波浪线 的文本
  4. 带 删除线 的文本
  5. 键盘样式的文本 command + D
  6. 密码样式的文本：这里没有验证码
1
2
3
4
5
6
1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本：{% psw 这里没有验证码 %}

行内文本 span

1
{% span 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字 在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
  • 超大号文字 文档「开始」页面中的标题部分就是超大号文字。 A Wonderful Theme for Hexo
1
2
3
4
5
6
- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% span center logo large, Volantis %}
{% span center small, A Wonderful Theme for Hexo %}

段落文本 p

1
{% p 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字 在一段话中方便插入各种颜色的标签，包括：

    红色

    、

    黄色

    、

    绿色

    、

    青色

    、

    蓝色

    、

    灰色

    。
  • 超大号文字 文档「开始」页面中的标题部分就是超大号文字。

    A Wonderful Theme for Hexo 

1
2
3
4
5
6
- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}

上标标签 tip

1
{% tip [参数，可选] %}文本内容{% endtip %}
  1. 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
  2. 自定义图标: 支持fontawesome。

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标 

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tip %}default{% endtip %}
{% tip info %}info{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义font awesome图标{% endtip %}

动态标签 anima

1
{% tip [参数，可选] %}文本内容{% endtip %}

详情请参看font-awesome-animation文档

  1. 将所需的CSS类添加到图标（或DOM中的任何元素）。

  2. 对于父级悬停样式，需要给目标元素添加指定CSS类，同时还要给目标元素的父级元素添加CSS类faa-parent animated-hover。（详情见示例及示例源码）。You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow

  3. 可以通过给目标元素添加CSS类faa-fast或faa-slow来控制动画快慢。

  1. On DOM load（当页面加载时显示动画）

warning

ban

  1. 调整动画速度

warning

ban

  1. On hover（当鼠标悬停时显示动画）

warning

ban

  1. On parent hover（当鼠标悬停在父级元素时显示动画）

warning

ban

  1. On DOM load（当页面加载时显示动画） 
    1
    2
    {% tip warning faa-horizontal animated %}warning{% endtip %}
    {% tip ban faa-flash animated %}ban{% endtip %}
  2. 调整动画速度 
    1
    2
    {% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
    {% tip ban faa-flash animated faa-slow %}ban{% endtip %}
  3. On hover（当鼠标悬停时显示动画） 
    1
    2
    {% tip warning faa-horizontal animated-hover %}warning{% endtip %}
    {% tip ban faa-flash animated-hover %}ban{% endtip %}
  4. On parent hover（当鼠标悬停在父级元素时显示动画） 
    1
    2
    {% tip warning faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% endtip %}
    {% tip ban faa-parent animated-hover %}<p class="faa-flash">ban</p>{% endtip %}
1
{% link 标题, 链接, 图片链接（可选） %}

Jerの博客

https://blog.jersite.gq/ 

1
{% link Jerの博客, https://blog.jersite.gq/,  https://cdn.luogu.com.cn/upload/usericon/368723.png%}

网站卡片 sites

1
2
3
4
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}
xaoxuu简约风格
inkss这是一段关于这个网站的描述文字
MHuiG这是一段关于这个网站的描述文字
Colsrch这是一段关于这个网站的描述文字
Linhk1606这是一段关于这个网站的描述文字 
1
2
3
4
5
6
7
{% sitegroup %}
{% site xaoxuu, url=https://xaoxuu.com, screenshot=https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg, avatar=https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png, description=简约风格 %}
{% site inkss, url=https://inkss.cn, screenshot=https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg, avatar=https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg, description=这是一段关于这个网站的描述文字 %}
{% site MHuiG, url=https://blog.mhuig.top, screenshot=https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png, avatar=https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png, description=这是一段关于这个网站的描述文字 %}
{% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %}
{% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png, avatar=https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png, description=这是一段关于这个网站的描述文字 %}
{% endsitegroup %}

视频 video

1
{% video 视频链接 %}

  1. 对其方向：left, center, right

  2. 列数：逗号后面直接写列数，支持 1 ～ 4 列。

1
2
3
4
5
6

{% video https://www.bilibili.com/video/BV1f44y1L72U/ %}
{% videos, 2 %}
{% video https://www.bilibili.com/video/BV1J54y147Cu/ %}
{% video https://www.bilibili.com/video/BV1rt411B7DD/ %}
{% endvideos %}

折叠框 folding

1
2
3
4
5
{% folding 参数（可选）, 标题 %}

**内容**

{% endfolding %}

  1. 颜色：blue, cyan, green, yellow, red

  2. 状态：状态填写 open 代表默认打开。

分栏 tab

1
2
3
4
5
6
7

{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

  1. Unique name :

  • 选项卡块标签的唯一名称，不带逗号。

  • 将在#id中用作每个标签及其索引号的前缀。

  • 如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。

  • 仅当前帖子/页面的URL必须是唯一的！

  • 活动选项卡的索引号。

  • 如果未指定，将选择第一个标签（1）。

  • 如果index为-1，则不会选择任何选项卡。

  • 可选参数。

  1. [Tab caption]:

  • 当前选项卡的标题。

  • 如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。

  • 如果未指定标题，但指定了图标，则标题将为空。

  • 可选参数。

  1. [@icon]:

  • FontAwesome图标名称（全名，看起来像“ fas fa-font”）

  • 可以指定带空格或不带空格；

  • 例如’Tab caption @icon’ 和 ‘Tab caption@icon’.

  • 可选参数。

This is Tab 1.

This is Tab 2.

This is Tab 3.

tab名字为第一个Tab

只有图标 没有Tab名字

名字+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
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
{% tabs test2 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

诗词标签 poem

1
2
3
{% poem [title],[author] %}
诗词内容
{% endpoem %}

  1. title：诗词标题

  2. author：作者，可以不写

水调歌头
苏轼

丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。 明月几时有？把酒问青天。 不知天上宫阙，今夕是何年？ 我欲乘风归去，又恐琼楼玉宇，高处不胜寒。 起舞弄清影，何似在人间？

转朱阁，低绮户，照无眠。 不应有恨，何事长向别时圆？ 人有悲欢离合，月有阴晴圆缺，此事古难全。 但愿人长久，千里共婵娟。 

1
2
3
4
5
6
7
8
9
10
11
12
{% poem 水调歌头,苏轼 %}
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？

转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
{% endpoem %}

注释 notation

1
{% nota [label] , [text] %}

label: 注释词汇

text: 悬停显示的注解内容

把鼠标移动到我上面试试

1
{% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %}

气泡注释 bubble

1
{% bubble [content] , [notation] ,[background-color] %}

content: 注释词汇

notation: 悬停显示的注解内容

background-color: 可选，气泡背景色。默认为“#71a4e3”

最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的兄弟相邻选择器例如 h1 + p {margin-top:50px;}，flex布局Flex 是 Flexible Box 的缩写，意为弹性布局"，用来为盒状模型提供最大的灵活性"，transform变换transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。，animation的贝塞尔速度曲线贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋写法，还有今天刚看到的clip-pathclip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

1
最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的{% bubble 兄弟相邻选择器,"例如 h1 + p {margin-top:50px;}" %}，{% bubble flex布局,"Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性","#ec5830" %}，{% bubble transform变换,"transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。","#1db675" %}，animation的{% bubble 贝塞尔速度曲线,"贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋","#de4489" %}写法，还有今天刚看到的{% bubble clip-path,"clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。","#868fd7" %}属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。
1
2
3
4
5
{% carousel [Id] , [name] %}
![](/img/1.jpg)
![](/img/2.jpg)
![](/img/3,jpg)
{% endcarousel %}

Id: 相册唯一ID，用于监测相册鼠标动作。禁止使用中文。同一页内不得出现相同ID的carousel相册。

name: 相册中间显示的内容，建议用英文单引号包裹。

1
2
3
4
5
6
7
8
9

{% carousel 'SF','strike freedom' %}
![](https://img.paulzzh.tech/touhou/random)
![](https://img.paulzzh.tech/touhou/random)
![](https://img.paulzzh.tech/touhou/random)
![](https://img.paulzzh.tech/touhou/random)
![](https://img.paulzzh.tech/touhou/random)
![](https://img.paulzzh.tech/touhou/random)
{% endcarousel %}