Merge branch 'dev' into master

更新内容請看 https://github.com/jerryc127/hexo-theme-butterfly/releases

README.md

@@ -16,8 +16,6 @@ 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]:
 
 ```

README_CN.md

@@ -17,8 +17,6 @@
 
 ### Git 安裝
 
-> 本倉庫同時上傳到 [Gitee](https://gitee.com/iamjerryw/hexo-theme-butterfly)，如果你訪問 Github 緩慢，可從 Gitee 中下載。
-
 在博客根目錄裡安裝穩定版【推薦】
 
 ```powershell

_config.yml

@@ -94,33 +94,23 @@ avatar:
   img:
   effect: false
 
-# The banner image of home page
+# the banner image of home page
 index_img:
 
-# If the banner of page not setting, it will show the top_img
+# if the banner of page not setting, it will show the top_img
 default_top_img:
 
-# The banner image of archive page
+# the banner image of archive page
 archive_img:
 
-# If the banner of tag page not setting, it will show the top_img
+# the banner image of tag page
 # note: tag page, not tags page (子標籤頁面的 top_img)
 tag_img:
 
-# The banner image of tag page
+# the banner image of category page
-# format: 
-#  - tag name: xxxxx
-tag_per_img:
-
-# If the banner of category page not setting, it will show the top_img
 # note: category page, not categories page (子分類頁面的 top_img)
 category_img:
 
-# The banner image of category page
-# format: 
-#  - category name: xxxxx
-category_per_img:
-
 # If you are using hexo-douban, you can configure it (如果你有使用 hexo-douban,可配置這個)
 # douban:
 #   meta: false
@@ -154,13 +144,11 @@ error_404:
 post_meta:
   page: # Home Page
     date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
-    date_format: date # date/relative 顯示日期還是相對日期
     categories: true # true or false 主頁是否顯示分類
     tags: false # true or false 主頁是否顯示標籤
     label: true # true or false 顯示描述性文字
   post:
     date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
-    date_format: date # date/relative 顯示日期還是相對日期
     categories: true # true or false 文章頁是否顯示分類
     tags: true # true or false 文章頁是否顯示標籤
     label: true # true or false 顯示描述性文字
@@ -176,7 +164,6 @@ wordcount:
 # 1: description
 # 2: both (if the description exists, it will show description, or show the auto_excerpt)
 # 3: auto_excerpt (default)
-# false: do not show the article introduction
 index_post_content:
   method: 3
   length: 500 # if you set method to 2 or 3, the length need to config
@@ -486,18 +473,17 @@ tag_ui: # 留空或 index
 
 # Website Background (設置網站背景)
 # can set it to color or image (可設置圖片 或者 顔色)
+# The formal of color: '#49B202'
 # The formal of image: url(http://xxxxxx.com/xxx.jpg)
+# White color will be shown as default
 background:
 
-# Footer Background
+# Show the footer background image (same as top_img)
 footer_bg: false
 
 # the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px)
 rightside-bottom:
 
-# Enter transitions (開啓網頁進入效果)
-enter_transitions: true
-
 # Background effects (背景特效)
 # --------------------------------------
 
@@ -511,8 +497,8 @@ canvas_ribbon:
   click_to_change: false
   mobile: false
 
-# Fluttering Ribbon (動態彩帶)
+# Dynamic ribbon (動態彩帶)
-canvas_fluttering_ribbon:
+canvas_ribbon_piao:
   enable: false
   mobile: false
 
@@ -532,18 +518,14 @@ 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:
+click_heart: false
-  enable: false
-  mobile: false
 
 # Mouse click effects: words (鼠標點擊效果: 文字)
 ClickShowText:
@@ -553,7 +535,6 @@ ClickShowText:
     # - LOVE
     # - YOU
   fontSize: 15px
-  mobile: false
 
 # Default display mode (網站默認的顯示模式)
 # light (default) / dark
@@ -752,13 +733,6 @@ note:
 # other
 # --------------------------------------
 
-# Artitalk
-# see https://artitalk.js.org/
-artitalk:
-  appId:
-  appKey:
-  option:
-
 # Pjax [Beta]
 # It may contain bugs and unstable, give feedback when you find the bugs.
 # https://github.com/MoOx/pjax
@@ -875,9 +849,9 @@ CDN:
   busuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
 
   # background effect
-  canvas_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js
+  canvas_ribbon: /js/third-party/canvas-ribbon.js
-  canvas_fluttering_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js
+  canvas_ribbon_piao: /js/third-party/piao.js
-  canvas_nest: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js
+  canvas_nest: /js/third-party/canvas-nest.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
@@ -894,10 +868,11 @@ CDN:
   snackbar: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js
 
   # effect
-  activate_power_mode: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js
+  anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js
-  fireworks: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js
+  activate_power_mode: /js/third-party/activate-power-mode.js
-  click_heart: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js
+  fireworks: /js/third-party/fireworks.js
-  ClickShowText: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js
+  click_heart: /js/third-party/click_heart.js
+  ClickShowText: /js/third-party/ClickShowText.js
 
   # fontawesome
   fontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css
@@ -918,5 +893,3 @@ CDN:
   prismjs_js: https://cdn.jsdelivr.net/npm/prismjs/prism.min.js
   prismjs_lineNumber_js: https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js
   prismjs_autoloader: https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js
-
-  artitalk: https://cdn.jsdelivr.net/npm/artitalk

languages/default.yml

@@ -77,20 +77,23 @@ aside:
   card_newest_comments:
     heading: Newest Comments
     loading_text: loading...
-    error: Unable to get the data, please make sure the settings are correct.
+    zero_day: Today
+    day: days ago
 
 date_suffix:
-  just: Just
+  one_hour: Just
-  min: minutes ago
+  hours: hours ago
-  hour: hours ago
   day: days ago
-  month: months ago
 
 donate: Donate
 share: Share
+bookmark:
+  title: Bookmark
 
 rightside:
   readmode_title: Read Mode
+  font_plus_title: Increase Font Size
+  font_minus_title: Decrease Font Size
   translate_title: Switch Between Traditional Chinese And Simplified Chinese
   night_mode_title: Switch Between Light And Dark Mode
   back_to_top: Back To Top
@@ -105,6 +108,9 @@ copy_copyright:
   info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
 
 Snackbar:
+  bookmark:
+    message_prev: Press
+    message_next: to bookmark this page
   chs_to_cht: Traditional Chinese Activated Manually
   cht_to_chs: Simplified Chinese Activated Manually
   day_to_night: Dark Mode Activated Manually

languages/en.yml

@@ -77,20 +77,23 @@ aside:
   card_newest_comments:
     heading: Newest Comments
     loading_text: loading...
-    error: Unable to get the data, please make sure the settings are correct.
+    zero_day: Today
+    day: days ago
 
 date_suffix:
-  just: Just
+  one_hour: Just
-  min: minutes ago
+  hours: hours ago
-  hour: hours ago
   day: days ago
-  month: months ago
 
 donate: Donate
 share: Share
+bookmark:
+  title: Bookmark
 
 rightside:
   readmode_title: Read Mode
+  font_plus_title: Increase Font Size
+  font_minus_title: Decrease Font Size
   translate_title: Switch Between Traditional Chinese And Simplified Chinese
   night_mode_title: Switch Between Light And Dark Mode
   back_to_top: Back To Top
@@ -105,6 +108,9 @@ copy_copyright:
   info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
 
 Snackbar:
+  bookmark:
+    message_prev: Press
+    message_next: to bookmark this page
   chs_to_cht: Traditional Chinese Activated Manually
   cht_to_chs: Simplified Chinese Activated Manually
   day_to_night: Dark Mode Activated Manually

languages/zh-CN.yml

@@ -79,20 +79,23 @@ aside:
   card_newest_comments:
     heading: 最新评论
     loading_text: 正在加载中...
-    error: 无法获取资料，请确认相关配置是否正确
+    zero_day: 今天
+    day: 天前
 
 date_suffix:
-  just: 刚刚
+  one_hour: 刚刚
-  min: 分钟前
+  hours: 小时前
-  hour: 小时前
   day: 天前
-  month: 个月前
 
 donate: 打赏
 share: 分享
+bookmark:
+  title: 添加书签
 
 rightside:
   readmode_title: 阅读模式
+  font_plus_title: 放大字体
+  font_minus_title: 缩小字体
   translate_title: 简繁转换
   night_mode_title: 浅色和深色模式转换
   back_to_top: 回到顶部
@@ -107,6 +110,9 @@ copy_copyright:
   info: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 
 Snackbar:
+  bookmark:
+    message_prev: 按
+    message_next: 键将本页加入书签
   chs_to_cht: 你已切换为繁体
   cht_to_chs: 你已切换为简体
   day_to_night: 你已切换为深色模式

languages/zh-TW.yml

@@ -79,20 +79,23 @@ aside:
   card_newest_comments:
     heading: 最新評論
     loading_text: 正在加載中...
-    error: 無法獲取資料，請確認相關配置是否正確
+    zero_day: 今天
+    day: 天前
 
 date_suffix:
-  just: 剛剛
+  one_hour: 剛剛
-  min: 分鐘前
+  hours: 小時前
-  hour: 小時前
   day: 天前
-  month: 個月前
 
 donate: 打賞
 share: 分享
+bookmark:
+  title: 新增書籤
 
 rightside:
   readmode_title: 閱讀模式
+  font_plus_title: 放大字型
+  font_minus_title: 縮小字型
   translate_title: 簡繁轉換
   night_mode_title: 淺色和深色模式轉換
   back_to_top: 回到頂部
@@ -107,6 +110,9 @@ copy_copyright:
   info: 著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。
 
 Snackbar:
+  bookmark:
+    message_prev: 按
+    message_next: 鍵將本頁加入書籤
   chs_to_cht: 你已切換為繁體
   cht_to_chs: 你已切換為簡體
   day_to_night: 你已切換為深色模式

layout/404.pug

@@ -13,7 +13,8 @@ html(lang=config.language data-theme=theme.display_mode)
       canvas.fireworks
     
     if theme.background
-      #web_bg
+      - var is_photo = theme.background.startsWith('url') ? 'photo':'color'
+      #web_bg(data-type=is_photo)
 
     #error-wrap
       .error-content

layout/flink.pug

