前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Matery之Note标签优化

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 文件,添加如下代码:

代码语言:javascript
复制
<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代码如下:

代码语言:javascript
复制
/* 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 标签方式写在你需要显示的文章内容位置里即可。

代码语言:javascript
复制
<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 标签样式

参考文章

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-09-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 0x01 效果演示
  • 0x02 优化步骤
  • 0x03 使用方法
  • 参考文章
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档