From def346632a812b3096ccd11cb5533dd585ba2343 Mon Sep 17 00:00:00 2001
From: akilarlxh <akilarlxh@gmail.com>
Date: Wed, 24 Feb 2021 14:21:21 +0800
Subject: [PATCH] =?UTF-8?q?3.3.0=E5=89=8D=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 butterfly/scripts/tag/btns.js                 |  35 ++
 butterfly/scripts/tag/button.js               |  28 ++
 butterfly/scripts/tag/checkbox.js             |  53 +++
 butterfly/scripts/tag/folding.js              |  29 ++
 butterfly/scripts/tag/gallery.js              |  34 ++
 butterfly/scripts/tag/ghcard.js               |  44 +++
 butterfly/scripts/tag/hide.js                 |  71 ++++
 butterfly/scripts/tag/image.js                |  91 +++++
 butterfly/scripts/tag/inline-labels.js        |  21 ++
 butterfly/scripts/tag/issues.js               |  41 +++
 butterfly/scripts/tag/link.js                 |  40 +++
 butterfly/scripts/tag/media.js                |  29 ++
 butterfly/scripts/tag/mermaid.js              |  15 +
 butterfly/scripts/tag/note.js                 |  27 ++
 butterfly/scripts/tag/site.js                 |  59 ++++
 butterfly/scripts/tag/span.js                 |  17 +
 butterfly/scripts/tag/tabs.js                 |  62 ++++
 butterfly/scripts/tag/timeline.js             |  30 ++
 butterfly/scripts/tag/tip.js                  |  15 +
 butterfly/source/css/_tags/btns.styl          | 213 ++++++++++++
 butterfly/source/css/_tags/button.styl        |  58 ++++
 butterfly/source/css/_tags/checkbox.styl      | 197 +++++++++++
 butterfly/source/css/_tags/folding.styl       | 119 +++++++
 butterfly/source/css/_tags/gallery.styl       | 104 ++++++
 butterfly/source/css/_tags/ghcard.styl        |  10 +
 butterfly/source/css/_tags/hexo.styl          |  30 ++
 butterfly/source/css/_tags/hide.styl          |  53 +++
 butterfly/source/css/_tags/image.styl         |   7 +
 butterfly/source/css/_tags/inline-labels.styl |  44 +++
 butterfly/source/css/_tags/link.styl          |  70 ++++
 butterfly/source/css/_tags/media.styl         |  57 ++++
 butterfly/source/css/_tags/note.styl          | 121 +++++++
 butterfly/source/css/_tags/site-card.styl     |  77 +++++
 butterfly/source/css/_tags/span.styl          |  80 +++++
 butterfly/source/css/_tags/tabs.styl          |  74 +++++
 butterfly/source/css/_tags/timeline.styl      |  98 ++++++
 butterfly/source/css/_tags/tip.styl           | 314 ++++++++++++++++++
 .../font-awesome-animation.min.css            |   1 +
 butterfly/source/css/index.styl               |  19 ++
 butterfly/source/js/issues.js                 | 186 +++++++++++
 40 files changed, 2673 insertions(+)
 create mode 100644 butterfly/scripts/tag/btns.js
 create mode 100644 butterfly/scripts/tag/button.js
 create mode 100644 butterfly/scripts/tag/checkbox.js
 create mode 100644 butterfly/scripts/tag/folding.js
 create mode 100644 butterfly/scripts/tag/gallery.js
 create mode 100644 butterfly/scripts/tag/ghcard.js
 create mode 100644 butterfly/scripts/tag/hide.js
 create mode 100644 butterfly/scripts/tag/image.js
 create mode 100644 butterfly/scripts/tag/inline-labels.js
 create mode 100644 butterfly/scripts/tag/issues.js
 create mode 100644 butterfly/scripts/tag/link.js
 create mode 100644 butterfly/scripts/tag/media.js
 create mode 100644 butterfly/scripts/tag/mermaid.js
 create mode 100644 butterfly/scripts/tag/note.js
 create mode 100644 butterfly/scripts/tag/site.js
 create mode 100644 butterfly/scripts/tag/span.js
 create mode 100644 butterfly/scripts/tag/tabs.js
 create mode 100644 butterfly/scripts/tag/timeline.js
 create mode 100644 butterfly/scripts/tag/tip.js
 create mode 100644 butterfly/source/css/_tags/btns.styl
 create mode 100644 butterfly/source/css/_tags/button.styl
 create mode 100644 butterfly/source/css/_tags/checkbox.styl
 create mode 100644 butterfly/source/css/_tags/folding.styl
 create mode 100644 butterfly/source/css/_tags/gallery.styl
 create mode 100644 butterfly/source/css/_tags/ghcard.styl
 create mode 100644 butterfly/source/css/_tags/hexo.styl
 create mode 100644 butterfly/source/css/_tags/hide.styl
 create mode 100644 butterfly/source/css/_tags/image.styl
 create mode 100644 butterfly/source/css/_tags/inline-labels.styl
 create mode 100644 butterfly/source/css/_tags/link.styl
 create mode 100644 butterfly/source/css/_tags/media.styl
 create mode 100644 butterfly/source/css/_tags/note.styl
 create mode 100644 butterfly/source/css/_tags/site-card.styl
 create mode 100644 butterfly/source/css/_tags/span.styl
 create mode 100644 butterfly/source/css/_tags/tabs.styl
 create mode 100644 butterfly/source/css/_tags/timeline.styl
 create mode 100644 butterfly/source/css/_tags/tip.styl
 create mode 100644 butterfly/source/css/_third-party/font-awesome-animation.min.css
 create mode 100644 butterfly/source/css/index.styl
 create mode 100644 butterfly/source/js/issues.js

