關於hexo部落格的note標籤美化

效果圖：

引入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'/>

新增一段自定義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;
    }

最後，在寫 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>