feat: Add 'info' note plugin & make icon of note plugin configurable

liuyib · Feb 25, 2020 · 2fab025 · 2fab025
1 parent 2aabf55
commit 2fab025
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 38 deletions.
diff --git a/_config.yml b/_config.yml
@@ -820,6 +820,11 @@ icon:
   prompt_error: fas fa-times-circle
   valine_visitor: fas fa-eye
   post_heading: fas fa-link
+  notetag_default: fas fa-arrow-circle-right
+  notetag_success: fas fa-check-circle
+  notetag_info: fas fa-info-circle
+  notetag_warning: fas fa-exclamation-circle
+  notetag_danger: fas fa-minus-circle
 
 # Set a CDN address for the vendor you want to customize.
 # ! -------------------------------------------------------------------

diff --git a/scripts/tags/note.js b/scripts/tags/note.js
@@ -3,9 +3,34 @@
 'use strict';
 
 function note(args, content) {
-  var noteClassName = args.join(' ');
+  var theme = hexo.theme.config;
+  var icon = theme.icon && theme.icon.notetag_default;
+  var iconType = 'default';
+  var isIcon = true;
+
+  if (args.includes('no-icon')) {
+    isIcon = false;
+  }
+  if (isIcon && theme.icon) {
+    var tagTypes = ['default', 'success', 'info', 'warning', 'danger'];
+    tagTypes.forEach(type => {
+      if (args.includes(type)) {
+        icon = theme.icon[`notetag_${type}`];
+        iconType = type;
+      }
+    });
+  }
+
+  var className = args.join(' ');
   return `
-    <div class="note-plugin ${noteClassName}">
+    <div class="note-plugin ${className}">
+      ${
+        isIcon
+          ? `<span class="note-plugin__icon note-plugin__icon--${iconType}">
+              <i class="${icon}"></i>
+            </span>`
+          : ''
+      }
       ${hexo.render
         .renderSync({ text: content, engine: 'markdown' })
         .split('\n')

diff --git a/source/css/_common/components/plugins/note.styl b/source/css/_common/components/plugins/note.styl
@@ -1,10 +1,16 @@
+$note-padding = 12px;
+$note-icon-size = $font-size-base + 4px;
+
 .note-plugin {
   position: relative;
-  margin: 0 0 1rem;
+  margin-bottom: 20px;
   border: 1px solid var(--color-gray-250);
-  border-left-width: .35rem;
-  padding: 0 1rem;
-  line-height: 1.7em;
+  border-left-width: 6px;
+  padding: 0 $note-padding + 5px;
+
+  &:not(.no-icon) {
+    padding-left: 40px;
+  }
 
   h1,
   h2,
@@ -16,75 +22,79 @@
   }
 
   p {
-    margin: 1em 0;
+    margin: $note-padding 0;
   }
 
   strong {
-    font-size: $font-size-base + 6px;
+    font-size: $note-icon-size;
+    line-height: 1.75;
   }
 
-  &:not(.no-icon) {
-    padding-left: 2rem;
-
-    &::before {
-      position: absolute;
-      top: 1.5rem;
-      left: .6rem;
-      fontawesome-base();
-      font-size: $font-size-base + 6px;
-      transform: translateY(-50%);
+  &__icon {
+    position: absolute;
+    top: 1em;
+    left: 12px;
+    font-size: $note-icon-size;
+    line-height: 1;
+
+    &--default {
+      color: $note-default-color;
     }
 
-    &.default::before {
-      content: $icon-note-default;
-      color: var(--color-gray-650);
+    &--success {
+      color: $note-success-color;
     }
 
-    &.success::before {
-      content: $icon-note-success;
-      color: #42b983;
+    &--info {
+      color: $note-info-color;
     }
 
-    &.warning::before {
-      content: $icon-note-warning;
-      color: #e7c000;
+    &--warning {
+      color: $note-warning-color;
     }
 
-    &.danger::before {
-      content: $icon-note-danger;
-      color: #dc3b3b;
+    &--danger {
+      color: $note-danger-color;
     }
   }
 
   &.default {
-    border-left-color: var(--color-gray-650);
+    border-left-color: $note-default-color;
 
     strong {
-      color: var(--color-gray-650);
+      color: $note-default-color;
     }
   }
 
   &.success {
-    border-left-color: #42b983;
+    border-left-color: $note-success-color;
+
+    strong {
+      color: $note-success-color;
+    }
+  }
+
+  &.info {
+    border-left-color: $note-info-color;
 
     strong {
-      color: #42b983;
+      color: $note-info-color;
     }
   }
 
   &.warning {
-    border-left-color: #e7c000;
+    border-left-color: $note-warning-color;
 
     strong {
-      color: #e7c000;
+      color: $note-warning-color;
     }
   }
 
   &.danger {
-    border-left-color: #dc3b3b;
+    border-left-color: $note-danger-color;
 
     strong {
-      color: #dc3b3b;
+      color: $note-danger-color;
     }
   }
 }
diff --git a/source/css/_variables/index.styl b/source/css/_variables/index.styl
@@ -182,3 +182,10 @@ $alert-success-color               = #52c41a
 $alert-info-color                  = #1890ff
 $alert-warning-color               = #faad14
 $alert-error-color                 = #f5222d
+
+// Note plugin
+$note-default-color                = var(--color-gray-600)
+$note-success-color                = #42b983
+$note-info-color                   = #4898dd
+$note-warning-color                = #e7c000
+$note-danger-color                 = #dc3b3b