Matery之Note标签优化

LuckySec

发布于 2022-11-02 15:07:13

2760

发布于 2022-11-02 15:07:13

文章被收录于专栏：LuckySec网络安全

前言

参照 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>