Hexo 文章内样式设置

文章内超链接样式设置

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

Demo:

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

文章内居中引用设置

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

1
2
3
4
5
6
7
8
9
10

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

<!-- 标签方式 -->
{% centerquote %}标签方式文本居中{% endcenterquote %}

<!-- 标签简写 -->
{% cq %} 标签简写方式文本居中 {% endcq %}
Html方式文本居中

标签方式文本居中

标签简写方式文本居中

Note Tag

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

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

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

Demo:

default

primary

success

info

waring

danger

Tab tag

1
2
3
4
5
6
7
8
{% tabs tagname, [index] %}
<!-- tab [标签1] -->
标签内容 (支持标签).
<!-- endtab -->
<!-- tab [标签2] -->
标签内容 (支持标签).
<!-- endtab -->
{% endtabs %}

Demo:

标签内容 (支持标签).

标签内容 (支持标签).

Alert 样式

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 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

文字增加背景色块

1
2
3
4
<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文件中添加以下样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
//文字增加背景色块
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

引用边框样式修改

修改颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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文件中添加以下样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
// 引用边框样式修改 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

仅增加图标

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

Demo:

图标链接

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

YouTube

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

本文结束

♥您的支持将成为我前进的动力♥
  • 本文作者: Cool
  • 本文链接: blog.nmslwsnd.com/Post style set/
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!