样式汇总





文本居中的引用

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

  • 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>

Bootstrap Callout

使用方式:

1
{% note class_name %} Content (md partial supported) {% endnote %}

其中,class_name 可以是以下列表中的一个值:

  • default
  • primary
  • success
  • info
  • warning
  • danger

区块依然生效

default

primary


success

info


warning

danger

链接框

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

TOC数字块

1.<span class="section-number-2">1.</span>

警告

本文旨在介绍样式的使用规则。
<div class="alert alert-success"><i class="fa fa-lightbulb-o"></i> 本文旨在介绍样式的使用规则。</div>

本文旨在介绍样式的使用规则。
<div class="alert alert-info"><i class="fa fa-info"></i> 本文旨在介绍样式的使用规则。</div>

本文旨在介绍样式的使用规则。
<div class="alert alert-warning"><i class="fa fa-info"></i> 本文旨在介绍样式的使用规则。</div>

本文旨在介绍样式的使用规则。
<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>

引用边框变色

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-left-red">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-left-yellow">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-left-green">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-left-blue">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-left-purple">且不问结果如何,尽自己之所能,积极的面对。</p>


且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-right-red">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-right-yellow">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-right-green">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-right-blue">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-right-purple">且不问结果如何,尽自己之所能,积极的面对。</p>


且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-top-red">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-top-yellow">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-top-green">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-top-blue">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-top-purple">且不问结果如何,尽自己之所能,积极的面对。</p>


且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-bottom-red">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-bottom-yellow">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-bottom-green">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<p id="div-border-bottom-blue">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

<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/




---文章结束啦 ฅ●ω●ฅ 感谢您的阅读---