Matery之Note标签优化


前言

参照 NekoDeng 博主的关于hexo博客的note标签美化 教程给 Matery 主题进行标签优化。

0x01 效果演示

这里是 info 标签样式
这里是不带符号的 info 标签样式
这里是 primary 标签样式
这里是不带符号的 primary 标签样式
这里是 warning 标签样式
这里是不带符号的 warning 标签样式
这里是 danger 标签样式
这里是不带符号的 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 标签样式
这里是不带符号的 info 标签样式
这里是 primary 标签样式
这里是不带符号的 primary 标签样式
这里是 warning 标签样式
这里是不带符号的 warning 标签样式
这里是 danger 标签样式
这里是不带符号的 danger 标签样式

参考文章


文章作者: LuckySec
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 LuckySec !
评论
  目录