样式汇总

发表于 | 更新于 | 分类于 | 评论数 | 阅读次数

文本居中的引用

此标签将生成一个带上下分割线的引用，同时引用内文本将自动居中。 文本居中时，多行文本若长度不等，视觉上会显得不对称，因此建议在引用单行文本的场景下使用。 例如作为文章开篇引用 或者 结束语之前的总结引用。
使用方式：

  • HTML方式：使用这种方式时，给 img 添加属性 class=”blockquote-center” 即可。
  • 标签方式：使用 centerquote 或者 简写 cq。
1
2
3
4
5
6
7
8
9
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">blah blah blah</blockquote>

<!-- 标签 方式，要求版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}

<!-- 标签别名 -->
{% cq %} blah blah blah {% endcq %}
人的一切痛苦，本质上都是对自己的无能的愤怒

王小波

超链接

1
2
3
<section class="link-braces">
<p>可后来有二天在医院里，托马斯正在<a href="#">手术间休息</a>，护士告诉他有电话。他断到话筒里<a href="#">传来特丽莎</a>的声音。电话是从车站打来的。他格外高兴，不幸的是他那天夜里有事，要到第二天才能请她上他家去。<a href="#">放下电话</a>，他便责备自己没有叫她直接去他家，他毕竟有足够的时间来取消自已原来的计划！</p>
</section>

可后来有二天在医院里，托马斯正在手术间休息，护士告诉他有电话。他断到话筒里传来特丽莎的声音。电话是从车站打来的。他格外高兴，不幸的是他那天夜里有事，要到第二天才能请她上他家去。放下电话，他便责备自己没有叫她直接去他家，他毕竟有足够的时间来取消自已原来的计划！

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
2
3
4
5
6
7
8
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

链接框

这是一个链接<a id="a1" href="http://www.qianling.pw">这是一个链接</a>

TOC数字块

1.<span class="section-number-2">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>

YouTube

<a id="tube" href="https://www.youtube.com/watch?v=Gl23T9aOfoE"><i class="fa fa-youtube-play"></i><span> YouTube </span>

emoji

😙🍋🎱✊
https://www.emojicopy.com/

相关文章