next内置标签

本文内容参考NEXT主题官方博客以及Next主题自带部分标签使用教程

居中标签

这是便签

1
2
3
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">这是便签</blockquote>

这是便签


1
2
<!-- 标签 方式,要求版本在0.4.5或以上 -->
{% centerquote %}这是便签{% endcenterquote %}

这是便签


1
2
<!-- 标签别名 -->
{% cq %}这是便签{% endcq %}

Note标签

语法

1
2
3
4
5
6
7
#语法
{% note class icon %}
Any content (support inline tags too.io).
{% endnote %}
#参数解释
class可选项 : default | primary | success | info | warning | danger.
icon可选项 : on-icon | 不填

实例

这个是默认的带图标的标签

1
2
3
{% note default %}
这个是默认的带图标的标签
{% endnote %}

这个是默认的不带图标的标签

1
2
3
{% note default no-icon %}
这个是默认的不带图标的标签
{% endnote %}

这个是primary的带图标的标签

1
2
3
{% note primary %}
这个是primary的带图标的标签
{% endnote %}

这个是primary的不带图标的标签

1
2
3
{% note primary no-icon %}
这个是primary的不带图标的标签
{% endnote %}

这个是success的带图标的标签

1
2
3
{% note success %}
这个是success的带图标的标签
{% endnote %}

这个是success的不带图标的标签

1
2
3
{% note success no-icon %}
这个是success的不带图标的标签
{% endnote %}

这个是info的带图标的标签

1
2
3
{% note info %}
这个是info的带图标的标签
{% endnote %}

这个是info的不带图标的标签

1
2
3
{% note info no-icon %}
这个是info的不带图标的标签
{% endnote %}

这个是warning的带图标的标签

1
2
3
{% note waring %}
这个是waring的带图标的标签
{% endnote %}

这个是waring的不带图标的标签

1
2
3
{% note warning no-icon %}
这个是waring的不带图标的标签
{% endnote %}

这个是danger的带图标的标签

1
2
3
{% note danger %}
这个是danger的带图标的标签
{% endnote %}

这个是danger的不带图标的标签

1
2
3
{% note danger no-icon %}
这个是danger的不带图标的标签
{% endnote %}

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.

    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 %}
    在markdown中可以直接通过:

    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.

    David LevithanWide Awake
    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
2
3
{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

格式中的参数说明

字段名 说明
title 标题
lang:language 语言
url 网址
link text 网页简介
additiona options 其他设置

实例

第一个程序C语言简介
1
2
3
4
#include<stdio.h>
int main(){
printf("hello world");
}

源代码

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
2
3
4
5
{% label [class]@Text %}

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

实例

行内标签其实就是用各种不同的颜色来标记文本,例如这是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
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs First unique name %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

本文标题:next内置标签

文章作者:小哲

发布时间:2020年01月31日 - 12:50

最后更新:2020年03月21日 - 12:09

原始链接: 点击复制原始链接

许可协议: 协议-转载请保留原文链接及作者