Bella's Blog
0%

Next 8.0 进阶美化篇一

发表于 更新于 分类于 Valine：
本文字数： 8.4k 阅读时长 ≈ 8 分钟

本篇教程主要讲解在markdown下对文本的部分美化效果，包括块状标签，文字色块，居中，自定义数字块等, 对初学者友好易上手。

Next 8.0 进阶美化篇一

Next 8.0 进阶美化篇二

笔记标签

效果：

这里输入文字

先修改主题配置文件/blog/themes/next/_config.yml

1
2
3
4
5
6
7
# Note tag (bs-callout)
note:
  # 风格
  style: flat
  # 要不要图标
  icons: false
  light_bg_offset: 0

使用方法

default效果：

这里输入文字

用法：在你要编辑的markdown文件里键入以下内容 
1
<div class="note default"><p>这里输入文字</p></div>
或者： 
1
<div class="note default"><p>这里输入文字</p></div>

primary效果：

这里输入文字

用法：在你要编辑的markdown文件里键入以下内容 
1
<div class="note primary"><p>这里输入文字</p></div>
或者： 
1
{% note primary %} 这里输入文字 {% endnote %}

success效果：

这里输入文字

用法：在你要编辑的markdown文件里键入以下内容 
1
<div class="note success"><p>这里输入文字</p></div>
或者： 
1
{% note success %} 这里输入文字 {% endnote %}

info效果：

这里输入文字

用法：在你要编辑的markdown文件里键入以下内容 
1
<div class="note info"><p>这里输入文字</p></div>
或者： 
1
{% note info %} 这里输入文字 {% endnote %}

warning效果：

这里输入文字

用法：在你要编辑的markdown文件里键入以下内容 
1
<div class="note warning"><p>这里输入文字</p></div>
或者： 
1
{% note warning %} 这里输入文字 {% endnote %}

danger效果：

这里输入文字

用法：在你要编辑的markdown文件里键入以下内容 
1
<div class="note danger"><p>这里输入文字</p></div>
或者： 
1
{% note danger %} 这里输入文字 {% endnote %}

文字背景色块

效果： 红色背景色块

更改主题配置文件/Bolg/themes/next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
//开启自定义style
  style: source/_data/styles.styl

然后在主目录下的source下新建_data子文件夹和styles.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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
// 下载样式
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}
// 颜色块-黄
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;
}
// 颜色块-绿
span#inline-green {
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: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
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: #2780e3;
}
// 颜色块-紫
span#inline-purple {
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: #9954bb;
}
// 颜色块-红
span#inline-red {
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: #df3e3e;
}
// 左侧边框红色块级
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;
}

使用方法: 在你要编辑的markdown文件里键入以下内容

红色背景色块 

1
<span id="inline-red"> 这里输入文字 </span>

蓝色背景色块 

1
<span id="inline-blue"> 这里输入文字 </span>

紫色背景色块 

1
<span id="inline-purple"> 这里输入文字 </span>

黄色背景色块 

1
<span id="inline-yellow"> 这里输入文字 </span>

绿色背景色块 

1
<span id="inline-green"> 这里输入文字 </span>

背景自定义效果

效果：
这里输入文字

在styles.styl里键入自定义形状色块

1
2
3
4
5
6
7
8
9
10
// 自定义形状色块
span#inline-toc {
    display: inline-block;
    border-radius: 80% 100% 90% 20%;
    background-color: rgb(237, 237, 237);
    color: #555;
    padding: 0.05em 0.4em;
    margin: 2px 5px 2px 0px;
    line-height: 1.5;
}

使用方法: 在你要编辑的markdown文件里键入以下内容

1
<span id="inline-toc">这里输入文字</span>

图标边框效果

效果：

查看内容

使用方法: 在你要编辑的markdown文件里键入以下内容

1
<a id="download" href="/download/model_infer.py"><i class="fas fa-book-reader"></i><span> 查看内容</span></a>

附注：图标整理网站 可以在其中选中想要实现的图标效果，获取相应的名称进行替换即可。

FireShot Capture 075 - File Download Icon - Font Awesome - fontawesome.com

1
<a id="download" href="/download/model_infer.py"><i class="fas fa-file-download"></i><span> <font color="blue">下载内容</font></span></a>

 下载内容

文本居中

效果：

Szabadság，Szerelem!
E kettő kell nekem
Szerelmemért föláldozom
Az életet
Szabadságért föláldozom
Szerelmemet.

1
2
3
4
5
6
7
8
{%cq%}
Szabadság，Szerelem!
E kettő kell nekem
Szerelmemért föláldozom
Az életet
Szabadságért föláldozom
Szerelmemet.
{%endcq%}

自定义数字块

效果：

1
2
3
4
5
6
7
8
9
10
/* 自定义的数字块 */
span#inline-toc {
    display: inline-block;
    border-radius: 80% 100% 90% 20%;
    background-color: rgb(227, 242, 253);
    color: #555;
    padding: 0.05em 0.4em;
    margin: 2px 5px 2px 0px;
    line-height: 1.5;
}

使用方法：

1
<span id="inline-toc">1.</span>