Next主题自带部分标签使用教程


本文最后更新于2019年01月22日20:50可能会因为没有更新而失效,如已失效或需要修正,请留言!

欢迎加入博客搭建交流群(QQ群号60429576)==>点击加入<==

本文内容全部来自Next主题官方博客

前段时间在修改主题的时候发现的这个博客,发现了很多Next主题中带的一些标签的用法。如下:

居中标签

原始内容标签

Note标签

居中标签

使用{% centerquote %}或者{% cq %}标签包裹内容,实现内容居中的效果。注意内容后要用{% endcenterquote %}{% endcq %}结尾。

例如:

代码:

1
{% centerquote %}被包裹的内容{% endcenterquote %}

效果:

被包裹的内容


代码:

1
{% cq %}Something{% endcq %}

效果:

Something


原始内容标签

使用{% include_raw '路径' %}标签引入html文件中的内容。

例子:

新建1.html文件在根目录/source/_data/,没有_data文件夹的话新建一个。1.html内写入如下内容:

1
<strong>include_raw</strong>标签使用样例,来自<a href = "https://www.lixint.me">LixT's Blog</a>。

文章中需要的位置写入如下内容:

1
{% include_raw '_data/1.html' %}

效果:

include_raw标签使用样例,来自LixT's Blog

Note标签

基本配置

可以在主题配置文件找到如下配置

1
2
3
4
5
6
7
8
9
10
11
12
note:

# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: simple
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
#语法
{% note class icon %}
Any content (support inline tags too.io).
{% endnote %}

#参数解释
class可选项 : default | primary | success | info | warning | danger.
icon可选项 : on-icon | 不填

icon项注意

默认是不显示图标的,需要显示图标的话需要在主题配置文件中修改note下的icon项为true。此时全局默认为显示图标,如果此时需要单个标签不显示图标,则可在在标签后添加参数no-icon,具体看下面的例子

代码块注意

如果需要在标签内使用代码块的话,需要使用{% codeblock %}代码{% endcodeblock %},代码块标签用法参考代码块标签用法

例如:

1
2
3
4
5
{% codeblock %}
import requests
s = requests.session()
r = s.get("https://www.lixint.me")
{% endcodeblock %}

使用样例:

代码:

1
2
3
4
5
{% note %}
#### 标题
可以用基本的Markdown语法,我的标题样式修改过,所以在note标签内显示不太美观
只用note则不定义样式
{% endnote %}

效果:

标题

可以用基本的Markdown语法,我的标题样式修改过,所以在note标签内显示不太美观
只用note则不定义样式

代码:

1
2
3
4
5
6
7
8
{% note default %}
#### 标题
可以用基本的Markdown语法,我的标题样式修改过,所以在note标签内显示不太美观
欢迎来到[LixT's Blog](https://www.lixint.me)
{% endnote %}
{% note default no-icon %}
不显示图标效果
{% endnote %}

效果:

标题

可以用基本的Markdown语法,我的标题样式修改过,所以在note标签内显示不太美观
欢迎来到LixT’s Blog

不显示图标效果

代码:

1
2
3
4
5
6
7
8
{% note primary %}
#### 标题
可以用基本的Markdown语法,我的标题样式修改过,所以在note标签内显示不太美观
欢迎来到[LixT's Blog](https://www.lixint.me)
{% endnote %}
{% note primary no-icon %}
不显示图标效果
{% endnote %}

效果:

标题

可以用基本的Markdown语法,我的标题样式修改过,所以在note标签内显示不太美观
欢迎来到LixT’s Blog

不显示图标效果

代码:

1
2
3
4
5
6
7
8
{% note info %}
#### 标题
可以用基本的Markdown语法,我的标题样式修改过,所以在note标签内显示不太美观
欢迎来到[LixT's Blog](https://www.lixint.me)
{% endnote %}
{% note info no-icon %}
不显示图标效果
{% endnote %}

效果:

不显示图标效果

代码:

1
2
3
4
5
6
7
8
{% note success %}
#### 标题
可以用基本的Markdown语法,我的标题样式修改过,所以在note标签内显示不太美观
欢迎来到[LixT's Blog](https://www.lixint.me)
{% endnote %}
{% note success no-icon %}
不显示图标效果
{% endnote %}

效果:

标题

可以用基本的Markdown语法,我的标题样式修改过,所以在note标签内显示不太美观
欢迎来到LixT’s Blog

不显示图标效果

代码:

1
2
3
4
5
6
7
8
{% note warning %}
#### 标题
可以用基本的Markdown语法,我的标题样式修改过,所以在note标签内显示不太美观
欢迎来到[LixT's Blog](https://www.lixint.me)
{% endnote %}
{% note warning no-icon %}
不显示图标效果
{% endnote %}

效果:

标题

可以用基本的Markdown语法,我的标题样式修改过,所以在note标签内显示不太美观
欢迎来到LixT’s Blog

不显示图标效果

代码:

1
2
3
4
5
6
7
8
{% note danger %}
#### 标题
可以用基本的Markdown语法,我的标题样式修改过,所以在note标签内显示不太美观
欢迎来到[LixT's Blog](https://www.lixint.me)
{% endnote %}
{% note danger no-icon %}
不显示图标效果
{% endnote %}

效果:

标题

可以用基本的Markdown语法,我的标题样式修改过,所以在note标签内显示不太美观
欢迎来到LixT’s Blog

不显示图标效果

按钮

语法

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 : 链接或相对路径
text : 按钮显示文本,如果没设置图标,必须要设置文本
icon : FontAwesome图标,不需要加前面的fa-,如果没设置文本,必须要设置图标
[class] : FontAwesome class(es),可选项: fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x
可选参数
[title] : 鼠标悬停时显示的文本
可选参数

例子

我的博客改过按钮样式,所以效果出来不好看,请自行尝试。

代码

1
{% button https://lixint.me, LixT's_Blog %}

效果

LixT’s_Blog

代码

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

效果

TextText & Title

代码

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

效果

TextText & Title

代码

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

效果

Text
Text & Title

代码

1
2
3
`<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>`
#不加div标签效果
{% btn #,, home %}{% btn #,, home %}{% btn #,, home %}

效果


#不加div标签效果

代码

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

代码

1
文章中引用{% btn #, 按钮, home fa-fw fa-lg %},直接在文中插入代码即可

效果

文章中引用按钮,直接在文中插入代码即可

代码

1
2
3
<div class="text-center"><div>{% btn #,, header %}{% btn #,, edge %}{% btn #,, times %}{% btn #,, circle-o %}</div>
<div>{% btn #,, italic %}{% btn #,, scribd %}</div>
<div>{% btn #,, google %}{% btn #,, chrome %}{% btn #,, opera %}{% btn #,, diamond fa-rotate-270 %}</div></div>

效果

行内标签

语法

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

[class] : 可选项default | primary | success | info | warning | danger.
'@Text' @后添加文本
如果没设置class的话,默认以default用法

代码

1
{% label @行内标签 %}其实就是用各种{% label [email protected]不同的颜色 %}来标记文本,例如这是{% label [email protected]标签 %},这是{% label [email protected]标签 %},这是{% label [email protected]标签 %},这是{% label [email protected]标签 %},这是{% label [email protected]标签 %},这是{% label [email protected]标签 %},文本上可以加空格。这是{% label [email protected]不加空格的 %},这是{% label [email protected]加了    空格的 %}
行内标签其实就是用各种不同的颜色来标记文本,例如这是primary标签,这是default标签,这是success标签,这是info标签,这是warning标签,这是danger标签,文本上可以加空格。这是不加空格的,这是加了 空格的

## 未完待续。。