From c9d5e81ca4f473c9a212066ea36b4c59cb115b88 Mon Sep 17 00:00:00 2001
From: liuyib <1656081615@qq.com>
Date: Fri, 2 Aug 2019 22:20:07 +0800
Subject: [PATCH] feat: Add tag plugin of 'note'

---
 docs/zh-CN/advanced/assist.md                | 34 +++++++++++
 scripts/tags/note.js                         | 14 +++++
 source/css/_components/index.styl            |  1 +
 source/css/_components/tag-plugin/index.styl |  1 +
 source/css/_components/tag-plugin/note.styl  | 63 ++++++++++++++++++++
 5 files changed, 113 insertions(+)
 create mode 100644 scripts/tags/note.js
 create mode 100644 source/css/_components/tag-plugin/index.styl
 create mode 100644 source/css/_components/tag-plugin/note.styl

diff --git a/docs/zh-CN/advanced/assist.md b/docs/zh-CN/advanced/assist.md
index 563d2b7..47096df 100644
--- a/docs/zh-CN/advanced/assist.md
+++ b/docs/zh-CN/advanced/assist.md
@@ -86,3 +86,37 @@ Hexo 主题一般都会扩展一些自己特有的标签插件，在这方面做
 3. 重启 Hexo 服务器，效果如下。
 
 ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190802171506.png)
+
+### Bootstrap 标注 <Badge text="stable"/> <Badge text="v1.2.0"/>
+
+语法如下：
+
+```
+{% note [type] [no-icon] %}
+**header text**
+
+any text
+{% endnote %}
+```
+
+> 标签内可以是任意文字，支持 markdown 和 HTML 语法。
+
+参数：
+
+`[type]`：标注类型
+
+`[no-icon]`：是否显示 ICON
+
+举例：
+
+```
+{% note success %}
+**Success**
+
+This is success note.
+{% endnote %}
+```
+
+全部效果如下：
+
+![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190802221712.png)
diff --git a/scripts/tags/note.js b/scripts/tags/note.js
new file mode 100644
index 0000000..99d917b
--- /dev/null
+++ b/scripts/tags/note.js
@@ -0,0 +1,14 @@
+/* global hexo */
+
+'use strict';
+
+function note(args, content) {
+  return `<div class="note-plugin ${args.join(' ')}">
+            ${hexo.render
+              .renderSync({ text: content, engine: 'markdown' })
+              .split('\n')
+              .join('')}
+          </div>`;
+}
+
+hexo.extend.tag.register('note', note, { ends: true });
diff --git a/source/css/_components/index.styl b/source/css/_components/index.styl
index d208f23..14e792c 100644
--- a/source/css/_components/index.styl
+++ b/source/css/_components/index.styl
@@ -11,3 +11,4 @@
 @import './copy.styl'
 @import './analytics/index.styl'
 @import './search/index.styl'
+@import './tag-plugin/index.styl'
diff --git a/source/css/_components/tag-plugin/index.styl b/source/css/_components/tag-plugin/index.styl
new file mode 100644
index 0000000..3cce3fd
--- /dev/null
+++ b/source/css/_components/tag-plugin/index.styl
@@ -0,0 +1 @@
+@import './note.styl'
diff --git a/source/css/_components/tag-plugin/note.styl b/source/css/_components/tag-plugin/note.styl
new file mode 100644
index 0000000..8b24121
--- /dev/null
+++ b/source/css/_components/tag-plugin/note.styl
@@ -0,0 +1,63 @@
+.note-plugin
+  position: relative
+  margin: 1rem 0
+  border: 1px solid #eee
+  border-left-width: .35rem
+  padding: 0 1rem
+  line-height: 1.7em
+
+  &:not(.no-icon)
+    padding-left: 2rem
+
+    &::before
+      position: absolute
+      top: .8em
+      left: .6rem
+      font-family: 'FontAwesome'
+      font-size: $font-size-base + 6px
+
+    &.default::before
+      content: '\f0a9'
+      color: #777
+
+    &.success::before
+      content: '\f058'
+      color: #5cb85c
+
+    &.warning::before
+      content: '\f06a'
+      color: #f0ad4e
+
+    &.danger::before
+      content: '\f056'
+      color: #d9534f
+
+  &.default
+    border-left-color: #777
+
+    strong
+      color: #777
+
+  &.success
+    border-left-color: #5cb85c
+
+    strong
+      color: #5cb85c
+
+  &.warning
+    border-left-color: #f0ad4e
+
+    strong
+      color: #f0ad4e
+
+  &.danger
+    border-left-color: #d9534f
+
+    strong
+      color: #d9534f
+
+  h1, h2, h3, h4, h5, h6
+    margin: 0
+
+  strong
+    font-size: $font-size-base + 6px
-- 
GitLab