文本居中的引用
此标签将生成一个带上下分割线的引用,同时引用内文本将自动居中。 文本居中时,多行文本若长度不等,视觉上会显得不对称,因此建议在引用单行文本的场景下使用。 例如作为文章开篇引用 或者 结束语之前的总结引用。
使用方式:
- HTML方式:使用这种方式时,给 img 添加属性 class=”blockquote-center” 即可。
- 标签方式:使用 centerquote 或者 简写 cq。
1 | <!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 --> |
人的一切痛苦,本质上都是对自己的无能的愤怒王小波
超链接
1 | <section class="link-braces"> |
可后来有二天在医院里,托马斯正在手术间休息,护士告诉他有电话。他断到话筒里传来特丽莎的声音。电话是从车站打来的。他格外高兴,不幸的是他那天夜里有事,要到第二天才能请她上他家去。放下电话,他便责备自己没有叫她直接去他家,他毕竟有足够的时间来取消自已原来的计划!
Note tag
使用方式:
1 | {% note class_name %} Content (md partial supported) {% endnote %} |
其中,class_name 可以是以下列表中的一个值:
- default
- primary
- success
- info
- warning
- danger
\themes\next\_config.yml
内可修改参数
default
primary
success
info
warning
danger
Tab tag
Any content (support inline tags too).
Any content (support inline tags too).
1 | {% tabs Unique name, [index] %} |
链接框
这是一个链接<a id="a1" href="http://www.qianling.pw">这是一个链接</a>
TOC数字块
1.<span class="section-number">1.</span>
警告
1 | <div class="alert alert-success"><i class="fa fa-lightbulb-o"></i> 本文旨在介绍样式的使用规则。</div> |
1 | <div class="alert alert-info"><i class="fa fa-info"></i> 本文旨在介绍样式的使用规则。</div> |
1 | <div class="alert alert-warning"><i class="fa fa-info"></i> 本文旨在介绍样式的使用规则。</div> |
1 | <div class="alert alert-danger"><i class="fa fa-bug"></i> 本文旨在介绍样式的使用规则。</div> |
文字增加背景色块
站点配置文件<span id="inline-blue">站点配置文件</span>
主题配置文件<span id="inline-purple">主题配置文件</span>
站点配置文件<span id="inline-yellow">站点配置文件</span>
主题配置文件<span id="inline-green">主题配置文件</span>
引用边框变色
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-left-red">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-left-yellow">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-left-green">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-left-blue">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-left-purple">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-right-red">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-right-yellow">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-right-green">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-right-blue">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-right-purple">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-top-red">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-top-yellow">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-top-green">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-top-blue">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-top-purple">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-bottom-red">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-bottom-yellow">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-bottom-green">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-bottom-blue">且不问结果如何,尽自己之所能,积极的面对。</p> |
且不问结果如何,尽自己之所能,积极的面对。
1 | <p id="div-border-bottom-purple">且不问结果如何,尽自己之所能,积极的面对。</p> |
在文档中增加图标
<i class="fa fa-pencil"></i>
<i class="fa fa-cloud-upload"></i>
<i class="fa fa-cog"></i>
<i class="fa fa-github"></i>
<i class="fa fa-github fa-lg"></i>
<i class="fa fa-github fa-2x"></i>
Download Now<a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span> </a>
<a id="tube" href="https://www.youtube.com/watch?v=Gl23T9aOfoE"><i class="fa fa-youtube-play"></i><span> YouTube </span>