[feat] tag-plugin: button

scripts/tags/index.js

@@ -33,6 +33,7 @@ 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))
+hexo.extend.tag.register('button', require('./lib/button')(hexo))
 hexo.extend.tag.register('mark', require('./lib/mark')(hexo))
 hexo.extend.tag.register('navbar', require('./lib/navbar')(hexo))
 hexo.extend.tag.register('note', require('./lib/note')(hexo))

scripts/tags/lib/button.js

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

source/css/_custom.styl

@@ -95,9 +95,8 @@ $border-button = 4px
 
 // 文章布局风格
 .l_body.story
-  --fsp: 'calc(%s + 2px)' % $fs-body
-  --gap-p: 1.5rem
-  .tag-plugin,p>img
+  --gap-p: 2rem
+  div.tag-plugin,p>img
     margin-top: 2.4rem
     margin-bottom: 2.4rem
 

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

@@ -0,0 +1,36 @@
+a.tag-plugin.button
+  background: var(--theme)
+  color: var(--alpha100)
+  display: inline-flex
+  align-items: center
+  justify-content: center
+  padding: 0 4px
+  trans1 background
+  margin-top: 8px
+  margin-bottom: 8px
+  svg,img
+    height: 24px
+    width: auto
+    margin: 0 -0.5em 0 1em
+    flex-shrink: 0
+  span 
+    text-indent: 0
+    line-height: 24px
+    margin: 8px 1em
+  
+
+a.tag-plugin.button[size='xs']
+  margin: 0
+  border-radius: 2px
+  svg,img
+    margin: 0 2px 0 0
+    height: 1em
+  span
+    margin: 0
+
+a.tag-plugin.button:hover
+  --theme: $color-hover
+
+.tag-plugin.grid a.tag-plugin.button
+  width: 100%
+  box-sizing: border-box