Hexo博客note标签美化个人配置

发布日期: 2021-04-22

更新日期: 2021-05-15

阅读次数:

§1.文章来源：

§2.在`/layout/layout.ejs`中引入了以下js头

<link type='text/css' rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" media='all'/>

§3.在`/css/matery.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; }

每个div标签结束后面必须空一行

§3.代码

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