hexo支持的样式（持续更新ing.....）

1. 选项卡

没错就是next官网中看到的选项卡。 {% tabs 选项卡, 1 %} #step，为选项卡的名称，可以自定义，数字表示从第一个选项卡开始。

去hexo官网，在本地或者云服务器上安装好博客程序。

找到next官方文档，找到next主题相关安装和配置。

去google或者baidu找到大神们的优化教程。

{% endtabs %}


{% tabs 选项卡, 1 %}  #step，为选项卡的名称，可以自定义，数字表示从第一个选项卡开始。非必须，若数值为-1则隐藏选项卡内容。
<!-- tab -->
去[hexo](https://hexo.io/zh-cn/index.html)官网，在本地或者云服务器上安装好博客程序。
<!-- endtab -->
<!-- tab -->
找到[next](https://theme-next.iissnan.com/)官方文档，找到next主题相关安装和配置。
<!-- endtab -->
<!-- tab -->
去[google](https://www.google.com.hk)或者[baidu](https://www.baidu.com)找到大神们的优化教程。
<!-- endtab -->
{% endtabs %}

感谢Ivan.Nginx大神。

2. 文字居中

{% cq %} 人生乃是一面镜子，从镜子里认识自己，我要称之为头等大事，也只是我们追求的目的！ {% endcq %}


{% cq %}
人生乃是一面镜子，
从镜子里认识自己，
我要称之为头等大事，
也只是我们追求的目的！
{% endcq %}

3. 小色块

黄色色块绿色色块蓝色色块紫色色块红色色块


<span id="inline-yellow">黄色色块</span>
<span id="inline-green">绿色色块</span>
<span id="inline-blue">蓝色色块</span>
<span id="inline-purple">紫色色块</span>
<span id="inline-red">红色色块</span>

自定义小色块自定义文件位置：/hexo/themes/next-reloaded/source/css/_custom/custom.styl 代码如下：


//颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e; #色块颜色代码
}

详情页面： https://qianling.pw/style/#TOC%E6%95%B0%E5%AD%97%E5%9D%97

4. 左侧色条

左

侧

色

块

。

调用方法：


<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#div-border-left-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #df3e3e;  #色条颜色代码
}

5. 右侧色条

右

侧

色

条

。

调用方法：


<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#div-border-right-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #9954bb; #色条颜色代码
}

6. 上方色条

上

方

色

条

。

调用方法：


<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#div-border-top-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #2780e3; #色条颜色代码
}

7. next自带的一些样式

需要在next主题的配置文件中开启:


# 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: modern
  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

四种风格，可以自己试试。

# - 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.

note default

note primary

note success

note info

note warning

note danger

note danger no-icon

8. 数字色块

两种样式，自由发挥。

红色色块

紫色色块

1.黑色色块

2.橘色色块

调用方法：


<span id="inline-toc-red">红色色块</span>
<span id="inline-toc-purple">紫色色块</span>
<span id="inline-toc-black">1. </span>黑色色块
<span id="inline-toc-orange">1. 橘色色块</span>

自定义方法其他类型色块，自定义代码：


// 自定义的数字块红色
span#inline-toc-red {
    display: inline-block;
    border-radius: 80% 100% 90% 20%;
    background-color: rgb(205 92 92);  #百度rgb
    color: #555;
    padding: 0.05em 0.4em;
    margin: 2px 5px 2px 0px;
    line-height: 1.5;
}

9. 其他背景色

本文旨在介绍样式的使用规则。

10. 对齐

居中: <%center>我是居中

我是居中

左对齐: <%p align="left">我是左对齐

我是左对齐

右对齐: <%p align="right">我是右对齐

我是右对齐

百分号去掉实现效果。

11. 其他样式

支持Font Awesome图标。我使用的网站：https://www.w3schools.com/icons/fontawesome_icons_webapp.asp 备用网站：http://fontawesome.dashgame.com/ 下载样式 Download Now

支持 Markdown Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
一件部署 只需一条指令即可部署到 GitHub Pages，或其他网站。
丰富的插件 Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade，CoffeeScript。

下载
下载变大 33%
下载两倍大

源码：


下载样式:
<a id="download" href="https://www.baidu.com"><i class="fa fa-download"></i><span> Download Now</span></a>

1. <i class="fa fa-pencil"></i> 支持 Markdown
<i>Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。</i>
2. <i class="fa fa-cloud-upload"></i> 一件部署
<i>只需一条指令即可部署到 GitHub Pages，或其他网站。</i>
3. <i class="fa fa-cog"></i> 丰富的插件
<i>Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade，CoffeeScript。</i>

- <i class="fa fa-download"></i> 下载
- <i class="fa fa-download fa-lg"></i> 下载变大 33%
- <i class="fa fa-download fa-2x"></i> 下载两倍大

只有要想法，多多尝试就出来了。

目录

1. 选项卡

2. 文字居中

3. 小色块

4. 左侧色条

5. 右侧色条

6. 上方色条

7. next自带的一些样式

8. 数字色块

9. 其他背景色

10. 对齐

11. 其他样式