diff --git a/README.md b/README.md
index fac6714..3c590d4 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,8 @@ Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) t
 
 ### GIT
 
+> If you are in Mainland China, you can download in [Gitee](https://gitee.com/iamjerryw/hexo-theme-butterfly)
+
 Stable branch [recommend]:
 
 ```
diff --git a/README_CN.md b/README_CN.md
index b8b7890..1dbdc37 100644
--- a/README_CN.md
+++ b/README_CN.md
@@ -17,6 +17,8 @@
 
 ### Git 安裝
 
+> 本倉庫同時上傳到 [Gitee](https://gitee.com/iamjerryw/hexo-theme-butterfly)，如果你訪問 Github 緩慢，可從 Gitee 中下載。
+
 在博客根目錄裡安裝穩定版【推薦】
 
 ```powershell
diff --git a/_config.yml b/_config.yml
index dc440d1..eb95739 100644
--- a/_config.yml
+++ b/_config.yml
@@ -510,8 +510,8 @@ canvas_ribbon:
   click_to_change: false
   mobile: false
 
-# Dynamic ribbon (動態彩帶)
-canvas_ribbon_piao:
+# Fluttering Ribbon (動態彩帶)
+canvas_fluttering_ribbon:
   enable: false
   mobile: false
 
@@ -531,14 +531,18 @@ activate_power_mode:
   enable: false
   colorful: true # open particle animation (冒光特效)
   shake: true #  open shake (抖動特效)
+  mobile: false
 
 # Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
 fireworks:
   enable: false
   zIndex: 9999 # -1 or 9999
+  mobile: false
 
 # Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
-click_heart: false
+click_heart:
+  enable: false
+  mobile: false
 
 # Mouse click effects: words (鼠標點擊效果: 文字)
 ClickShowText:
@@ -548,6 +552,7 @@ ClickShowText:
     # - LOVE
     # - YOU
   fontSize: 15px
+  mobile: false
 
 # Default display mode (網站默認的顯示模式)
 # light (default) / dark
@@ -862,9 +867,9 @@ CDN:
   busuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
 
   # background effect
-  canvas_ribbon: /js/third-party/canvas-ribbon.js
-  canvas_ribbon_piao: /js/third-party/piao.js
-  canvas_nest: /js/third-party/canvas-nest.js
+  canvas_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js
+  canvas_fluttering_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js
+  canvas_nest: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js
 
   lazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js
   instantpage: https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js
@@ -881,11 +886,10 @@ CDN:
   snackbar: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js
 
   # effect
-  anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js
-  activate_power_mode: /js/third-party/activate-power-mode.js
-  fireworks: /js/third-party/fireworks.js
-  click_heart: /js/third-party/click_heart.js
-  ClickShowText: /js/third-party/ClickShowText.js
+  activate_power_mode: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js
+  fireworks: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js
+  click_heart: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js
+  ClickShowText: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js
 
   # fontawesome
   fontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css
diff --git a/layout/includes/third-party/comments/valine.pug b/layout/includes/third-party/comments/valine.pug
index f2bf9e9..ac7e3d1 100644
--- a/layout/includes/third-party/comments/valine.pug
+++ b/layout/includes/third-party/comments/valine.pug
@@ -5,7 +5,7 @@ if site.data.valine
 script.
   function loadValine () {
     function initValine () {
-      window.valine = new Valine({
+      const initData = {
         el: '#vcomment',
         appId: '#{theme.valine.appId}',
         appKey: '#{theme.valine.appKey}',
@@ -20,8 +20,13 @@ script.
         emojiMaps: !{emojiMaps},
         enableQQ: #{theme.valine.enableQQ},
         path: window.location.pathname,
-      });
-      if ('#{theme.valine.requiredFields}') { valine.config.requiredFields= '#{theme.valine.requiredFields}'.split(',') }
+      }
+
+      if (!{Boolean(theme.valine.requiredFields)}) { 
+        initData.requiredFields= ('!{theme.valine.requiredFields}'.split(','))
+      }
+
+      const valine = new Valine(initData)
     }
 
     if (typeof Valine === 'function') initValine() 
diff --git a/layout/includes/third-party/effect.pug b/layout/includes/third-party/effect.pug
index 0a6d527..9cd4051 100644
--- a/layout/includes/third-party/effect.pug
+++ b/layout/includes/third-party/effect.pug
@@ -1,14 +1,13 @@
 if theme.fireworks && theme.fireworks.enable
-  canvas.fireworks
-  script(src=url_for(theme.CDN.anime))
+  canvas.fireworks(mobile=`${theme.fireworks.mobile}`)
   script(src=url_for(theme.CDN.fireworks))
 
 if (theme.canvas_ribbon && theme.canvas_ribbon.enable)
   script(defer id="ribbon" src=url_for(theme.CDN.canvas_ribbon) size=theme.canvas_ribbon.size
   alpha=theme.canvas_ribbon.alpha zIndex=theme.canvas_ribbon.zIndex mobile=`${theme.canvas_ribbon.mobile}` data-click=`${theme.canvas_ribbon.click_to_change}`)
 
-if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable)
-  script(defer id="ribbon_piao" mobile=`${theme.canvas_ribbon_piao.mobile}` src=url_for(theme.CDN.canvas_ribbon_piao))
+if (theme.canvas_fluttering_ribbon && theme.canvas_fluttering_ribbon.enable)
+  script(defer id="fluttering_ribbon" mobile=`${theme.canvas_fluttering_ribbon.mobile}` src=url_for(theme.CDN.canvas_fluttering_ribbon))
 
 if (theme.canvas_nest && theme.canvas_nest.enable)
   script#canvas_nest(defer color=theme.canvas_nest.color opacity=theme.canvas_nest.opacity zIndex=theme.canvas_nest.zIndex count=theme.canvas_nest.count mobile=`${theme.canvas_nest.mobile}` src=url_for(theme.CDN.canvas_nest))
@@ -18,11 +17,12 @@ if theme.activate_power_mode.enable
   script.
     POWERMODE.colorful = !{theme.activate_power_mode.colorful};
     POWERMODE.shake = !{theme.activate_power_mode.shake};
+    POWERMODE.mobile = !{theme.activate_power_mode.mobile};
     document.body.addEventListener('input', POWERMODE);
 
 //- 鼠標特效
-if theme.click_heart
-  script(src=url_for(theme.CDN.click_heart) async)
+if theme.click_heart && theme.click_heart.enable
+  script#click-heart(src=url_for(theme.CDN.click_heart) async mobile=`${theme.click_heart.mobile}`)
 
 if theme.ClickShowText && theme.ClickShowText.enable
-  script(src=url_for(theme.CDN.ClickShowText) async)
+  script#click-show-text(src=url_for(theme.CDN.ClickShowText) async mobile=`${theme.ClickShowText.mobile}`)
diff --git a/layout/includes/third-party/newest-comments/disqus-comment.pug b/layout/includes/third-party/newest-comments/disqus-comment.pug
index 334f352..e1d192a 100644
--- a/layout/includes/third-party/newest-comments/disqus-comment.pug
+++ b/layout/includes/third-party/newest-comments/disqus-comment.pug
@@ -38,7 +38,7 @@ script.
         result += '<div class=\'aside-list-item\'>'
 
         if (!{theme.newest_comments.avatar}) {
-          result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}'></a>`
+          result += `<a href='${array[i].url}' class='thumbnail'><img src='${array[i].avatar}' alt='${array[i].nick}'></a>`
         }
         
         result += `<div class='content'>
diff --git a/layout/includes/third-party/newest-comments/github-issues.pug b/layout/includes/third-party/newest-comments/github-issues.pug
index 572cf0d..84b13f2 100644
--- a/layout/includes/third-party/newest-comments/github-issues.pug
+++ b/layout/includes/third-party/newest-comments/github-issues.pug
@@ -37,7 +37,7 @@ script.
         result += '<div class=\'aside-list-item\'>'
 
         if (!{theme.newest_comments.avatar}) {
-          result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}'></a>`
+          result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}' alt='${array[i].nick}'></a>`
         }
 
         result += `<div class='content'>
diff --git a/layout/includes/third-party/newest-comments/leancloud.pug b/layout/includes/third-party/newest-comments/leancloud.pug
index fc927d2..968ac1e 100644
--- a/layout/includes/third-party/newest-comments/leancloud.pug
+++ b/layout/includes/third-party/newest-comments/leancloud.pug
@@ -28,7 +28,7 @@ script.
         result += '<div class=\'aside-list-item\'>'
 
         if (!{theme.newest_comments.avatar}) {
-          result += `<a href='${array[i].url}' class="thumbnail"><img src='${getIcon(array[i].avatar, array[i].mail)}'></a>`
+          result += `<a href='${array[i].url}' class="thumbnail"><img src='${getIcon(array[i].avatar, array[i].mail)}' alt='${array[i].nick}'></a>`
         }
 
         result += `<div class='content'>
