以下的写法,只适用于NexT主题,用在其它主题上不会有效果,甚至可能会报错。使用前请留意
文本居中引用
此标签将生成一个带上下分割线的引用,同时引用内文本将自动居中。 文本居中时,多行文本若长度不等,视觉上会显得不对称,因此建议在引用单行文本的场景下使用。 例如作为文章开篇引用 或者 结束语之前的总结引用
使用方式
- HTML方式:直接在 Markdown 文件中编写 HTML 来调用,给
img
添加属性class="blockquote-center"
即可。 - 标签方式:使用
centerquote
或者 简写cq
。
# HTML方式 |
突破容器宽度限制的图片
当使用此标签引用图片时,图片将自动扩大 26%,并突破文章容器的宽度。 此标签使用于需要突出显示的图片, 图片的扩大与容器的偏差从视觉上提升图片的吸引力。 此标签有两种调用方式(详细参看底下示例):
使用方式
- HTML方式:直接在 Markdown 文件中编写 HTML 来调用,为
img
添加属性class="full-image"
即可。 - 标签方式:使用
fullimage
或者 简写fi
, 并传递图片地址、alt
和title
属性即可。 属性之间以逗号分隔。
# HTML方式: |
Note 标签
使用方式
{% note [class] [no-icon] %} |
名称 | 用法 |
---|---|
class | 【可选】标识,不同的标识有不同的配色 ( default / primary / success / info / warning / danger ) |
no-icon | 【可选】不显示 icon |
效果如下
default
primary
success
info
warning
danger
Tabs 选项卡
使用方式
{% tabs Unique name, [index] %} |
Unique name:选项卡唯一名字
[index]:活动卡索引号
[caption]:标签标题
[@icon]:FontAwesome图标名称
This is Tab 1.
This is Tab 2.
This is Tab 3.
Label 标签
使用方法
{% label [class]@Text %} |
[class] : default | primary | success | info | warning | danger.
效果如下
Will you choose default , primary , success , info , warning or danger ?
Video 标签
{% video https://example.com/sample.mp4 %} |
Button 标签
使用 button
或者 简写 btn
{% button url, text, icon [class], [title] %} |
homeurl:绝对或相对路径
text, icon:按钮文字或FontAwesome图标
[class]:FontAwesome类:fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x
[title]:鼠标悬停时的工具提示
流程图
{% mermaid type%} |
type: 请访问 https://github.com/knsv/mermaid 以获取更多信息
{% mermaid sequenceDiagram %} |
sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long<br/>long time, so long that the text does not fit on a row. Bob-->>Alice: Checking with John... Alice->>John: Yes... John, how are you?