@@ -0,0 +1,24 @@
+#page
+  .flink#article-container
+    if site.data.link
+      each i in site.data.link
+        if i.class_name
+          h2!= i.class_name
+        if i.class_desc
+          .flink-desc!=i.class_desc
+        .flink-list
+          each item in i.link_list
+            .flink-list-item
+              a(href=url_for(item.link)  title=item.name target="_blank")
+                if theme.lazyload.enable
+                  img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
+                else
+                  img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
+                span.flink-item-name= item.name 
+                span.flink-item-desc(title=item.descr)= item.descr
+    != page.content
+  if page.comments !== false && theme.comments && theme.comments.use
+    - var commentsJsLoad = true
+    !=partial('includes/third-party/comments/index', {}, {cache:theme.fragment_cache})
+
+

layout/includes/additional-js.pug

@@ -33,12 +33,9 @@ div
     !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache})
 
   .js-pjax
-    if theme.subtitle.enable && is_home() && theme.index_img !== false
+    if is_home() && theme.subtitle.enable
       include ./third-party/subtitle.pug
 
-    if page.type === 'artitalk'
-      include ./third-party/artitalk.pug
-
     include ./third-party/math/index.pug
 
     if commentsJsLoad
@@ -69,6 +66,3 @@ div
 
   if theme.pjax.enable
     !=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache})
-  
-  !=partial('includes/third-party/baidu_push', {}, {cache:theme.fragment_cache})
-  

layout/includes/head.pug

@@ -10,6 +10,7 @@
 - var isSubtitle = config.subtitle ? ' - ' + config.subtitle : ''
 - var tabTitle = is_home() || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title
 
+- var pageDescription = page_description()
 - var pageKeywords
 - if (page.keywords) pageKeywords = Array.isArray(page.keywords) ? (page.keywords).join(',') :  ([]).join(',') || page.keywords
 - else if (page.tags && page.tags.length) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
@@ -22,6 +23,7 @@ meta(charset='UTF-8')
 meta(http-equiv="X-UA-Compatible" content="IE=edge")
 meta(name="viewport" content="width=device-width,initial-scale=1")
 title= tabTitle
+meta(name="description" content!=pageDescription)
 if pageKeywords
   meta(name="keywords" content=pageKeywords)
 meta(name="author" content=pageAuthor)
@@ -33,9 +35,6 @@ if theme.disable_baidu_transformation
   meta(http-equiv="Cache-Control" content="no-transform")
   meta(http-equiv="Cache-Control" content="no-siteapp")
 
-//- Open_Graph
-include ./head/Open_Graph.pug
-
 !=favicon_tag(theme.favicon || config.favicon)
 link(rel="canonical" href=urlNoIndex())
 
@@ -45,6 +44,14 @@ link(rel="canonical" href=urlNoIndex())
 //- 網站驗證
 !=partial('includes/head/site_verification', {}, {cache:theme.fragment_cache})
 
+//- Open_Graph
+include ./head/Open_Graph.pug
+
+if theme.facebook_comments.app_id
+  meta(property="fb:app_id" content=theme.facebook_comments.app_id )
+if theme.facebook_comments.user_id
+  meta(property="fb:admins" content=theme.facebook_comments.user_id)
+
 //- PWA
 if (theme.pwa && theme.pwa.enable)
   !=partial('includes/head/pwa', {}, {cache:theme.fragment_cache})

layout/includes/head/Open_Graph.pug

@@ -1,11 +1,12 @@
+- var contentType = is_post() ? 'article' : 'website'
+
 if theme.Open_Graph_meta
-  - let contentType = is_post() ? 'article' : 'website'
+  meta(property="og:type" content=contentType)
-  - let metaImage = full_url_for(page.cover || theme.avatar.img)
+  meta(property="og:title" content=pageTitle)
-  - let fb_appId = theme.facebook_comments.app_id || ''
+  meta(property="og:url" content=urlNoIndex())
-  - let fb_admins = theme.facebook_comments.user_id || ''
+  meta(property="og:site_name" content=config.title)
-
+  meta(property="og:description" content!=pageDescription)
-  != open_graph({type: contentType, image: metaImage, fb_admins: fb_admins, fb_app_id: fb_appId})
+  meta(property="og:image" content=full_url_for(page.cover || theme.avatar.img))
-
+  meta(property="article:published_time" content=date_xml(page.date))
-else
+  meta(property="article:modified_time" content=date_xml(page.updated))
-  meta(name="description" content=page_description())
+  meta(name="twitter:card" content="summary")
-

layout/includes/head/config.pug

@@ -58,9 +58,14 @@
     })
   }
 
+  
   let Snackbar = 'undefined';
   if (theme.snackbar && theme.snackbar.enable) {
     Snackbar = JSON.stringify({
+      bookmark: {
+        message_prev: _p("Snackbar.bookmark.message_prev"),
+        message_next: _p("Snackbar.bookmark.message_next")
+      },
       chs_to_cht: _p("Snackbar.chs_to_cht"),
       cht_to_chs: _p("Snackbar.cht_to_chs"),
       day_to_night: _p("Snackbar.day_to_night"),
@@ -90,6 +95,16 @@
     })
   }
 
+  let date_suffix = 'undefined';
+  if (theme.aside.card_webinfo.last_push_date) {
+    date_suffix = JSON.stringify({
+      one_hour: _p("date_suffix.one_hour"),
+      hours: _p("date_suffix.hours"),
+      day: _p('date_suffix.day')
+
+    })
+  }
+
 script.
   var GLOBAL_CONFIG = { 
     root: '!{config.root}',
@@ -104,26 +119,22 @@ script.
       error: '!{_p("copy.error")}',
       noSupport: '!{_p("copy.noSupport")}'
     },
-    relativeDate: {
+    bookmark: {
-      homepage: !{theme.post_meta.page.date_format === 'relative'},
+      message_prev: '!{_p("Snackbar.bookmark.message_prev")}',
-      post: !{theme.post_meta.post.date_format === 'relative'}
+      message_next: '!{_p("Snackbar.bookmark.message_next")}'
     },
     runtime: '!{theme.runtimeshow.enable ? _p("aside.card_webinfo.runtime.unit") : ""}',
-    date_suffix: {
+    date_suffix: !{date_suffix},
-      just: '!{_p("date_suffix.just")}',
-      min: '!{_p("date_suffix.min")}',
-      hour: '!{_p("date_suffix.hour")}',
-      day: '!{_p("date_suffix.day")}',
-      month: '!{_p("date_suffix.month")}'
-    },
     copyright: !{copyright},
     ClickShowText: !{ClickShowText},
-    lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}',
+    medium_zoom: !{theme.medium_zoom},
+    fancybox: !{theme.fancybox},
     Snackbar: !{Snackbar},
     justifiedGallery: {
       js: '!{theme.CDN.justifiedGallery_js}',
       css: '!{theme.CDN.justifiedGallery_css}'
     },
+    baiduPush: !{theme.baidu_push},
     isPhotoFigcaption: !{theme.photofigcaption},
     islazyload: !{theme.lazyload.enable},
     isanchor: !{theme.anchor}

layout/includes/head/darkmode.pug

@@ -1,34 +1,33 @@
 if theme.darkmode.enable
   script.
-    (function () {
+    var activateDarkMode = function () {
-      window.activateDarkMode = function () {
       document.documentElement.setAttribute('data-theme', 'dark')
       if (document.querySelector('meta[name="theme-color"]') !== null) {
         document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
       }
     }
-      window.activateLightMode = function () {
+    var activateLightMode = function () {
       document.documentElement.setAttribute('data-theme', 'light')
       if (document.querySelector('meta[name="theme-color"]') !== null) {
         document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
       }
     }
 
-      const autoChangeMode = '#{theme.darkmode.autoChangeMode}'
+    var autoChangeMode = '#{theme.darkmode.autoChangeMode}'
-      const t = saveToLocal.get('theme')
+    var t = saveToLocal.get('theme')
     if (autoChangeMode === '1') {
-        const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+      var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-        const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
+      var isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
-        const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
+      var isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
-        const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
+      var hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
 
       if (t === undefined) {
         if (isLightMode) activateLightMode()
         else if (isDarkMode) activateDarkMode()
         else if (isNotSpecified || hasNoSupport) {
-            const now = new Date()
+          var now = new Date()
-            const hour = now.getHours()
+          var hour = now.getHours()
-            const isNight = hour <= 6 || hour >= 18
+          var isNight = hour <= 6 || hour >= 18
           isNight ? activateDarkMode() : activateLightMode()
         }
         window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
@@ -39,9 +38,9 @@ if theme.darkmode.enable
       } else if (t === 'light') activateLightMode()
       else activateDarkMode()
     } else if (autoChangeMode === '2') {
-        const now = new Date()
+      now = new Date()
-        const hour = now.getHours()
+      hour = now.getHours()
-        const isNight = hour <= 6 || hour >= 18
+      isNight = hour <= 6 || hour >= 18
       if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
       else if (t === 'light') activateLightMode()
       else activateDarkMode()
@@ -49,5 +48,3 @@ if theme.darkmode.enable
       if (t === 'dark') activateDarkMode()
       else if (t === 'light') activateLightMode()
     }
-    })()
-

layout/includes/head/noscript.pug

@@ -6,9 +6,4 @@ noscript.
   .justified-gallery img {
     opacity: 1
   }
-
-    #recent-posts time,
-    #post-meta time {
-      display: inline !important
-    }
   </style>

layout/includes/header/index.pug

@@ -1,60 +1,43 @@
-if page.top_img !== false
+if is_home()
-  if is_post()
+  - var top_img = theme.index_img || theme.default_top_img
+else if is_post()
   - var top_img = page.top_img || page.cover || page.randomcover || theme.default_top_img
-  else if is_page()
-    - var top_img = page.top_img || theme.default_top_img
-  else if is_tag()
-    - var top_img = theme.tag_per_img && theme.tag_per_img[page.tag] 
-    - top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
-  else if is_category()
-    - var top_img = theme.category_per_img && theme.category_per_img[page.category]
-    - top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)
-  else if is_home()
-    - var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
 else if is_archive()
-    - var top_img = theme.archive_img !== false ? theme.archive_img || theme.default_top_img : false
+  - var top_img = theme.archive_img || theme.default_top_img
+else if is_tag()
+  - var top_img = theme.tag_img || theme.default_top_img
+else if is_category()
+  - var top_img = theme.category_img || theme.default_top_img
 else
   - var top_img = page.top_img || theme.default_top_img
 
 if theme.douban
-    - var doubanExist = false
   if is_current('/movies/', [strict])
-      - var top_img = theme.douban.movies_img !== false ? theme.douban.movies_img || theme.default_top_img : false
+    - var top_img = theme.douban.movies_img || theme.default_top_img
-      - doubanExist = true
   else if is_current('/books/', [strict])
