feat: add custom note tag in post

XPoet · Sep 19, 2023 · ab6c379 · ab6c379
1 parent 0428295
commit ab6c379
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 14 deletions.
diff --git a/scripts/tags/index.js b/scripts/tags/index.js
@@ -0,0 +1,7 @@
+/* global hexo */
+
+'use strict'
+
+const noteTag = require('./note')(hexo)
+hexo.extend.tag.register('note', noteTag, true)
+hexo.extend.tag.register('keep-note', noteTag, true)
diff --git a/scripts/tags/note.js b/scripts/tags/note.js
@@ -0,0 +1,20 @@
+'use strict'
+
+module.exports = (ctx) =>
+  function (args, content) {
+    const keywords = ['default', 'primary', 'info', 'success', 'warning', 'danger']
+    let typeClassName = 'default'
+
+    if (args[0] && keywords.includes(args[0])) {
+      typeClassName = args[0]
+    }
+
+    let noteTitleContent = ''
+    if (args[1]) {
+      noteTitleContent = `<div class="keep-note-title">${args[1]}</div>`
+    }
+
+    content = ctx.render.renderSync({ text: content, engine: 'markdown' })
+
+    return `<div class="keep-note ${typeClassName}">${noteTitleContent}${content}</div>`
+  }
diff --git a/source/css/common/keep-style.styl b/source/css/common/keep-style.styl
@@ -123,12 +123,38 @@ root-color(mode) {
   // pjax progress bar color
   --pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color
 
+  // h tag bottom border color
+  --post-h-bottom-border-color mode == 'light' ? $post-h-bottom-border-color : $dark-post-h-bottom-border-color
+
   // article aging tips primary color
   --article-aging-tips-color mode == 'light' ? $article-aging-tips-color : $dark-article-aging-tips-color
   --article-aging-tips-background-color mode == 'light' ? $article-aging-tips-background-color : $dark-article-aging-tips-background-color
   --article-aging-tips-border-color mode == 'light' ? $article-aging-tips-border-color : $dark-article-aging-tips-border-color
 
-  --post-h-bottom-border-color mode == 'light' ? $post-h-bottom-border-color : $dark-post-h-bottom-border-color
+  // note default color
+  --note-default-color mode == 'light' ? $note-default-color : $dark-note-default-color
+  --note-default-background-color mode == 'light' ? $note-default-background-color : $dark-note-default-background-color
+  --note-default-border-color mode == 'light' ? $note-default-border-color : $dark-note-default-border-color
+
+  // note primary color
+  --note-primary-color mode == 'light' ? $note-primary-color : $dark-note-primary-color
+  --note-primary-background-color mode == 'light' ? $note-primary-background-color : $dark-note-primary-background-color
+  --note-primary-border-color mode == 'light' ? $note-primary-border-color : $dark-note-primary-border-color
+
+  // note warning color
+  --note-warning-color mode == 'light' ? $note-warning-color : $dark-note-warning-color
+  --note-warning-background-color mode == 'light' ? $note-warning-background-color : $dark-note-warning-background-color
+  --note-warning-border-color mode == 'light' ? $note-warning-border-color : $dark-note-warning-border-color
+
+  // note success color
+  --note-success-color mode == 'light' ? $note-success-color : $dark-note-success-color
+  --note-success-background-color mode == 'light' ? $note-success-background-color : $dark-note-success-background-color
+  --note-success-border-color mode == 'light' ? $note-success-border-color : $dark-note-success-border-color
+
+  // note danger color
+  --note-danger-color mode == 'light' ? $note-danger-color : $dark-note-danger-color
+  --note-danger-background-color mode == 'light' ? $note-danger-background-color : $dark-note-danger-background-color
+  --note-danger-border-color mode == 'light' ? $note-danger-border-color : $dark-note-danger-border-color
 }
 
 

diff --git a/source/css/common/stylus-variables.styl b/source/css/common/stylus-variables.styl
@@ -103,12 +103,28 @@ $header-transparent-background-2 = alpha($background-color-1, 0.4)
 
 $pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3)
 
-$article-aging-tips-color = #b78d0f
-$article-aging-tips-background-color = alpha($article-aging-tips-color, 0.1)
-$article-aging-tips-border-color = alpha($article-aging-tips-color, 0.6)
-
 $post-h-bottom-border-color = alpha($text-color-3, 0.15)
 
