feat(plugins): add button tag-plugin

scripts/tags/button.js

@@ -0,0 +1,37 @@
+'use strict'
+
+function button (args, content) {
+  args = args.join(' ').split(',')
+
+  const url = args[0]
+  let icon = (args[1] || '').trim()
+  let title = (args[2] || '').trim()
+  let cnt = (content || '').trim()
+  const isIconOnly = icon && !cnt
+
+  if (!url) {
+    hexo.log.warn('URL can NOT be empty.')
+  }
+  if (icon.length > 0) {
+    if (!icon.startsWith('fas')) {
+      icon = 'fas fa-' + icon
+    }
+
+    icon = `<span class="button-plugin__icon"><i class="${icon}"></i></span>`
+  }
+  if (title.length > 0) {
+    title = ` title="${title}"`
+  }
+  if (cnt.length > 0) {
+    cnt = `<span class="button-plugin__content">${content}</span>`
+  }
+
+  return `<a class="button-plugin${
+    isIconOnly ? ' button-plugin--icon-only' : ''
+  }" href="${url}"${title}>${icon}${cnt}</a>`
+}
+
+hexo.extend.tag.register('button', button, {
+  ends: true,
+  async: true
+})

source/css/_common/components/plugins/button.styl

@@ -0,0 +1,38 @@
+$border-width = 1px;
+
+.button-plugin {
+  display: inline-block;
+  border: $border-width solid $button-default-bg;
+  border-radius: .2rem;
+  padding: .2rem .75rem;
+  height: $button-height;
+  line-height: 1.375;
+  color: $button-default-color;
+  background-color: $button-default-bg;
+  transition: background-color .2s ease;
+
+  &:hover {
+    color: $button-default-color;
+    background-color: $button-default-hover-bg;
+  }
+
+  & > span {
+    display: inline-block;
+  }
+
+  &--icon-only {
+    padding: 0;
+    width: $button-height;
+    height: $button-height;
+    line-height: $button-height - $border-width * 2;
+    text-align: center;
+  }
+
+  &__icon {
+    line-height: 1;
+  }
+
+  &__icon + &__content {
+    margin-left: .3rem;
+  }
+}

source/css/_common/components/plugins/index.styl

@@ -1,3 +1,4 @@
+@import './button.styl';
 @import './table.styl';
 @import './note.styl';
 @import './friends.styl';

source/css/_variables/index.styl

@@ -180,6 +180,13 @@ $alert-info-color                  = #1890ff
 $alert-warning-color               = #faad14
 $alert-error-color                 = #f5222d
 
+// Button plugin
+$button-height                     = 32px
+$button-default-color              = #fff
+$button-default-hover-color        = #fff
+$button-default-bg                 = $home-readmore-bg-color
+$button-default-hover-bg           = $home-readmore-bg-hover-color
+
 // Note plugin
 $note-default-color                = var(--color-gray-600)
 $note-success-color                = #42b983