-      - var top_img = theme.douban.books_img !== false ? theme.douban.books_img || theme.default_top_img : false
+    - var top_img = theme.douban.books_img || theme.default_top_img
-      - doubanExist = true
   else if is_current('/games/', [strict])
-      - var top_img = theme.douban.games_img !== false ? theme.douban.games_img || theme.default_top_img : false
+    - var top_img = theme.douban.games_img || theme.default_top_img
-      - doubanExist = true
 
-  if top_img !== false
+- var bg_img = top_img && top_img !== true ? `background-image: url(${url_for(top_img)})` : ''
-    - var imgSource = top_img && top_img.indexOf('/') !== -1 ? `background-image: url(${url_for(top_img)})` : `background: ${top_img}`
-    - var bg_img = top_img ? imgSource : ''
 - var site_title = is_archive() ? _p('page.archives') : page.title || page.tag || page.category || config.title
 - var isHomeClass = is_home() ? 'full_page' : 'not-index-bg'
 - is_post() ? isHomeClass = 'post-bg' : isHomeClass
-  else
-    - var isHomeClass = 'no-top-img'
-else
-  - var top_img = false
-  - var isHomeClass = 'no-top-img'
 
 header#page-header(class=isHomeClass style=bg_img)
   !=partial('includes/header/nav', {}, {cache:theme.fragment_cache})
-  if top_img !== false
+  if is_home()
-    if is_post()
-      include ./post-info.pug
-    else if is_home() 
     #site-info
-        h1#site-title=site_title
+      h1#site_title=site_title
-        #site-subtitle
+      #site_subtitle
         span#subtitle
       if(theme.social)
         #site_social_icons
           !=fragment_cache('social', function(){return partial('includes/header/social')})
-      #scroll-down
+    #scroll_down
       i.fas.fa-angle-down.scroll-down-effects
+  else if is_post()
+    include ./post-info.pug 
   else
-      #page-site-info
+    #page_site-info
-        h1#site-title=site_title
+      h1#site_title=site_title

layout/includes/layout.pug

@@ -12,7 +12,8 @@ html(lang=config.language data-theme=theme.display_mode)
 
     #body-wrap
       if theme.background
-        #web_bg
+        - var is_photo = theme.background.startsWith('url') ? 'photo':'color'
+        #web_bg(data-type=is_photo)
 
       include ./sidebar.pug
       include ./header/index.pug
@@ -32,16 +33,9 @@ html(lang=config.language data-theme=theme.display_mode)
           else
             block content
       
-      - var footerBg = theme.footer_bg
+      - var footer_bg = theme.footer_bg == false ? '' : bg_img
-      if (footerBg)
+      - var is_bg = theme.footer_bg == false ? 'color' : 'photo'
-        if (footerBg === true)
+      footer#footer(style=footer_bg data-type=is_bg)
-          - var footer_bg = bg_img
-        else
-          - var footer_bg = theme.footer_bg.indexOf('/') !== -1 ? `background-image: url(${url_for(footerBg)})` : `background: ${footerBg}`
-      else
-        - var footer_bg = ''
-
-      footer#footer(style=footer_bg)
         !=partial('includes/footer', {}, {cache:theme.fragment_cache})
 
     include ./rightside.pug

layout/includes/loading/loading-js.pug

@@ -1,13 +1,6 @@
 script.
-  var preloader = {
+  var endLoading = function () {
-    endLoading: () => {
     document.body.style.overflow = 'auto';
     document.getElementById('loading-box').classList.add("loaded")
-    },
-    initLoading: () => {
-      document.body.style.overflow = '';
-      document.getElementById('loading-box').classList.remove("loaded")
-
   }
-  }
+  window.addEventListener('load',endLoading)
-  window.addEventListener('load',()=> {preloader.endLoading()})

layout/includes/mixins/post-ui.pug

@@ -57,12 +57,9 @@ mixin postUI(posts)
                   span.article-meta__link #[='•']
 
         //- Display the article introduction on homepage
-        case theme.index_post_content.method
+        if theme.index_post_content.method == 1
-          when false
-            - break
-          when 1
           .content!= article.description
-          when 2
+        else if theme.index_post_content.method == 2
           if article.description
             .content!= article.description
           else
@@ -70,7 +67,7 @@ mixin postUI(posts)
             - let expert = content.substring(0, theme.index_post_content.length) 
             - content.length > theme.index_post_content.length ? expert += ' ...' : ''
             .content!= expert
-          default
+        else
           - const content = strip_html(article.content)
           - let expert = content.substring(0, theme.index_post_content.length) 
           - content.length > theme.index_post_content.length ? expert += ' ...' : ''
@@ -78,4 +75,4 @@ mixin postUI(posts)
 
     if theme.ad && theme.ad.index
       if (index + 1) % 3 == 0
-        .recent-post-item.ad-height!=theme.ad.index
+        .recent-post-item.ad_height!=theme.ad.index

layout/includes/page/artitalk.pug

@@ -1,4 +0,0 @@
-if top_img === false
-  h1.page-title= page.title
-
-#artitalk_main

layout/includes/page/categories.pug

@@ -1,5 +0,0 @@
-.category-lists
-  .category-title.is-center= _p('page.category')
-    |  - 
-    span.category-amount= site.categories.length
-  div!= list_categories()

layout/includes/page/default-page.pug

@@ -1,6 +0,0 @@
-if theme.douban && theme.douban.meta && doubanExist
-  meta(name="referrer" content="no-referrer")
-#article-container
-  if top_img === false
-    h1.page-title= page.title
-  != page.content

layout/includes/page/flink.pug

@@ -1,19 +0,0 @@
-.flink#article-container
-  if site.data.link
-    each i in site.data.link
-      if i.class_name
-        h2!= i.class_name
-      if i.class_desc
-        .flink-desc!=i.class_desc
-      .flink-list
-        each item in i.link_list
-          .flink-list-item
-            a(href=url_for(item.link)  title=item.name target="_blank")
-              if theme.lazyload.enable
-                img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
-              else
-                img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
-              span.flink-item-name= item.name 
-              span.flink-item-desc(title=item.descr)= item.descr
-  != page.content
-

layout/includes/page/tags.pug

@@ -1,5 +0,0 @@
-.tag-cloud-title.is-center= _p('page.tag')
-  |  - 
-  span.tag-cloud-amount= site.tags.length
-.tag-cloud-list.is-center
-  !=cloudTags({source: site.tags, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'})

layout/includes/rightside.pug

@@ -1,31 +1,28 @@
 section#rightside
   #rightside-config-hide
-    if is_post() && theme.readmode
+    if is_post()
+      if theme.readmode
         button#readmode(type="button" title=_p('rightside.readmode_title'))
           i.fas.fa-book-open
-    if theme.translate.enable
+    if theme.translate && theme.translate.enable
       button#translateLink(type="button" title=_p('rightside.translate_title'))= theme.translate.default
     if theme.darkmode.enable && theme.darkmode.button
       button#darkmode(type="button" title=_p('rightside.night_mode_title'))
         i.fas.fa-adjust
   #rightside-config-show
-    if is_post()
-      if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button))
     button#rightside_config(type="button" title=_p("rightside.setting"))
       i.fas.fa-cog
-      if commentsJsLoad
+    if is_post() && page.comments !== false && theme.comments.use
       a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
         i.fas.fa-comments
     if showToc
       button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
         i.fas.fa-list-ul
-    else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button)
-      button#rightside_config(type="button" title=_p("rightside.setting"))
-        i.fas.fa-cog
-
     if theme.chat_btn
       button#chat_btn(type="button" title=_p("rightside.chat_btn"))
         i.fas.fa-sms
 
     button#go-up(type="button" title=_p("rightside.back_to_top"))
       i.fas.fa-arrow-up
+
+

layout/includes/third-party/artitalk.pug

@@ -1,24 +0,0 @@
-- let option = theme.artitalk.option ? JSON.stringify(theme.artitalk.option) : false
-
-script.
-  (()=>{
-    let setting = {
-      appId: '!{theme.artitalk.appId}',
-      appKey: '!{theme.artitalk.appKey}',
-    }
-
-    if (!{Boolean(option)}) {
-      const otherSetting = !{option}
-      setting = Object.assign({}, setting, otherSetting)
-    }
-
-    const init = () => {
-      new Artitalk(setting)
-    }
-
-    if (typeof Artitalk === 'function') {
-      init()
-    } else {
-      $.getScript('!{theme.CDN.artitalk}',init)
-    }
-  })()

layout/includes/third-party/baidu_push.pug

@@ -1,15 +0,0 @@
-if theme.baidu_push
-  script.
-    (function(){
-      const bp = document.createElement('script');
-      const curProtocol = window.location.protocol.split(':')[0];
-      if (curProtocol === 'https'){
-      bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
-      }
-      else{
-      bp.src = 'http://push.zhanzhang.baidu.com/push.js';
-      }
-      bp.dataset.pjax = ''
-      const s = document.getElementsByTagName("script")[0];
-      s.parentNode.insertBefore(bp, s);
-    })()

layout/includes/third-party/comments/valine.pug

@@ -5,7 +5,7 @@ if site.data.valine
 script.
   function loadValine () {
     function initValine () {
-      const initData = {
+      window.valine = new Valine({
         el: '#vcomment',
         appId: '#{theme.valine.appId}',
         appKey: '#{theme.valine.appKey}',
@@ -20,13 +20,8 @@ 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() 

layout/includes/third-party/effect.pug

@@ -1,13 +1,14 @@
 if theme.fireworks && theme.fireworks.enable
-  canvas.fireworks(mobile=`${theme.fireworks.mobile}`)
+  canvas.fireworks
+  script(src=url_for(theme.CDN.anime))
   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_fluttering_ribbon && theme.canvas_fluttering_ribbon.enable)
+if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable)
-  script(defer id="fluttering_ribbon" mobile=`${theme.canvas_fluttering_ribbon.mobile}` src=url_for(theme.CDN.canvas_fluttering_ribbon))
+  script(defer id="ribbon_piao" mobile=`${theme.canvas_ribbon_piao.mobile}` src=url_for(theme.CDN.canvas_ribbon_piao))
 
 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))
@@ -17,12 +18,11 @@ 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 && theme.click_heart.enable
+if theme.click_heart
-  script#click-heart(src=url_for(theme.CDN.click_heart) async mobile=`${theme.click_heart.mobile}`)
+  script(src=url_for(theme.CDN.click_heart) async)
 
 if theme.ClickShowText && theme.ClickShowText.enable
-  script#click-show-text(src=url_for(theme.CDN.ClickShowText) async mobile=`${theme.ClickShowText.mobile}`)
+  script(src=url_for(theme.CDN.ClickShowText) async)

layout/includes/third-party/newest-comments/disqus-comment.pug

@@ -28,9 +28,6 @@ script.
         // set expiry to 10 min
         saveToLocal.set('disqus-newest-comments', JSON.stringify(disqusArray), 10/(60*24))
         generateHtml(disqusArray)
-      }).fail(()=>{
-        const $dom = document.querySelector('#card-newest-comments .aside-list')
-        $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
       })
     }
 