+$note-default-color = rgba(117, 117, 122, 0.8)
+$note-default-background-color = alpha($note-default-color, 0.1)
+$note-default-border-color = alpha($note-default-color, 0.6)
+
+$note-primary-color = #0458ab
+$note-primary-background-color = alpha($note-primary-color, 0.1)
+$note-primary-border-color = alpha($note-primary-color, 0.6)
+
+$note-success-color = #10b981
+$note-success-background-color = alpha($note-success-color, 0.1)
+$note-success-border-color = alpha($note-success-color, 0.6)
+
+$note-warning-color = #b78d0f
+$note-warning-background-color = alpha($note-warning-color, 0.1)
+$note-warning-border-color = alpha($note-warning-color, 0.6)
+
+$note-danger-color = #f43f5e
+$note-danger-background-color = alpha($note-danger-color, 0.1)
+$note-danger-border-color = alpha($note-danger-color, 0.6)
+
 
 // ==============================================================================================
 // theme dark mode color
@@ -150,8 +166,24 @@ $dark-header-transparent-background-2 = alpha($dark-background-color-1, 0.4)
 
 $dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee)
 
-$dark-article-aging-tips-color = #ecc34d
-$dark-article-aging-tips-background-color = alpha($dark-article-aging-tips-color, 0.1)
-$dark-article-aging-tips-border-color = alpha($dark-article-aging-tips-color, 0.6)
-
 $dark-post-h-bottom-border-color = alpha($dark-text-color-3, 0.15)
+
+$dark-note-default-color = #9999a2
+$dark-note-default-background-color = alpha($dark-note-default-color, 0.1)
+$dark-note-default-border-color = alpha($dark-note-default-color, 0.5)
+
+$dark-note-primary-color = #268bef
+$dark-note-primary-background-color = alpha($dark-note-primary-color, 0.1)
+$dark-note-primary-border-color = alpha($dark-note-primary-color, 0.6)
+
+$dark-note-success-color = #10b981
+$dark-note-success-background-color = alpha($dark-note-success-color, 0.1)
+$dark-note-success-border-color = alpha($dark-note-success-color, 0.6)
+
+$dark-note-warning-color = #ecc34d
+$dark-note-warning-background-color = alpha($dark-note-warning-color, 0.1)
+$dark-note-warning-border-color = alpha($dark-note-warning-color, 0.6)
+
+$dark-note-danger-color = #f43f5e
+$dark-note-danger-background-color = alpha($dark-note-danger-color, 0.1)
+$dark-note-danger-border-color = alpha($dark-note-danger-color, 0.6)
diff --git a/source/css/common/tags/keep-note.styl b/source/css/common/tags/keep-note.styl
@@ -0,0 +1,59 @@
+.keep-note {
+  position relative
+  box-sizing border-box
+  width 100%
+  margin-bottom 2rem
+  padding 0.8rem 1rem
+  font-size 0.9rem
+  border-style solid
+  border-width 0.1rem
+  border-radius 0.4rem
+
+  &.default {
+    color var(--note-default-color)
+    background-color var(--note-default-background-color)
+    border-color var(--note-default-border-color)
+  }
+
+
+  &.primary {
+    color var(--note-primary-color)
+    background-color var(--note-primary-background-color)
+    border-color var(--note-primary-border-color)
+  }
+
+
+  &.success {
+    color var(--note-success-color)
+    background-color var(--note-success-background-color)
+    border-color var(--note-success-border-color)
+  }
+
+
+  &.warning {
+    color var(--note-warning-color)
+    background-color var(--note-warning-background-color)
+    border-color var(--note-warning-border-color)
+  }
+
+
+  &.danger {
+    color var(--note-danger-color)
+    background-color var(--note-danger-background-color)
+    border-color var(--note-danger-border-color)
+  }
+
+
+  .keep-note-title {
+    box-sizing border-box
+    padding 0.6rem 0 0 0
+    color inherit
+    font-weight 600
+    font-size 1rem
+  }
+
+
+  p {
+    color inherit
+  }
+}
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
@@ -238,19 +238,19 @@ $spacer-padding = 2rem
           box-sizing border-box
           margin-bottom 1.8rem
           padding 1rem
-          color var(--article-aging-tips-color)
+          color var(--note-warning-color)
           line-height 1.6
-          background var(--article-aging-tips-background-color)
-          border 0.1rem solid var(--article-aging-tips-border-color)
+          background var(--note-warning-background-color)
+          border 0.1rem solid var(--note-warning-border-color)
           border-radius 0.4rem
 
           i {
             margin-right 0.4rem
-            color var(--article-aging-tips-color)
+            color var(--note-warning-color)
           }
 
           .days {
-            color var(--article-aging-tips-color)
+            color var(--note-warning-color)
           }
         }
 

diff --git a/source/css/style.styl b/source/css/style.styl
@@ -3,6 +3,7 @@
 @import "common/code-block/highlight.styl"
 @import "common/code-block/code-block.styl"
 @import "common/code-block/code-theme.styl"
+@import "common/tags/keep-note.styl"
 @import "layout/page.styl"
 @import "layout/_partial/local-search.styl"
 @import "layout/_partial/toc.styl"