diff --git a/butterfly/scripts/tag/btns.js b/butterfly/scripts/tag/btns.js
new file mode 100644
index 0000000..b4edc41
--- /dev/null
+++ b/butterfly/scripts/tag/btns.js
@@ -0,0 +1,35 @@
+'use strict';
+
+function postBtns(args, content) {
+  return `<div class="btns ${args.join(' ')}">
+            ${content}
+          </div>`;
+}
+
+function postCell(args, content) {
+  args = args.join(' ').split(',')
+  let text = args[0] || ''
+  let url = args[1] || ''
+  text = text.trim()
+  url = url.trim()
+  if (url.length > 0) {
+    url = "href='" + url + "'"
+  }
+  let icon = ''
+  let img = 'https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@3/img/placeholder/d570170f4f12e1ee829ca0e85a7dffeb77343a.svg'
+  if (args.length > 2) {
+    if (args[2].indexOf(' fa-') > -1) {
+      icon = args[2].trim()
+    } else {
+      img = args[2].trim()
+    }
+  }
+  if (icon.length > 0) {
+    return `<a class="button" ${url} title='${text}'><i class='${icon}'></i>${text}</a>`
+  } else {
+    return `<a class="button" ${url} title='${text}'><img src='${img}'>${text}</a>`
+  }
+}
+
+hexo.extend.tag.register('btns', postBtns, {ends: true});
+hexo.extend.tag.register('cell', postCell);
diff --git a/butterfly/scripts/tag/button.js b/butterfly/scripts/tag/button.js
new file mode 100644
index 0000000..bb5a18a
--- /dev/null
+++ b/butterfly/scripts/tag/button.js
@@ -0,0 +1,28 @@
+/**
+ * Button
+ * {% btn url text icon option %}
+ * option: color outline center block larger
+ * color : default/blue/pink/red/purple/orange/green
+ */
+
+'use strict'
+
+const urlFor = require('hexo-util').url_for.bind(hexo)
+
+function btn (args) {
+  args = args.join(' ').split(',')
+  let url = args[0] || ''
+  let text = args[1] || ''
+  let icon = args[2] || ''
+  let option = args[3] || ''
+
+  url = url.trim()
+  text = text.trim()
+  icon = icon.trim()
+  option = option.trim()
+
+  return `<a class="btn-beautify button--animated ${option}" href="${urlFor(url)}" 
+  title="${text}">${icon.length > 0 ? `<i class="${icon} fa-fw"></i>` : ''}<span>${text}</span></a>`
+}
+
+hexo.extend.tag.register('btn', btn, { ends: false })
diff --git a/butterfly/scripts/tag/checkbox.js b/butterfly/scripts/tag/checkbox.js
new file mode 100644
index 0000000..0824688
--- /dev/null
+++ b/butterfly/scripts/tag/checkbox.js
@@ -0,0 +1,53 @@
+'use strict';
+
+function postCheckbox(args) {
+  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) {
+  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);
diff --git a/butterfly/scripts/tag/folding.js b/butterfly/scripts/tag/folding.js
new file mode 100644
index 0000000..d7a0c37
--- /dev/null
+++ b/butterfly/scripts/tag/folding.js
@@ -0,0 +1,29 @@
+'use strict';
+
+function postFolding(args, content) {
+  args = args.join(' ').split(',');
+  let style = ''
+  let title = ''
+  if (args.length > 1) {
+    style = args[0].trim()
+    title = args[1].trim()
+  } else if (args.length > 0) {
+    title = args[0].trim()
+  }
+  if (style != undefined) {
+    return `<details ${style}><summary> ${title} </summary>
+              <div class='content'>
+              ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
+              </div>
+            </details>`;
+  } else {
+    return `<details><summary> ${title} </summary>
+              <div class='content'>
+              ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
+              </div>
+            </details>`;
+  }
+
+}
+
+hexo.extend.tag.register('folding', postFolding, {ends: true});
diff --git a/butterfly/scripts/tag/gallery.js b/butterfly/scripts/tag/gallery.js
new file mode 100644
index 0000000..a285008
--- /dev/null
+++ b/butterfly/scripts/tag/gallery.js
@@ -0,0 +1,34 @@
+/**
+ * Butterfly
+ * galleryGroup and allery
+ */
+
+'use strict'
+
+const urlFor = require('hexo-util').url_for.bind(hexo)
+
+function gallery (args, content) {
+  return `<div class="justified-gallery">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
+          </div>`
+}
+
+function galleryGroup (args) {
+  const name = args[0]
+  const desrc = args[1]
+  const url = urlFor(args[2])
+  const img = urlFor(args[3])
+
+  return `
+  <figure class="gallery-group">
+  <img class="gallery-group-img" src='${img}'>
+  <figcaption>
+  <div class="gallery-group-name">${name}</div>
+  <p>${desrc}</p>
+  <a href='${url}'></a>
+  </figcaption>
+  </figure>
+  `
+}
+
+hexo.extend.tag.register('gallery', gallery, { ends: true })
+hexo.extend.tag.register('galleryGroup', galleryGroup)
diff --git a/butterfly/scripts/tag/ghcard.js b/butterfly/scripts/tag/ghcard.js
new file mode 100644
index 0000000..02a4aed
--- /dev/null
+++ b/butterfly/scripts/tag/ghcard.js
@@ -0,0 +1,44 @@
+/**
+ * https://github.com/anuraghazra/github-readme-stats
+ */
+
+'use strict';
+
+// {% ghcard volantis-x %}
+// {% ghcard volantis-x/hexo-theme-volantis %}
+hexo.extend.tag.register('ghcard', function(args) {
+  args = args.join(' ').split(', ');
+  let path = args[0].trim();
+  let card = '';
+  card += '<a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/' + path + '">';
+  let url = '';
+  if (path.includes('/')) {
+    // is repo
+    let ps = path.split('/');
+    url += 'https://github-readme-stats.vercel.app/api/pin/?username=' + ps[0] + "&repo=" + ps[1];
+  } else {
+    // is user
+    url += 'https://github-readme-stats.vercel.app/api/?username=' + path;
+  }
+  if (args.length > 1) {
+    for (let i = 1; i < args.length; i++) {
+      let tmp = args[i].trim();
+      url += "&" + tmp;
+    }
+  }
+  if (!url.includes('&show_owner=')) {
+    url += '&show_owner=true';
+  }
+  card += '<img src="' + url + '"/>';
+  card += '</a>';
+  return card;
+});
+
+hexo.extend.tag.register('ghcardgroup', function(args, content) {
+  let ret = '';
+  // wrap
+  ret += '<div class="ghcard-group">';
+  ret += content;
+  ret += '</div>';
+  return ret;
+}, {ends: true});
diff --git a/butterfly/scripts/tag/hide.js b/butterfly/scripts/tag/hide.js
new file mode 100644
index 0000000..eb7059f
--- /dev/null
+++ b/butterfly/scripts/tag/hide.js
@@ -0,0 +1,71 @@
+/**
+ * Butterfly
+ * @example
+ * hideInline
+ * {% hideInline content,display,bg,color %}
+ * content不能包含當引號，可用 &apos;
+ * hideBlock
+ * {% hideBlock display,bg,color %}
+ * content
+ * {% endhideBlock %}
+ * hideToggle
+ * {% hideToggle display,bg,color %}
+ * content
+ * {% endhideToggle %}
+ */
+
+'use strict'
+
+function hideInline (args) {
+  args = args.join(' ').split(',')
+  const content = args[0]
+  const display = args[1] || 'Click'
+  const bg = args[2] || false
+  const color = args[3] || false
+  let group = 'style="'
+
+  if (bg) group += `background-color: ${bg};`
+  if (color) group += `color: ${color}`
+  group += '"'
+
+  return `<span class="hide-inline"><button type="button" class="hide-button button--animated" ${group}>${display}
+  </button><span class="hide-content">${content}</span></span>`
+}
+
+function hideBlock (args, content) {
+  args = args.join(' ').split(',')
+  const display = args[0] || 'Click'
+  const bg = args[1] || false
+  const color = args[2] || false
+  let group = 'style="'
+
+  if (bg) group += `background-color: ${bg};`
+  if (color) group += `color: ${color}`
+  group += '"'
+
+  return `<div class="hide-block"><button type="button" class="hide-button button--animated" ${group}>${display}
+    </button><span class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</span></div>`
+}
+
+function hideToggle (args, content) {
+  args = args.join(' ').split(',')
+  const display = args[0]
+  const bg = args[1] || false
+  const color = args[2] || false
+  let group = 'style="'
+  let border = ''
+
+  if (bg) {
+    border = `style="border: 1px solid ${bg}"`
+    group += `background-color: ${bg};`
+  }
+  if (color) group += `color: ${color}`
+  group += '"'
+
+  return `<div class="hide-toggle" ${border}><div class="hide-button toggle-title" ${group}><i class="fas fa-caret-right fa-fw"></i><span>${display}</span></div>
+    <div class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div></div>`
+}
+
+hexo.extend.tag.register('hideInline', hideInline)
+hexo.extend.tag.register('hideBlock', hideBlock, { ends: true })
+hexo.extend.tag.register('hideToggle', hideToggle, { ends: true })
diff --git a/butterfly/scripts/tag/image.js b/butterfly/scripts/tag/image.js
new file mode 100644
index 0000000..46cb4cd
--- /dev/null
+++ b/butterfly/scripts/tag/image.js
@@ -0,0 +1,91 @@
+/**
+ * image.js v4 | https://volantis.js.org
+ */
+
+'use strict';
+
+// {% image url %}
+// {% image url, alt=haha %}
+// {% image url, width=50% %}
+// {% image url, height=32px %}
+// {% image url, bg=#eee %}
+// {% image url, alt=haha, width=400px %}
+// {% image url, alt=haha, width=400px, bg=#eee %}
+hexo.extend.tag.register('image', function(args) {
+  args = args.join(' ').split(', ');
+  let url = args[0].trim();
+  let alt = '';
+  let bg = '';
+  let style = '';
+  if (args.length > 1) {
+    for (let i = 1; i < args.length; i++) {
+      let tmp = args[i].trim();
+      if (tmp.includes('alt=')) {
+        alt = tmp.substring(4, tmp.length);
+      } else if (tmp.includes('width=')) {
+        style += 'width:' + tmp.substring(6, tmp.length) + ';';
+      } else if (tmp.includes('height=')) {
+        style += 'height:' + tmp.substring(7, tmp.length) + ';';
+      } else if (tmp.includes('bg=')) {
+        bg = tmp.substring(3, tmp.length);
+      }
+    }
+  }
+  function img(url, alt, style) {
+    let img = '';
+    img += '<img class="img" src="' + url + '"';
+    if (alt.length > 0) {
+      img += ' alt="' + alt + '"';
+    }
+    if (style.length > 0) {
+      img += ' style="' + style + '"';
+    }
+    img += '/>';
+    return img;
+  }
+
+  let ret = '';
+  // wrap
+  ret += '<div class="img-wrap">';
+  // bg
+  ret += '<div class="img-bg"';
+  if (bg.length > 0) {
+    ret += ' style="background:' + bg + '"';
+  }
+  ret += '>';
+  ret += img(url, alt, style);
+  ret += '</div>';
+
+  if (alt.length > 0) {
+    ret += '<span class="image-caption">' + alt + '</span>';
+  }
+
+  ret += '</div>';
+  return ret;
+});
+
+
+// {% inlineimage url %}
+// {% inlineimage url, height=22px %}
+hexo.extend.tag.register('inlineimage', function(args) {
+  args = args.join(' ').split(', ');
+  let url = args[0].trim();
+  let ret = '';
+  ret += '<img no-lazy class="inline" src="' + url + '"';
+  let style = '';
+  if (args.length > 1) {
+    for (let i = 1; i < args.length; i++) {
+      let tmp = args[i].trim();
+      if (tmp.includes('height=')) {
+        style += 'height:' + tmp.substring(7, tmp.length) + ';';
+      }
+    }
+  }
+  if (style.length > 0) {
+    ret += ' style="' + style + '"';
+  } else {
+    ret += ' style="height:1.5em"';
+  }
+  ret += '/>';
+  return ret;
+});
diff --git a/butterfly/scripts/tag/inline-labels.js b/butterfly/scripts/tag/inline-labels.js
new file mode 100644
index 0000000..d3fbf9d
--- /dev/null
+++ b/butterfly/scripts/tag/inline-labels.js
@@ -0,0 +1,21 @@
+'use strict';
+
+
+hexo.extend.tag.register('u', function(args) {
+  return `<u>${args.join(' ')}</u>`;
+});
+hexo.extend.tag.register('emp', function(args) {
+  return `<emp>${args.join(' ')}</emp>`;
+});
+hexo.extend.tag.register('wavy', function(args) {
+  return `<wavy>${args.join(' ')}</wavy>`;
+});
+hexo.extend.tag.register('del', function(args) {
+  return `<del>${args.join(' ')}</del>`;
+});
+hexo.extend.tag.register('kbd', function(args) {
+  return `<kbd>${args.join(' ')}</kbd>`;
+});
+hexo.extend.tag.register('psw', function(args) {
+  return `<psw>${args.join(' ')}</psw>`;
+});
diff --git a/butterfly/scripts/tag/issues.js b/butterfly/scripts/tag/issues.js
new file mode 100644
index 0000000..e37335d
--- /dev/null
+++ b/butterfly/scripts/tag/issues.js
@@ -0,0 +1,41 @@
+/**
+ * issues.js | https://github.com/volantis-x/hexo-theme-volantis
+ */
+
+'use strict';
+
+// 从 issues 加载动态数据
+// {% issues sites/timeline/friends | api=xxx | group=key:a,b,c %}
+// 例如：
+// {% issues sites | api=https://api.github.com/repos/volantis-x/examples/issues?sort=updated&state=open&page=1&per_page=100 | group=version:latest,v6,v5,v4,v3,v2,v1,v0 %}
+hexo.extend.tag.register('issues', function(args) {
+  args = args.join(' ').split(' | ');
+  // 所有支持的参数
+  let type = args[0].trim();
+  let api = '';
+  let group = '';
+  // 解析
+  if (args.length > 1) {
+    for (let i = 1; i < args.length; i++) {
+      let tmp = args[i].trim();
+      if (tmp.includes('type=')) {
+        type = tmp.substring(5, tmp.length);
+      } else if (tmp.includes('api=')) {
+        api = tmp.substring(4, tmp.length);
+      } else if (tmp.includes('group=')) {
+        group = tmp.substring(6, tmp.length);
+      }
+    }
+  }
+  if (type.length == 0 || api.length == 0) {
+    return;
+  }
+  // 布局
+  let ret = '<div class="issues-api ' + type + '"';
+  ret += 'api="' + api + '"';
+  if (group.length > 0) {
+    ret += 'group="' + group + '"';
+  }
+  ret += '></div>';
+  return ret;
+});
diff --git a/butterfly/scripts/tag/link.js b/butterfly/scripts/tag/link.js
new file mode 100644
index 0000000..3a38f51
--- /dev/null
+++ b/butterfly/scripts/tag/link.js
@@ -0,0 +1,40 @@
+'use strict';
+
+// {% link title, url %}
+// {% link title, url, img %}
+hexo.extend.tag.register('link', function(args) {
+  args = args.join(' ').split(',')
+  let text = ''
+  let url = ''
+  let img = ''
+  if (args.length < 2) {
+    return
+  } else if (args.length == 2) {
+    text = args[0].trim()
+    url = args[1].trim()
+  } else if (args.length == 3) {
+    text = args[0].trim()
+    url = args[1].trim()
+    img = args[2].trim()
+  }
+  let result = '';
+  // 发现如果不套一层 div 在其它可渲染 md 的容器中容易被分解
+  result += '<div class="tag link"><a class="link-card" title="' + text + '" href="' + url + '">';
+  // left
+  result += '<div class="left">';
+  result += '<img src="' + (img || hexo.theme.config.tag_plugins.link.placeholder) + '"/>';
+  result += '</div>';
+  // right
+  result += '<div class="right"><p class="text">' + text + '</p><p class="url">' + url + '</p></div>';
+  result += '</a></div>';
+
+  return result;
+});
+
+hexo.extend.tag.register('linkgroup', function(args, content) {
+  let ret = '';
+  ret += '<div class="link-group">';
+  ret += content;
+  ret += '</div>';
+  return ret;
+}, {ends: true});
diff --git a/butterfly/scripts/tag/media.js b/butterfly/scripts/tag/media.js
new file mode 100644
index 0000000..784b3ba
--- /dev/null
+++ b/butterfly/scripts/tag/media.js
@@ -0,0 +1,29 @@
+'use strict';
+
+function postAudio(args) {
+  let src = args[0].trim()
+  return `<div class="audio"><audio controls preload><source src='${src}' type='audio/mp3'>Your browser does not support the audio tag.</audio></div>`;
+}
+
+function postVideo(args) {
+  let src = args[0].trim()
+  return `<div class="video"><video controls preload><source src='${src}' type='video/mp4'>Your browser does not support the video tag.</video></div>`;
+}
+
+function postVideos(args, content) {
+  args = args.join(' ').split(',')
+  var cls = args[0]
+  if (cls.length > 0) {
+    cls = ' ' + cls
+  }
+  var col = Number(args[1]) || 0;
+  if (col > 0) {
+    return `<div class="videos${cls}" col='${col}'>${content}</div>`
+  } else {
+    return `<div class="videos${cls}">${content}</div>`
+  }
+}
+
+hexo.extend.tag.register('audio', postAudio);
+hexo.extend.tag.register('video', postVideo);
+hexo.extend.tag.register('videos', postVideos, {ends: true});
diff --git a/butterfly/scripts/tag/mermaid.js b/butterfly/scripts/tag/mermaid.js
new file mode 100644
index 0000000..d8f8b15
--- /dev/null
+++ b/butterfly/scripts/tag/mermaid.js
@@ -0,0 +1,15 @@
+/**
+ * Butterfly
+ * mermaid
+ * https://github.com/mermaid-js/mermaid
+ */
+
+'use strict'
+
+const { escapeHTML } = require('hexo-util')
+
+function mermaid (args, content) {
+  return `<div class="mermaid">${escapeHTML(content)}</div>`
+}
+
+hexo.extend.tag.register('mermaid', mermaid, { ends: true })
diff --git a/butterfly/scripts/tag/note.js b/butterfly/scripts/tag/note.js
new file mode 100644
index 0000000..ec4e8b5
--- /dev/null
+++ b/butterfly/scripts/tag/note.js
@@ -0,0 +1,27 @@
+/**
+ * note.js
+ * transplant from hexo-theme-next
+ * Modify by Jerry
+ */
+
+'use strict'
+
+function postNote (args, content) {
+  const styleConfig = hexo.theme.config.note.style
+  const lastArgs = args[args.length - 1]
+  if (!(lastArgs === 'flat' || lastArgs === 'modern' || lastArgs === 'simple' || lastArgs === 'disabled')) {
+    args.push(styleConfig)
+  }
+
+  let icon = ''
+  const iconArray = args[args.length - 2]
+  if (iconArray && iconArray.startsWith('fa')) {
+    icon = `<i class="note-icon ${iconArray}"></i>`
+    args[args.length - 2] = 'icon'
+  }
+
+  return `<div class="note ${args.join(' ')}">${icon + hexo.render.renderSync({ text: content, engine: 'markdown' })}</div>`
+}
+
+hexo.extend.tag.register('note', postNote, { ends: true })
+hexo.extend.tag.register('subnote', postNote, { ends: true })
diff --git a/butterfly/scripts/tag/site.js b/butterfly/scripts/tag/site.js
new file mode 100644
index 0000000..d4acc0a
--- /dev/null
+++ b/butterfly/scripts/tag/site.js
@@ -0,0 +1,59 @@
+'use strict';
+
+function postSiteCardGroup(args, content) {
+  if (args.length > 0) {
+    return `<div class="site-card-group"><p class='p h2'>${args}</p>${content}</div>`;
+  } else {
+    return `<div class="site-card-group">${content}</div>`;
+  }
+}
+function postSiteCard(args) {
+  args = args.join(' ').split(', ')
+  // 所有支持的参数
+  let title = args[0].trim();
+  let url = '';
+  let screenshot = '';
+  let avatar = '';
+  let description = '';
+  // 解析
+  if (args.length > 1) {
+    for (let i = 1; i < args.length; i++) {
+      let tmp = args[i].trim();
+      if (tmp.includes('url=')) {
+        url = tmp.substring(4, tmp.length);
+      } else if (tmp.includes('screenshot=')) {
+        screenshot = tmp.substring(11, tmp.length);
+      } else if (tmp.includes('avatar=')) {
+        avatar = tmp.substring(7, tmp.length);
+      } else if (tmp.includes('description=')) {
+        description = tmp.substring(12, tmp.length);
+      }
+    }
+  }
+  // 布局
+  let result = '';
+  result += '<a class="site-card" href="' + url + '">';
+  result += '<div class="img"><img src="' + screenshot + '"/></div>';
+  result += '<div class="info">';
+  if (avatar.length > 0) {
+    result += '<img src="' + avatar + '"/>';
+  } else {
+
+  }
+
+  result += '<span class="title">' + title + '</span>';
+  if (description.length > 0) {
+    result += '<span class="desc">' + description + '</span>';
+  } else {
+
+  }
+
+  result += '</div></a>';
+  return result;
+
+}
+
+// {% site link, img, title %}
+// {% site link, img, title, description %}
+hexo.extend.tag.register('site', postSiteCard);
+hexo.extend.tag.register('sitegroup', postSiteCardGroup, {ends: true});
diff --git a/butterfly/scripts/tag/span.js b/butterfly/scripts/tag/span.js
new file mode 100644
index 0000000..65310ec
--- /dev/null
+++ b/butterfly/scripts/tag/span.js
@@ -0,0 +1,17 @@
+'use strict';
+
+function postP(args) {
+  args = args.join(' ').split(',')
+  let p0 = args[0].trim()
+  let p1 = args[1].trim()
+  return `<p class='p ${p0}'>${p1}</p>`;
+}
+function postSpan(args) {
+  args = args.join(' ').split(',')
+  let p0 = args[0].trim()
+  let p1 = args[1].trim()
+  return `<span class='p ${p0}'>${p1}</span>`;
+}
+
+hexo.extend.tag.register('p', postP);
+hexo.extend.tag.register('span', postSpan);
diff --git a/butterfly/scripts/tag/tabs.js b/butterfly/scripts/tag/tabs.js
new file mode 100644
index 0000000..b818b46
--- /dev/null
+++ b/butterfly/scripts/tag/tabs.js
@@ -0,0 +1,62 @@
+/**
+ * Tabs
+ * transplant from hexo-theme-next
+ * modify by Jerry
+ */
+
+'use strict'
+
+function postTabs (args, content) {
+  const tabBlock = /<!--\s*tab (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtab\s*-->/g
+
+  args = args.join(' ').split(',')
+  const tabName = args[0]
+  const tabActive = Number(args[1]) || 0
+
+  const matches = []
+  let match
+  let tabId = 0
+  let tabNav = ''
+  let tabContent = ''
+
+  !tabName && hexo.log.warn('Tabs block must have unique name!')
+
+  while ((match = tabBlock.exec(content)) !== null) {
+    matches.push(match[1])
+    matches.push(match[2])
+  }
+
+  for (let i = 0; i < matches.length; i += 2) {
+    const tabParameters = matches[i].split('@')
+    let postContent = matches[i + 1]
+    let tabCaption = tabParameters[0] || ''
+    let tabIcon = tabParameters[1] || ''
+    let tabHref = ''
+
+    postContent = hexo.render.renderSync({ text: postContent, engine: 'markdown' }).trim()
+
+    tabId += 1
+    tabHref = (tabName + ' ' + tabId).toLowerCase().split(' ').join('-');
+
+    ((tabCaption.length === 0) && (tabIcon.length === 0)) && (tabCaption = tabName + ' ' + tabId)
+
+    const isOnlyicon = tabIcon.length > 0 && tabCaption.length === 0 ? ' style="text-align: center;"' : ''
+    const icon = tabIcon.trim()
+    tabIcon.length > 0 && (tabIcon = `<i class="${icon}"${isOnlyicon}></i>`)
+
+    const toTop = '<button type="button" class="tab-to-top"><i class="fas fa-arrow-up"></i></button>'
+
+    const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
+    tabNav += `<li class="tab${isActive}"><button type="button" data-href="#${tabHref}">${tabIcon + tabCaption.trim()}</button></li>`
+    tabContent += `<div class="tab-item-content${isActive}" id="${tabHref}">${postContent + toTop}</div>`
+  }
+
+  tabNav = `<ul class="nav-tabs">${tabNav}</ul>`
+  tabContent = `<div class="tab-contents">${tabContent}</div>`
+
+  return `<div class="tabs" id="${tabName.toLowerCase().split(' ').join('-')}">${tabNav + tabContent}</div>`
+}
+
+hexo.extend.tag.register('tabs', postTabs, { ends: true })
+hexo.extend.tag.register('subtabs', postTabs, { ends: true })
+hexo.extend.tag.register('subsubtabs', postTabs, { ends: true })
diff --git a/butterfly/scripts/tag/timeline.js b/butterfly/scripts/tag/timeline.js
new file mode 100644
index 0000000..5cb5294
--- /dev/null
+++ b/butterfly/scripts/tag/timeline.js
@@ -0,0 +1,30 @@
+/**
+ * timeline.js | https://volantis.js.org/v3/tag-plugins/#Timeline
+ */
+
+'use strict';
+
+function postTimeline(args, content) {
+  if (args.length > 0) {
+    return `<div class="timeline"><p class='p h2'>${args}</p>${content}</div>`;
+  } else {
+    return `<div class="timeline">${content}</div>`;
+  }
+}
+
+function postTimenode(args, content) {
+  args = args.join(' ').split(',')
+  var time = args[0]
+  return `<div class="timenode"><div class="meta"><p>${hexo.render.renderSync({text: time, engine: 'markdown'})}</p></div><div class="body">${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}</div></div>`;
+}
+
+
+// {% timeline %}
+// ... timenode ...
+// {% endtimeline %}
+hexo.extend.tag.register('timeline', postTimeline, {ends: true});
+
+// {% timenode time %}
+// what happened
+// {% endtimenode %}
+hexo.extend.tag.register('timenode', postTimenode, {ends: true});
diff --git a/butterfly/scripts/tag/tip.js b/butterfly/scripts/tag/tip.js
new file mode 100644
index 0000000..b0862a5
--- /dev/null
+++ b/butterfly/scripts/tag/tip.js
@@ -0,0 +1,15 @@
+// 'use strict'
+//
+// function poem (args, content) {
+//   return `<div class="tip"><b>${content}<b></div>`
+// }
+//
+// hexo.extend.tag.register('tip', tip, { ends: true })
+
+'use strict'
+
+function tip (args, content) {
+  return `<div class="tip ${args.join(' ')}">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div>`
+}
+
+hexo.extend.tag.register('tip',tip, { ends: true })
diff --git a/butterfly/source/css/_tags/btns.styl b/butterfly/source/css/_tags/btns.styl
new file mode 100644
index 0000000..43378f2
--- /dev/null
+++ b/butterfly/source/css/_tags/btns.styl
@@ -0,0 +1,213 @@
+[data-theme="dark"]
+  div
+    &.btns
+      filter brightness(0.7)
+      a
+        background 0 0
+  .checkbox
+    filter brightness(0.7)
+
+div
+  &.btns
+    margin 0 -8px
+    display flex
+    flex-wrap wrap
+    align-items flex-start
+    overflow visible
+    line-height 1.8
+    b
+      font-size 0.875rem
+    &.wide
+      & > a
+        padding-left 32px
+        padding-right 32px
+    &.fill
+      & > a
+        flex-grow 1
+        width auto
+    &.around
+      justify-content space-around
+    &.center
+      justify-content center
+    &.grid2
+      & > a
+        width calc(100% / 2 - 16px)
+    &.grid3
+      & > a
+        width calc(100% / 3 - 16px)
+    &.grid4
+      & > a
+        width calc(100% / 4 - 16px)
+    &.grid5
+      & > a
+        width calc(100% / 5 - 16px)
+    a
+      transition all 0.28s ease
+      -moz-transition all 0.28s ease
+      -webkit-transition all 0.28s ease
+      -o-transition all 0.28s ease
+      margin 8px
+      margin-top calc(1.25 * 16px + 32px)
+      min-width 120px
+      font-weight bold
+      display flex
+      justify-content flex-start
+      align-content center
+      align-items center
+      flex-direction column
+      padding 8px
+      text-align center
+      background #f6f6f6
+      border-radius 4px
+      & > i
+        background #2196f3!important
+        &:first-child
+          color #fff
+          background #2196f3
+      b
+        font-weight bold
+        line-height 1.3
+      img
+        margin 0.4em auto
+      &:not([href])
+        cursor default
+        color inherit
+    a[href]:hover
+      background rgba(255, 87, 34, 0.15)
+      & > i
+        &:first-child
+          background #ff5722
+
+div.btns,
+div.btns p,
+div.btns a
+  font-size 0.8125rem
+  color #555
+
+@media screen and (max-width: 1024px)
+  div
+    &.btns
+      &.grid2
+        & > a
+          width calc(100% / 2 - 16px)
+
+@media screen and (max-width: 768px)
+  div
+    &.btns
+      &.grid2
+        & > a
+          width calc(100% / 2 - 16px)
+
+@media screen and (max-width: 500px)
+  div
+    &.btns
+      &.grid2
+        & > a
+          width calc(100% / 1 - 16px)
+
+@media screen and (max-width: 1024px)
+  div
+    &.btns
+      &.grid3
+        & > a
+          width calc(100% / 3 - 16px)
+
+@media screen and (max-width: 768px)
+  div
+    &.btns
+      &.grid3
+        & > a
+          width calc(100% / 3 - 16px)
+
+@media screen and (max-width: 500px)
+  div
+    &.btns
+      &.grid3
+        & > a
+          width calc(100% / 1 - 16px)
+
+@media screen and (max-width: 1024px)
+  div
+    &.btns
+      &.grid4
+        & > a
+          width calc(100% / 3 - 16px)
+
+@media screen and (max-width: 768px)
+  div
+    &.btns
+      &.grid4
+        & > a
+          width calc(100% / 3 - 16px)
+
+@media screen and (max-width: 500px)
+  div
+    &.btns
+      &.grid4
+        & > a
+          width calc(100% / 2 - 16px)
+
+@media screen and (max-width: 1024px)
+  div
+    &.btns
+      &.grid5
+        & > a
+          width calc(100% / 4 - 16px)
+
+@media screen and (max-width: 768px)
+  div
+    &.btns
+      &.grid5
+        & > a
+          width calc(100% / 3 - 16px)
+
+@media screen and (max-width: 500px)
+  div
+    &.btns
+      &.grid5
+        & > a
+          width calc(100% / 2 - 16px)
+
+div.btns a > img:first-child,
+div.btns a > i:first-child
+  transition all 0.28s ease
+  -moz-transition all 0.28s ease
+  -webkit-transition all 0.28s ease
+  -o-transition all 0.28s ease
+  height 64px
+  width 64px
+  box-shadow 0 1px 2px 0 rgba(0, 0, 0, 0.1)
+  margin 16px 8px 4px 8px
+  margin-top calc(-1.25 * 16px - 32px)
+  border 2px solid #fff
+  background #fff
+  line-height 60px
+  font-size 28px
+
+div.btns a > img:first-child.auto,
+div.btns a > i:first-child.auto
+  width auto
+
+div.btns a p,
+div.btns a b
+  margin 0.25em
+  font-weight normal
+  line-height 1.25
+  word-wrap break-word
+
+div.btns a[href]:hover,
+div.btns a[href]:hover b
+  color #ff5722
+
+div.btns a[href]:hover > img:first-child,
+div.btns a[href]:hover > i:first-child
+  transform scale(1.1) translateY(-8px)
+  box-shadow 0 4px 8px 0 rgba(0, 0, 0, 0.1)
+
+div.btns.circle a > img:first-child,
+div.btns.circle a > i:first-child
+  border-radius 32px
+
+div.btns.rounded a > img:first-child,
+div.btns.rounded a > i:first-child
+  border-radius 16px
diff --git a/butterfly/source/css/_tags/button.styl b/butterfly/source/css/_tags/button.styl
new file mode 100644
index 0000000..79cceed
--- /dev/null
+++ b/butterfly/source/css/_tags/button.styl
@@ -0,0 +1,58 @@
+#article-container
+  .btn-center
+    margin: 0 0 1rem
+    text-align: center
+
+  .btn-beautify
+    display: inline-block
+    margin: 0 .2rem .3rem
+    padding: 0 1rem
+    background-color: $btn-default-color
+    color: $btn-color
+    line-height: 2
+
+    &:not(.block) + .btn-beautify:not(.block)
+      margin: 0 .2rem 1rem
+
+    &.block
+      display: block
+      margin: 0 0 1rem
+      width: fit-content
+      width: -moz-fit-content
+
+      &.center
+        margin: 0 auto 1rem
+
+      &.right
+        margin: 0 0 1rem auto
+
+    &.larger
+      padding: .3rem 1.3rem
+
+    &:hover
+      text-decoration: none
+
+    for $type in $tagsP-types
+      &.{$type}
+        background-color: lookup('$tagsP-' + $type + '-color')
+
+    &.outline
+      border: 1px solid transparent
+      border-color: $btn-default-color
+      background-color: transparent
+      color: $btn-default-color
+      transition: all .3s
+
+      &.button--animated:before
+        background: $btn-default-color
+
+      &:hover
+        color: white !important
+
+      for $type in $tagsP-types
+        &.{$type}
+          border-color: lookup('$tagsP-' + $type + '-color')
+          color: lookup('$tagsP-' + $type + '-color')
+
+          &.button--animated:before
+            background: lookup('$tagsP-' + $type + '-color')
diff --git a/butterfly/source/css/_tags/checkbox.styl b/butterfly/source/css/_tags/checkbox.styl
new file mode 100644
index 0000000..b9339dd
--- /dev/null
+++ b/butterfly/source/css/_tags/checkbox.styl
@@ -0,0 +1,197 @@
+.checkbox
+  display flex
+  align-items center
+  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 $theme-color
+  &.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
+
+[data-theme="dark"]
+  .checkbox
+    filter brightness(0.7)
diff --git a/butterfly/source/css/_tags/folding.styl b/butterfly/source/css/_tags/folding.styl
new file mode 100644
index 0000000..56f5faf
--- /dev/null
+++ b/butterfly/source/css/_tags/folding.styl
@@ -0,0 +1,119 @@
+trans($time = 0.28s)
+  transition: all $time ease
+  -moz-transition: all $time ease
+  -webkit-transition: all $time ease
+  -o-transition: all $time ease
+bgcolor($c, $mix = 10)
+  return mix($c, #fff, $mix)
+details
+  display: block
+  padding: 16px
+  margin: 1em 0
+  border-radius: 4px
+  background: #fff
+  font-size: .9375rem
+  trans()
+  summary
+    cursor: pointer
+    padding: 16px
+    margin: 0 - 16px
+    border-radius: 4px
+    color: alpha(#444, .7)
+    font-size: .875rem
+    font-weight: bold
+    position: relative
+    line-height: normal
+    >
+      p,h1,h2,h3,h4,h5,h6
+        display: inline
+        border-bottom: none !important
+    &:hover
+      color: #444
+      &:after
+        position: absolute
+        content: '+'
+        text-align: center
+        top: 50%
+        transform: translateY(-50%)
+        right: 16px
+
+  border: 1px solid #f6f6f6
+  >summary
+    background: #f6f6f6
+  &[blue]
+    border-color: bgcolor(#2196f3)
+    >summary
+      background: bgcolor(#2196f3)
+  &[cyan]
+    border-color: bgcolor(#1BCDFC)
+    >summary
+      background: bgcolor(#1BCDFC)
+  &[green]
+    border-color: bgcolor(#3DC550)
+    >summary
+      background: bgcolor(#3DC550)
+  &[yellow]
+    border-color: bgcolor(#FFBD2B)
+    >summary
+      background: bgcolor(#FFBD2B)
+  &[red]
+    border-color: bgcolor(#FE5F58)
+    >summary
+      background: bgcolor(#FE5F58)
+
+details[open]
+  border-color: alpha(#444, .2)
+  >summary
+    border-bottom: 1px solid alpha(#444, .2)
+    border-bottom-left-radius: 0
+    border-bottom-right-radius: 0
+  &[blue]
+    border-color: alpha(#2196f3, .3)
+    >summary
+      border-bottom-color: alpha(#2196f3, .3)
+  &[cyan]
+    border-color: alpha(#1BCDFC, .3)
+    >summary
+      border-bottom-color: alpha(#1BCDFC, .3)
+  &[green]
+    border-color: alpha(#3DC550, .3)
+    >summary
+      border-bottom-color: alpha(#3DC550, .3)
+  &[yellow]
+    border-color: alpha(#FFBD2B, .3)
+    >summary
+      border-bottom-color: alpha(#FFBD2B, .3)
+  &[red]
+    border-color: alpha(#FE5F58, .3)
+    >summary
+      border-bottom-color: alpha(#FE5F58, .3)
+  >summary
+    color: #444
+    margin-bottom: 0
+    &:hover
+      &:after
+        content: '-'
+  >div.content
+    padding: 16px
+    margin: 0 - 16px
+    margin-top: 0
+    p>a:hover
+      text-decoration: underline
+    >
+      p,.tabs,ul,ol,.highlight,.note,details
+        &:first-child
+          margin-top: 0
+        &:last-child
+          margin-bottom: 0
+[data-theme="dark"]
+  details[open]
+    & > div
+      &.content
+        padding 16px
+        margin -16px
+        margin-top 0
+        background #2c2d2d
+        color rgba(255, 255, 255, 0.6)
+  details
+    & > summary
+      filter brightness(0.7)
diff --git a/butterfly/source/css/_tags/gallery.styl b/butterfly/source/css/_tags/gallery.styl
new file mode 100644
index 0000000..8395e74
--- /dev/null
+++ b/butterfly/source/css/_tags/gallery.styl
@@ -0,0 +1,104 @@
+figure.gallery-group
+  position: relative
+  float: left
+  overflow: hidden
+  margin: .3rem .2rem
+  width: calc(50% - .4rem)
+  height: 250px
+  border-radius: 8px
+  background: $dark-black
+  -webkit-transform: translate3d(0, 0, 0)
+
+  +maxWidth600()
+    width: calc(100% - .4rem)
+
+  &:hover
+    img
+      opacity: .4
+      transform: translate3d(0, 0, 0)
+
+    .gallery-group-name::after
+      transform: translate3d(0, 0, 0)
+
+    p
+      opacity: 1
+      transform: translate3d(0, 0, 0)
+
+  img
+    position: relative
+    margin: 0 !important
+    max-width: none
+    width: calc(100% + 20px)
+    height: 250px
+    backface-visibility: hidden
+    opacity: .8
+    transition: opacity .35s, transform .35s
+    transform: translate3d(-10px, 0, 0)
+    object-fit: cover
+
+  figcaption
+    position: absolute
+    top: 0
+    left: 0
+    padding: 1.5rem
+    width: 100%
+    height: 100%
+    color: $gallery-color
+    text-transform: uppercase
+    backface-visibility: hidden
+
+    & > a
+      position: absolute
+      top: 0
+      right: 0
+      bottom: 0
+      left: 0
+      z-index: 1000
+      opacity: 0
+
+  p
+    @extend .limit-more-line
+    margin: 0
+    padding: .4rem 0 0
+    letter-spacing: 1px
+    font-size: 1.1em
+    line-height: 1.5
+    opacity: 0
+    transition: opacity .35s, transform .35s
+    transform: translate3d(100%, 0, 0)
+    -webkit-line-clamp: 4
+
+  .gallery-group-name
+    @extend .limit-more-line
+    position: relative
+    margin: 0
+    padding: .4rem 0
+    font-weight: bold
+    font-size: 1.65em
+    line-height: 1.5
+    -webkit-line-clamp: 2
+
+    &:after
+      position: absolute
+      bottom: 0
+      left: 0
+      width: 100%
+      height: 2px
+      background: $gallery-color
+      content: ''
+      transition: transform .35s
+      transform: translate3d(-100%, 0, 0)
+
+.gallery-group-main
+  overflow: auto
+  padding: 0 0 .8rem
+
+.justified-gallery
+  margin: 0 0 .8rem
+
+  img
+    opacity: 0
+
+  .fancybox
+    width: auto
+    text-align: inherit
\ No newline at end of file
diff --git a/butterfly/source/css/_tags/ghcard.styl b/butterfly/source/css/_tags/ghcard.styl
new file mode 100644
index 0000000..08642ff
--- /dev/null
+++ b/butterfly/source/css/_tags/ghcard.styl
@@ -0,0 +1,10 @@
+a.ghcard
+  display: inline-block
+  line-height: 0
+
+.md .ghcard-group
+  column-count: 2
+  column-gap: 0
+  margin: 0 0 - 16px * 0.5
+  .ghcard
+    margin: 16px * 0.5
diff --git a/butterfly/source/css/_tags/hexo.styl b/butterfly/source/css/_tags/hexo.styl
new file mode 100644
index 0000000..57e87b9
--- /dev/null
+++ b/butterfly/source/css/_tags/hexo.styl
@@ -0,0 +1,30 @@
+// pullquote
+blockquote
+  &.pullquote
+    position: relative
+    max-width: 45%
+    font-size: 110%
+
+    &.left
+      float: left
+      margin: 1em .5em 0 0
+
+    &.right
+      float: right
+      margin: 1em 0 0 .5rem
+
+// hexo tag video
+.video-container
+  position: relative
+  overflow: hidden
+  margin-bottom: .8rem
+  padding-top: 56.25%
+  height: 0
+
+  iframe
+    position: absolute
+    top: 0
+    left: 0
+    margin-top: 0
+    width: 100%
+    height: 100%
diff --git a/butterfly/source/css/_tags/hide.styl b/butterfly/source/css/_tags/hide.styl
new file mode 100644
index 0000000..8f42916
--- /dev/null
+++ b/butterfly/source/css/_tags/hide.styl
@@ -0,0 +1,53 @@
+// tag-hide
+.hide-inline,
+.hide-block
+  & > .hide-button
+    display: inline-block
+    padding: .3rem 1rem
+    background: $tag-hide-bg
+    color: var(--white)
+
+    &.open
+      display: none
+
+  & > .hide-content
+    display: none
+
+.hide-inline
+  & > .hide-button
+    margin: 0 .3rem
+
+  & > .hide-content
+    margin: 0 .3rem
+
+.hide-block
+  margin: 0 0 .8rem
+
+.hide-toggle
+  margin-bottom: 1rem
+  border: 1px solid $tag-hide-toggle-bg
+
+  & > .hide-button
+    padding: .3rem .5rem
+    background: $tag-hide-toggle-bg
+    color: #1F2D3D
+    cursor: pointer
+
+    & > i
+      font-size: 1.2em
+      transition: all .3s
+
+    &.open
+      i
+        transform: rotate(90deg)
+
+  & > .hide-content
+    display: none
+    margin: 1.5rem 1.2rem
+
+[data-theme="dark"]
+  .hide-button
+    background #2c2c2c
+    color rgba(255, 255, 255, 0.6)
+  .hide-toggle
+    border-color #2c2c2c
diff --git a/butterfly/source/css/_tags/image.styl b/butterfly/source/css/_tags/image.styl
new file mode 100644
index 0000000..00a31c7
--- /dev/null
+++ b/butterfly/source/css/_tags/image.styl
@@ -0,0 +1,7 @@
+.md .img
+  object-fit: contain
+
+img.inline
+  display: inline !important
+  vertical-align: middle
+  transform: translateY(-4px)
diff --git a/butterfly/source/css/_tags/inline-labels.styl b/butterfly/source/css/_tags/inline-labels.styl
new file mode 100644
index 0000000..ff3224f
--- /dev/null
+++ b/butterfly/source/css/_tags/inline-labels.styl
@@ -0,0 +1,44 @@
+s,del
+  color: mix(#444, #fff, 60)
+  text-decoration-color: @color
+u
+  color: #444
+  text-decoration: none
+  border-bottom: 1px solid #FE5F58
+emp
+  color: #444
+  border-bottom: 4px dotted #FE5F58
+wavy
+  color: #444
+  text-decoration-style: wavy
+  text-decoration-line: underline
+  text-decoration-color: #FE5F58
+psw
+  color: transparent
+  background: mix(#444, #fff, 50)
+  border-radius: 2px
+  trans()
+  &:hover
+    color: #444
+    background: none
+kbd
+  display inline-block
+  color #666
+  font bold 9pt arial
+  text-decoration none
+  text-align center
+  padding 2px 5px
+  margin 0 5px
+  background #eff0f2
+  -moz-border-radius 4px
+  border-radius 4px
+  border-top 1px solid #f5f5f5
+  -webkit-box-shadow inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9,
+    0 1px 2px #333
+  -moz-box-shadow inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9,
+    0 1px 2px #333
+  -webkit-box-shadow inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9,
+    0 1px 2px #333
+  box-shadow inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9,
+    0 1px 2px #333
+  text-shadow 0 1px 0 #f5f5f5
diff --git a/butterfly/source/css/_tags/link.styl b/butterfly/source/css/_tags/link.styl
new file mode 100644
index 0000000..fe8e50f
--- /dev/null
+++ b/butterfly/source/css/_tags/link.styl
@@ -0,0 +1,70 @@
+#article-container
+  a
+    &.link-card
+      margin 0.25rem auto
+      background #f6f6f6
+      display inline-flex
+      align-items center
+      cursor pointer
+      text-align center
+      min-width 200px
+      max-width 361px
+      color #444
+      border-radius 12px
+      text-decoration none
+      &:hover
+        box-shadow 0 4px 8px 0 rgba(0, 0, 0, 0.1)
+      div
+        &.left
+          width 48px
+          height 48px
+          margin 12px
+          overflow hidden
+          flex-shrink 0
+          position relative
+          i
+            font-size 32px
+            line-height 48px
+            margin-left 4px
+          img
+            display block
+            position absolute
+            border-radius 8px / 4
+            top 50%
+            left 50%
+            transform translate(-50%, -50%)
+        &.right
+          overflow hidden
+          margin-right 12px
+      p
+        margin 0
+        &.text
+          font-weight bold
+        &.url
+          flex-shrink 0
+          color rgba(68, 68, 68, 0.65)
+          font-size 13px
+
+@media screen and (max-width: 425px)
+  #article-container
+    a
+      &.link-card
+        max-width 100%
+
+@media screen and (max-width: 375px)
+  #article-container
+    a
+      &.link-card
+        width 100%
+
+#article-container a.link-card div.left,
+#article-container a.link-card div.right
+  pointer-events none
+
+[data-theme="dark"]
+  #article-container
+    a
+      &.link-card
+        filter brightness(0.7)
+        img
+          filter brightness(1)
diff --git a/butterfly/source/css/_tags/media.styl b/butterfly/source/css/_tags/media.styl
new file mode 100644
index 0000000..fb7bc88
--- /dev/null
+++ b/butterfly/source/css/_tags/media.styl
@@ -0,0 +1,57 @@
+trans($time = 0.28s)
+  transition: all $time ease
+  -moz-transition: all $time ease
+  -webkit-transition: all $time ease
+  -o-transition: all $time ease
+
+audio,video
+  border-radius: 4px
+  max-width: 100%
+video
+  z-index: 1
+  trans()
+  &:hover
+    box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.24), 0 8px 16px 0px rgba(0, 0, 0, 0.24)
+
+div.video
+  line-height: 0
+  text-align: center
+
+div.videos
+  max-width: "calc(100% + 2 * %s)" % 4px
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: flex-end
+  margin: 1em 0 - 4px
+  .video,iframe
+    width: 100%
+    margin: 4px
+
+  iframe
+    border-radius: 4px
+    width: 100%
+    min-height: 300px
+  &.left
+    justify-content: flex-start
+  &.center
+    justify-content: center
+  &.right
+    justify-content: flex-end
+  &.stretch
+    align-items: stretch
+  &[col='1']
+    .video,iframe
+      width: 100%
+  &[col='2']
+    .video,iframe
+      width: "calc(50% - 2 * %s)" % 4px
+  &[col='3']
+    .video,iframe
+      width: "calc(33.33% - 2 * %s)" % 4px
+  &[col='4']
+    .video,iframe
+      width: "calc(25% - 2 * %s)" % 4px
+[data-theme="dark"]
+  audio,video
+    filter brightness(0.7)
diff --git a/butterfly/source/css/_tags/note.styl b/butterfly/source/css/_tags/note.styl
new file mode 100644
index 0000000..cb5d899
--- /dev/null
+++ b/butterfly/source/css/_tags/note.styl
@@ -0,0 +1,121 @@
+.note
+  $note-icons = hexo-config('note.icons')
+  position: relative
+  margin: 0 0 1rem
+  padding: 15px
+
+  if hexo-config('note.border_radius') is a 'unit'
+    border-radius: unit(hexo-config('note.border_radius'), px)
+
+  &.icon
+    padding-left: 2.25rem
+
+  & > .note-icon
+    position: absolute
+    top: calc(50% - .4rem)
+    left: .7rem
+    font-size: larger
+
+  for $type in $tagsP-types
+    &.{$type}
+      &:not(.disabled)
+        border-left-color: lookup('$tagsP-' + $type + '-color') !important
+
+        &.modern
+          border-left-color: transparent !important
+          color: lookup('$tagsP-' + $type + '-color')
+
+        &:not(.simple)
+          background: lighten(lookup('$tagsP-' + $type + '-color'), 85%) !important
+
+      & > .note-icon
+        color: lookup('$tagsP-' + $type + '-color')
+
+  &.simple
+    border: 1px solid #EEEEEE
+    border-left-width: 5px
+
+  &.modern
+    border: 1px solid transparent !important
+    background-color: #f5f5f5
+    color: $font-black
+
+  &.flat
+    border: initial
+    border-left: 5px solid #EEEEEE
+    background-color: lighten(#EEEEEE, 65%)
+    color: $font-black
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+    if $note-icons
+      margin-top: 3px
+    else
+      margin-top: 0
+
+    margin-bottom: 0
+    padding-top: 0 !important
+    border-bottom: initial
+
+  p,
+  ul,
+  ol,
+  table,
+  pre,
+  blockquote,
+  img
+    &:first-child
+      margin-top: 0 !important
+
+    &:last-child
+      margin-bottom: 0 !important
+
+  if $note-icons
+    &:not(.no-icon)
+      padding-left: 2.25rem
+
+      &::before
+        position: absolute
+        top: calc(50% - .8rem)
+        left: .7rem
+        font-size: larger
+        @extend .fontawesomeIcon
+
+  for $type in $note-types
+    &.{$type}
+      &.flat
+        background: lookup('$note-' + $type + '-bg')
+
+      &.modern
+        border-color: lookup('$note-modern-' + $type + '-border')
+        background: lookup('$note-modern-' + $type + '-bg')
+        color: lookup('$note-modern-' + $type + '-text')
+
+        a
+          &:not(.btn)
+            color: lookup('$note-modern-' + $type + '-text')
+
+            &:hover
+              color: lookup('$note-modern-' + $type + '-hover')
+
+      &:not(.modern)
+        border-left-color: lookup('$note-' + $type + '-border')
+
+        h2,
+        h3,
+        h4,
+        h5,
+        h6
+          color: lookup('$note-' + $type + '-text')
+
+      if $note-icons
+        &:not(.no-icon)
+          &::before
+            content: lookup('$note-' + $type + '-icon')
+
+          &:not(.modern)
+            &::before
+              color: lookup('$note-' + $type + '-text')
diff --git a/butterfly/source/css/_tags/site-card.styl b/butterfly/source/css/_tags/site-card.styl
new file mode 100644
index 0000000..cb07bde
--- /dev/null
+++ b/butterfly/source/css/_tags/site-card.styl
@@ -0,0 +1,77 @@
+trans($time = 0.28s)
+  transition: all $time ease
+  -moz-transition: all $time ease
+  -webkit-transition: all $time ease
+  -o-transition: all $time ease
+
+
+.site-card-group
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+  margin: -0.5 * 16px
+  align-items: stretch
+.site-card
+  margin: 16px * 0.5
+  width: "calc(100% / 4 - %s)" % 16px
+  @media screen and (min-width: 2048px)
+      width: "calc(100% / 5 - %s)" % 16px
+  @media screen and (max-width: 768px)
+      width: "calc(100% / 3 - %s)" % 16px
+  @media screen and (max-width: 500px)
+      width: "calc(100% / 2 - %s)" % 16px
+  display: block
+  line-height: 1.4
+  height 100%
+  .img
+    width: 100%
+    height 120px
+    @media screen and (max-width: 500px)
+      height 100px
+    overflow: hidden
+    border-radius: 12px * 0.5
+    box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
+    background: #f6f6f6
+    img
+      width: 100%
+      height 100%
+      // trans(.75s)
+      transition: transform 2s ease
+      object-fit: cover
+
+  .info
+    margin-top: 16px * 0.5
+    img
+      width: 32px
+      height: 32px
+      border-radius: 16px
+      float: left
+      margin-right: 8px
+      margin-top: 2px
+    span
+      display: block
+    .title
+      font-weight: 600
+      font-size: $fontsize-list
+      color: #444
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 1
+      trans()
+    .desc
+      font-size: $fontsize-footnote
+      word-wrap: break-word;
+      line-height: 1.2
+      color: #888
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 2
+  .img
+    trans()
+  &:hover
+    .img
+      box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 8px 16px 0px rgba(0, 0, 0, 0.1)
+    .info .title
+      color: #ff5722
diff --git a/butterfly/source/css/_tags/span.styl b/butterfly/source/css/_tags/span.styl
new file mode 100644
index 0000000..fd7951c
--- /dev/null
+++ b/butterfly/source/css/_tags/span.styl
@@ -0,0 +1,80 @@
+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
+  &.logo
+    font-family: $font-family
+  &.code
+    font-family: $code-font-family
+  &.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: $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
+    color: var(--color-h1)
+    padding-top: 1em * 2
+  &.h2
+    font-size: 1.625rem
+    color: var(--color-h2)
+    padding-top: 1em * 2
+    border-bottom: 1px solid alpha(#444, .1)
+  &.h3
+    font-size: 1.375rem
+    color: var(--color-h3)
+    padding-top: 1em * 2
+  &.h4
+    font-size: 1.125rem
+    color: var(--color-h4)
+    padding-top: 1em * 2
+  &.h5
+    font-size: 1rem
+    color: var(--color-h5)
+    padding-top: 1em * 1.5
+
+span.p,p.p
+  &.red
+    color: #E8453C
+  &.yellow
+    color: #FCEC60
+  &.green
+    color: #3DC550
+  &.cyan
+    color: #1BCDFC
+  &.blue
+    color: #2196f3
+  &.purple
+    color: #9c27b0
+  &.gray
+    color: #999
diff --git a/butterfly/source/css/_tags/tabs.styl b/butterfly/source/css/_tags/tabs.styl
new file mode 100644
index 0000000..785991d
--- /dev/null
+++ b/butterfly/source/css/_tags/tabs.styl
@@ -0,0 +1,74 @@
+
+#article-container
+  .tabs
+    position: relative
+    margin: 0 0 1rem
+    border-right: 1px solid var(--tab-border-color)
+    border-bottom: 1px solid var(--tab-border-color)
+    border-left: 1px solid var(--tab-border-color)
+
+    > .nav-tabs
+      display: flex
+      flex-wrap: wrap
+      margin: 0
+      padding: 0
+      background: var(--tab-botton-bg)
+
+      > .tab
+        margin: 0
+        padding: 0
+        list-style: none
+
+        +maxWidth768()
+          flex-grow: 1
+
+        button
+          display: block
+          padding: .5rem 1rem
+          width: 100%
+          border-top: 2px solid var(--tab-border-color)
+          background: var(--tab-botton-bg)
+          color: var(--tab-botton-color)
+          line-height: 2
+          transition: all .4s
+
+          i
+            width: 1.5em
+
+        &.active
+          button
+            border-top: 2px solid $tab-active-border-color
+            background: var(--tab-button-active-bg)
+            cursor: default
+
+        &:not(.active)
+          button
+            &:hover
+              border-top: 2px solid var(--tab-button-hover-bg)
+              background: var(--tab-button-hover-bg)
+
+    > .tab-contents
+      .tab-item-content
+        position: relative
+        display: none
+        padding: 1.8rem 1.2rem
+
+        +maxWidth768()
+          padding: 1.2rem .7rem
+
+        &.active
+          display: block
+          animation: tabshow .5s
+
+    .tab-to-top
+      position: relative
+      display: block
+      margin: 0 0 0 auto
+      color: $tab-to-top-color
+
+@keyframes tabshow
+  0%
+    transform: translateY(15px)
+
+  100%
+    transform: translateY(0)
diff --git a/butterfly/source/css/_tags/timeline.styl b/butterfly/source/css/_tags/timeline.styl
new file mode 100644
index 0000000..085d287
--- /dev/null
+++ b/butterfly/source/css/_tags/timeline.styl
@@ -0,0 +1,98 @@
+div
+  &.timenode
+    position relative
+    &:before
+      top 0
+      height 6px
+    &:after
+      top 26px
+      height calc(100% - 26px)
+    &:last-child
+      &:after
+        height calc(100% - 26px - 16px)
+        border-bottom-left-radius 2px
+        border-bottom-right-radius 2px
+    .meta
+      position relative
+      color var(--tab-botton-color)
+      font-size 0.375rem
+      line-height 32px
+      height 32px
+      &:before
+        background rgba(68, 215, 182, 0.5)
+        width 16px
+        height 16px
+        border-radius 8px
+      &:after
+        background #44d7b6
+        margin-left 2px
+        margin-top 2px
+        width 12px
+        height 12px
+        border-radius 6px
+        transform scale(0.5)
+      p
+        font-weight bold !important
+        margin 0 0 0 24px !important
+    .body
+      margin 4px 0 10px 24px
+      padding 10px
+      border-radius 12px
+      background #efeded
+      display inline-block
+      p
+        &:first-child
+          margin-top 0 !important
+        &:last-child
+          margin-bottom 0 !important
+      .highlight
+        background #fff7ea
+        filter grayscale(0%)
+        figcaption
+          background #ffeed2
+        .gutter
+          background #ffedd0
+    &:hover
+      .meta
+        color #444
+        &:before
+          background rgba(255, 87, 34, 0.5)
+        &:after
+          background #ff5722
+          transform scale(1)
+
+div.timenode:before,
+div.timenode:after
+  content ""
+  z-index 1
+  position absolute
+  background rgba(68, 215, 182, 0.5)
+  width 2px
+  left 7px
+
+div.timenode .meta,
+div.timenode .body
+  max-width calc(100% - 24px)
+
+div.timenode .meta:before,
+div.timenode .meta:after
+  content ""
+  position absolute
+  top 8px
+  z-index 2
+
+[data-theme="dark"]
+  div
+    &.timenode
+      .body
+        background #2c2c2c
+      &:hover
+        .meta
+          color #ccd0d7
+      .meta
+        color rgba(255, 255, 255, 0.6)
+    &.timeline
+      p
+        &.p
+          &.h2
+            color rgba(255, 255, 255, 0.6)
diff --git a/butterfly/source/css/_tags/tip.styl b/butterfly/source/css/_tags/tip.styl
new file mode 100644
index 0000000..0ce8cbe
--- /dev/null
+++ b/butterfly/source/css/_tags/tip.styl
@@ -0,0 +1,314 @@
+.tip
+  padding 6px 20px
+  position relative
+  color #fff
+  background #20a0ff
+  background -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(#20a0ff),
+    to(#20b8ff)
+  )
+  background -webkit-linear-gradient(left, #20a0ff, #20b8ff)
+  background linear-gradient(90deg, #20a0ff, #20b8ff)
+  padding 6px 20px
+  border-radius 10px
+  -webkit-box-shadow 0 3px 5px rgba(32, 160, 255, 0.5)
+  box-shadow 0 3px 5px rgba(32, 160, 255, 0.5)
+  margin-bottom 20px
+
+  &:before
+    background #20a0ff
+    background -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    from(#0092ff),
+    to(#20b8ff)
+  )
+    background -webkit-linear-gradient(bottom, #0092ff, #20b8ff)
+    background linear-gradient(0deg, #0092ff, #20b8ff)
+    border-radius 50%
+    color #fff
+    content "\f129"
+    font-size 12px
+    position absolute
+    width 24px
+    height 24px
+    line-height 24.5px
+    left -12px
+    top -12px
+    -webkit-box-shadow 0 0 0 2.5px #f7f8f9
+    box-shadow 0 0 0 2.5px #f7f8f9
+    font-weight 600
+    font-family "Font Awesome 5 Free"
+    text-align center
+  ol
+    margin 0
+  &.success
+    background #61be33
+    background -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(#61be33),
+    to(#8fce44)
+  )
+    background -webkit-linear-gradient(left, #61be33, #8fce44)
+    background linear-gradient(90deg, #61be33, #8fce44)
+    text-shadow 0 -1px #61be33
+    -webkit-box-shadow 0 3px 5px rgba(104, 195, 59, 0.5)
+    box-shadow 0 3px 5px rgba(104, 195, 59, 0.5)
+    &:before
+      background -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    from(#52bb1d),
+    to(#95d34b)
+  )
+      background -webkit-linear-gradient(bottom, #52bb1d, #95d34b)
+      background linear-gradient(0deg, #52bb1d, #95d34b)
+      content "\f00c"
+      text-shadow 0 -1px #61be33
+  &.warning
+    background #ff953f
+    background -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(#ff953f),
+    to(#ffb449)
+  )
+    background -webkit-linear-gradient(left, #ff953f, #ffb449)
+    background linear-gradient(90deg, #ff953f, #ffb449)
+    text-shadow 0 -1px #ff953f
+    -webkit-box-shadow 0 3px 5px rgba(255, 154, 73, 0.5)
+    box-shadow 0 3px 5px rgba(255, 154, 73, 0.5)
+    &:before
+      background -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    from(#ff8f35),
+    to(#ffc149)
+  )
+      background -webkit-linear-gradient(bottom, #ff8f35, #ffc149)
+      background linear-gradient(0deg, #ff8f35, #ffc149)
+      content "\f12a"
+      text-shadow 0 -1px #ff953f
+  &.error
+    background #ff4949
+    background -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(#ff4949),
+    to(#ff7849)
+  )
+    background -webkit-linear-gradient(left, #ff4949, #ff7849)
+    background linear-gradient(90deg, #ff4949, #ff7849)
+    text-shadow 0 -1px #ff4949
+    -webkit-box-shadow 0 3px 5px rgba(255, 73, 73, 0.5)
+    box-shadow 0 3px 5px rgba(255, 73, 73, 0.5)
+    &:before
+      background -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    from(#ff3838),
+    to(#ff7849)
+  )
+      background -webkit-linear-gradient(bottom, #ff3838, #ff7849)
+      background linear-gradient(0deg, #ff3838, #ff7849)
+      content "\f00d"
+      text-shadow 0 -1px #ff4949
+  &.bolt
+    background -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    from(#3d8b48),
+    to(#477837)
+  )
+    background -webkit-linear-gradient(bottom, #3c3, #459431)
+    background linear-gradient(530deg, #78ca33, #25822c)
+    content "\f00d"
+    text-shadow 0 -1px #4cf706
+    &:before
+      background -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    from(#3c0),
+    to(#3c0)
+  )
+      background -webkit-linear-gradient(bottom, #3c3, #459431)
+      background linear-gradient(776deg, #78ca33, #25822c)
+      content "\f0e7"
+      text-shadow 0 -1px #4cf706
+  &.ban
+    background #ff4949
+    background -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(#ff4949),
+    to(#ff3443)
+  )
+    background -webkit-linear-gradient(left, #ff4949, #ff1022)
+    background linear-gradient(90deg, #ff4949, #f03b49)
+    text-shadow 0 -1px #ff4949
+    -webkit-box-shadow 0 3px 5px rgba(255, 73, 73, 0.5)
+    box-shadow 0 3px 5px rgba(255, 73, 73, 0.5)
+    &:before
+      background -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    from(#ff3838),
+    to(#ce4617)
+  )
+      background -webkit-linear-gradient(bottom, #ff3838, #d23e49)
+      background linear-gradient(0deg, #ff3838, #ff1022)
+      content "\f05e"
+      text-shadow 0 -1px #ff4949
+  &.home
+    background #15e5ff
+    background -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(#5bc6d4) to(#0ec0ef)
+  )
+    background -webkit-linear-gradient(left, #0ec0ef, #80e0f9)
+    background linear-gradient(90deg, #0ec0ef, #80e0f7)
+    text-shadow 0 -1px #0ec0ef
+    -webkit-box-shadow 0 3px 5px #01caff
+    box-shadow 0 3px 5px #01caff
+    &:before
+      background -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    form(#0ec0ee) to(#0ee0cc)
+  )
+      background -webkit-linear-gradient(bottom, #0ec0ee, #0ec2ee)
+      background linear-gradient(0deg, #0ec0ee, #0ec0ea)
+      content "\f015"
+      text-shadow 0 -1px #0ec0ea
+
+  &.sync
+    background #00a9ff
+    background -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(#51a7bd33),
+    to(#c7eef9)
+  )
+    background -webkit-linear-gradient(left, #53cff1, #2e9fbd)
+    background linear-gradient(230deg, #47c0e0, #2dc342)
+    text-shadow 0 -1px #1bcdfc
+    -webkit-box-shadow 0 3px 5px #1bcdfc
+    box-shadow 0 3px 5px #20b1ad
+    &:before
+      background -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    from(#00c3f7),
+    to(#88d3e6)
+  )
+      background -webkit-linear-gradient(bottom, #83e5ff, #0aa8d2)
+      background linear-gradient(270deg, #40c0e2, #3dc550)
+      content "\f021"
+      text-shadow 0 -1px #17cfff
+  &.cogs
+    background #1502ff
+    background -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(#51a7bd33),
+    to(#8379ff)
+  )
+    background -webkit-linear-gradient(left, #5246e2, #5246e2)
+    background linear-gradient(230deg, #40c0e2, #5247e2)
+    text-shadow 0 -1px #8278fd
+    -webkit-box-shadow 0 3px 5px #4037a7
+    box-shadow 1 3px 5px #5e52ec
+    &:before
+      background -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    from(#3020f3),
+    to(#b1abf5)
+  )
+      background -webkit-linear-gradient(bottom, #5246e2, #5246e2)
+      background linear-gradient(560deg, #40c0e2, #5246e2)
+      content "\f085"
+      text-shadow 0 -1px #098cf5
+  &.key
+    background #25c33b
+    background -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(#51a7bd33),
+    to(#8379ff)
+  )
+    background -webkit-linear-gradient(left, #648798, #90a4ae)
+    background linear-gradient(230deg, #90a4ae, #b7a7a7)
+    text-shadow 0 -1px #c1c0d4
+    -webkit-box-shadow 0 3px 5px #d3d2de
+    box-shadow 1 3px 5px #d5d4de
+    &:before
+      background -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    from(#dddce8),
+    to(#b1abf5)
+  )
+      background -webkit-linear-gradient(bottom, #5246e2, #5246e2)
+      background linear-gradient(560deg, #bccdd2, #cfced4)
+      content "\f084"
+      text-shadow 0 -1px #a9b2b9
+  &.bell
+    background #25c33b
+    background -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(#51a7bd33),
+    to(#8379ff)
+  )
+    background -webkit-linear-gradient(left, #648798, #90a4ae)
+    background linear-gradient(230deg, #ffaa0d, #deb455)
+    text-shadow 0 -1px #c1c0d4
+    -webkit-box-shadow 0 3px 5px #d3d2de
+    box-shadow 1 3px 5px #d5d4de
+    &:before
+      background -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    from(#dddce8),
+    to(#b1abf5)
+  )
+      background -webkit-linear-gradient(bottom, #5246e2, #5246e2)
+      background linear-gradient(560deg, #f9ae07, #ffb615)
+      content "\f0f3"
+      text-shadow 0 -1px #ffb81b
+
+[data-theme="dark"]
+  .tip
+    filter brightness(0.7)
+
+#article-container
+  .tip
+    a
+      color #e6eaed
diff --git a/butterfly/source/css/_third-party/font-awesome-animation.min.css b/butterfly/source/css/_third-party/font-awesome-animation.min.css
new file mode 100644
index 0000000..c23cbbf
--- /dev/null
+++ b/butterfly/source/css/_third-party/font-awesome-animation.min.css
@@ -0,0 +1 @@
+@-webkit-keyframes wrench{0%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}8%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}10%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}18%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}20%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}28%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}30%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}38%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}40%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}48%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}50%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}58%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}60%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}68%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}100%,75%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes wrench{0%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}8%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}10%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}18%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}20%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}28%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}30%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}38%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}40%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}48%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}50%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}58%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}60%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}68%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}100%,75%{-webkit-transform:rotate(0);transform:rotate(0)}}.faa-parent.animated-hover:hover>.faa-wrench,.faa-wrench.animated,.faa-wrench.animated-hover:hover{-webkit-animation:wrench 2.5s ease infinite;animation:wrench 2.5s ease infinite;transform-origin-x:90%;transform-origin-y:35%;transform-origin-z:initial}.faa-parent.animated-hover:hover>.faa-wrench.faa-fast,.faa-wrench.animated-hover.faa-fast:hover,.faa-wrench.animated.faa-fast{-webkit-animation:wrench 1.2s ease infinite;animation:wrench 1.2s ease infinite}.faa-parent.animated-hover:hover>.faa-wrench.faa-slow,.faa-wrench.animated-hover.faa-slow:hover,.faa-wrench.animated.faa-slow{-webkit-animation:wrench 3.7s ease infinite;animation:wrench 3.7s ease infinite}@-webkit-keyframes ring{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}100%,20%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes ring{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}100%,20%{-webkit-transform:rotate(0);transform:rotate(0)}}.faa-parent.animated-hover:hover>.faa-ring,.faa-ring.animated,.faa-ring.animated-hover:hover{-webkit-animation:ring 2s ease infinite;animation:ring 2s ease infinite;transform-origin-x:50%;transform-origin-y:0;transform-origin-z:initial}.faa-parent.animated-hover:hover>.faa-ring.faa-fast,.faa-ring.animated-hover.faa-fast:hover,.faa-ring.animated.faa-fast{-webkit-animation:ring 1s ease infinite;animation:ring 1s ease infinite}.faa-parent.animated-hover:hover>.faa-ring.faa-slow,.faa-ring.animated-hover.faa-slow:hover,.faa-ring.animated.faa-slow{-webkit-animation:ring 3s ease infinite;animation:ring 3s ease infinite}@-webkit-keyframes vertical{0%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}4%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}8%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}12%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}16%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}20%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}100%,22%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes vertical{0%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}4%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}8%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}12%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}16%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}20%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}100%,22%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.faa-parent.animated-hover:hover>.faa-vertical,.faa-vertical.animated,.faa-vertical.animated-hover:hover{-webkit-animation:vertical 2s ease infinite;animation:vertical 2s ease infinite}.faa-parent.animated-hover:hover>.faa-vertical.faa-fast,.faa-vertical.animated-hover.faa-fast:hover,.faa-vertical.animated.faa-fast{-webkit-animation:vertical 1s ease infinite;animation:vertical 1s ease infinite}.faa-parent.animated-hover:hover>.faa-vertical.faa-slow,.faa-vertical.animated-hover.faa-slow:hover,.faa-vertical.animated.faa-slow{-webkit-animation:vertical 4s ease infinite;animation:vertical 4s ease infinite}@-webkit-keyframes horizontal{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}6%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}12%{-webkit-transform:translate(0,0);transform:translate(0,0)}18%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}24%{-webkit-transform:translate(0,0);transform:translate(0,0)}30%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}100%,36%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes horizontal{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}6%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}12%{-webkit-transform:translate(0,0);transform:translate(0,0)}18%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}24%{-webkit-transform:translate(0,0);transform:translate(0,0)}30%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}100%,36%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.faa-horizontal.animated,.faa-horizontal.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-horizontal{-webkit-animation:horizontal 2s ease infinite;animation:horizontal 2s ease infinite}.faa-horizontal.animated-hover.faa-fast:hover,.faa-horizontal.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-horizontal.faa-fast{-webkit-animation:horizontal 1s ease infinite;animation:horizontal 1s ease infinite}.faa-horizontal.animated-hover.faa-slow:hover,.faa-horizontal.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-horizontal.faa-slow{-webkit-animation:horizontal 3s ease infinite;animation:horizontal 3s ease infinite}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.faa-flash.animated,.faa-flash.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-flash{-webkit-animation:flash 2s ease infinite;animation:flash 2s ease infinite}.faa-flash.animated-hover.faa-fast:hover,.faa-flash.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-flash.faa-fast{-webkit-animation:flash 1s ease infinite;animation:flash 1s ease infinite}.faa-flash.animated-hover.faa-slow:hover,.faa-flash.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-flash.faa-slow{-webkit-animation:flash 3s ease infinite;animation:flash 3s ease infinite}@-webkit-keyframes bounce{0%,10%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@keyframes bounce{0%,10%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}.faa-bounce.animated,.faa-bounce.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-bounce{-webkit-animation:bounce 2s ease infinite;animation:bounce 2s ease infinite}.faa-bounce.animated-hover.faa-fast:hover,.faa-bounce.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-bounce.faa-fast{-webkit-animation:bounce 1s ease infinite;animation:bounce 1s ease infinite}.faa-bounce.animated-hover.faa-slow:hover,.faa-bounce.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-bounce.faa-slow{-webkit-animation:bounce 3s ease infinite;animation:bounce 3s ease infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.faa-parent.animated-hover:hover>.faa-spin,.faa-spin.animated,.faa-spin.animated-hover:hover{-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}.faa-parent.animated-hover:hover>.faa-spin.faa-fast,.faa-spin.animated-hover.faa-fast:hover,.faa-spin.animated.faa-fast{-webkit-animation:spin .7s linear infinite;animation:spin .7s linear infinite}.faa-parent.animated-hover:hover>.faa-spin.faa-slow,.faa-spin.animated-hover.faa-slow:hover,.faa-spin.animated.faa-slow{-webkit-animation:spin 2.2s linear infinite;animation:spin 2.2s linear infinite}@-webkit-keyframes float{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes float{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.faa-float.animated,.faa-float.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-float{-webkit-animation:float 2s linear infinite;animation:float 2s linear infinite}.faa-float.animated-hover.faa-fast:hover,.faa-float.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-float.faa-fast{-webkit-animation:float 1s linear infinite;animation:float 1s linear infinite}.faa-float.animated-hover.faa-slow:hover,.faa-float.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-float.faa-slow{-webkit-animation:float 3s linear infinite;animation:float 3s linear infinite}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(.8);transform:scale(.8)}100%{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes pulse{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(.8);transform:scale(.8)}100%{-webkit-transform:scale(1.1);transform:scale(1.1)}}.faa-parent.animated-hover:hover>.faa-pulse,.faa-pulse.animated,.faa-pulse.animated-hover:hover{-webkit-animation:pulse 2s linear infinite;animation:pulse 2s linear infinite}.faa-parent.animated-hover:hover>.faa-pulse.faa-fast,.faa-pulse.animated-hover.faa-fast:hover,.faa-pulse.animated.faa-fast{-webkit-animation:pulse 1s linear infinite;animation:pulse 1s linear infinite}.faa-parent.animated-hover:hover>.faa-pulse.faa-slow,.faa-pulse.animated-hover.faa-slow:hover,.faa-pulse.animated.faa-slow{-webkit-animation:pulse 3s linear infinite;animation:pulse 3s linear infinite}.faa-parent.animated-hover:hover>.faa-shake,.faa-shake.animated,.faa-shake.animated-hover:hover{-webkit-animation:wrench 2.5s ease infinite;animation:wrench 2.5s ease infinite}.faa-parent.animated-hover:hover>.faa-shake.faa-fast,.faa-shake.animated-hover.faa-fast:hover,.faa-shake.animated.faa-fast{-webkit-animation:wrench 1.2s ease infinite;animation:wrench 1.2s ease infinite}.faa-parent.animated-hover:hover>.faa-shake.faa-slow,.faa-shake.animated-hover.faa-slow:hover,.faa-shake.animated.faa-slow{-webkit-animation:wrench 3.7s ease infinite;animation:wrench 3.7s ease infinite}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-8deg);transform:scale(.9) rotate(-8deg)}30%,50%,70%{-webkit-transform:scale(1.3) rotate(8deg);transform:scale(1.3) rotate(8deg)}40%,60%{-webkit-transform:scale(1.3) rotate(-8deg);transform:scale(1.3) rotate(-8deg)}100%,80%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}@keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-8deg);transform:scale(.9) rotate(-8deg)}30%,50%,70%{-webkit-transform:scale(1.3) rotate(8deg);transform:scale(1.3) rotate(8deg)}40%,60%{-webkit-transform:scale(1.3) rotate(-8deg);transform:scale(1.3) rotate(-8deg)}100%,80%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}.faa-parent.animated-hover:hover>.faa-tada,.faa-tada.animated,.faa-tada.animated-hover:hover{-webkit-animation:tada 2s linear infinite;animation:tada 2s linear infinite}.faa-parent.animated-hover:hover>.faa-tada.faa-fast,.faa-tada.animated-hover.faa-fast:hover,.faa-tada.animated.faa-fast{-webkit-animation:tada 1s linear infinite;animation:tada 1s linear infinite}.faa-parent.animated-hover:hover>.faa-tada.faa-slow,.faa-tada.animated-hover.faa-slow:hover,.faa-tada.animated.faa-slow{-webkit-animation:tada 3s linear infinite;animation:tada 3s linear infinite}@-webkit-keyframes passing{0%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}50%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}}@keyframes passing{0%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}50%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}}.faa-parent.animated-hover:hover>.faa-passing,.faa-passing.animated,.faa-passing.animated-hover:hover{-webkit-animation:passing 2s linear infinite;animation:passing 2s linear infinite}.faa-parent.animated-hover:hover>.faa-passing.faa-fast,.faa-passing.animated-hover.faa-fast:hover,.faa-passing.animated.faa-fast{-webkit-animation:passing 1s linear infinite;animation:passing 1s linear infinite}.faa-parent.animated-hover:hover>.faa-passing.faa-slow,.faa-passing.animated-hover.faa-slow:hover,.faa-passing.animated.faa-slow{-webkit-animation:passing 3s linear infinite;animation:passing 3s linear infinite}@-webkit-keyframes passing-reverse{0%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}50%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}}@keyframes passing-reverse{0%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}50%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}}.faa-parent.animated-hover:hover>.faa-passing-reverse,.faa-passing-reverse.animated,.faa-passing-reverse.animated-hover:hover{-webkit-animation:passing-reverse 2s linear infinite;animation:passing-reverse 2s linear infinite}.faa-parent.animated-hover:hover>.faa-passing-reverse.faa-fast,.faa-passing-reverse.animated-hover.faa-fast:hover,.faa-passing-reverse.animated.faa-fast{-webkit-animation:passing-reverse 1s linear infinite;animation:passing-reverse 1s linear infinite}.faa-parent.animated-hover:hover>.faa-passing-reverse.faa-slow,.faa-passing-reverse.animated-hover.faa-slow:hover,.faa-passing-reverse.animated.faa-slow{-webkit-animation:passing-reverse 3s linear infinite;animation:passing-reverse 3s linear infinite}@-webkit-keyframes burst{0%{opacity:.6}50%{-webkit-transform:scale(1.8);transform:scale(1.8);opacity:0}100%{opacity:0}}@keyframes burst{0%{opacity:.6}50%{-webkit-transform:scale(1.8);transform:scale(1.8);opacity:0}100%{opacity:0}}.faa-burst.animated,.faa-burst.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-burst{-webkit-animation:burst 2s infinite linear;animation:burst 2s infinite linear}.faa-burst.animated-hover.faa-fast:hover,.faa-burst.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-burst.faa-fast{-webkit-animation:burst 1s infinite linear;animation:burst 1s infinite linear}.faa-burst.animated-hover.faa-slow:hover,.faa-burst.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-burst.faa-slow{-webkit-animation:burst 3s infinite linear;animation:burst 3s infinite linear}@-webkit-keyframes falling{0%{-webkit-transform:translateY(-50%);transform:translateY(-50%);opacity:0}50%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(50%);transform:translateY(50%);opacity:0}}@keyframes falling{0%{-webkit-transform:translateY(-50%);transform:translateY(-50%);opacity:0}50%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(50%);transform:translateY(50%);opacity:0}}.faa-falling.animated,.faa-falling.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-falling{-webkit-animation:falling 2s linear infinite;animation:falling 2s linear infinite}.faa-falling.animated-hover.faa-fast:hover,.faa-falling.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-falling.faa-fast{-webkit-animation:falling 1s linear infinite;animation:falling 1s linear infinite}.faa-falling.animated-hover.faa-slow:hover,.faa-falling.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-falling.faa-slow{-webkit-animation:falling 3s linear infinite;animation:falling 3s linear infinite}@-webkit-keyframes rising{0%{-webkit-transform:translateY(50%);transform:translateY(50%);opacity:0}50%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-50%);transform:translateY(-50%);opacity:0}}@keyframes rising{0%{-webkit-transform:translateY(50%);transform:translateY(50%);opacity:0}50%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-50%);transform:translateY(-50%);opacity:0}}.faa-parent.animated-hover:hover>.faa-rising,.faa-rising.animated,.faa-rising.animated-hover:hover{-webkit-animation:rising 2s linear infinite;animation:rising 2s linear infinite}.faa-parent.animated-hover:hover>.faa-rising.faa-fast,.faa-rising.animated-hover.faa-fast:hover,.faa-rising.animated.faa-fast{-webkit-animation:rising 1s linear infinite;animation:rising 1s linear infinite}.faa-parent.animated-hover:hover>.faa-rising.faa-slow,.faa-rising.animated-hover.faa-slow:hover,.faa-rising.animated.faa-slow{-webkit-animation:rising 3s linear infinite;animation:rising 3s linear infinite}
\ No newline at end of file
diff --git a/butterfly/source/css/index.styl b/butterfly/source/css/index.styl
new file mode 100644
index 0000000..ddc84fe
--- /dev/null
+++ b/butterfly/source/css/index.styl
@@ -0,0 +1,19 @@
+@import 'nib'
+@import '_third-party/*.css'
+// project
+@import 'var'
+@import '_global/*'
+@import '_highlight/highlight'
+@import '_page/*'
+@import '_layout/*'
+@import '_tags/*'
+@import '_mode/*'
+
+// search
+if hexo-config('algolia_search.enable')
+  @import '_search/index'
+  @import '_search/algolia'
+
+if hexo-config('local_search') && hexo-config('local_search.enable')
+  @import '_search/index'
+  @import '_search/local-search'
diff --git a/butterfly/source/js/issues.js b/butterfly/source/js/issues.js
new file mode 100644
index 0000000..cbfbf33
--- /dev/null
+++ b/butterfly/source/js/issues.js
@@ -0,0 +1,186 @@
+const IssuesAPI = {
+  requestIssuesAPI(url, callback, timeout) {
+    let retryTimes = 10;
+    function request() {
+      return new Promise((resolve, reject) => {
+        let status = 0; // 0 等待 1 完成 2 超时
+        let timer = setTimeout(() => {
+          if (status === 0) {
+            status = 2;
+            timer = null;
+            reject("请求超时");
+            if (retryTimes == 0) {
+              timeout();
+            }
+          }
+        }, 5000);
+        fetch(url).then(function(response) {
+          if (status !== 2) {
+            clearTimeout(timer);
+            resolve(response);
+            timer = null;
+            status = 1;
+          }
+          if(response.ok) {
+            return response.json();
+          }
+          throw new Error('Network response was not ok.');
+        }).then(function(data) {
+          retryTimes = 0;
+          callback(data);
+        }).catch(function(error) {
+          if (retryTimes > 0) {
+            retryTimes -= 1;
+            setTimeout(() => {
+              request();
+            }, 5000);
+          } else {
+            timeout();
+          }
+        });
+      });
+    }
+    request();
+  },
+  parseIssueStrToJson(str) {
+    let jsonStr = str.match(/```json[\s|\S]*```/);
+    if (jsonStr && jsonStr.length > 0) {
+      jsonStr = jsonStr[0];
+    }
+    if (jsonStr) {
+      jsonStr = jsonStr.split('```json')[1].split('```')[0];
+      if (jsonStr) {
+        return JSON.parse(jsonStr);
+      }
+    }
+    return undefined;
+  },
+  groupIssuesData(cfg, data) {
+    var groups = new Object();
+    if (data.length > 0) {
+      if (cfg.group != undefined) {
+        let arr = cfg.group.split(':');
+        if (arr.length > 1) {
+          let groupKey = arr[0];
+          let groupList = arr[1];
+          if (groupKey && groupList) {
+            groupList = groupList.split(',');
+          }
+          cfg.group = groupList;
+          for (i = 0; i < data.length; i++) {
+            let obj = this.parseIssueStrToJson(data[i].body);
+            if (obj && (groupKey in obj)) {
+              let tmp = obj[groupKey];
+              tmp = tmp.replace(', ', ',').split(',');
+              for (var j = 0; j < tmp.length; j++) {
+                if (groupList.includes(tmp[j])) {
+                  let arr = groups[tmp[j]];
+                  if (arr == undefined) {
+                    arr = new Array();
+                  }
+                  arr.push(obj);
+                  groups[tmp[j]] = arr;
+                }
+              }
+            }
+          }
+        }
+      } else {
+        cfg.group = [''];
+        for (i = 0; i < data.length; i++) {
+          let obj = this.parseIssueStrToJson(data[i].body);
+          if (obj) {
+            let arr = groups[''];
+            if (arr == undefined) {
+              arr = new Array();
+            }
+            arr.push(obj);
+            groups[''] = arr;
+          }
+        }
+      }
+    }
+    return groups;
+  },
+  getIssuesAPIForSites(cfg) {
+    let el = $(cfg.el)[0];
+    $(el).append('<div class="loading"><i class="fa fa-cog fa-2x fa-spin"></i><p>正在加载</p></div>');
+    this.requestIssuesAPI(cfg.api, function(data){
+      $(el).find('.loading').remove();
+      let dt = IssuesAPI.groupIssuesData(cfg, data);
+      let groupTitles = Object.keys(dt);
+      cfg.group.forEach((groupTitle, i) => {
+        let issues = dt[groupTitle];
+        if (issues && issues.length > 0) {
+          if (groupTitle.length > 0) {
+            $(el).append('<h2>' + groupTitle + '</h2>');
+          } else if (name == '' && groupTitles.length > 1) {
+            $(el).append('<h2>' + '未分组' + '</h2>');
+          }
+          $(el).append('<div class="site-card-group ' + i + '"></div>');
+          // layout items
+          for (j = 0; j < issues.length; j++) {
+            let issue = issues[j];
+            let imgTag = '';
+            if (issue.screenshot && issue.screenshot.length > 0) {
+              imgTag = '<div class="img"><img src="' + issue.screenshot + '" onerror="javascript:this.src=\'https://image.thum.io/get/width/1024/crop/768/' + issue.url + '\';"/></div>';
+            } else {
+              imgTag = '<div class="img"></div>';
+            }
+            let infoTag = '<div class="info">';
+            if (issue.avatar && issue.avatar.length > 0) {
+              infoTag += '<img src="' + issue.avatar + '" onerror="javascript:this.src=\'https://image.thum.io/get/width/1024/crop/768/' + issue.url + '\';"/>';
+            }
+            infoTag += '<span class="title">' + issue.title + '</span><span class="desc">' + issue.description + '</span></div>';
+            let cardTag = "<a class='site-card' target='_blank' href='" + issue.url + "'>" + imgTag + infoTag + "</a>";
+            $(el).find('.site-card-group.' + i).append(cardTag);
+          }
+        }
+      });
+    }, function() {
+      $(el).find('.loading i').remove();
+      $(el).find('.loading p').text('加载失败，请稍后重试。');
+    });
+  },
+  getIssuesAPIForTimeline(cfg) {
+    let el = $(cfg.el)[0];
+    $(el).append('<div class="loading"><i class="fa fa-cog fa-2x fa-spin"></i><p>正在加载</p></div>');
+    this.requestIssuesAPI(cfg.api, function(data){
+      $(el).find('.loading').remove();
+      if (data.length > 0) {
+        for (i = 0; i < data.length; i++) {
+          let a = '&nbsp;&nbsp;<a class="comments" target="_blank" href="' + data[i].html_url + '"><i class="fa fa-comment-dots fa-fw"></i>' + data[i].comments + '</a>';
+          let meta = '<div class="meta"><p></p><p>' + data[i].title + a + '</p><p></p></div>';
+          let body = '<div class="body"><p>' + data[i].body + '</p></div>';
+          let tag = '<div class="timenode">' + meta + body + '</div>';
+          $(el).append(tag);
+        }
+      }
+    }, function() {
+      $(el).find('.loading i').remove();
+      $(el).find('.loading p').text('加载失败，请稍后重试。');
+    });
+  },
+  request() {
+    let els = document.getElementsByClassName('issues-api');
+    for (var i = 0; i < els.length; i++) {
+      let el = els[i];
+      let api = el.getAttribute('api');
+      let group = el.getAttribute('group');
+      var cfg = new Object();
+      cfg.class = el.getAttribute('class');
+      cfg.el = el;
+      cfg.api = api;
+      cfg.group = group;
+      if (cfg.class.split(' ').includes('sites')) {
+        this.getIssuesAPIForSites(cfg);
+      } else if (cfg.class.split(' ').includes('timeline')) {
+        this.getIssuesAPIForTimeline(cfg);
+      }
+    }
+  }
+};
+IssuesAPI.request();
+document.addEventListener('pjax:complete', function () {
+  IssuesAPI.request();
+});