记录 hexo-theme-next 一些使用技巧,自用。 版本要求 0.4.5+

引用文字居中

1
{% cq %} 文本居中引用{% endcq %}   #简洁的写法 cq = centerquote

{% cq %} 文本居中引用{% endcq %}

大图片

图片将自动扩大 26%。

1
{% fi /image-url, alt, title %}  # fi = fullimage

{% fi https://gitee.com/rachpt/imgs/raw/master/test-1.jpg, alt, title %}

note 标签

http://getbootstrap.com/

至next主题配置文件上设置:

1
2
3
4
5
6
7
note:
  style: simple # modern # flat # disabled
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

使用:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{% note class_name %} Content (支持部分 md 格式) {% endnote %}

class_name 使用:
    default
    primary
    success
    info
    warning
    danger

{% note default %} default 样式 (支持部分 md 格式) {% endnote %}

{% note primary %} primary 样式 (支持部分 md 格式) {% endnote %}

{% note success %} success 样式 (支持部分 md 格式) {% endnote %}

{% note info %} info 样式 (支持部分 md 格式) {% endnote %}

{% note warning %} warning 样式 (支持部分 md 格式) {% endnote %}

{% note danger %} danger 样式 (支持部分 md 格式) {% endnote %}

插入视频

使用:

1
2
<video src=' ' type='video/mp4' controls='controls'  width='100%' height='100%'>
</video>

音乐

使用: http://saili.science/2017/05/30/music/

1
2
<audio controls="controls" playsinline="" webkit-playsinline="">  
<source src="http://other.web.nf01.sycdn.kuwo.cn/resource/n2/40/14/3065311430.mp3" type="audio/mpeg">  </audio>

Tabs 标签

至 next 主题配置中启用:

1
2
3
4
5
6
7
# Tabs tag.
tabs:
  enable: true>
  transition:
    tabs: true
    labels: true
  border_radius: 0  

使用:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{% tabs 选项卡[标题], 2 %}
<!-- tab -->
**这是选项卡 1**
<!-- endtab -->
<!-- tab -->
**我是选项卡 2**
<!-- endtab -->
<!-- tab -->
**就是选项卡 3 了**
<!-- endtab -->
{% endtabs %}

, 2 从第二个开始。

{% tabs 选项卡[标题], 2 %}

**这是选项卡 1 **

**我是选项卡 2 **

**就是选项卡 3 了 **

{% endtabs %}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{% tabs Fifth unique name %}
<!-- tab @text-width -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab @amazon -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab @bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

{% tabs Fifth unique name %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

{% endtabs %}

https://almostover.ru/2016-01/hexo-theme-next-test/