写在前面

在写文章是，对于一些魔改的东西往往要借助前端，我简单的研究了一下，发现hexo提供一些标签来达到部分前端功能，这里写在这里归类

事实上，如果你仔细观察主题下的scripts/tag 与 source/css/_tags ，你就会发现这些都是提供给标签的js与css，因此在我这篇文章中，就是通过向这两个目录添加css，js来实现样式的，而且它们自动加载，无需在inject中引用

Note引用

Note引用包含success / primary / warning / default / info / danger类型，如语句 <div class="note success"><p>success</p></div>或{% note warning no-icon %} warning {% endnote %}显示为

warning

Tabs页面

示例代码

1
2
3
4
5
6
7
8
{% tabs %}
<!-- tab Tab1 -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab Tab2 -->
**This is Tab 2.**
<!-- endtab -->
{% endtabs %}

输出：

This is Tab 1.

This is Tab 2.

需要注意的是，部分markdown语法在tab中失效，如代码块应当使用

1
2
3
{% code %}
...
{% endcode %}

高亮

使用{% label labelcolor @text %}可以给文字text显示labelcolor高亮，其中labelcolor可以取default / primary / success / info / warning / danger这几种颜色。如{% label danger @我是文本 %}显示为

danger

这其实可以写一些不宜公开的内容，由于弱对比度（大雾

使用mark环境可以显示黄色高亮，如<mark>黄色高亮</mark>显示为黄色高亮

Button按钮

基本实现

按钮的语法为{% btn /path/to/url/, text, icon [class], title %}。如果/path/to/url为#则为返回顶端；使用 fa-fw 来设置图标在一个固定宽度内；fa-lg 相对原图标放大 33%，刚好合适。如
<div class="text-center">{% btn #, Test is finished., check fa-fw fa-lg, Button tag test is finished. %}</div>显示为

Test is finished.