Hexo 文章内样式设置

文章内超链接样式设置

<section class="link-braces">
<p>这是一个<a href="#">超链接</a>
</section>

Demo:

这是一个超链接

需要注意的是，使用时需要在”a”标签前增加”p”标签进行分割。

文章内居中引用设置

将文章内部分内容自动居中，并加上引号。推荐单行使用。

<!-- Html方式: 直接在 Markdown 文件中编写 Html 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">Html方式文本居中</blockquote>

Html方式文本居中

Note Tag

class_name 可以是以下列表中的一个值：

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

Demo:

Demo:

Alert 样式

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

Bug

除了在文中设置之外，还需要在themes\next\source\css_custom\custom.styl文件中添加以下样式。

// Alert 样式修改 start
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-success {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}
.alert-success .alert-link {
  color: #356635;
}
.alert-success code {
  background: rgba(214,233,198,0.8);
}
.alert-success a {
  color: #468847;
  border-bottom: 1px solid #468847;
}

.alert-info {
    color: #3a87ad;
    background-color: #e2eaee;
    border-color: #c5d5dd;
}

.alert-warning {
    color: #c09853;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #ebccd1;
}
// Alert 样式修改 end

文字增加背景色块

<span id="inline-blue">增加蓝色背景色块</span> 
<span id="inline-purple">增加紫色背景色块</span>
<span id="inline-yellow">增加黄色背景色块</span>
<span id="inline-green">增加绿色背景色块</span>

增加蓝色背景色块
增加紫色背景色块
增加黄色背景色块
增加绿色背景色块

除了在文中设置之外，还需要在themes\next\source\css_custom\custom.styl文件中添加以下样式。

//文字增加背景色块
span#inline-blue {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0;
    background-color: #2780e3;
}
span#inline-purple {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0;
    background-color: #9954bb;
}
span#inline-yellow {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0;
    background-color: #f0ad4e;
}
span#inline-green {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0;
    background-color: #5cb85c;
}
// 文字增加背景色块 end

引用边框样式修改

修改颜色

<p id="div-border-left-red">左红</p>
<p id="div-border-left-yellow">左黄</p>
<p id="div-border-left-blue">左蓝</p>
<p id="div-border-left-green">左绿</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-blue">右蓝</p>
<p id="div-border-right-green">右绿</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-blue">上蓝</p>
<p id="div-border-top-green">上绿</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-blue">下蓝</p>
<p id="div-border-bottom-green">下绿</p>
<p id="div-border-bottom-purple">下紫</p>

Demo:

左红

左黄

左蓝

左绿

左紫

右红

右黄

右蓝

右绿

右紫

上红

上黄

上蓝

上绿

上紫

下红

下黄

下蓝

下绿

下紫

除了在文中设置之外，还需要在themes\next\source\css_custom\custom.styl文件中添加以下样式。

// 引用边框样式修改 start
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;
}
p#div-border-left-yellow {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-left-width: 5px;
    border-radius: 3px;
    border-left-color: #f0ad4e;
}
p#div-border-left-green {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-left-width: 5px;
    border-radius: 3px;
    border-left-color: #5cb85c;
}
p#div-border-left-blue {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-left-width: 5px;
    border-radius: 3px;
    border-left-color: #2780e3;
}
p#div-border-left-purple {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-left-width: 5px;
    border-radius: 3px;
    border-left-color: #9954bb;
}
p#div-border-right-red {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-right-width: 5px;
    border-radius: 3px;
    border-right-color: #df3e3e;
}
p#div-border-right-yellow {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-right-width: 5px;
    border-radius: 3px;
    border-right-color: #f0ad4e;
}
p#div-border-right-green {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-right-width: 5px;
    border-radius: 3px;
    border-right-color: #5cb85c;
}
p#div-border-right-blue {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-right-width: 5px;
    border-radius: 3px;
    border-right-color: #2780e3;
}
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;
}
p#div-border-top-red {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-top-width: 5px;
    border-radius: 3px;
    border-top-color: #df3e3e;
}
p#div-border-top-yellow {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-top-width: 5px;
    border-radius: 3px;
    border-top-color: #f0ad4e;
}
p#div-border-top-green {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-top-width: 5px;
    border-radius: 3px;
    border-top-color: #5cb85c;
}

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;
}
p#div-border-top-purple {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-top-width: 5px;
    border-radius: 3px;
    border-top-color: #9954bb;
}
p#div-border-bottom-red {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-bottom-width: 5px;
    border-radius: 3px;
    border-bottom-color: #df3e3e;
}
p#div-border-bottom-yellow {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-bottom-width: 5px;
    border-radius: 3px;
    border-bottom-color: #f0ad4e;
}
p#div-border-bottom-green {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-bottom-width: 5px;
    border-radius: 3px;
    border-bottom-color: #5cb85c;
}
p#div-border-bottom-blue {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-bottom-width: 5px;
    border-radius: 3px;
    border-bottom-color: #2780e3;
}
p#div-border-bottom-purple {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-bottom-width: 5px;
    border-radius: 3px;
    border-bottom-color: #9954bb;
}
// 引用边框样式修改 end

在文档中增加图标

图标库awesome: https://fontawesome.com

仅增加图标

<i class="fa fa-github"></i>
<i class="fa fa-github fa-lg"></i>
<i class="fa fa-github fa-2x"></i>

Demo:

图标链接

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

YouTube

本文部分内容参考自：https://qianling.pw/style/