前言
参照 NekoDeng 博主的关于hexo博客的note标签美化 教程给 Matery 主题进行标签优化。
0x01 效果演示
这里是 info 标签样式
这里是 primary 标签样式
这里是 warning 标签样式
这里是 danger 标签样式
0x02 优化步骤
1、打开 themes/hexo-theme-matery-2.0.0/layout/_partial/head.ejs
文件,引入FontAwesome v4.7.0 版本的 CSS 文件,添加如下代码:
<link type='text/css' rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" media='all'/>
2、打开themes/hexo-theme-matery-2.0.0/source/css/my.css
文件,添加一段自定义css代码如下:
/* note 公共样式 */
.note {
position: relative;
padding: 15px;
margin-top: 10px;
margin-bottom: 10px;
border: initial;
border-left: 3px solid #eee;
background-color: #f9f9f9;
border-radius: 3px;
font-size: var(--content-font-size);
}
.note:not(.no-icon):before {
position: absolute;
font-family: FontAwesome;
font-size: larger;
top: 11px;
left: 15px;
}
.note:not(.no-icon) {
padding-left: 45px;
}
.note.info {
background-color: #eef7fa;
border-left-color: #428bca;
}
.note.info:not(.no-icon):before {
content: "\f05a";
color: #428bca;
}
.note.warning {
background-color: #fdf8ea;
border-left-color: #f0ad4e;
}
.note.warning:not(.no-icon):before {
content: "\f06a";
color: #f0ad4e;
}
.note.primary {
background-color: #f5f0fa;
border-left-color: #6f42c1;
}
.note.primary:not(.no-icon):before {
content: "\f055";
color: #6f42c1;
}
.note.danger {
background-color: #fcf1f2;
border-left-color: #d9534f;
}
.note.danger:not(.no-icon):before {
content: "\f056";
color: #d9534f;
}
0x03 使用方法
在写博客文章 md 文件时,以 html 标签方式写在你需要显示的文章内容位置里即可。
<div class="note info">这里是 info 标签样式</div>
<div class="note info no-icon">这里是不带符号的 info 标签样式</div>
<div class="note primary">这里是 primary 标签样式</div>
<div class="note primary no-icon">这里是不带符号的 primary 标签样式</div>
<div class="note warning">这里是 warning 标签样式</div>
<div class="note warning no-icon">这里是不带符号的 warning 标签样式</div>
<div class="note danger">这里是 danger 标签样式</div>
<div class="note danger no-icon">这里是不带符号的 danger 标签样式</div>
这里是 info 标签样式
这里是 primary 标签样式
这里是 warning 标签样式
这里是 danger 标签样式