Volantis标签移植

• 使用方法及样式预览：Volantis: 标签插件
• 部分代码参考：hexo-butterfly-tag-plugins-plus

span

1. 新建themes\butterfly\scripts\tag\span.js

'use strict';

function postP(args) {
  if(/::/g.test(args)){
    args = args.join(' ').split('::');
  }
  else{
    args = args.join(' ').split(',');
  }
  const p0 = args[0].trim();
  const p1 = args[1].trim();
  return `<p class='p ${p0}'>${p1}</p>`;
}
function postSpan(args) {
  if(/::/g.test(args)){
    args = args.join(' ').split('::');
  }
  else{
    args = args.join(' ').split(',');
  }
  const p0 = args[0].trim();
  const p1 = args[1].trim();
  return `<span class='p ${p0}'>${p1}</span>`;
}

hexo.extend.tag.register('p', postP);
hexo.extend.tag.register('span', postSpan);

2. 新建themes\butterfly\source\css\_tags\span.styl

p.p.subtitle
  font-weight: bold
  color: mix(#44D7B6, #444, 75)
  font-size: 1.25rem !important
  padding-top: 1.5rem
  &:first-child
    padding-top: 1rem

span.p,p.p
  &.left
    display: block
    text-align: left
  &.center
    display: block
    text-align: center
  &.right
    display: block
    text-align: right

span.p,p.p
  &.small
    font-size: var(--global-font-size)
  &.large
    font-size: 2.5rem
    line-height: 1.4
  &.huge
    font-size: 4rem
    line-height: 1.4
  &.ultra
    font-size: 6rem
    line-height: 1.4
  &.small,&.large,&.huge,&.ultra
    margin: 0
    padding: 0
  &.bold
    font-weight: bold
  &.h1,&.h2
    padding-bottom: .2rem
    font-weight: 500
  &.h1
    font-size: 1.625rem
    padding-top: 1em * 2
  &.h2
    font-size: 1.625rem
    padding-top: 1em * 2
    border-bottom: 1px solid alpha(#444, .1)
  &.h3
    font-size: 1.375rem
    padding-top: 1em * 2
  &.h4
    font-size: 1.125rem
    padding-top: 1em * 2
  &.h5
    font-size: 1rem
    padding-top: 1em * 1.5

span.p,p.p
  &.gray
    color: #999
  &.blue
    color: #1BCDFC
  &.pink
    color: #ff69b4
  &.red
    color: #f00
  &.purple
    color: #6f42c1
  &.orange
    color: #ff8c00
  &.green
    color: #5cb85c

使用方法：https://volantis.js.org/v6/tag-plugins/#span

label

这是 butterfly 自带的外挂标签，由于和 span 效果类似，为方便使用，这里将语法改为 span 格式

修改themes\butterfly\scripts\tag\lable.js

/**
 * Xdog
 * label
 * {% lable color::text %}
 */

'use strict';

function addLable(args) {
  let className = 'default';
  let text = '';
  if(/::/g.test(args)){
    args = args.join(' ').split('::');
    className = args[0].trim();
    text = args[1].trim();
  }
  else{
    text = args[0].trim();
  }
  return `<mark class='hl-label ${className}'>${text}</mark>`;
}

hexo.extend.tag.register('lable', addLable);

checkbox

1. 新建themes\butterfly\scripts\tag\checkbox.js

'use strict';

function postCheckbox(args) {
  if(/::/g.test(args)){
    args = args.join(' ').split('::');
  }
  else{
    args = args.join(' ').split(',');
  }
  var cls = '';
  var text = '';
  var checked = false;
  if (args.length > 1) {
    cls = (args[0] || '').trim();
    if (cls.length > 0) {
      cls = ' ' + cls;
    }
    if (cls.indexOf('checked') > -1) {
      checked = true;
    }
    text = (args[1] || '').trim();
  } else if (args.length > 0) {
    text = (args[0] || '').trim();
  }
  if (text.length > 0) {
    return `<div class='checkbox${cls}'><input type="checkbox" ${checked ? 'checked="checked"' : ''}/>
            ${hexo.render.renderSync({text: text, engine: 'markdown'}).split('\n').join('')}
            </div>`;
  }
}
function postRadio(args) {
  if(/::/g.test(args)){
    args = args.join(' ').split('::');
  }
  else{
    args = args.join(' ').split(',');
  }
  var cls = '';
  var text = '';
  var checked = false;
  if (args.length > 1) {
    cls = (args[0] || '').trim();
    if (cls.length > 0) {
      cls = ' ' + cls;
    }
    if (cls.indexOf('checked') > -1) {
      checked = true;
    }
    text = (args[1] || '').trim();
  } else if (args.length > 0) {
    text = (args[0] || '').trim();
  }
  if (text.length > 0) {
    return `<div class='checkbox${cls}'><input type="radio" ${checked ? 'checked="checked"' : ''}/>
            ${hexo.render.renderSync({text: text, engine: 'markdown'}).split('\n').join('')}
            </div>`;
  }
}
// {% checkbox text %}
// {% checkbox checked, text %}
// {% checkbox color checked, text %}
hexo.extend.tag.register('checkbox', postCheckbox);
hexo.extend.tag.register('radio', postRadio);

2. 新建themes\butterfly\source\css\_tags\checkbox.styl

.checkbox
  display flex
  align-items center
  margin-top 1em
  margin-bottom 1em
  &+.checkbox
    margin-top -1em
  input
    -webkit-appearance none
    -moz-appearance none
    -ms-appearance none
    -o-appearance none
    appearance none
    position relative
    height 16px
    width 16px
    transition all 0.15s ease-out 0s
    cursor pointer
    display inline-block
    outline none
    border-radius 2px
    flex-shrink 0
    margin-right 8px
    border 2px solid #2196f3
    pointer-events: none
  input[type="checkbox"]:before
    left 1px
    top 5px
    width 0
    height 2px
    transition all 0.2s ease-in
    transform rotate(45deg)
    -webkit-transform rotate(45deg)
    -moz-transform rotate(45deg)
    -ms-transform rotate(45deg)
    -o-transform rotate(45deg)
  input[type="checkbox"]:after
    right 7px
    bottom 3px
    width 2px
    height 0
    transition all 0.2s ease-out
    transform rotate(40deg)
    -webkit-transform rotate(40deg)
    -moz-transform rotate(40deg)
    -ms-transform rotate(40deg)
    -o-transform rotate(40deg)
    transition-delay 0.25s
  input[type="checkbox"]:checked
    background #2196f3
    &:before
      left 0
      top 7px
      width 6px
      height 2px
    &:after
      right 3px
      bottom 1px
      width 2px
      height 10px
  &.minus
    input[type="checkbox"]:before
      transform rotate(0)
      left 1px
      top 5px
      width 0
      height 2px
    input[type="checkbox"]:after
      transform rotate(0)
      left 1px
      top 5px
      width 0
      height 2px
    input[type="checkbox"]:checked
      &:before
        left 1px
        top 5px
        width 10px
        height 2px
      &:after
        left 1px
        top 5px
        width 10px
        height 2px
  &.plus
    input[type="checkbox"]:before
      transform rotate(0)
      left 1px
      top 5px
      width 0
      height 2px
    input[type="checkbox"]:after
      transform rotate(0)
      left 5px
      top 1px
      width 2px
      height 0
    input[type="checkbox"]:checked
      &:before
        left 1px
        top 5px
        width 10px
        height 2px
      &:after
        left 5px
        top 1px
        width 2px
        height 10px
  &.times
    input[type="checkbox"]:before
      transform rotate(45deg)
      left 3px
      top 1px
      width 0
      height 2px
    input[type="checkbox"]:after
      transform rotate(135deg)
      right 3px
      top 1px
      width 0
      height 2px
    input[type="checkbox"]:checked
      &:before
        left 1px
        top 5px
        width 10px
        height 2px
      &:after
        right 1px
        top 5px
        width 10px
        height 2px
  input[type="radio"]
    border-radius 50%
  input[type="radio"]:before
    content ""
    display block
    width 8px
    height 8px
    border-radius 50%
    margin 2px
    transform scale(0)
    transition all 0.25s ease-out
  input[type="radio"]:checked
    &:before
      transform scale(1)
      background var(--text-bg-hover)
  &.red
    input
      border-color #fe5f58
    input[type="checkbox"]:checked
      background #fe5f58
    input[type="radio"]:checked
      &:before
        background #fe5f58
  &.green
    input
      border-color #3dc550
    input[type="checkbox"]:checked
      background #3dc550
    input[type="radio"]:checked
      &:before
        background #3dc550
  &.yellow
    input
      border-color #ffbd2b
    input[type="checkbox"]:checked
      background #ffbd2b
    input[type="radio"]:checked
      &:before
        background #ffbd2b
  &.cyan
    input
      border-color #1bcdfc
    input[type="checkbox"]:checked
      background #1bcdfc
    input[type="radio"]:checked
      &:before
        background #1bcdfc
  &.blue
    input
      border-color #2196f3
    input[type="checkbox"]:checked
      background #2196f3
    input[type="radio"]:checked
      &:before
        background #2196f3
  p
    display inline-block
    margin-top 2px !important
    margin-bottom 0 !important

.checkbox input[type="checkbox"]:before,
.checkbox input[type="checkbox"]:after
  position absolute
  content ""
  background #fff

tab

这个不需要移植，只需调整一下 butterfly 自带的 tabs 外挂标签的样式即可

#article-container .tabs > .nav-tabs > .tab {
    flex-grow: 0;
}