[feat] tag-plugin: icon

_config.yml

@@ -304,6 +304,9 @@ tag_plugins:
     aru: https://gcore.jsdelivr.net/gh/cdn-x/emoji/aru-l/${name}.gif
     tieba: https://gcore.jsdelivr.net/gh/cdn-x/emoji/tieba/${name}.png
     blobcat: https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs/${name}.png
+  icon:
+    # 留空时，图标和文字颜色相同
+    default_color: accent # theme, accent, red, orange, yellow, green, cyan, blue, purple
   # {% image %}
   image:
     fancybox: false # true, false

scripts/tags/index.js

@@ -29,6 +29,7 @@ hexo.extend.tag.register('checkbox', require('./lib/checkbox')(hexo, 'checkbox')
 hexo.extend.tag.register('radio', require('./lib/checkbox')(hexo, 'radio'))
 hexo.extend.tag.register('copy', require('./lib/copy')(hexo))
 hexo.extend.tag.register('emoji', require('./lib/emoji')(hexo))
+hexo.extend.tag.register('icon', require('./lib/icon')(hexo))
 hexo.extend.tag.register('frame', require('./lib/frame')(hexo))
 hexo.extend.tag.register('image', require('./lib/image')(hexo))
 hexo.extend.tag.register('link', require('./lib/link')(hexo))

scripts/tags/lib/icon.js

@@ -0,0 +1,27 @@
+/**
+ * icon.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% icon key [color:color] [style:css] %}
+ *
+ */
+
+'use strict'
+
+module.exports = ctx => function(args) {
+  args = ctx.args.map(args, ['color', 'style'], ['key'])
+  if (args.color == null) {
+    args.color = ctx.theme.config.tag_plugins.icon.default_color
+  }
+  var el = ''
+  el += '<span class="tag-plugin colorful icon"'
+  el += ' ' + ctx.args.joinTags(args, ['color']).join(' ')
+  el += '>'
+  var more = ''
+  if (args.style) {
+    more += `style="${args.style}"`
+  }
+  el += ctx.utils.icon(args.key, more)
+  el += '</span>'
+  return el
+}

source/css/_layout/tag-plugins/common.styl

@@ -40,6 +40,10 @@ set_dynamic_color($theme)
   set_dynamic_color($c-blue)
 .colorful[color='purple']
   set_dynamic_color($c-purple)
+.colorful[color='theme']
+  set_dynamic_color($color-theme)
+.colorful[color='accent']
+  set_dynamic_color($color-accent)
 
 .colorful[color='light']
   --theme-block: white

source/css/_layout/tag-plugins/icon.styl

@@ -0,0 +1,12 @@
+span.tag-plugin.icon
+  display: inline-block
+  margin: -4px 1px 0
+  vertical-align: middle
+  svg,img
+    display: block
+    height: 1.5em
+    width: auto
+  svg
+    color: var(--theme)
+  img
+    object-fit: contain