@@ -41,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}' alt='${array[i].nick}'></a>`
+          result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}'></a>`
         }
         
         result += `<div class='content'>
@@ -50,13 +47,13 @@ script.
         </div></div>`
       }
 
-      let $dom = document.querySelector('#card-newest-comments .aside-list')
+      let $dom = document.querySelector('.card-newest-comments .aside-list')
       $dom.innerHTML= result
       window.pjax && window.pjax.refresh($dom)
     }
 
     const newestCommentInit = () => {
-      if (document.querySelector('#card-newest-comments .aside-list')) {
+      if (document.querySelector('.card-newest-comments .aside-list')) {
         const data = saveToLocal.get('disqus-newest-comments')
         if (data) {
           generateHtml(JSON.parse(data))

layout/includes/third-party/newest-comments/github-issues.pug

@@ -27,9 +27,6 @@ script.
         })
         saveToLocal.set('github-newest-comments', JSON.stringify(githubArray), 10/(60*24))
         generateHtml(githubArray)
-      }).fail(()=>{
-        const $dom = document.querySelector('#card-newest-comments .aside-list')
-        $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
       })
     }
 
@@ -40,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}' alt='${array[i].nick}'></a>`
+          result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}'></a>`
         }
 
         result += `<div class='content'>
@@ -49,13 +46,13 @@ script.
         </div></div>`
       }
 
-      let $dom = document.querySelector('#card-newest-comments .aside-list')
+      let $dom = document.querySelector('.card-newest-comments .aside-list')
       $dom.innerHTML= result
       window.pjax && window.pjax.refresh($dom)
     }
 
     const newestCommentInit = () => {
-      if (document.querySelector('#card-newest-comments .aside-list')) {
+      if (document.querySelector('.card-newest-comments .aside-list')) {
         const data = saveToLocal.get('github-newest-comments')
         if (data) {
           generateHtml(JSON.parse(data))

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)}' alt='${array[i].nick}'></a>`
+          result += `<a href='${array[i].url}' class="thumbnail"><img src='${getIcon(array[i].avatar, array[i].mail)}'></a>`
         }
 
         result += `<div class='content'>
@@ -37,59 +37,58 @@ script.
         </div></div>`
       }
 
