Next theme plugin tags

发表于 | 更新于 | 分类于

Next theme tags plugin

Centered Quote

This tag will make a quote with two lines before and after it, and text quoted will be centered. When using centered quote, if we have multi-line text, and each line has a different length, the quote won’t be symmetrical, so it’s recommended to use when only have single line text. For example before article all after article to make a summary.

Usage

center-quote.js
1
2
3
{% centerquote %}Something{% endcenterquote %}
<!-- Tag Alias -->
{% cq %}Something{% endcq %}

Example

1
{% cq %}Elegant in code, simple in core{% endcq %}

Elegant in code, simple in core

Include Raw

This tag include any raw content into your posts. Path is relative to your site source directory.

Usage
include-raw.js

1
{% include_raw '_data/path/to/file.html' %}

Example

Let’s create include-raw.html file in _data directory under site root directory with following content:

Any raw content may be included with this tag.

Then in any post we can use this content with include_raw tag:

1
{% include_raw '_data/path/to/include-raw.html' %}

Any raw content may be included with this tag.

Button

button.js
1
2
3
4
5
6
7
8
9
10
11
{% button url, text, icon [class], [title] %}
<!-- Tag Alias -->
{% btn url, text, icon [class], [title] %}

url     : Absolute or relative path to URL.
text    : Button text. Required if no icon specified.
icon    : FontAwesome icon name (without 'fa-' at the begining). Required if no text specified.
[class] : FontAwesome class(es): fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x
        Optional parameter.
[title] : Tooltip at mouseover.
        Optional parameter.

example:

1
{% button #, Text %}

Text

Button with text & title

1
{% btn #, Text %}{% btn #, Text & Title,, Title %}
TextText & Title

Button with icon

1
2
3
4
5
6
<div>{% btn #,, home fa-5x %}{% btn #,, home fa-5x %}{% btn #,, home fa-5x %}</div>
<div>{% btn #,, home fa-4x %}{% btn #,, home fa-4x %}{% btn #,, home fa-4x %}</div>
<div>{% btn #,, home fa-3x %}{% btn #,, home fa-3x %}{% btn #,, home fa-3x %}</div>
<div>{% btn #,, home fa-2x %}{% btn #,, home fa-2x %}{% btn #,, home fa-2x %}</div>
<div>{% btn #,, home fa-lg %}{% btn #,, home fa-lg %}{% btn #,, home fa-lg %}</div>
<div>{% btn #,, home %}{% btn #,, home %}{% btn #,, home %}</div>





Button with text & icon

1
2
<p>{% btn #, Text & Icon (buggy), home %}
{% btn #, Text & Icon (fixed width), home fa-fw %}</p>

Text & Icon (buggy)
Text & Icon (fixed width)


1
2
<p>{% btn #, Text & Large Icon, home fa-fw fa-lg %}
{% btn #, Text & Large Icon & Title, home fa-fw fa-lg, Title %}</p>


Text & Large Icon
Text & Large Icon & Title

Label

Usage

label.js
1
2
3
4
5
6
{% label [class]@Text %}

[class] : default | primary | success | info | warning | danger.
          '@Text' can be specified with or without space
          E.g. 'success @text' similar to 'success@text'.
          If not specified, default class will be selected.

Examples

lablesample.js
1
2
3
4
5
Lorem {% label @ipsum %} {% label primary@dolor sit %} amet, consectetur {% label success@adipiscing elit, %} sed {% label info@do eiusmod %} tempor incididunt ut labore et dolore magna aliqua.

Ut enim *{% label warning @ad %}* minim veniam, quis **{% label danger@nostrud %}** exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate ~~{% label default @velit %}~~ <mark>esse</mark> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

PDF