本文内容参考NEXT主题官方博客以及Next主题自带部分标签使用教程
居中标签
这是便签
1 | <!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 --> |
这是便签
1 | <!-- 标签 方式,要求版本在0.4.5或以上 --> |
这是便签
1 | <!-- 标签别名 --> |
Note标签
语法
1 | #语法 |
实例
这个是默认的带图标的标签
1 | {% note default %} |
1 | {% note default no-icon %} |
这个是primary的带图标的标签
1 | {% note primary %} |
1 | {% note primary no-icon %} |
这个是success的带图标的标签
1 | {% note success %} |
1 | {% note success no-icon %} |
这个是info的带图标的标签
1 | {% note info %} |
1 | {% note info no-icon %} |
这个是warning的带图标的标签
1 | {% note waring %} |
1 | {% note warning no-icon %} |
这个是danger的带图标的标签
1 | {% note danger %} |
1 | {% note danger no-icon %} |
Next为note提供了四种样式,可以通过主题配置文件_config.yml中的633行左右的note.style进行切换
原始代码如下:1
2
3
4
5
6
7
8
9
10
11
12
13# Note tag (bs-callout).
note:
# Note tag style values:
# - 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: true
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
(HEXO内置)引用标签源文档
- 普通引用块(没有提供参数)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
在markdown中可以直接通过:1
2
3{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
1
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
实现。
- 引用书上的句子
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
1
2
3{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %} - 引用Twitter
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
1
2
3{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %} - 引用网络上的文章
Every interaction is both precious and an opportunity to delight.
1
2
3{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}
(HEXO内置)代码块源文档
默认参数说明
字段名 | 描述 | 默认参数 |
---|---|---|
line_number |
显示行标 | true |
highlight |
是否高亮 | true |
first_line |
首行 | 1 |
mark |
行突出显示特定行,每个值用逗号分隔。使用短划线指定数字范围。示例:标记:1,4-7,10将标记第1、4至7和10行。 | |
wrap |
将代码放入表格中 | true |
格式:
1 | {% codeblock [title] [lang:language] [url] [link text] [additional options] %} |
格式中的参数说明
字段名 | 说明 |
---|---|
title |
标题 |
lang:language |
语言 |
url |
网址 |
link text |
网页简介 |
additiona options |
其他设置 |
实例
1 |
|
源代码1
2
3
4
5
6{% codeblock 第一个程序 lang:c https://baike.baidu.com/item/c语言/105958?fr=aladdin C语言简介 %}
#include<stdio.h>
int main(){
printf("hello world");
}
{% endcodeblock %}
行内标签
语法
1 | {% label [class]@Text %} |
实例
行内标签其实就是用各种不同的颜色来标记文本,例如这是primary标签,这是default标签,这是success标签,这是info标签,这是warning标签,这是danger标签,文本上可以加空格。这是不加空格的,这是加了 空格的1 | {% label @行内标签 %}其实就是用各种{% label primary@不同的颜色 %}来标记文本,例如这是{% label primary@primary标签 %},这是{% label default@default标签 %},这是{% label success@success标签 %},这是{% label info@info标签 %},这是{% label warning@warning标签 %},这是{% label danger@danger标签 %},文本上可以加空格。这是{% label success@不加空格的 %},这是{% label success@加了 空格的 %} |
按钮
这是自定义的按钮1
<a class="btnc">这是自定义的按钮</a>
分类标签
This is Tab 1.
This is Tab 2.
This is Tab 3.
1 | {% tabs First unique name %} |