diff --git a/package.json b/package.json
index 8ea7c96..d66d9a5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.2.0-b1",
+  "version": "3.2.0-b2",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
diff --git a/scripts/tags/note.js b/scripts/tags/note.js
index 61bc5a6..ec4e8b5 100644
--- a/scripts/tags/note.js
+++ b/scripts/tags/note.js
@@ -1,12 +1,26 @@
 /**
  * note.js
  * transplant from hexo-theme-next
+ * Modify by Jerry
  */
 
 'use strict'
 
 function postNote (args, content) {
-  return `<div class="note ${args.join(' ')}">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div>`
+  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 })
diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl
index 629b1e6..7d33366 100644
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -226,6 +226,10 @@ _:future,
     #menus
       padding-right: 0 !important
 
+  &.show
+    opacity: 1
+    animation: headerNoOpacity 1s
+
   #blog_name
     flex: 1
 
diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl
index 41c5c43..b02b484 100644
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -1,32 +1,32 @@
 if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
   [data-theme='dark']
     --global-bg: darken(#121212, 2)
-    --font-color: alpha(#FFFFFF, .6)
-    --hr-border: alpha(#FFFFFF, .3)
-    --hr-before-color: alpha(#FFFFFF, .6)
+    --font-color: alpha(#FFFFFF, .7)
+    --hr-border: alpha(#FFFFFF, .4)
+    --hr-before-color: alpha(#FFFFFF, .7)
     --search-bg: #121212
-    --search-input-color: alpha(#FFFFFF, .6)
-    --search-result-title: alpha(#FFFFFF, .8)
+    --search-input-color: alpha(#FFFFFF, .7)
+    --search-result-title: alpha(#FFFFFF, .9)
     --preloader-bg: darken(#121212, 2)
-    --preloader-color: alpha(#FFFFFF, .6)
+    --preloader-color: alpha(#FFFFFF, .7)
     --tab-border-color: #2c2c2c
     --tab-botton-bg: #2c2c2c
-    --tab-botton-color: alpha(#FFFFFF, .6)
+    --tab-botton-color: alpha(#FFFFFF, .7)
     --tab-button-hover-bg: lighten(#121212, 15)
     --tab-button-active-bg: #121212
     --card-bg: #121212
     --sidebar-bg: #121212
     --btn-hover-color: lighten(#121212, 40)
-    --btn-color: alpha(#FFFFFF, .6)
+    --btn-color: alpha(#FFFFFF, .7)
     --btn-bg: lighten(#121212, 5)
     --text-bg-hover: lighten(#121212, 15)
-    --light-grey: alpha(#FFFFFF, .6)
-    --white: alpha(#FFFFFF, .8)
-    --text-highlight-color: alpha(#FFFFFF, .8)
-    --blockquote-color: alpha(#FFFFFF, .6)
+    --light-grey: alpha(#FFFFFF, .7)
+    --white: alpha(#FFFFFF, .9)
+    --text-highlight-color: alpha(#FFFFFF, .9)
+    --blockquote-color: alpha(#FFFFFF, .7)
     --blockquote-bg: lighten(#121212, 10)
     --reward-pop: lighten(#121212, 10)
-    --sidebar-icon-color: alpha(#FFFFFF, .6)
+    --sidebar-icon-color: alpha(#FFFFFF, .7)
 
     // 網站背景，footer背景
     #web_bg[data-type=color]
@@ -76,7 +76,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
       pre,
       .highlight:not(.js-file-line-container)
         background-color: lighten(#121212, 2) !important
-        color: alpha(#FFFFFF, .6) !important
+        color: alpha(#FFFFFF, .7) !important
 
       figure.highlight
         box-shadow: none
@@ -86,7 +86,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
             background: lighten(#121212, 5)
 
           .line:before
-            color: alpha(#FFFFFF, .6) !important
+            color: alpha(#FFFFFF, .7) !important
 
           .hljs
             background-color: lighten(#121212, 2) !important
@@ -104,12 +104,12 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
           background: #2c2c2c !important
 
         label
-          filter: brightness(.7)
+          filter: brightness(.8)
 
     // note
     if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
       .note
-        filter: brightness(.7)
+        filter: brightness(.8)
 
     // hide-tags
     .hide-button,
@@ -121,7 +121,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     img,
     .gist,
     .aplayer
-      filter: brightness(.7)
+      filter: brightness(.8)
 
     #aside_content .aside-list > .aside-list-item:not(:last-child)
       border-bottom: 1px dashed alpha(#FFFFFF, .1)
@@ -131,7 +131,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     #hexo-blog-encrypt
       label,
       input
-        color: alpha(#FFFFFF, .6) !important
+        color: alpha(#FFFFFF, .7) !important
 
       input
         background-color: #121212
@@ -141,24 +141,24 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
       filter: brightness(.8)
 
       svg
-        fill: alpha(#FFFFFF, .8) !important
+        fill: alpha(#FFFFFF, .9) !important
 
     // Disqus and Disqusjs
     #disqus_thread
       #dsqjs
         .dsqjs-tab-active,
         .dsqjs-no-comment
-          color: alpha(#FFFFFF, .6)
+          color: alpha(#FFFFFF, .7)
 
         .dsqjs-order-label
           background-color: lighten(#121212, 5)
 
         .dsqjs-post-body
-          color: alpha(#FFFFFF, .6)
+          color: alpha(#FFFFFF, .7)
 
           code,
           pre
             background: #2c2c2c
 
           blockquote
-            color: alpha(#FFFFFF, .6)
+            color: alpha(#FFFFFF, .7)
diff --git a/source/css/_tags/button.styl b/source/css/_tags/button.styl
index 17ebd64..79cceed 100644
--- a/source/css/_tags/button.styl
+++ b/source/css/_tags/button.styl
@@ -32,9 +32,9 @@
     &:hover
       text-decoration: none
 
-    for $type in $btn-types
+    for $type in $tagsP-types
       &.{$type}
-        background-color: lookup('$btn-' + $type + '-color')
+        background-color: lookup('$tagsP-' + $type + '-color')
 
     &.outline
       border: 1px solid transparent
@@ -49,10 +49,10 @@
       &:hover
         color: white !important
 
-      for $type in $btn-types
+      for $type in $tagsP-types
         &.{$type}
-          border-color: lookup('$btn-' + $type + '-color')
-          color: lookup('$btn-' + $type + '-color')
+          border-color: lookup('$tagsP-' + $type + '-color')
+          color: lookup('$tagsP-' + $type + '-color')
 
           &.button--animated:before
-            background: lookup('$btn-' + $type + '-color')
+            background: lookup('$tagsP-' + $type + '-color')
diff --git a/source/css/_tags/note.styl b/source/css/_tags/note.styl
index d0270ac..a9f46b1 100644
--- a/source/css/_tags/note.styl
+++ b/source/css/_tags/note.styl
@@ -1,28 +1,51 @@
 .note
   $note-icons = hexo-config('note.icons')
-  $note-style = hexo-config('note.style')
   position: relative
   margin: 0 0 1rem
   padding: 15px
 
-  if ($note-style == 'simple')
+  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'), 80%) !important
+
+      & > .note-icon
+        color: lookup('$tagsP-' + $type + '-color')
+
+  &.simple
     border: 1px solid #EEEEEE
     border-left-width: 5px
 
-  if ($note-style == 'modern')
-    border: 1px solid transparent
+  &.modern
+    border: 1px solid transparent !important
     background-color: #f5f5f5
     color: $font-black
 
-  if ($note-style == 'flat')
+  &.flat
     border: initial
     border-left: 5px solid #EEEEEE
     background-color: lighten(#EEEEEE, 65%)
     color: $font-black
 
-  if hexo-config('note.border_radius') is a 'unit'
-    border-radius: unit(hexo-config('note.border_radius'), px)
-
   h2,
   h3,
   h4,
@@ -52,21 +75,21 @@
 
   if $note-icons
     &:not(.no-icon)
-      padding-left: 45px
+      padding-left: 2.25rem
 
       &::before
         position: absolute
-        top: 13px
-        left: 15px
+        top: calc(50% - .8rem)
+        left: .7rem
         font-size: larger
         @extend .fontawesomeIcon
 
   for $type in $note-types
     &.{$type}
-      if ($note-style == 'flat')
+      &.flat
         background: lookup('$note-' + $type + '-bg')
 
-      if ($note-style == 'modern')
+      &.modern
         border-color: lookup('$note-modern-' + $type + '-border')
         background: lookup('$note-modern-' + $type + '-bg')
         color: lookup('$note-modern-' + $type + '-text')
@@ -78,7 +101,7 @@
             &:hover
               color: lookup('$note-modern-' + $type + '-hover')
 
-      if ($note-style != 'modern')
+      &:not(.modern)
         border-left-color: lookup('$note-' + $type + '-border')
 
         h2,
@@ -89,8 +112,10 @@
           color: lookup('$note-' + $type + '-text')
 
       if $note-icons
-        &:not(.no-icon)::before
-          content: lookup('$note-' + $type + '-icon')
+        &:not(.no-icon)
+          &::before
+            content: lookup('$note-' + $type + '-icon')
 
-          if ($note-style != 'modern')
-            color: lookup('$note-' + $type + '-text')
+          &:not(.modern)
+            &::before
+              color: lookup('$note-' + $type + '-text')
diff --git a/source/css/var.styl b/source/css/var.styl
index 57a94d6..5664622 100644
--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -160,16 +160,16 @@ $note-modern-danger-border = #ebcdd2
 $note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4))
 $note-modern-danger-text = #a94442
 $note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
-// Tag Plugins - Button
-$btn-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
+// Tag Plugins - Button/note
+$tagsP-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
 $btn-color = #fff
 $btn-default-color = #777
-$btn-blue-color = #428bca
-$btn-pink-color = #FF69B4
-$btn-red-color = #FF0000
-$btn-orange-color = #FF8C00
-$btn-purple-color = #6f42c1
-$btn-green-color = #5cb85c
+$tagsP-blue-color = #428bca
+$tagsP-pink-color = #FF69B4
+$tagsP-red-color = #FF0000
+$tagsP-orange-color = #FF8C00
+$tagsP-purple-color = #6f42c1
+$tagsP-green-color = #5cb85c
 // Tag Plugins - Tab
 $tab-border-color = #f0f0f0
 $tab-botton-bg = #f0f0f0
diff --git a/source/js/main.js b/source/js/main.js
index 96c2fe2..ba98522 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -29,7 +29,7 @@ $(function () {
   const initAdjust = () => {
     if (window.innerWidth < 768) adjustMenu(0)
     else adjustMenu(2)
-    $('#nav').css({ opacity: '1', animation: 'headerNoOpacity 1s' })
+    $('#nav').addClass('show')
   }
 
   /**
@@ -725,20 +725,19 @@ $(function () {
     const $cardCategory = $('#aside-cat-list .card-category-list-item.parent i')
     $cardCategory.on('click', function (e) {
       e.preventDefault()
-      const $this = $(this)
-      $this.toggleClass('expand')
-      $this.parents('.parent').next().toggle()
+      $(this).toggleClass('expand').parents('.parent').next().slideToggle(300)
     })
   }
 
   const switchComments = function () {
     let switchDone = false
     $('#switch-comments-btn').on('click', function () {
-      $('#post-comment > .comment-wrap > div').each(function () {
-        if ($(this).is(':visible')) {
-          $(this).hide()
+      $('#post-comment > .comment-wrap > div').each(function (i, o) {
+        const $this = $(o)
+        if ($this.is(':visible')) {
+          $this.hide()
         } else {
-          $(this).css({
+          $this.css({
             display: 'block',
             animation: 'tabshow .5s'
           })
diff --git a/source/js/third-party/ClickShowText.js b/source/js/third-party/ClickShowText.js
deleted file mode 100644
index d17ac76..0000000
--- a/source/js/third-party/ClickShowText.js
+++ /dev/null
@@ -1,42 +0,0 @@
-function co(){
-  var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
-    var colorArray = colorElements.split(",");
-    var color ="#";
-    for(var i =0;i<6;i++){
-    color+=colorArray[Math.floor(Math.random()*16)];
-    }
-    return color;
-};
-var a_idx = 0;
-jQuery(document).ready(function($) {
-  $("body").click(function (e) {
-  
-    var config = GLOBAL_CONFIG.ClickShowText;
-    
-    /*这个数组中的每一个字符是你要浮动显示的词或句子，每次点击鼠标后按顺序出现*/
-    var a = config.text.split(",");
-    var $i = $("<span/>").text(a[a_idx]);
-    a_idx = (a_idx + 1) % a.length;
-    var x = e.pageX,
-    y = e.pageY;
-    $i.css({
-  "z-index": 150,
-  "top": y - 20,
-  "left": x -40,
-  "position": "absolute",
-  "font-weight": "bold",
-  "color": co(),
-  "cursor": "default",
-  "font-size": config.fontSize || "inherit"
-    });
-    $("body").append($i);
-    $i.animate({
-  "top": y - 180,
-  "opacity": 0
-    },
-    1500,
-    function() {
-  $i.remove();
-    });
-});
-});
\ No newline at end of file
diff --git a/source/js/third-party/activate-power-mode.js b/source/js/third-party/activate-power-mode.js
deleted file mode 100644
index 975190b..0000000
--- a/source/js/third-party/activate-power-mode.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.POWERMODE=e():t.POWERMODE=e()}(this,(function(){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var r=e[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,o),r.loaded=!0,r.exports}return o.m=t,o.c=e,o.p="",o(0)}([function(t,e,o){"use strict";var n=document.createElement("canvas");n.width=window.innerWidth,n.height=window.innerHeight,n.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999",window.addEventListener("resize",(function(){n.width=window.innerWidth,n.height=window.innerHeight})),document.body.appendChild(n);var r=n.getContext("2d"),i=[],a=0,d=!1;function l(t,e){return Math.random()*(e-t)+t}function c(t){if(p.colorful){var e=l(0,360);return"hsla("+l(e-10,e+10)+", 100%, "+l(50,80)+"%, 1)"}return window.getComputedStyle(t).color}function u(t,e,o){return{x:t,y:e,alpha:1,color:o,velocity:{x:2*Math.random()-1,y:2*Math.random()-3.5}}}function p(){for(var t=function(){var t,e=document.activeElement;if("TEXTAREA"===e.tagName||"INPUT"===e.tagName&&"text"===e.getAttribute("type")){var n=o(1)(e,e.selectionEnd);return t=e.getBoundingClientRect(),{x:n.left+t.left,y:n.top+t.top,color:c(e)}}var r=window.getSelection();if(r.rangeCount){var i=r.getRangeAt(0),a=i.startContainer;return a.nodeType===document.TEXT_NODE&&(a=a.parentNode),{x:(t=i.getBoundingClientRect()).left,y:t.top,color:c(a)}}return{x:0,y:0,color:"transparent"}}(),e=5+Math.round(10*Math.random());e--;)i[a]=u(t.x,t.y,t.color),a=(a+1)%500;if(p.shake){var n=1+2*Math.random(),r=n*(Math.random()>.5?-1:1),l=n*(Math.random()>.5?-1:1);document.body.style.marginLeft=r+"px",document.body.style.marginTop=l+"px",setTimeout((function(){document.body.style.marginLeft="",document.body.style.marginTop=""}),75)}d||requestAnimationFrame(f)}function f(){d=!0,r.clearRect(0,0,n.width,n.height);for(var t=!1,e=n.getBoundingClientRect(),o=0;o<i.length;++o){var a=i[o];a.alpha<=.1||(a.velocity.y+=.075,a.x+=a.velocity.x,a.y+=a.velocity.y,a.alpha*=.96,r.globalAlpha=a.alpha,r.fillStyle=a.color,r.fillRect(Math.round(a.x-1.5)-e.left,Math.round(a.y-1.5)-e.top,3,3),t=!0)}t?requestAnimationFrame(f):d=!1}p.shake=!0,p.colorful=!1,t.exports=p},function(t,e){!function(){var e=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"],o=null!=window.mozInnerScreenX;function n(t,n,r){var i=r&&r.debug||!1;if(i){var a=document.querySelector("#input-textarea-caret-position-mirror-div");a&&a.parentNode.removeChild(a)}var d=document.createElement("div");d.id="input-textarea-caret-position-mirror-div",document.body.appendChild(d);var l=d.style,c=window.getComputedStyle?getComputedStyle(t):t.currentStyle;l.whiteSpace="pre-wrap","INPUT"!==t.nodeName&&(l.wordWrap="break-word"),l.position="absolute",i||(l.visibility="hidden"),e.forEach((function(t){l[t]=c[t]})),o?t.scrollHeight>parseInt(c.height)&&(l.overflowY="scroll"):l.overflow="hidden",d.textContent=t.value.substring(0,n),"INPUT"===t.nodeName&&(d.textContent=d.textContent.replace(/\s/g," "));var u=document.createElement("span");u.textContent=t.value.substring(n)||".",d.appendChild(u);var p={top:u.offsetTop+parseInt(c.borderTopWidth),left:u.offsetLeft+parseInt(c.borderLeftWidth)};return i?u.style.backgroundColor="#aaa":document.body.removeChild(d),p}void 0!==t&&void 0!==t.exports?t.exports=n:window.getCaretCoordinates=n}()}])}));
\ No newline at end of file
diff --git a/source/js/third-party/canvas-nest.js b/source/js/third-party/canvas-nest.js
deleted file mode 100644
index 62e1da7..0000000
--- a/source/js/third-party/canvas-nest.js
+++ /dev/null
@@ -1,83 +0,0 @@
-! function () {
-  var cn = document.getElementById('canvas_nest');
-  var mb = cn.getAttribute("mobile");
-
-  if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
-    return;
-  }
-
-  function o(w, v, i) {
-    return w.getAttribute(v) || i
-  }
-
-  function j(i) {
-    return document.getElementsByTagName(i)
-  }
-
-  function l() {
-    var v = cn;
-    return {
-      z: o(v, "zIndex", -1),
-      o: o(v, "opacity", 0.5),
-      c: o(v, "color", "0,0,0"),
-      n: o(v, "count", 99)
-    }
-  }
-
-  function k() {
-    r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
-  }
-
-  function b() {
-    e.clearRect(0, 0, r, n);
-    var w = [f].concat(t);
-    var x, v, A, B, z, y;
-    t.forEach(function (i) {
-      i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
-      for (v = 0; v < w.length; v++) {
-        x = w[v];
-        if (i !== x && null !== x.x && null !== x.y) {
-          B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
-          y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
-        }
-      }
-      w.splice(w.indexOf(i), 1)
-    }), m(b)
-  }
-  var u = document.createElement("canvas"),
-    s = l(),
-    e = u.getContext("2d"),
-    r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
-      window.setTimeout(i, 1000 / 45)
-    },
-    a = Math.random,
-    f = {
-      x: null,
-      y: null,
-      max: 20000
-    };
-  u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
-  j("body")[0].appendChild(u);
-  k(), window.onresize = k;
-  window.onmousemove = function (i) {
-    i = i || window.event, f.x = i.clientX, f.y = i.clientY
-  }, window.onmouseout = function () {
-    f.x = null, f.y = null
-  };
-  for (var t = [], p = 0; s.n > p; p++) {
-    var h = a() * r,
-      g = a() * n,
-      q = 2 * a() - 1,
-      d = 2 * a() - 1;
-    t.push({
-      x: h,
-      y: g,
-      xa: q,
-      ya: d,
-      max: 6000
-    })
-  }
-  setTimeout(function () {
-    b()
-  }, 100)
-}();
\ No newline at end of file
diff --git a/source/js/third-party/canvas-ribbon.js b/source/js/third-party/canvas-ribbon.js
deleted file mode 100644
index 6ed6535..0000000
--- a/source/js/third-party/canvas-ribbon.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright (c) 2016 hustcc
- * License: MIT
- * Version: v1.0.1
- * GitHub: https://github.com/hustcc/ribbon.js
- **/
-
-!(function() {
-  var script = document.getElementById("ribbon");
-  var mb = script.getAttribute("mobile");
-  if (
-    mb == "false" &&
-    /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)
-  ) {
-    return;
-  }
-
-  var config = {
-    z: attr(script, "zIndex", -1), // z-index
-    a: attr(script, "alpha", 0.6), // alpha
-    s: attr(script, "size", 90), // size
-    c: attr(script, "data-click", true) // click-to-change
-  };
-
-  function attr(node, attr, default_value) {
-    if (default_value === true) {
-      return node.getAttribute(attr) || default_value;
-    }
-    return Number(node.getAttribute(attr)) || default_value;
-  }
-
-  var canvas = document.createElement("canvas"),
-    g2d = canvas.getContext("2d"),
-    pr = window.devicePixelRatio || 1,
-    width = window.innerWidth,
-    height = window.innerHeight,
-    f = config.s,
-    q,
-    t,
-    m = Math,
-    r = 0,
-    pi = m.PI * 2,
-    cos = m.cos,
-    random = m.random;
-  canvas.id = "ribbon-canvas";
-  canvas.width = width * pr;
-  canvas.height = height * pr;
-  g2d.scale(pr, pr);
-  g2d.globalAlpha = config.a;
-  canvas.style.cssText =
-    "opacity: " +
-    config.a +
-    ";position:fixed;top:0;left:0;z-index: " +
-    config.z +
-    ";width:100%;height:100%;pointer-events:none;";
-  // create canvas
-  document.getElementsByTagName("body")[0].appendChild(canvas);
-
-  function redraw() {
-    g2d.clearRect(0, 0, width, height);
-    q = [
-      {
-        x: 0,
-        y: height * 0.7 + f
-      },
-      {
-        x: 0,
-        y: height * 0.7 - f
-      }
-    ];
-    while (q[1].x < width + f) draw(q[0], q[1]);
-  }
-
-  function draw(i, j) {
-    g2d.beginPath();
-    g2d.moveTo(i.x, i.y);
-    g2d.lineTo(j.x, j.y);
-    var k = j.x + (random() * 2 - 0.25) * f,
-      n = line(j.y);
-    g2d.lineTo(k, n);
-    g2d.closePath();
-    r -= pi / -50;
-    g2d.fillStyle =
-      "#" +
-      (
-        ((cos(r) * 127 + 128) << 16) |
-        ((cos(r + pi / 3) * 127 + 128) << 8) |
-        (cos(r + (pi / 3) * 2) * 127 + 128)
-      ).toString(16);
-    g2d.fill();
-    q[0] = q[1];
-    q[1] = {
-      x: k,
-      y: n
-    };
-  }
-
-  function line(p) {
-    t = p + (random() * 2 - 1.1) * f;
-    return t > height || t < 0 ? line(p) : t;
-  }
-  if (config.c !== "false") {
-    document.onclick = redraw;
-    document.ontouchstart = redraw;
-  }
-  redraw();
-})();
diff --git a/source/js/third-party/click_heart.js b/source/js/third-party/click_heart.js
deleted file mode 100644
index 21aeef9..0000000
--- a/source/js/third-party/click_heart.js
+++ /dev/null
@@ -1,73 +0,0 @@
-!(function(e, t, a) {
-  function r(e) {
-    var a = t.createElement("div");
-    (a.className = "heart"),
-      n.push({
-        el: a,
-        x: e.clientX - 5,
-        y: e.clientY - 5,
-        scale: 1,
-        alpha: 1,
-        color:
-          "rgb(" +
-          ~~(255 * Math.random()) +
-          "," +
-          ~~(255 * Math.random()) +
-          "," +
-          ~~(255 * Math.random()) +
-          ")"
-      }),
-      t.body.appendChild(a);
-  }
-  var n = [];
-  (e.requestAnimationFrame =
-    e.requestAnimationFrame ||
-    e.webkitRequestAnimationFrame ||
-    e.mozRequestAnimationFrame ||
-    e.oRequestAnimationFrame ||
-    e.msRequestAnimationFrame ||
-    function(e) {
-      setTimeout(e, 1e3 / 60);
-    }),
-    (function(e) {
-      var a = t.createElement("style");
-      a.type = "text/css";
-      try {
-        a.appendChild(t.createTextNode(e));
-      } catch (t) {
-        a.styleSheet.cssText = e;
-      }
-      t.getElementsByTagName("head")[0].appendChild(a);
-    })(
-      ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
-    ),
-    (function() {
-      var t = "function" == typeof e.onclick && e.onclick;
-      e.onclick = function(e) {
-        t && t(), r(e);
-      };
-    })(),
-    (function e() {
-      for (var a = 0; a < n.length; a++)
-        n[a].alpha <= 0
-          ? (t.body.removeChild(n[a].el), n.splice(a, 1))
-          : (n[a].y--,
-            (n[a].scale += 0.004),
-            (n[a].alpha -= 0.013),
-            (n[a].el.style.cssText =
-              "left:" +
-              n[a].x +
-              "px;top:" +
-              n[a].y +
-              "px;opacity:" +
-              n[a].alpha +
-              ";transform:scale(" +
-              n[a].scale +
-              "," +
-              n[a].scale +
-              ") rotate(45deg);background:" +
-              n[a].color +
-              ";z-index:99999"));
-      requestAnimationFrame(e);
-    })();
-})(window, document);
diff --git a/source/js/third-party/fireworks.js b/source/js/third-party/fireworks.js
deleted file mode 100644
index 7811dc1..0000000
--- a/source/js/third-party/fireworks.js
+++ /dev/null
@@ -1,129 +0,0 @@
-var canvasEl = document.querySelector('.fireworks')
-if (canvasEl) {
-  var ctx = canvasEl.getContext('2d')
-  var numberOfParticules = 30
-  var pointerX = 0
-  var pointerY = 0
-  // var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown'
-  // Fixed the mobile scroll
-  var tap = 'mousedown'
-  var colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
-
-  var setCanvasSize = btf.debounce(function () {
-    canvasEl.width = window.innerWidth
-    canvasEl.height = window.innerHeight
-    canvasEl.style.width = window.innerWidth + 'px'
-    canvasEl.style.height = window.innerHeight + 'px'
-    canvasEl.getContext('2d').scale(1, 1)
-  }, 500)
-
-  var render = anime({
-    duration: Infinity,
-    update: function () {
-      ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
-    }
-  })
-
-  document.addEventListener(tap, function (e) {
-    if (e.target.id !== 'sidebar' && e.target.id !== 'toggle-sidebar' && e.target.nodeName !== 'A' && e.target.nodeName !== 'IMG') {
-      render.play()
-      updateCoords(e)
-      animateParticules(pointerX, pointerY)
-    }
-  }, false)
-
-  setCanvasSize()
-  window.addEventListener('resize', setCanvasSize, false)
-}
-
-function updateCoords (e) {
-  pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left
-  pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
-}
-
-function setParticuleDirection (p) {
-  var angle = anime.random(0, 360) * Math.PI / 180
-  var value = anime.random(50, 180)
-  var radius = [-1, 1][anime.random(0, 1)] * value
-  return {
-    x: p.x + radius * Math.cos(angle),
-    y: p.y + radius * Math.sin(angle)
-  }
-}
-
-function createParticule (x, y) {
-  var p = {}
-  p.x = x
-  p.y = y
-  p.color = colors[anime.random(0, colors.length - 1)]
-  p.radius = anime.random(16, 32)
-  p.endPos = setParticuleDirection(p)
-  p.draw = function () {
-    ctx.beginPath()
-    ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
-    ctx.fillStyle = p.color
-    ctx.fill()
-  }
-  return p
-}
-
-function createCircle (x, y) {
-  var p = {}
-  p.x = x
-  p.y = y
-  p.color = '#F00'
-  p.radius = 0.1
-  p.alpha = 0.5
-  p.lineWidth = 6
-  p.draw = function () {
-    ctx.globalAlpha = p.alpha
-    ctx.beginPath()
-    ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
-    ctx.lineWidth = p.lineWidth
-    ctx.strokeStyle = p.color
-    ctx.stroke()
-    ctx.globalAlpha = 1
-  }
-  return p
-}
-
-function renderParticule (anim) {
-  for (var i = 0; i < anim.animatables.length; i++) {
-    anim.animatables[i].target.draw()
-  }
-}
-
-function animateParticules (x, y) {
-  var circle = createCircle(x, y)
-  var particules = []
-  for (var i = 0; i < numberOfParticules; i++) {
-    particules.push(createParticule(x, y))
-  }
-  anime.timeline().add({
-    targets: particules,
-    x: function (p) {
-      return p.endPos.x
-    },
-    y: function (p) {
-      return p.endPos.y
-    },
-    radius: 0.1,
-    duration: anime.random(1200, 1800),
-    easing: 'easeOutExpo',
-    update: renderParticule
-  })
-    .add({
-      targets: circle,
-      radius: anime.random(80, 160),
-      lineWidth: 0,
-      alpha: {
-        value: 0,
-        easing: 'linear',
-        duration: anime.random(600, 800)
-      },
-      duration: anime.random(1200, 1800),
-      easing: 'easeOutExpo',
-      update: renderParticule,
-      offset: 0
-    })
-}
\ No newline at end of file
diff --git a/source/js/third-party/piao.js b/source/js/third-party/piao.js
deleted file mode 100644
index 2b59f0a..0000000
--- a/source/js/third-party/piao.js
+++ /dev/null
@@ -1,332 +0,0 @@
-(function (name, factory) {
-  if (typeof window === 'object') {
-    window[name] = factory()
-  }
-})('Ribbons', function () {
-  var _w = window
-  var _b = document.body
-  var _d = document.documentElement
-  var random = function () {
-    if (arguments.length === 1) {
-      if (Array.isArray(arguments[0])) {
-        var index = Math.round(random(0, arguments[0].length - 1))
-        return arguments[0][index]
-      }
-      return random(0, arguments[0])
-    } else if (arguments.length === 2) {
-      return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
-    }
-    return 0
-  }
-  var screenInfo = function (e) {
-    var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0)
-    var height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0)
-    var scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0)
-    var scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0)
-    return {
-      width: width,
-      height: height,
-      ratio: width / height,
-      centerx: width / 2,
-      centery: height / 2,
-      scrollx: scrollx,
-      scrolly: scrolly
-    }
-  }
-  var mouseInfo = function (e) {
-    var screen = screenInfo(e)
-    var mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0
-    var mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0
-    return {
-      mousex: mousex,
-      mousey: mousey,
-      centerx: mousex - screen.width / 2,
-      centery: mousey - screen.height / 2
-    }
-  }
-  var Point = function (x, y) {
-    this.x = 0
-    this.y = 0
-    this.set(x, y)
-  }
-  Point.prototype = {
-    constructor: Point,
-    set: function (x, y) {
-      this.x = x || 0
-      this.y = y || 0
-    },
-    copy: function (point) {
-      this.x = point.x || 0
-      this.y = point.y || 0
-      return this
-    },
-    multiply: function (x, y) {
-      this.x *= x || 1
-      this.y *= y || 1
-      return this
-    },
-    divide: function (x, y) {
-      this.x /= x || 1
-      this.y /= y || 1
-      return this
-    },
-    add: function (x, y) {
-      this.x += x || 0
-      this.y += y || 0
-      return this
-    },
-    subtract: function (x, y) {
-      this.x -= x || 0
-      this.y -= y || 0
-      return this
-    },
-    clampX: function (min, max) {
-      this.x = Math.max(min, Math.min(this.x, max))
-      return this
-    },
-    clampY: function (min, max) {
-      this.y = Math.max(min, Math.min(this.y, max))
-      return this
-    },
-    flipX: function () {
-      this.x *= -1
-      return this
-    },
-    flipY: function () {
-      this.y *= -1
-      return this
-    }
-  }
-  var Factory = function (options) {
-    this._canvas = null
-    this._context = null
-    this._sto = null
-    this._width = 0
-    this._height = 0
-    this._scroll = 0
-    this._ribbons = []
-    this._options = {
-      colorSaturation: '80%',
-      colorBrightness: '60%',
-      colorAlpha: 0.65,
-      colorCycleSpeed: 6,
-      verticalPosition: 'center',
-      horizontalSpeed: 150,
-      ribbonCount: 5,
-      strokeSize: 5,
-      parallaxAmount: -0.5,
-      animateSections: true
-    }
-    this._onDraw = this._onDraw.bind(this)
-    this._onResize = this._onResize.bind(this)
-    this._onScroll = this._onScroll.bind(this)
-    this.setOptions(options)
-    this.init()
-  }
-  Factory.prototype = {
-    constructor: Factory,
-    setOptions: function (options) {
-      if (typeof options === 'object') {
-        for (var key in options) {
-          if (options.hasOwnProperty(key)) {
-            this._options[key] = options[key]
-          }
-        }
-      }
-    },
-    init: function () {
-      try {
-        this._canvas = document.createElement('canvas')
-        this._canvas.style.display = 'block'
-        this._canvas.style.position = 'fixed'
-        this._canvas.style.margin = '0'
-        this._canvas.style.padding = '0'
-        this._canvas.style.border = '0'
-        this._canvas.style.outline = '0'
-        this._canvas.style.left = '0'
-        this._canvas.style.top = '0'
-        this._canvas.style.width = '100%'
-        this._canvas.style.height = '100%'
-        this._canvas.style['z-index'] = '-1'
-        this._onResize()
-        this._context = this._canvas.getContext('2d')
-        this._context.clearRect(0, 0, this._width, this._height)
-        this._context.globalAlpha = this._options.colorAlpha
-        window.addEventListener('resize', this._onResize)
-        window.addEventListener('scroll', this._onScroll)
-        document.body.appendChild(this._canvas)
-      } catch (e) {
-        console.warn('Canvas Context Error: ' + e.toString())
-        return
-      }
-      this._onDraw()
-    },
-    addRibbon: function () {
-      var dir = Math.round(random(1, 9)) > 5 ? 'right' : 'left'
-      var stop = 1000
-      var hide = 200
-      var min = 0 - hide
-      var max = this._width + hide
-      var movex = 0
-      var movey = 0
-      var startx = dir === 'right' ? min : max
-      var starty = Math.round(random(0, this._height))
-      if (/^(top|min)$/i.test(this._options.verticalPosition)) {
-        starty = 0 + hide
-      } else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
-        starty = this._height / 2
-      } else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
-        starty = this._height - hide
-      }
-      var ribbon = []
-      var point1 = new Point(startx, starty)
-      var point2 = new Point(startx, starty)
-      var point3 = null
-      var color = Math.round(random(0, 360))
-      var delay = 0
-      while (true) {
-        if (stop <= 0) break
-        stop--
-        movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed)
-        movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25))
-        point3 = new Point()
-        point3.copy(point2)
-        if (dir === 'right') {
-          point3.add(movex, movey)
-          if (point2.x >= max) break
-        } else if (dir === 'left') {
-          point3.subtract(movex, movey)
-          if (point2.x <= min) break
-        }
-        ribbon.push({
-          point1: new Point(point1.x, point1.y),
-          point2: new Point(point2.x, point2.y),
-          point3: point3,
-          color: color,
-          delay: delay,
-          dir: dir,
-          alpha: 0,
-          phase: 0
-        })
-        point1.copy(point2)
-        point2.copy(point3)
-        delay += 4
-        color += this._options.colorCycleSpeed
-      }
-      this._ribbons.push(ribbon)
-    },
-    _drawRibbonSection: function (section) {
-      if (section) {
-        if (section.phase >= 1 && section.alpha <= 0) {
-          return true
-        }
-        if (section.delay <= 0) {
-          section.phase += 0.02
-          section.alpha = Math.sin(section.phase) * 1
-          section.alpha = section.alpha <= 0 ? 0 : section.alpha
-          section.alpha = section.alpha >= 1 ? 1 : section.alpha
-          if (this._options.animateSections) {
-            var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1
-            if (section.dir === 'right') {
-              section.point1.add(mod, 0)
-              section.point2.add(mod, 0)
-              section.point3.add(mod, 0)
-            } else {
-              section.point1.subtract(mod, 0)
-              section.point2.subtract(mod, 0)
-              section.point3.subtract(mod, 0)
-            }
-            section.point1.add(0, mod)
-            section.point2.add(0, mod)
-            section.point3.add(0, mod)
-          }
-        } else {
-          section.delay -= 0.5
-        }
-        var s = this._options.colorSaturation
-        var l = this._options.colorBrightness
-        var c = 'hsla(' + section.color + ', ' + s + ', ' + l + ', ' + section.alpha + ' )'
-        this._context.save()
-        if (this._options.parallaxAmount !== 0) {
-          this._context.translate(0, this._scroll * this._options.parallaxAmount)
-        }
-        this._context.beginPath()
-        this._context.moveTo(section.point1.x, section.point1.y)
-        this._context.lineTo(section.point2.x, section.point2.y)
-        this._context.lineTo(section.point3.x, section.point3.y)
-        this._context.fillStyle = c
-        this._context.fill()
-        if (this._options.strokeSize > 0) {
-          this._context.lineWidth = this._options.strokeSize
-          this._context.strokeStyle = c
-          this._context.lineCap = 'round'
-          this._context.stroke()
-        }
-        this._context.restore()
-      }
-      return false
-    },
-    _onDraw: function () {
-      for (var i = 0, t = this._ribbons.length; i < t; ++i) {
-        if (!this._ribbons[i]) {
-          this._ribbons.splice(i, 1)
-        }
-      }
-      this._context.clearRect(0, 0, this._width, this._height)
-      for (var a = 0; a < this._ribbons.length; ++a) {
-        var ribbon = this._ribbons[a]
-        var numSections = ribbon.length
-        var numDone = 0
-        for (var b = 0; b < numSections; ++b) {
-          if (this._drawRibbonSection(ribbon[b])) {
-            numDone++
-          }
-        }
-        if (numDone >= numSections) {
-          this._ribbons[a] = null
-        }
-      }
-      if (this._ribbons.length < this._options.ribbonCount) {
-        this.addRibbon()
-      }
-      requestAnimationFrame(this._onDraw)
-    },
-    _onResize: function (e) {
-      var screen = screenInfo(e)
-      this._width = screen.width
-      this._height = screen.height
-      if (this._canvas) {
-        this._canvas.width = this._width
-        this._canvas.height = this._height
-        if (this._context) {
-          this._context.globalAlpha = this._options.colorAlpha
-        }
-      }
-    },
-    _onScroll: function (e) {
-      var screen = screenInfo(e)
-      this._scroll = screen.scrolly
-    }
-  }
-  return Factory
-})
-
-var cn = document.getElementById('ribbon_piao')
-var mb = cn.getAttribute('mobile')
-
-if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
-
-} else {
-  new Ribbons({
-    colorSaturation: '60%',
-    colorBrightness: '50%',
-    colorAlpha: 0.5,
-    colorCycleSpeed: 5,
-    verticalPosition: 'random',
-    horizontalSpeed: 200,
-    ribbonCount: 3,
-    strokeSize: 0,
-    parallaxAmount: -0.2,
-    animateSections: true
-  })
-}