-      let $dom = document.querySelector('#card-newest-comments .aside-list')
+      let $dom = document.querySelector('.card-newest-comments .aside-list')
       $dom.innerHTML= result
       window.pjax && window.pjax.refresh($dom)
     }
 
     const getValineData = () => {
-        let serverURL = ''
+
-        if (!{Boolean(theme.newest_comments.leancloud.serverURL)}) {
+      if (!(AV.applicationId && (AV.applicationKey || AV.masterKey))) {
-          serverURL = '!{theme.newest_comments.leancloud.serverURL}'
+        const dataInit = {
-        } else {
+          appId: '!{theme.newest_comments.leancloud.appId}',
-          serverURL = 'https://!{theme.newest_comments.leancloud.appId.substring(0,8)}.api.lncldglobal.com'
+          appKey: '!{theme.newest_comments.leancloud.appKey}'
         }
 
-      var settings = {
+        if (!{theme.newest_comments.leancloud.serverURL ? true : false}) {
-        "url": `${serverURL}/1.1/classes/Comment?limit=!{theme.newest_comments.limit}&order=-createdAt`,
+          dataInit.serverURL= '!{theme.newest_comments.leancloud.serverURL}'
-        "method": "GET",
-        "timeout": 0,
-        "headers": {
-          "X-LC-Id": '!{theme.newest_comments.leancloud.appId}',
-          "X-LC-Key": '!{theme.newest_comments.leancloud.appKey}',
-          "Content-Type": "application/json"
-        },
         }
 
-      $.ajax(settings).done((response) => {
+        AV.init(dataInit)
+      }
+
+      const query = new AV.Query('Comment');
+      query.descending('createdAt').limit(!{theme.newest_comments.limit})
+
       var valineArray = []
-        response.results.forEach((e)=>{
+      query.find().then(comments => {
+        comments.forEach(comment => {
           valineArray.push({
-            'avatar': e.QQAvatar,
+            'avatar': comment.get('QQAvatar'),
-            'content': changeContent(e.comment),
+            'content': changeContent(comment.get('comment')),
-            'mail': e.mail,
+            'mail': comment.get('mail'),
-            'nick': e.nick,
+            'nick': comment.get('nick'),
-            'url': e.url,
+            'url': comment.get('url'),
-            'date': e.createdAt,
+            'date': comment.createdAt,
           })
         })
-        
+      }).then(function() {
         saveToLocal.set('leancloud-newest-comments', JSON.stringify(valineArray), 10/(60*24))
         generateHtml(valineArray)
-
-      }).fail(()=>{
-        const $dom = document.querySelector('#card-newest-comments .aside-list')
-        $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
       })
     }
 
     const newestCommentInit = () => {
-      if (document.querySelector('#card-newest-comments .aside-list')) {
+      if (document.querySelector('.card-newest-comments .aside-list')) {
         const data = saveToLocal.get('leancloud-newest-comments')
         if (data) {
           generateHtml(JSON.parse(data))
         } else {
+          if (typeof window.AV === 'object') {
             getValineData()
+          } else {
+            $.getScript('https://cdn.jsdelivr.net/npm/leancloud-storage@4.6.1/dist/av-min.js', getValineData)
+          }
         }
       }
     }

layout/includes/third-party/pjax.pug

@@ -7,6 +7,7 @@ script(src=url_for(theme.CDN.pjax))
 script.
   let pjaxSelectors = [
     'title',
+    'meta[name=description]',
     '#config_change',
     '#body-wrap',
     '#rightside-config-hide',
@@ -51,14 +52,10 @@ script.
 
     // prismjs
     typeof Prism === 'object' && Prism.highlightAll()
-
-    typeof preloader === 'object' && preloader.endLoading()
   })
 
 
   document.addEventListener('pjax:send', function () {
-    typeof preloader === 'object' && preloader.initLoading()
-    
     if (window.aplayers) {
       for (let i = 0; i < window.aplayers.length; i++) {
         if (!window.aplayers[i].options.fixed) {

layout/includes/widget/card_newest_comment.pug

@@ -1,4 +1,4 @@
-.card-widget#card-newest-comments
+.card-widget.card-newest-comments
   .card-content
     .item-headline
       i.fas.fa-bolt

layout/includes/widget/card_recent_post.pug

@@ -7,18 +7,18 @@
       - let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
       - let sort = theme.aside.card_recent_post.sort === 'updated' ? 'updated' : 'date'
       - site.posts.sort(sort, -1).limit(postLimit).each(function(article){
+        .aside-list-item
           - let link = article.link || article.path
           - let title = article.title || _p('no_title')
-        - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : ''
+          - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-aside-cover' : ''
           - let post_cover = article.cover
-        .aside-list-item(class=no_cover)
           if post_cover && theme.cover.aside_enable
             a.thumbnail(href=url_for(link) title=title)
               if theme.lazyload.enable
                 img(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
               else
                 img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
-          .content
+          .content(class=no_cover)
             a.title(href=url_for(link) title=title)= title
             if theme.aside.card_recent_post.sort === 'updated'
               time(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)]

layout/page.pug

@@ -1,19 +1,34 @@
 extends includes/layout.pug
 
 block content
-  #page
+  if page.type === 'tags'
-    case page.type
+    .tag-cloud
-      when 'tags'
+      .tag-cloud__title= _p('page.tag')
-        include includes/page/tags.pug
+        |  - 
-      when 'link'
+        span.tag-cloud__amount= site.tags.length
-        include includes/page/flink.pug
+      .tag-cloud-tags
-      when 'categories'
+        !=cloudTags({source: site.tags, minfontsize: 1, maxfontsize: 2.1, limit: 0, unit: 'em'})
-        include includes/page/categories.pug
+      if page.comments !== false && theme.comments && theme.comments.use
-      when 'artitalk'
+        - var commentsJsLoad = true
-        include includes/page/artitalk.pug
+        !=partial('includes/third-party/comments/index', {}, {cache:theme.fragment_cache})
-      default
+  else if page.type === 'link'
-        include includes/page/default-page.pug
+    include flink.pug
-
+  else if page.type === 'categories'    
+    .category-content
+      .category-lists
+        .category__title= _p('page.category')
+          |  - 
+          span.category__amount= site.categories.length
+        div!= list_categories()
+      if page.comments !== false && theme.comments && theme.comments.use
+        - var commentsJsLoad = true
+        !=partial('includes/third-party/comments/index', {}, {cache:theme.fragment_cache})
+  else
+    #page
+      if theme.douban && theme.douban.meta
+        if (is_current('/movies/', [strict]) || is_current('/books/', [strict]) || is_current('/games/', [strict]))
+          meta(name="referrer" content="no-referrer")
+      #article-container!= page.content
       if page.comments !== false && theme.comments && theme.comments.use
         - var commentsJsLoad = true
         !=partial('includes/third-party/comments/index', {}, {cache:theme.fragment_cache})

layout/post.pug

@@ -2,9 +2,6 @@ extends includes/layout.pug
 
 block content
   article#post(class="")
-    if top_img === false
-      include includes/header/post-info.pug
-
     #article-container.post-content!=page.content
     include includes/post/post-copyright.pug
     .tag_share

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.2.0",
+  "version": "3.1.0",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
@@ -23,7 +23,7 @@
     "email": "wong@jerryc.me"
   },
   "dependencies": {
-    "hexo-renderer-stylus": "^2.0.1",
+    "hexo-renderer-stylus": "^2.0.0",
     "hexo-renderer-pug": "^1.0.0"
   },
   "homepage": "https://demo.jerryc.me/",

scripts/filters/random_cover.js

@@ -6,13 +6,8 @@
 'use strict'
 
 hexo.extend.filter.register('before_post_render', function (data) {
-  if (hexo.theme.config.rootConfig.post_asset_folder) {
+  if (data.top_img && data.top_img.indexOf('/') === -1) data.top_img = data.path + data.top_img
-    const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
+  if (data.cover && data.cover.indexOf('/') === -1) data.cover = data.path + data.cover
-    const topImg = data.top_img
-    const cover = data.cover
-    if (topImg && topImg.indexOf('/') === -1 && imgTestReg.test(topImg)) data.top_img = data.path + topImg
-    if (cover && cover.indexOf('/') === -1) data.cover = data.path + cover
-  }
 
   if (data.cover === false) {
     data.randomcover = randomCover()
@@ -38,7 +33,6 @@ function randomCover () {
       return cover
     }
   } else {
-    cover = 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg'
+    return theme.default_top_img
-    return cover
   }
 }

scripts/helpers/page.js

@@ -34,32 +34,19 @@ hexo.extend.helper.register('injectHtml', function (data) {
 
 hexo.extend.helper.register('cloudTags', function (options = {}) {
   const env = this
-  let source = options.source
+  const source = options.source
   const minfontsize = options.minfontsize
   const maxfontsize = options.maxfontsize
   const limit = options.limit
   const unit = options.unit || 'px'
 
   let result = ''
-  if (limit > 0) {
+  const tagLimit = limit === 0 ? source.length : limit
-    source = source.limit(limit)
+  source.sort('name').limit(tagLimit).forEach(function (tags) {
-  }
+    const fontSizeRD = Math.random() * (maxfontsize - minfontsize) + minfontsize
-
+    const fontSize = fontSizeRD.toFixed(2) + unit
-  const sizes = []
-  source.sort('length').forEach(tag => {
-    const { length } = tag
-    if (sizes.includes(length)) return
-    sizes.push(length)
-  })
-
-  const length = sizes.length - 1
-  source.forEach(tag => {
-    const ratio = length ? sizes.indexOf(tag.length) / length : 0
-    const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
-    let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
     const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
-    style += ` color: ${color}`
+    result += `<a href='${env.url_for(tags.path)}' style='font-size:${fontSize}; color:${color}'>${tags.name}</a>`
-    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
   })
   return result
 })

scripts/tags/note.js

@@ -1,26 +1,12 @@
 /**
  * note.js
  * transplant from hexo-theme-next
- * Modify by Jerry
  */
 
 'use strict'
 
 function postNote (args, content) {
-  const styleConfig = hexo.theme.config.note.style
+  return `<div class="note ${args.join(' ')}">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div>`
-  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 })

source/css/_global/function.styl

@@ -45,189 +45,31 @@ minWidth2000()
   @media screen and (min-width: 2000px)
     {block}
 
-// animation
+[data-theme='light']
-if hexo-config('enter_transitions')
+  --global-bg: $body-bg
-  #content-inner,
+  --font-color: $font-black
-  #footer
+  --hr-border: lighten($theme-hr-color, 50%)
-    animation: main 1s
+  --hr-before-color: lighten($theme-hr-color, 30%)
-
+  --search-bg: $search-bg
-  #page-header
+  --search-input-color: $search-input-color
-    animation: header-effect 1s
+  --search-result-title: $search-result-title
-
+  --preloader-bg: $preloader-bg
-  #site-title,
+  --preloader-color: $preloader-word-color
-  #site-subtitle
+  --tab-border-color: $tab-border-color
-    animation: titlescale 1s
+  --tab-botton-bg: $tab-botton-bg
-
+  --tab-botton-color: $tab-botton-color
-  #nav.show
+  --tab-button-hover-bg: $tab-button-hover-bg
-    animation: headerNoOpacity 1s
+  --tab-button-active-bg: $tab-button-active-bg
-
+  --card-bg: $card-bg
-  canvas:not(#ribbon-canvas),
+  --sidebar-bg: $sidebar-background
-  #web_bg
+  --btn-hover-color: $button-hover-color
-    animation: to_show 4s
+  --btn-color: $button-color
-
+  --btn-bg: $button-bg
-  #ribbon-canvas
+  --text-bg-hover: $text-bg-hover
-    animation: ribbon_to_show 4s
+  --light-grey: $light-grey
-
+  --white: $white
-  .tocOpenPc
+  --text-highlight-color: $text-highlight-color
-    .sidebar-toc__title
+  --blockquote-color: $blockquote-color
-      animation: tocsidebarLtoR .5s
+  --blockquote-bg: $blockquote-background-color
-
+  --reward-pop: $reward-pop-up-bg
-    .sidebar-toc__progress
+  --sidebar-icon-color: $sidebar-icon-color
-      animation: tocsidebarLtoR .7s
-
-    .sidebar-toc__content
-      animation: tocsidebarLtoR .9s
-
-  .tocOpenMobile
-    .sidebar-toc__title
-      animation: tocsidebarRtoL .4s
-
-    .sidebar-toc__progress
-      animation: tocsidebarRtoL .6s
-
-    .sidebar-toc__content
-      animation: tocsidebarRtoL .7s
-
-  #mobile-sidebar-menus
-    &.open
-      for i in 1 2 3 4
-        > :nth-child({i})
-          animation: sidebarItem (i / 5)s
-
-.card-announcement-animation
-  color: #FF0000
-  animation: announ_animation .8s linear infinite
-
-.scroll-down-effects
-  animation: scroll-down-effect 1.5s infinite
-
-if hexo-config('avatar.effect') == true
-  .avatar-img
-    animation: avatar_turn_around 2s linear infinite
-
-.reward-main
-  animation: donate_effcet .3s .1s ease both
-
-@keyframes scroll-down-effect
-  0%
-    top: 0
-    opacity: .4
-
-  50%
-    top: -16px
-    opacity: 1
-
-  100%
-    top: 0
-    opacity: .4
-
-@keyframes header-effect
-  0%
-    opacity: 0
-    transform: translateY(-50px)
-
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes headerNoOpacity
-  0%
-    transform: translateY(-50px)
-
-  100%
-    transform: translateY(0)
-
-@keyframes main
-  0%
-    opacity: 0
-    transform: translateY(50px)
-
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes titlescale
-  0%
-    opacity: 0
-    transform: scale(.7)
-
-  100%
-    opacity: 1
-    transform: scale(1)
-
-@keyframes search_close
-  0%
-    opacity: 1
-    transform: scale(1)
-
-  100%
-    opacity: 0
-    transform: scale(.7)
-
-@keyframes to_show
-  0%
-    opacity: 0
-
-  100%
-    opacity: 1
-
-@keyframes ribbon_to_show
-  0%
-    opacity: 0
-
-  100%
-    opacity: hexo-config('canvas_ribbon.alpha')
-
-@keyframes avatar_turn_around
-  from
-    transform: rotate(0)
-
-  to
-    transform: rotate(360deg)
-
-@keyframes sub_menus
-  0%
-    opacity: 0
-    transform: translateY(10px)
-
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes donate_effcet
-  0%
-    opacity: 0
-    transform: translateY(-20px)
-
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes announ_animation
-  0%,
-  to
-    transform: scale(1)
-
-  50%
-    transform: scale(1.2)
-
-@keyframes sidebarItem
-  0%
-    transform: translateX(200px)
-
-  100%
-    transform: translateX(0)
-
-@keyframes tocsidebarRtoL
-  0%
-    transform: translateX(200px)
-
-  100%
-    transform: translateX(0)
-
-@keyframes tocsidebarLtoR
-  0%
-    transform: translateX(-200px)
-
-  100%
-    transform: translateX(0)

source/css/_global/index.styl

@@ -1,32 +1,3 @@
-[data-theme='light']
-  --global-bg: $body-bg
-  --font-color: $font-black
-  --hr-border: lighten($theme-hr-color, 50%)
-  --hr-before-color: lighten($theme-hr-color, 30%)
-  --search-bg: $search-bg
-  --search-input-color: $search-input-color
-  --search-result-title: $search-result-title
-  --preloader-bg: $preloader-bg
-  --preloader-color: $preloader-word-color
-  --tab-border-color: $tab-border-color
-  --tab-botton-bg: $tab-botton-bg
-  --tab-botton-color: $tab-botton-color
-  --tab-button-hover-bg: $tab-button-hover-bg
-  --tab-button-active-bg: $tab-button-active-bg
-  --card-bg: $card-bg
-  --sidebar-bg: $sidebar-background
-  --btn-hover-color: $button-hover-color
-  --btn-color: $button-color
-  --btn-bg: $button-bg
-  --text-bg-hover: $text-bg-hover
-  --light-grey: $light-grey
-  --white: $white
-  --text-highlight-color: $text-highlight-color
-  --blockquote-color: $blockquote-color
-  --blockquote-bg: $blockquote-background-color
-  --reward-pop: $reward-pop-up-bg
-  --sidebar-icon-color: $sidebar-icon-color
-
 html
   height: 100%
   font-size: 20px
@@ -141,8 +112,8 @@ button
   cursor: pointer
 
 // font
-#site-title,
+#page-header #site_title,
-#site-subtitle,
+#page-header #site_subtitle,
 #site-name,
 #aside_content .author-info__name,
 #aside_content .author-info__description
@@ -197,6 +168,191 @@ img:not([src])
 .post-ad
   margin: 2rem 0
 
-.ad-height
+.ad_height
   display: block !important
   height: auto !important
+
+// animation
+#content-inner,
+#footer
+  animation: main 1s
+
+#page-header
+  animation: header-effect 1s
+
+#site_title,
+#site_subtitle
+  animation: titlescale 1s
+
+canvas:not(#ribbon-canvas),
+#web_bg
+  animation: to_show 4s
+
+#ribbon-canvas
+  animation: ribbon_to_show 4s
+
+.card-announcement-animation
+  color: #FF0000
+  animation: announ_animation .8s linear infinite
+
+.scroll-down-effects
+  animation: scroll-down-effect 1.5s infinite
+
+if hexo-config('avatar.effect') == true
+  .avatar-img
+    animation: avatar_turn_around 2s linear infinite
+
+.reward-main
+  animation: donate_effcet .3s .1s ease both
+
+.tocOpenPc
+  .sidebar-toc__title
+    animation: tocsidebarLtoR .5s
+
+  .sidebar-toc__progress
+    animation: tocsidebarLtoR .7s
+
+  .sidebar-toc__content
+    animation: tocsidebarLtoR .9s
+
+.tocOpenMobile
+  .sidebar-toc__title
+    animation: tocsidebarRtoL .4s
+
+  .sidebar-toc__progress
+    animation: tocsidebarRtoL .6s
+
+  .sidebar-toc__content
+    animation: tocsidebarRtoL .7s
+
+#mobile-sidebar-menus
+  &.open
+    transform: translate3d(-100%, 0, 0)
+
+    for i in 1 2 3 4
+      > :nth-child({i})
+        animation: sidebarItem (i / 5)s
+
+@keyframes scroll-down-effect
+  0%
+    top: 0
+    opacity: .4
+
+  50%
+    top: -16px
+    opacity: 1
+
+  100%
+    top: 0
+    opacity: .4
+
+@keyframes header-effect
+  0%
+    opacity: 0
+    transform: translateY(-50px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes headerNoOpacity
+  0%
+    transform: translateY(-50px)
+
+  100%
+    transform: translateY(0)
+
+@keyframes main
+  0%
+    opacity: 0
+    transform: translateY(50px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes titlescale
+  0%
+    opacity: 0
+    transform: scale(.7)
+
+  100%
+    opacity: 1
+    transform: scale(1)
+
+@keyframes search_close
+  0%
+    opacity: 1
+    transform: scale(1)
+
+  100%
+    opacity: 0
+    transform: scale(.7)
+
+@keyframes to_show
+  0%
+    opacity: 0
+
+  100%
+    opacity: 1
+
+@keyframes ribbon_to_show
+  0%
+    opacity: 0
+
+  100%
+    opacity: hexo-config('canvas_ribbon.alpha')
+
+@keyframes avatar_turn_around
+  from
+    transform: rotate(0)
+
+  to
+    transform: rotate(360deg)
+
+@keyframes sub_menus
+  0%
+    opacity: 0
+    transform: translateY(10px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes donate_effcet
+  0%
+    opacity: 0
+    transform: translateY(-20px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes announ_animation
+  0%,
+  to
+    transform: scale(1)
+
+  50%
+    transform: scale(1.2)
+
+@keyframes sidebarItem
+  0%
+    transform: translateX(200px)
+
+  100%
+    transform: translateX(0)
+
+@keyframes tocsidebarRtoL
+  0%
+    transform: translateX(200px)
+
+  100%
+    transform: translateX(0)
+
+@keyframes tocsidebarLtoR
+  0%
+    transform: translateX(-200px)
+
+  100%
+    transform: translateX(0)

source/css/_layout/aside.styl

@@ -150,7 +150,6 @@
 
         & > time,
         & > .name
-          display: block
           color: $theme-meta-color
           font-size: 85%
 
@@ -165,8 +164,13 @@
           &:hover
             color: $text-hover
 
-      &.no-cover
+  .card-recent-post
-        min-height: 4.4em
+    .thumbnail
+      border-radius: 0 !important
+
+    .no-aside-cover
+      title
+        height: auto
 
   .card-archives ul.card-archive-list,
   .card-categories ul.card-category-list

source/css/_layout/head.styl

@@ -2,6 +2,7 @@
   position: relative
   width: 100%
   background-color: $light-blue
+  background-attachment: scroll
   background-position: center center
   background-size: cover
   background-repeat: no-repeat
@@ -18,14 +19,14 @@
       padding: 0 .5rem
       width: 100%
 
-  #site-title,
+  #site_title,
-  #site-subtitle,
+  #site_subtitle,
-  #scroll-down .scroll-down-effects
+  #scroll_down .scroll-down-effects
     text-align: center
     text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
     line-height: 1.5
 
-  #site-title
+  #site_title
     margin: 0
     color: var(--white)
     font-size: 1.85em
@@ -33,7 +34,7 @@
     +minWidth768()
       font-size: 2.85em
 
-  #site-subtitle
+  #site_subtitle
     color: var(--light-grey)
     font-size: 1.15em
 
@@ -56,7 +57,7 @@
       font-size: 1.43em
       cursor: pointer
 
-  #scroll-down
+  #scroll_down
     position: absolute
     bottom: 0
     width: 100%
@@ -75,7 +76,7 @@
     +maxWidth768()
       height: 14rem
 
-  #page-site-info
+  #page_site-info
     position: absolute
     top: 10rem
     padding: 0 .5rem
@@ -101,19 +102,6 @@
       background-color: alpha($dark-black, .5)
       content: ''
 
-  &.no-top-img
-    margin-bottom: .5rem
-    height: 60px
-    background: 0
-
-    #nav
-      background: rgba(255, 255, 255, .8)
-      box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
-
-      a
-        color: var(--font-color)
-        text-shadow: none
-
     #post-info
       position: absolute
       bottom: 1.5rem
@@ -125,7 +113,6 @@
         bottom: 1.1rem
         padding: 0 1.1rem
 
-#post-info
       #post-title
         margin-bottom: .4rem
         font-size: 2.15em
@@ -176,27 +163,6 @@
             color: $text-hover
             text-decoration: underline
 
-    if hexo-config('post_meta.post.date_format') == 'relative'
-      time
-        display: none
-
-// for not top_img
-#post
-  & > #post-info
-    margin-bottom: 1.5rem
-
-    .posttitle
-      padding-bottom: .2rem
-      border-bottom: 1px solid var(--light-grey)
-      color: var(--text-highlight-color)
-
-[data-theme='light']
-  #post
-    #post-info
-      #post-meta,
-      #post-meta a
-        color: #78818a
-
 // css hack
 // all browser in ios and safari in all apple device
 _::-webkit-full-page-media,
@@ -225,9 +191,6 @@ _:future,
     #menus
       padding-right: 0 !important
 
-  &.show
-    opacity: 1
-
   #blog_name
     flex: 1
 
@@ -247,7 +210,7 @@ _:future,
 
   &.fixed
     position: fixed
-    top: -60px
+    top: -62px
     z-index: 91
     background: rgba(255, 255, 255, .8)
     box-shadow: 0 5px 6px -5px alpha($grey, .6)

source/css/_layout/loading.styl

@@ -5,6 +5,7 @@ if hexo-config('preloader')
     width: 50%
     height: 100%
     background-color: var(--preloader-bg)
+    transition: all .5s
 
   #loading-box
     .loading-left-bg
@@ -52,11 +53,9 @@ if hexo-config('preloader')
 
     &.loaded
       .loading-left-bg
-        transition: all .5s
         transform: translate(-100%, 0)
 
       .loading-right-bg
-        transition: all .5s
         transform: translate(100%, 0)
 
       .spinner-box

source/css/_layout/mobile-sidebar.styl

@@ -19,9 +19,6 @@
     background: var(--sidebar-bg)
     transition: all .5s
 
-    &.open
-      transform: translate3d(-100%, 0, 0)
-
     & > .mobile_author_icon
       padding: 1.3rem 1.5rem 0
       text-align: center

source/css/_layout/third-party.styl

@@ -1,5 +1,5 @@
 #vcomment
-  font-size: 1.1em
+  font-size: 1.15em
 
   .vbtn
     border: none
@@ -13,9 +13,6 @@
     textarea
       background: url(hexo-config('valine.bg')) 100% 100% no-repeat
 
-      &:focus
-        background: none
-
   .vimg
     transition: all .3s
 

source/css/_mode/darkmode.styl

@@ -1,42 +1,49 @@
 if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
   [data-theme='dark']
     --global-bg: darken(#121212, 2)
-    --font-color: alpha(#FFFFFF, .7)
+    --font-color: alpha(#FFFFFF, .6)
-    --hr-border: alpha(#FFFFFF, .4)
+    --hr-border: alpha(#FFFFFF, .3)
-    --hr-before-color: alpha(#FFFFFF, .7)
+    --hr-before-color: alpha(#FFFFFF, .6)
     --search-bg: #121212
-    --search-input-color: alpha(#FFFFFF, .7)
+    --search-input-color: alpha(#FFFFFF, .6)
-    --search-result-title: alpha(#FFFFFF, .9)
+    --search-result-title: alpha(#FFFFFF, .8)
     --preloader-bg: darken(#121212, 2)
-    --preloader-color: alpha(#FFFFFF, .7)
+    --preloader-color: alpha(#FFFFFF, .6)
     --tab-border-color: #2c2c2c
     --tab-botton-bg: #2c2c2c
-    --tab-botton-color: alpha(#FFFFFF, .7)
+    --tab-botton-color: alpha(#FFFFFF, .6)
     --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, .7)
+    --btn-color: alpha(#FFFFFF, .6)
     --btn-bg: lighten(#121212, 5)
     --text-bg-hover: lighten(#121212, 15)
-    --light-grey: alpha(#FFFFFF, .7)
+    --light-grey: alpha(#FFFFFF, .6)
-    --white: alpha(#FFFFFF, .9)
+    --white: alpha(#FFFFFF, .8)
-    --text-highlight-color: alpha(#FFFFFF, .9)
+    --text-highlight-color: alpha(#FFFFFF, .8)
-    --blockquote-color: alpha(#FFFFFF, .7)
+    --blockquote-color: alpha(#FFFFFF, .6)
     --blockquote-bg: lighten(#121212, 10)
     --reward-pop: lighten(#121212, 10)
-    --sidebar-icon-color: alpha(#FFFFFF, .7)
+    --sidebar-icon-color: alpha(#FFFFFF, .6)
 
-    #web_bg:before,
+    // 網站背景，footer背景
-    #footer:before,
+    #web_bg[data-type=color],
-    #page-header:before
+    #footer[data-type=color]
+      background: darken(#121212, 2)
+
+    #web_bg[data-type=photo]:before,
+    #footer[data-type=photo]:before
       position: absolute
       width: 100%
       height: 100%
       background-color: alpha($dark-black, .7)
       content: ''
 
+    #page-header
+      background-color: #121212
+
     #article-container
       code
         background: #2c2c2c
@@ -50,8 +57,18 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
 
     // 頭部
     #page-header
-      & > #nav.fixed,
+      &:before
-      &.no-top-img #nav
+        position: absolute
+        top: 0
+        left: 0
+        display: block
+        width: 100%
+        height: 100%
+        background-color: alpha($dark-black, .7)
+        content: ''
+
+      & > #nav
+        &.fixed
           background: alpha(#121212, .8)
           box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
 
@@ -60,7 +77,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, .7) !important
+        color: alpha(#FFFFFF, .6) !important
 
       figure.highlight
         box-shadow: none
@@ -70,7 +87,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
             background: lighten(#121212, 5)
 
           .line:before
-            color: alpha(#FFFFFF, .7) !important
+            color: alpha(#FFFFFF, .6) !important
 
           .hljs
             background-color: lighten(#121212, 2) !important
@@ -88,12 +105,12 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
           background: #2c2c2c !important
 
         label
-          filter: brightness(.8)
+          filter: brightness(.7)
 
     // note
     if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
       .note
-        filter: brightness(.8)
+        filter: brightness(.7)
 
     // hide-tags
     .hide-button,
@@ -105,7 +122,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     img,
     .gist,
     .aplayer
-      filter: brightness(.8)
+      filter: brightness(.7)
 
     #aside_content .aside-list > .aside-list-item:not(:last-child)
       border-bottom: 1px dashed alpha(#FFFFFF, .1)
@@ -115,7 +132,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     #hexo-blog-encrypt
       label,
       input
-        color: alpha(#FFFFFF, .7) !important
+        color: alpha(#FFFFFF, .6) !important
 
       input
         background-color: #121212
@@ -125,30 +142,24 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
       filter: brightness(.8)
 
       svg
-        fill: alpha(#FFFFFF, .9) !important
+        fill: alpha(#FFFFFF, .8) !important
 
     // Disqus and Disqusjs
     #disqus_thread
       #dsqjs
         .dsqjs-tab-active,
         .dsqjs-no-comment
-          color: alpha(#FFFFFF, .7)
+          color: alpha(#FFFFFF, .6)
 
         .dsqjs-order-label
           background-color: lighten(#121212, 5)
 
         .dsqjs-post-body
-          color: alpha(#FFFFFF, .7)
+          color: alpha(#FFFFFF, .6)
 
           code,
           pre
             background: #2c2c2c
 
           blockquote
-            color: alpha(#FFFFFF, .7)
+            color: alpha(#FFFFFF, .6)
-
-    #artitalk_main #lazy
-      background: #121212
-
-    #operare_artitalk .c2
-      background: #121212

source/css/_page/categories.styl

@@ -1,16 +1,14 @@
-#page
+.category-content
   .category-lists
     padding: 1rem 0 1.5rem
 
     +maxWidth768()
       padding: 0
 
-    .category-title
+    .category__title
+      text-align: center
       font-size: 2.57em
 
-      +maxWidth768()
-        font-size: 2em
-
     .category-list
       a
         color: var(--font-color)

source/css/_page/common.styl

@@ -39,12 +39,13 @@
   &:hover
     box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
 
-if hexo-config('aside.position') == 'left'
 +minWidth900()
-    .layout_page
+  if hexo-config('aside.position') == 'left'
-      & > div:first-child
+    #recent-posts,
+    #page,
+    .category-content,
+    #archive,
+    .tag-cloud,
+    #tag,
+    #category
       order: 2
-
-#page
-  h1.page-title
-    margin-top: .4rem

source/css/_page/homepage.styl

@@ -107,10 +107,6 @@
         .fa-angle-right
           margin: 0 .2rem
 
-        if hexo-config('post_meta.page.date_format') == 'relative'
-          time
-            display: none
-
         a
           color: $theme-meta-color
 

source/css/_page/tags.styl

@@ -1,5 +1,6 @@
 .tag-cloud
-  &-list
+  text-align: center
+
   a
     display: inline-block
     padding: 0 .4rem
@@ -9,11 +10,5 @@
       color: $text-hover !important
       transform: scale(1.1)
 
-      +maxWidth768()
+  &__title
-        zoom: .85
-
-  &-title
     font-size: 2.57em
-
-    +maxWidth768()
-      font-size: 2em

source/css/_tags/button.styl

@@ -32,9 +32,9 @@
     &:hover
       text-decoration: none
 
-    for $type in $tagsP-types
+    for $type in $btn-types
       &.{$type}
-        background-color: lookup('$tagsP-' + $type + '-color')
+        background-color: lookup('$btn-' + $type + '-color')
 
     &.outline
       border: 1px solid transparent
@@ -49,10 +49,10 @@
       &:hover
         color: white !important
 
-      for $type in $tagsP-types
+      for $type in $btn-types
         &.{$type}
-          border-color: lookup('$tagsP-' + $type + '-color')
+          border-color: lookup('$btn-' + $type + '-color')
-          color: lookup('$tagsP-' + $type + '-color')
+          color: lookup('$btn-' + $type + '-color')
 
           &.button--animated:before
-            background: lookup('$tagsP-' + $type + '-color')
+            background: lookup('$btn-' + $type + '-color')

source/css/_tags/note.styl

@@ -1,51 +1,28 @@
 .note
   $note-icons = hexo-config('note.icons')
+  $note-style = hexo-config('note.style')
   position: relative
   margin: 0 0 1rem
   padding: 15px
 
-  if hexo-config('note.border_radius') is a 'unit'
+  if ($note-style == 'simple')
-    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
+  if ($note-style == 'modern')
-    border: 1px solid transparent !important
+    border: 1px solid transparent
     background-color: #f5f5f5
     color: $font-black
 
-  &.flat
+  if ($note-style == '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,
@@ -75,21 +52,21 @@
 
   if $note-icons
     &:not(.no-icon)
-      padding-left: 2.25rem
+      padding-left: 45px
 
       &::before
         position: absolute
-        top: calc(50% - .8rem)
+        top: 13px
-        left: .7rem
+        left: 15px
         font-size: larger
         @extend .fontawesomeIcon
 
   for $type in $note-types
     &.{$type}
-      &.flat
+      if ($note-style == 'flat')
         background: lookup('$note-' + $type + '-bg')
 
-      &.modern
+      if ($note-style == 'modern')
         border-color: lookup('$note-modern-' + $type + '-border')
         background: lookup('$note-modern-' + $type + '-bg')
         color: lookup('$note-modern-' + $type + '-text')
@@ -101,7 +78,7 @@
             &:hover
               color: lookup('$note-modern-' + $type + '-hover')
 
-      &:not(.modern)
+      if ($note-style != 'modern')
         border-left-color: lookup('$note-' + $type + '-border')
 
         h2,
@@ -112,10 +89,8 @@
           color: lookup('$note-' + $type + '-text')
 
       if $note-icons
-        &:not(.no-icon)
+        &:not(.no-icon)::before
-          &::before
           content: lookup('$note-' + $type + '-icon')
 
-          &:not(.modern)
+          if ($note-style != 'modern')
-            &::before
             color: lookup('$note-' + $type + '-text')

source/css/var.styl

@@ -32,7 +32,7 @@ $code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font
 $font-color = #1F2D3D
 $rem = 20px
 $text-line-height = 2
-$web-bg = hexo-config('background') && unquote(hexo-config('background'))
+$web-bg = hexo-config('background') && convert(hexo-config('background'))
 $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
 $index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43%
 // Global color & SVG
@@ -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/note
+// Tag Plugins - Button
-$tagsP-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
+$btn-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
 $btn-color = #fff
 $btn-default-color = #777
-$tagsP-blue-color = #428bca
+$btn-blue-color = #428bca
-$tagsP-pink-color = #FF69B4
+$btn-pink-color = #FF69B4
-$tagsP-red-color = #FF0000
+$btn-red-color = #FF0000
-$tagsP-orange-color = #FF8C00
+$btn-orange-color = #FF8C00
-$tagsP-purple-color = #6f42c1
+$btn-purple-color = #6f42c1
-$tagsP-green-color = #5cb85c
+$btn-green-color = #5cb85c
 // Tag Plugins - Tab
 $tab-border-color = #f0f0f0
 $tab-botton-bg = #f0f0f0

source/js/main.js

@@ -29,7 +29,7 @@ $(function () {
   const initAdjust = () => {
     if (window.innerWidth < 768) adjustMenu(0)
     else adjustMenu(2)
-    $('#nav').addClass('show')
+    $('#nav').css({ opacity: '1', animation: 'headerNoOpacity 1s' })
   }
 
   /**
@@ -159,18 +159,14 @@ $(function () {
     })
 
     const mql = window.matchMedia('(max-width: 1024px)')
-    const $toggleSidebar = $('#toggle-sidebar')
+    mql.addListener((ev) => {
-    const matchFn = (ev) => {
       if (ev.matches) {
         if ($sidebar.hasClass('tocOpenPc')) closeSidebar()
       } else {
-        if ($toggleSidebar.hasClass('on')) openSidebar()
+        if ($('#toggle-sidebar').hasClass('on')) openSidebar()
         if ($mobileTocButton.hasClass('open')) closeMobileSidebar('toc')
       }
-    }
+    })
-
-    mql.addListener(matchFn)
-    document.addEventListener('pjax:send', () => { mql.removeListener(matchFn) })
 
     // toc元素點擊
     $sidebar.find('.toc-link').on('click', function (e) {
@@ -186,7 +182,7 @@ $(function () {
  * 首頁top_img底下的箭頭
  */
   const scrollDownInIndex = () => {
-    $('#scroll-down').on('click', function () {
+    $('#scroll_down').on('click', function () {
       btf.scrollToDest('#content-inner')
     })
   }
@@ -200,7 +196,7 @@ $(function () {
     const isHighlightLang = GLOBAL_CONFIG.highlight.highlightLang
     const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
     const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
-    const $figureHighlight = GLOBAL_CONFIG.highlight.plugin === 'highlighjs' ? $('figure.highlight') : $('pre[class*="language-"]')
+    const $figureHighlight = GLOBAL_CONFIG.highlight.plugin === 'highlighjs' ? $('figure.highlight') : $('pre[class*="language-"')
 
     if (isShowTool && $figureHighlight.length) {
       const isPrismjs = GLOBAL_CONFIG.highlight.plugin === 'prismjs'
@@ -349,7 +345,9 @@ $(function () {
  * fancybox和 mediumZoom
  */
   const addLightBox = function () {
-    if (GLOBAL_CONFIG.lightbox === 'fancybox') {
+    const isMediumZoom = GLOBAL_CONFIG.medium_zoom
+    const isFancybox = GLOBAL_CONFIG.fancybox
+    if (isFancybox) {
       const images = $('#article-container img:not(.gallery-group-img)').not($('a>img'))
       images.each(function (i, o) {
         const lazyloadSrc = $(o).attr('data-lazy-src') ? $(o).attr('data-lazy-src') : $(o).attr('src')
@@ -365,7 +363,7 @@ $(function () {
         buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'],
         hash: false
       })
-    } else {
+    } else if (isMediumZoom) {
       const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
       zoom.on('open', function (event) {
         const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
@@ -427,18 +425,14 @@ $(function () {
  *  toc
  */
   const tocFn = function () {
-    const $sidebar = $('#sidebar')
+    $('.toc-child').hide()
-    const $tocChild = $sidebar.find('.toc-child')
-    const $tocLink = $sidebar.find('.toc-link')
-    const $article = $('#article-container')
-
-    $tocChild.hide()
 
     // main of scroll
     $(window).scroll(btf.throttle(function (event) {
       const currentTop = $(this).scrollTop()
       scrollPercent(currentTop)
       findHeadPosition(currentTop)
+      autoScrollToc(currentTop)
     }, 100))
 
     // expand toc-item
@@ -450,17 +444,18 @@ $(function () {
     }
 
     const scrollPercent = function (currentTop) {
-      const docHeight = $article.height()
+      const $dom = $('#article-container')
+      const docHeight = $dom.height()
       const winHeight = $(window).height()
-      const headerHeight = $article.offset().top
+      const headerHeight = $dom.offset().top
       const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight)
       const scrollPercent = (currentTop - headerHeight) / (contentMath)
       const scrollPercentRounded = Math.round(scrollPercent * 100)
       const percentage = (scrollPercentRounded > 100) ? 100
         : (scrollPercentRounded <= 0) ? 0
           : scrollPercentRounded
-      $sidebar.find('.progress-num').text(percentage)
+      $('#sidebar .progress-num').text(percentage)
-      $sidebar.find('.sidebar-toc__progress-bar').animate({
+      $('#sidebar .sidebar-toc__progress-bar').animate({
         width: percentage + '%'
       }, 100)
     }
@@ -473,32 +468,19 @@ $(function () {
       }
     }
 
-    const autoScrollToc = function (currentTop, item) {
-      const activePosition = item.offset().top
-      const $tocContent = $sidebar.find('.sidebar-toc__content')
-      const sidebarScrollTop = $tocContent.scrollTop()
-      if (activePosition > (currentTop + $(window).height() - 100)) {
-        $tocContent.scrollTop(sidebarScrollTop + 100)
-      }
-      if (activePosition < currentTop + 100) {
-        $tocContent.scrollTop(sidebarScrollTop - 100)
-      }
-    }
-
     // find head position & add active class
     // DOM Hierarchy:
     // ol.toc > (li.toc-item, ...)
     // li.toc-item > (a.toc-link, ol.toc-2child > (li.toc-item, ...))
     const versionBiggerFive = GLOBAL_CONFIG.hexoversion.split('.')[0] >= 5
-    const list = $article.find('h1,h2,h3,h4,h5,h6')
-
     const findHeadPosition = function (top) {
     // assume that we are not in the post page if no TOC link be found,
     // thus no need to update the status
-      if ($tocLink.length === 0) {
+      if ($('.toc-link').length === 0) {
         return false
       }
 
+      const list = $('#article-container').find('h1,h2,h3,h4,h5,h6')
       let currentId = ''
       list.each(function () {
         const head = $(this)
@@ -509,19 +491,18 @@ $(function () {
       })
 
       if (currentId === '') {
-        $tocLink.removeClass('active')
+        $('.toc-link').removeClass('active')
-        $tocChild.hide()
+        $('.toc-child').hide()
       }
 
-      const currentActive = $tocLink.filter('.active')
+      const currentActive = $('.toc-link.active')
       if (currentId && currentActive.attr('href') !== currentId) {
         if (isAnchor) updateAnchor(currentId)
 
-        $tocLink.removeClass('active')
+        $('.toc-link').removeClass('active')
 
-        const _this = $tocLink.filter('[href="' + currentId + '"]')
+        const _this = $('.toc-link[href="' + currentId + '"]')
         _this.addClass('active')
-        autoScrollToc(top, _this)
 
         const parents = _this.parents('.toc-child')
         // Returned list is in reverse order of the DOM elements
@@ -537,6 +518,19 @@ $(function () {
           .find('.toc-child').hide()
       }
     }
+
+    const autoScrollToc = function (currentTop) {
+      if ($('.toc-link').hasClass('active')) {
+        const activePosition = $('.active').offset().top
+        const sidebarScrollTop = $('#sidebar .sidebar-toc__content').scrollTop()
+        if (activePosition > (currentTop + $(window).height() - 100)) {
+          $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrollTop + 100)
+        }
+        if (activePosition < currentTop + 100) {
+          $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrollTop - 100)
+        }
+      }
+    }
   }
 
   /**
@@ -656,6 +650,22 @@ $(function () {
     })
   }
 
+  /**
+ * 百度推送
+ */
+  const pushToBaidu = () => {
+    const bp = document.createElement('script')
+    const curProtocol = window.location.protocol.split(':')[0]
+    if (curProtocol === 'https') {
+      bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'
+    } else {
+      bp.src = 'http://push.zhanzhang.baidu.com/push.js'
+    }
+    bp.dataset.pjax = ''
+    const s = document.getElementsByTagName('script')[0]
+    s.parentNode.insertBefore(bp, s)
+  }
+
   /**
  * tag-hide
  */
@@ -709,19 +719,20 @@ $(function () {
     const $cardCategory = $('#aside-cat-list .card-category-list-item.parent i')
     $cardCategory.on('click', function (e) {
       e.preventDefault()
-      $(this).toggleClass('expand').parents('.parent').next().slideToggle(300)
+      const $this = $(this)
+      $this.toggleClass('expand')
+      $this.parents('.parent').next().toggle()
     })
   }
 
   const switchComments = function () {
     let switchDone = false
     $('#switch-comments-btn').on('click', function () {
-      $('#post-comment > .comment-wrap > div').each(function (i, o) {
+      $('#post-comment > .comment-wrap > div').each(function () {
-        const $this = $(o)
+        if ($(this).is(':visible')) {
-        if ($this.is(':visible')) {
+          $(this).hide()
-          $this.hide()
         } else {
-          $this.css({
+          $(this).css({
             display: 'block',
             animation: 'tabshow .5s'
           })
@@ -755,14 +766,6 @@ $(function () {
     })
   }
 
-  const relativeDate = function (selector) {
-    selector.each((i, o) => {
-      const $this = $(o)
-      const timeVal = $this.attr('datetime')
-      $this.text(btf.diffDate(timeVal, true)).css('display', 'inline')
-    })
-  }
-
   const unRefreshFn = function () {
     $(window).on('resize', function () {
       if (window.innerWidth < 768) adjustMenu(0)
@@ -773,6 +776,7 @@ $(function () {
     clickFnOfSubMenu()
     GLOBAL_CONFIG.islazyload && lazyloadImg()
     GLOBAL_CONFIG.copyright !== undefined && addCopyright()
+    GLOBAL_CONFIG.baiduPush && pushToBaidu()
   }
 
   window.refreshFn = function () {
@@ -783,12 +787,6 @@ $(function () {
       toggleSidebar()
       GLOBAL_CONFIG_SITE.isSidebar && tocFn()
       GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
-      GLOBAL_CONFIG.relativeDate.post && relativeDate($('#post-meta time'))
-    } else {
-      GLOBAL_CONFIG.relativeDate.homepage && relativeDate($('#recent-posts time'))
-      GLOBAL_CONFIG.runtime && addRuntime()
-      addLastPushDate()
-      toggleCardCategory()
     }
 
     sidebarFn()
@@ -796,12 +794,15 @@ $(function () {
     GLOBAL_CONFIG.highlight && addHighlightTool()
     GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
     runJustifiedGallery()
-    GLOBAL_CONFIG.lightbox !== 'null' && addLightBox()
+    addLightBox()
     scrollFn()
+    GLOBAL_CONFIG.runtime && addRuntime()
+    addLastPushDate()
     addTableWrap()
     clickFnOfTagHide()
     tabsFn.clickFnOfTabs()
     tabsFn.backToTop()
+    toggleCardCategory()
     switchComments()
   }
 

source/js/search/local-search.js

@@ -85,7 +85,7 @@ $(function () {
             }
             let dataTitle = data.title.trim().toLowerCase()
             const dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
-            const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url
+            const dataUrl = data.url
             let indexTitle = -1
             let indexContent = -1
             let firstOccur = -1

source/js/third-party/ClickShowText.js

@@ -0,0 +1,42 @@
+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();
+    });
+});
+});

source/js/third-party/activate-power-mode.js

@@ -0,0 +1 @@
+!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}()}])}));

source/js/third-party/canvas-nest.js

@@ -0,0 +1,83 @@
+! 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)
+}();

source/js/third-party/canvas-ribbon.js

@@ -0,0 +1,107 @@
+/**
+ * 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();
+})();

source/js/third-party/click_heart.js

@@ -0,0 +1,73 @@
+!(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);

source/js/third-party/fireworks.js

@@ -0,0 +1,129 @@
+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
+    })
+}

source/js/third-party/piao.js

@@ -0,0 +1,332 @@
+(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
+  })
+}

source/js/utils.js

@@ -102,33 +102,20 @@ var btf = {
     const dateNow = new Date()
     const datePost = new Date(d)
     const dateDiff = dateNow.getTime() - datePost.getTime()
-    const minute = 1000 * 60
+    const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000))
-    const hour = minute * 60
-    const day = hour * 24
-    const month = day * 30
-
     let result
     if (more) {
-      const monthCount = dateDiff / month
+      if (dateDiff <= 3600000) { // < 1 hour
-      const dayCount = dateDiff / day
+        result = GLOBAL_CONFIG.date_suffix.one_hour
-      const hourCount = dateDiff / hour
+      } else if (dateDiff < 3600000 * 24) { // 1 hour < x < 24 hours
-      const minuteCount = dateDiff / minute
+        result = Math.floor(dateDiff / 3600000) + ' ' + GLOBAL_CONFIG.date_suffix.hours
-
+      } else if (dayDiff >= 1 || dayDiff < 365) { // 1 day < x < 365 days
-      if (monthCount > 12) {
+        result = dayDiff + ' ' + GLOBAL_CONFIG.date_suffix.day
-        result = datePost.toLocaleDateString().replace(/\//g, '-')
+      } else { // > 365 days
-      } else if (monthCount >= 1) {
+        result = d.toLocaleDateString().replace(/\//g, '-')
-        result = parseInt(monthCount) + ' ' + GLOBAL_CONFIG.date_suffix.month
-      } else if (dayCount >= 1) {
-        result = parseInt(dayCount) + ' ' + GLOBAL_CONFIG.date_suffix.day
-      } else if (hourCount >= 1) {
-        result = parseInt(hourCount) + ' ' + GLOBAL_CONFIG.date_suffix.hour
-      } else if (minuteCount >= 1) {
-        result = parseInt(minuteCount) + ' ' + GLOBAL_CONFIG.date_suffix.min
-      } else {
-        result = GLOBAL_CONFIG.date_suffix.just
       }
     } else {
-      result = parseInt(dateDiff / day)
+      result = dayDiff
     }
     return result
   },