💥 支持雙評論系統配置/評論配置整理

✨ 增加mac light 代碼框
✨ 增加文章過期提醒配置
✨ 文章copyright 可單獨配置
✨ card-category 中category名稱和數字限制一行顯示
✨ 簡繁轉換優化，placeholder文字也會被轉換
🐛 修復配置PWA參數時，如果網站是子目錄時，會出現加載不到文件的bugs
調整當card-category有收縮按鈕時的顯示佈局

_config.yml

@@ -20,7 +20,7 @@ menu:
 # Code Blocks (代碼相關)
 # --------------------------------------
 
-highlight_theme: light # default / darker / pale night / light / ocean / mac / false
+highlight_theme: light # default / darker / pale night / light / ocean / mac / mac light / false
 highlight_copy: true # copy button
 highlight_lang: true # show the code language
 highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
@@ -122,7 +122,7 @@ cover:
   # left/right/both
   position: both
   # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
-  default_cover: 
+  default_cover:
     - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
 
 # Replace Broken Images (替換無法顯示的圖片)
@@ -200,6 +200,15 @@ photofigcaption: false
 # when you scroll in post, the URL will update according to header id.
 anchor: false
 
+# Displays outdated notice for a post (文章過期提醒)
+noticeOutdate:
+  enable: false
+  style: flat # style: simple/flat
+  limit_day: 500 # When will it be shown
+  position: top # position: top/bottom
+  message_prev: It has been
+  message_next: days since the last update, the content of the article may be outdated.
+
 # Share System (分享功能)
 # --------------------------------------
 
@@ -231,18 +240,23 @@ addtoany:
 # Comments System
 # --------------------------------------
 
+comments:
+  # Up to two comments system, the first will be shown as default
+  # Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments
+  use:
+  text: true # Display the comment name next to the button
+  load_begin: false # The second comment system will auto load when visiting the website
+  count: false # Dispaly comment count in top_img
+
 # disqus
 # https://disqus.com/
 disqus:
-  enable: false
   shortname:
-  count: false # dispaly comment count in top_img
 
 # Alternative Disqus - Render comments with Disqus API
 # DisqusJS評論系統，可以實現在網路審查地區載入 Disqus 評論列表，兼容原版
 # https://github.com/SukkaW/DisqusJS
 disqusjs:
-  enable: false
   shortname:
   siteName:
   apikey:
@@ -250,18 +264,15 @@ disqusjs:
   nocomment: # display when a blog post or an article has no comment attached
   admin:
   adminLabel:
-  count: false # dispaly comment count in top_img
 
 # livere(來必力)
 # https://www.livere.com/
 livere:
-  enable: false
   uid:
 
 # gitalk
 # https://github.com/gitalk/gitalk
 gitalk:
-  enable: false
   client_id:
   client_secret:
   repo:
@@ -272,12 +283,10 @@ gitalk:
   distractionFreeMode: false # Facebook-like distraction free mode.
   pagerDirection: last # Comment sorting direction, available values are last and first.
   createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically
-  count: false # dispaly comment count in top_img
 
 # valine
 # https://valine.js.org
 valine:
-  enable: false # if you want use valine,please set this value is true
   appId: # leancloud application app id
   appKey: # leancloud application app key
   pageSize: 10 # comment list page size
@@ -291,12 +300,10 @@ valine:
   emojiCDN: # emoji CDN
   enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
   requiredFields: nick,mail # required fields (nick/mail)
-  count: false # dispaly comment count in top_img
 
 # utterances
 # https://utteranc.es/
 utterances:
-  enable: false
   repo:
   # Issue Mapping: pathname/url/title/og:title
   issue_term: pathname
@@ -307,13 +314,11 @@ utterances:
 # Facebook Comments Plugin
 # https://developers.facebook.com/docs/plugins/comments/
 facebook_comments:
-  enable: false
   app_id:
   user_id: # optional
   pageSize: 10 # The number of comments to show
   order_by: social # social/time/reverse_time
   lang: en_US # Language en_US/zh_CN/zh_TW and so on
-  count: false
 
 # Chat Services
 # --------------------------------------
@@ -736,7 +741,7 @@ fragment_cache: true
 # 插入代码到头部 </head> 之前 和 底部 </body> 之前
 inject:
   head:
-    # - <link rel="stylesheet" href="/xxx.css">
+  # - <link rel="stylesheet" href="/xxx.css">
   bottom:
     # - <script src="xxxx"></script>
 

layout/includes/comments/disqus.pug

@@ -1,18 +1,28 @@
 #disqus_thread
 script.
-  var disqus_config = function () {
+  function loadDisqus () {
-    this.page.url = '!{ page.permalink }';
+    var disqus_config = function () {
-    this.page.identifier = '!{ page.path }';
+      this.page.url = '!{ page.permalink }';
-    this.page.title = '!{ page.title }';
+      this.page.identifier = '!{ page.path }';
-  };
+      this.page.title = '!{ page.title }';
-  (function() { 
+    };
+
     var d = document, s = d.createElement('script');
     s.src = 'https://!{theme.disqus.shortname}.disqus.com/embed.js';
     s.setAttribute('data-timestamp', +new Date());
     (d.head || d.body).appendChild(s);
-  })();
+  }
 
-if is_post() && theme.disqus.count
+  if ('!{defaultComment}' === 'Disqus' || !{theme.comments.load_begin}) {
+    window.addEventListener('load', loadDisqus)
+  }
+  else {
+    function loadOtherComment () {
+      loadDisqus()
+    }
+  }
+
+if is_post() && theme.comments.count && defaultComment === 'Disqus'
   script.
     function getDisqusCount() {
       var d = document, s = d.createElement('script');

layout/includes/comments/disqusjs.pug

@@ -1,20 +1,38 @@
 #disqus_thread
-script(src=url_for(theme.CDN.disqusjs))
 script.
-  var dsqjs = new DisqusJS({
+  function loadDisqusjs () {
-    shortname: '!{theme.disqusjs.shortname}',
+    const ele = document.createElement('link')
-    siteName: '!{theme.disqusjs.siteName}',
+    ele.rel = 'stylesheet'
-    identifier: '!{ page.path }',
+    ele.href= '!{url_for(theme.CDN.disqusjs_css)}'
-    url: '!{ page.permalink }',
+    document.getElementsByTagName('head')[0].appendChild(ele)
-    title: '!{ page.title }',
-    api: '!{theme.disqusjs.api}',
-    apikey: '!{theme.disqusjs.apikey}',
-    nocomment: '!{theme.disqusjs.nocomment}',
-    admin: '!{theme.disqusjs.admin}',
-    adminLabel: '!{theme.disqusjs.adminLabel}'
-  });
 
-if is_post() && theme.disqusjs.count
+    loadScript('!{url_for(theme.CDN.disqusjs)}', function() {
+      var dsqjs = new DisqusJS({
+        shortname: '!{theme.disqusjs.shortname}',
+        siteName: '!{theme.disqusjs.siteName}',
+        identifier: '!{ page.path }',
+        url: '!{ page.permalink }',
+        title: '!{ page.title }',
+        api: '!{theme.disqusjs.api}',
+        apikey: '!{theme.disqusjs.apikey}',
+        nocomment: '!{theme.disqusjs.nocomment}',
+        admin: '!{theme.disqusjs.admin}',
+        adminLabel: '!{theme.disqusjs.adminLabel}'
+      });
+    })
+  }
+
+  if ('!{defaultComment}' === 'Disqusjs' || !{theme.comments.load_begin}) {
+    window.addEventListener('load', loadDisqusjs)
+  }
+  else {
+    function loadOtherComment () {
+      loadDisqusjs()
+    }
+  }
+
+
+if is_post() && theme.comments.count && defaultComment === 'Disqusjs'
   script.
     function getDisqusCount() {
       var d = document, s = d.createElement('script');

layout/includes/comments/facebook_comments.pug

@@ -1,11 +1,29 @@
 #fb-root
-script(async defer crossorigin="anonymous" src=`https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v6.0`)
 .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
             data-href=urlNoIndex() 
             data-numposts= theme.facebook_comments.pageSize || 10
             data-order-by= theme.facebook_comments.order_by || 'social'
             data-width="100%")
 
+script.
+  function loadFBComent () {
+    let ele = document.createElement('script')
+    ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v7.0')
+    ele.setAttribute('async', 'true')
+    ele.setAttribute('defer', 'true')
+    ele.setAttribute('crossorigin', 'anonymous')
+    document.getElementById('fb-root').insertAdjacentElement('afterbegin',ele)
+  }
+
+  if ('!{defaultComment}' === 'Facebook Comments' || !{theme.comments.load_begin}) {
+    window.addEventListener('load', loadFBComent)
+  }
+  else {
+    function loadOtherComment () {
+      loadFBComent()
+    }
+  }
+
 if theme.darkmode.enable
   script.
     var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'

layout/includes/comments/gitalk.pug

@@ -1,26 +1,46 @@
 #gitalk-container
-script.
+script(src=url_for(theme.CDN.blueimp_md5))
-  var gitalk = new Gitalk({
-    clientID: '!{theme.gitalk.client_id}',
-    clientSecret: '!{theme.gitalk.client_secret}',
-    repo: '!{theme.gitalk.repo}',
-    owner: '!{theme.gitalk.owner}',
-    admin: ['!{theme.gitalk.admin}'],
-    id: md5(decodeURI(location.pathname)),
-    language: '!{theme.gitalk.language}',
-    perPage: !{theme.gitalk.perPage},
-    distractionFreeMode: !{theme.gitalk.distractionFreeMode},
-    pagerDirection: '!{theme.gitalk.pagerDirection}',
-    createIssueManually: !{theme.gitalk.createIssueManually},
-    updateCountCallback: commentCount
-  })
-  gitalk.render('gitalk-container')
 
-  function commentCount(n){
+script.
-    try {
+  function loadGitalk () {
-      document.getElementsByClassName('gitalk-comment-count')[0].innerHTML= n
+    const ele = document.createElement('link')
-    } catch (e) {
+    ele.rel = 'stylesheet'
-      return false
+    ele.href= '!{url_for(theme.CDN.gitalk_css)}'
+    document.getElementsByTagName('head')[0].appendChild(ele)
+
+    loadScript('!{url_for(theme.CDN.gitalk)}', function () {
+      var gitalk = new Gitalk({
+        clientID: '!{theme.gitalk.client_id}',
+        clientSecret: '!{theme.gitalk.client_secret}',
+        repo: '!{theme.gitalk.repo}',
+        owner: '!{theme.gitalk.owner}',
+        admin: ['!{theme.gitalk.admin}'],
+        id: md5(decodeURI(location.pathname)),
+        language: '!{theme.gitalk.language}',
+        perPage: !{theme.gitalk.perPage},
+        distractionFreeMode: !{theme.gitalk.distractionFreeMode},
+        pagerDirection: '!{theme.gitalk.pagerDirection}',
+        createIssueManually: !{theme.gitalk.createIssueManually},
+        updateCountCallback: commentCount
+      })
+      gitalk.render('gitalk-container')
+    })
+
+    function commentCount(n){
+      try {
+        document.getElementsByClassName('gitalk-comment-count')[0].innerHTML= n
+      } catch (e) {
+        return false
+      }
+    }
+  }
+
+  if ('!{defaultComment}' === 'Gitalk' || !{theme.comments.load_begin}) {
+    window.addEventListener('load', loadGitalk)
+  }
+  else {
+    function loadOtherComment () {
+      loadGitalk()
     }
   }
 

layout/includes/comments/index.pug

@@ -1,29 +1,36 @@
-- var d = theme.disqus && theme.disqus.enable
+if theme.comments && theme.comments.use
-- var dj = theme.disqusjs && theme.disqusjs.enable
+  - const defaultComment = theme.comments.use[0]
-- var l = theme.livere && theme.livere.enable
-- var gt = theme.gitalk && theme.gitalk.enable
-- var v = theme.valine && theme.valine.enable
-- var u = theme.utterances && theme.utterances.enable
-- var fb = theme.facebook_comments && theme.facebook_comments.enable
-- var isComment = d || dj || l || gt || v || u || fb
-
-if isComment
   hr
   #post-comment
-    .comment_headling
+    .comment-head
-      i.fas.fa-comments.fa-fw
+      .comment-headling
-      span= ' ' + _p('comment')
+        i.fas.fa-comments.fa-fw
-    if d
+        span= ' ' + _p('comment')
-      include ./disqus.pug
+      
-    else if dj
+      if theme.comments.use.length > 1
-      include ./disqusjs.pug
+        .comment-switch
-    else if l
+          span.first-comment=defaultComment
-      include ./livere.pug
+          label
-    else if gt
+            input#switch-comments-btn(type="checkbox")
-      include ./gitalk.pug
+            span.slider
-    else if v
+          span.second-comment=theme.comments.use[1]
-      include ./valine.pug
+
-    else if u
+
-      include ./utterances.pug
+    .comment-wrap
-    else if fb
+      each name, index in theme.comments.use
-      include ./facebook_comments.pug
+        div(class=`comments-items-${index+1}` data-name=`${name}`)
+          case name
+            when 'Disqus'
+              include ./disqus.pug
+            when 'Valine'
+              include ./valine.pug
+            when 'Disqusjs'
+              include ./disqusjs.pug
+            when 'Livere'
+              include ./livere.pug
+            when 'Gitalk'
+              include ./gitalk.pug
+            when 'Utterances'
+              include ./utterances.pug
+            when 'Facebook Comments'
+              include ./facebook_comments.pug

layout/includes/comments/livere.pug

@@ -1,10 +1,21 @@
 #lv-container(data-id="city" data-uid=theme.livere.uid)
   script.
-    (function(d, s) {
+    function loadlivere () {
-        var j, e = d.getElementsByTagName(s)[0];
+      (function(d, s) {
-        if (typeof LivereTower === 'function') { return; }
+          var j, e = d.getElementsByTagName(s)[0];
-        j = d.createElement(s);
+          if (typeof LivereTower === 'function') { return; }
-        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
+          j = d.createElement(s);
-        j.async = true;
+          j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
-        e.parentNode.insertBefore(j, e);
+          j.async = true;
-    })(document, 'script');
+          e.parentNode.insertBefore(j, e);
+      })(document, 'script');
+    }
+
+    if ('!{defaultComment}' === 'Livere' || !{theme.comments.load_begin}) {
+      window.addEventListener('load', loadlivere)
+    }
+    else {
+      function loadOtherComment () {
+        loadlivere()
+      }
+    }

layout/includes/comments/utterances.pug

@@ -1,15 +1,30 @@
-script#utterances_comment(src=theme.CDN.utterances
+#utterances-wrap
-        repo=theme.utterances.repo
+
-        issue-term=theme.utterances.issue_term
+script.
-        theme= theme.display_mode === 'dark' ? theme.utterances.dark_theme : theme.utterances.light_theme
+  function loadUtterances () {
-        crossorigin="anonymous"
+    let ele = document.createElement('script')
-        async)
+    ele.setAttribute('id', 'utterances_comment')
+    ele.setAttribute('src', '!{url_for(theme.CDN.utterances)}')
+    ele.setAttribute('repo', '!{theme.utterances.repo}')
+    ele.setAttribute('issue-term', '!{theme.utterances.issue_term}')
+    let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+    ele.setAttribute('theme', nowTheme)
+    ele.setAttribute('crossorigin', 'anonymous')
+    ele.setAttribute('async', 'true')
+    document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele)
+  }
+
+  if ('!{defaultComment}' === 'Utterances' || !{theme.comments.load_begin}) {
+    window.addEventListener('load', loadUtterances)
+  }
+  else {
+    function loadOtherComment () {
+      loadUtterances()
+    }
+  }
 
 if theme.darkmode.enable
   script.
-    var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
-    document.getElementById('utterances_comment').setAttribute('theme',themeNow)
-
     function utterancesTheme () {
     var theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
     const message = {

layout/includes/comments/valine.pug

@@ -3,33 +3,47 @@ if site.data.valine
   - emojiMaps = JSON.stringify(site.data.valine)
 
 #vcomment.vcomment
-script(src=url_for(theme.CDN.valine))
 script.
-  var requestSetting = function (from,set) {
+  function loadvaline () {  
-    var from = from
+    var requestSetting = function (from,set) {
-    var setting = set.split(',').filter(function(item){
+      var from = from
-    return from.indexOf(item) > -1
+      var setting = set.split(',').filter(function(item){
-    });
+      return from.indexOf(item) > -1
-    setting = setting.length == 0 ? from :setting;
+      });
-    return setting
+      setting = setting.length == 0 ? from :setting;
+      return setting
+    }
+
+    var guestInfo = requestSetting(['nick','mail','link'],'#{ theme.valine.guest_info }')
+    var requiredFields = requestSetting(['nick','mail'],'#{ theme.valine.requiredFields }')
+
+    function initValine () {
+      window.valine = new Valine({
+        el:'#vcomment',
+        appId: '#{theme.valine.appId}',
+        appKey: '#{theme.valine.appKey}',
+        placeholder: '#{theme.valine.placeholder}',
+        avatar: '#{theme.valine.avatar}',
+        meta: guestInfo,
+        pageSize: '#{theme.valine.pageSize}',
+        lang: '#{theme.valine.lang}',
+        recordIP: #{theme.valine.recordIP},
+        serverURLs: '#{theme.valine.serverURLs}',
+        emojiCDN: '#{theme.valine.emojiCDN}',
+        emojiMaps: !{emojiMaps},
+        enableQQ: #{theme.valine.enableQQ},
+        requiredFields: requiredFields
+      });
+    }
+    loadScript('!{url_for(theme.CDN.valine)}', initValine)
   }
 
-  var guestInfo = requestSetting(['nick','mail','link'],'#{ theme.valine.guest_info }')
+  if ('!{defaultComment}' === 'Valine' || !{theme.comments.load_begin}) {
-  var requiredFields = requestSetting(['nick','mail'],'#{ theme.valine.requiredFields }')
+    window.addEventListener('load', loadvaline)
+  }
+  else {
+    function loadOtherComment () {
+      loadvaline()
+    }
+  }
 
-  window.valine = new Valine({
-    el:'#vcomment',
-    appId: '#{theme.valine.appId}',
-    appKey: '#{theme.valine.appKey}',
-    placeholder: '#{theme.valine.placeholder}',
-    avatar: '#{theme.valine.avatar}',
-    meta: guestInfo,
-    pageSize: '#{theme.valine.pageSize}',
-    lang: '#{theme.valine.lang}',
-    recordIP: #{theme.valine.recordIP},
-    serverURLs: '#{theme.valine.serverURLs}',
-    emojiCDN: '#{theme.valine.emojiCDN}',
-    emojiMaps: !{emojiMaps},
-    enableQQ: #{theme.valine.enableQQ},
-    requiredFields: requiredFields
-  });

layout/includes/head/comment.pug

@@ -1,14 +1,5 @@
-if (theme.facebook_comments.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
+if page.comments !== false && theme.comments.use && theme.comments.use.includes('Facebook Comments')
   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)
+    meta(property="fb:admins" content=theme.facebook_comments.user_id)
-
-if (theme.disqusjs && theme.disqusjs.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
-  link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.disqusjs_css))
-
-if (theme.gitalk && theme.gitalk.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
-  link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.gitalk_css))
-  script(src=url_for(theme.CDN.gitalk))
-  script(src=url_for(theme.CDN.blueimp_md5))
-

layout/includes/head/config.pug

@@ -74,12 +74,23 @@
     })
   }
 
+  var noticeOutdate = 'undefined';
+  if (theme.noticeOutdate && theme.noticeOutdate.enable) {
+    noticeOutdate = JSON.stringify({
+      limitDay: theme.noticeOutdate.limit_day,
+      position: theme.noticeOutdate.position,
+      messagePrev: theme.noticeOutdate.message_prev,
+      messageNext: theme.noticeOutdate.message_next,
+    })
+  }
+
 script.
   var GLOBAL_CONFIG = { 
     root: '!{config.root}',
     algolia: !{algolia},
     localSearch: !{localSearch},
     translate: !{translate},
+    noticeOutdate: !{noticeOutdate},
     copy: {
       success: '!{_p("copy.success")}',
       error: '!{_p("copy.error")}',

layout/includes/head/config_site.pug

@@ -1,10 +1,10 @@
 -
   let isHighlightShrink
   if (theme.highlight_shrink == 'none') isHighlightShrink = 'undefined'
-  else if (page.highlight_shrink !== null && page.toc !== undefined ) isHighlightShrink = page.highlight_shrink
+  else if (page.highlight_shrink === true || page.highlight_shrink === false) isHighlightShrink = page.highlight_shrink
   else isHighlightShrink = theme.highlight_shrink
 
-  const pageToc = page.toc !== null && page.toc !== undefined ? page.toc : theme.toc.enable
+  const pageToc = page.toc === true || page.toc === false ? page.toc : theme.toc.enable
   const showToc = is_post() && pageToc && (toc(page.content) !== '' || page.encrypt == true )
 -
 
@@ -13,5 +13,6 @@ script.
     isPost: !{is_post()},
     isHome: !{is_home()},
     isHighlightShrink: !{isHighlightShrink},
-    isSidebar: !{showToc}
+    isSidebar: !{showToc},
-    }
+    postUpdate: '!{full_date(page.updated)}'
+  }

layout/includes/head/pwa.pug

@@ -1,13 +1,13 @@
-link(rel="manifest" href=theme.pwa.manifest)
+link(rel="manifest" href=url_for(theme.pwa.manifest))
 if(theme.pwa.theme_color) 
   meta(name="theme-color" content=theme.pwa.theme_color)
 if(theme.pwa.theme_color) 
   meta(name="msapplication-TileColor" content=theme.pwa.theme_color)
 if(theme.pwa.apple_touch_icon) 
-  link(rel="apple-touch-icon" sizes="180x180" href=theme.pwa.apple_touch_icon)
+  link(rel="apple-touch-icon" sizes="180x180" href=url_for(theme.pwa.apple_touch_icon))
 if(theme.pwa.favicon_32_32) 
-  link(rel="icon" type="image/png" sizes="32x32" href=theme.pwa.favicon_32_32)
+  link(rel="icon" type="image/png" sizes="32x32" href=url_for(theme.pwa.favicon_32_32))
 if(theme.pwa.favicon_16_16)
-  link(rel="icon" type="image/png" sizes="16x16" href=theme.pwa.favicon_16_16)
+  link(rel="icon" type="image/png" sizes="16x16" href=url_for(theme.pwa.favicon_16_16))
 if(theme.pwa.mask_icon)
-  link(rel="mask-icon" href=theme.pwa.mask_icon color="#5bbad5")
+  link(rel="mask-icon" href=url_for(theme.pwa.mask_icon) color="#5bbad5")

layout/includes/header/post-info.pug

@@ -57,29 +57,32 @@
           span=_p('post.page_pv') + ':'
           span#busuanzi_value_page_pv
 
-      span.post-meta-commentcount
+      if page.comments !== false && theme.comments.use && theme.comments.count
-        if ((theme.disqus && theme.disqus.enable && theme.disqus.count && page.comments !== false) || (theme.disqusjs && theme.disqusjs.enable && theme.disqusjs.count && page.comments !== false))
+        span.post-meta-commentcount
+        
+        - let whichCount = theme.comments.use[0]
+        if whichCount === 'Disqus' || whichCount === 'Disqusjs'
           if (postWordcount || theme.busuanzi.page_pv)
             span.post-meta__separator |
           i.far.fa-comments.fa-fw.post-meta__icon
           span= _p('post.comments') + ':'
           span.disqus-comment-count.comment-count
             a(href=full_url_for(page.path) + '#disqus_thread')
-        else if (theme.valine && theme.valine.enable && theme.valine.count && page.comments !== false)
+        else if whichCount === 'Valine'
           if (postWordcount || theme.busuanzi.page_pv)
             span.post-meta__separator |
           i.far.fa-comments.fa-fw.post-meta__icon
           span= _p('post.comments') + ':'
           a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
             span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount")
-        else if (theme.gitalk && theme.gitalk.enable && theme.gitalk.count && page.comments !== false)
+        else if whichCount === 'Gitalk'
           if (postWordcount || theme.busuanzi.page_pv)
             span.post-meta__separator |
           i.far.fa-comments.fa-fw.post-meta__icon
           span= _p('post.comments') + ':'
           a(href=url_for(page.path) + '#post-comment')
             span.gitalk-comment-count.comment-count
-        else if theme.facebook_comments.enable && theme.facebook_comments.count && page.comments !== false
+        else if whichCount === 'Facebook Comments'
           if (postWordcount || theme.busuanzi.page_pv)
             span.post-meta__separator |
           i.far.fa-comments.fa-fw.post-meta__icon

layout/includes/layout.pug

@@ -1,5 +1,5 @@
 - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
-- var pageHighlightShrinkSet = page.highlight_shrink !== undefined ? page.highlight_shrink : theme.highlight_shrink
+- var pageHighlightShrinkSet = page.highlight_shrink === true || page.highlight_shrink === false ? page.highlight_shrink : theme.highlight_shrink
 - var pageHighlightShrink = theme.highlight_shrink !== 'none' && pageHighlightShrinkSet ? 'code-close' : ''
 
 doctype html

layout/includes/post/post-copyright.pug

@@ -1,13 +1,17 @@
-if (theme.post_copyright && theme.post_copyright.enable && page.copyright != false)
+if theme.post_copyright.enable && page.copyright !== false
+  - let author = page.copyright_author ? page.copyright_author : config.author
+  - let authorHref = page.copyright_author_href ? page.copyright_author_href : `mailto:${config.email}`
+  - let url = page.copyright_url ? page.copyright_url : page.permalink
+  - let info = page.copyright_info ? page.copyright_info : _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
   .post-copyright
     .post-copyright__author
       span.post-copyright-meta= _p('post.copyright.author') + ": "
       span.post-copyright-info
-        a(href=`mailto:${config.email}`) #[=config.author]
+        a(href=authorHref)=author
     .post-copyright__type
       span.post-copyright-meta= _p('post.copyright.link') + ": "
       span.post-copyright-info
-        a(href=url_for(page.permalink))= theme.post_copyright.decode ? decodeURI(page.permalink) : page.permalink
+        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
     .post-copyright__notice
       span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
-      span.post-copyright-info!= _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
+      span.post-copyright-info!= info

layout/includes/post/reward.pug

@@ -1,5 +1,5 @@
 .post-reward
-  button.reward-button
+  button.reward-button(type="button")
     i.fas.fa-qrcode
     = ' ' + _p('donate')
     .reward-main

layout/includes/rightside.pug

@@ -1,32 +1,32 @@
-section#rightside.rightside
+section#rightside
   #rightside-config-hide
     if is_post()
       if theme.readmode
-        button#readmode(title=_p('rightside.readmode_title'))
+        button#readmode(type="button" title=_p('rightside.readmode_title'))
           i.fas.fa-book-open
-      button#font_plus(title=_p('rightside.font_plus_title'))
+      button#font_plus(type="button" title=_p('rightside.font_plus_title'))
         i.fas.fa-plus
-      button#font_minus(title=_p('rightside.font_minus_title'))
+      button#font_minus(type="button" title=_p('rightside.font_minus_title'))
         i.fas.fa-minus
     if theme.translate && theme.translate.enable
-      button#translateLink.translate_chn_to_cht(title=_p('rightside.translate_title'))= theme.translate.default
+      button#translateLink(type="button" title=_p('rightside.translate_title'))= theme.translate.default
     if theme.darkmode.enable && theme.darkmode.button
-      button#darkmode(title=_p('rightside.night_mode_title'))
+      button#darkmode(type="button" title=_p('rightside.night_mode_title'))
         i.fas.fa-adjust
   #rightside-config-show
-    button#rightside_config(title=_p("rightside.setting"))
+    button#rightside_config(type="button" title=_p("rightside.setting"))
       i.fas.fa-cog
-    if is_post() && page.comments !== false && isComment
+    if is_post() && page.comments !== false && theme.comments.use
       a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
-        i.scroll_to_comment.fas.fa-comments
+        i.fas.fa-comments
     if showToc
-      button#mobile-toc-button.close(title=_p("rightside.toc"))
+      button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
         i.fas.fa-list-ul
     if theme.chat_btn && (theme.chatra.enable || theme.tidio.enable || theme.daovoice.enable || theme.gitter.enable)
-      button#chat_btn(title=_p("rightside.chat_btn"))
+      button#chat_btn(type="button" title=_p("rightside.chat_btn"))
         i.fas.fa-sms
 
-    button#go-up(title=_p("rightside.back_to_top"))
+    button#go-up(type="button" title=_p("rightside.back_to_top"))
       i.fas.fa-arrow-up
 
 

layout/includes/widget/card_author.pug

@@ -25,7 +25,7 @@
             .length_num= site.categories.length
 
     .card-info-bookmark.is-center
-      button#bookmark-it.button--animated(title= _p('aside.card_bookmark'))
+      button#bookmark-it.button--animated(type="button" title= _p('aside.card_bookmark'))
         i.fas.fa-bookmark
         span= _p('aside.card_bookmark') || 'Follow Me'
   

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.0.0-rc-1",
+  "version": "3.0.0",
   "private": true,
   "engines": {
     "node": ">=8.10.0"

scripts/filters/post_lazyload.js

@@ -10,11 +10,11 @@
 const urlFor = require('hexo-util').url_for.bind(hexo)
 
 function lazyProcess (htmlContent) {
-  var bg = hexo.theme.config.lazyload.post ? urlFor(hexo.theme.config.lazyload.post) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs='
+  const bg = hexo.theme.config.lazyload.post ? urlFor(hexo.theme.config.lazyload.post) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs='
   return htmlContent.replace(/(<img .*?src=)/ig, `$1 "${bg}" data-src=`)
 }
 
-var processPost = function (data) {
+const processPost = function (data) {
   if (!hexo.theme.config.lazyload.enable) return
   data.content = lazyProcess.call(this, data.content)
   return data

scripts/filters/random_cover.js

@@ -14,10 +14,10 @@ hexo.extend.filter.register('before_post_render', function (data) {
   return data
 })
 
-var randomCover = function () {
+function randomCover () {
-  var theme = hexo.theme.config
+  const theme = hexo.theme.config
-  var cover
+  let cover
-  var num
+  let num
 
   if (theme.cover.default_cover) {
     if (!Array.isArray(theme.cover.default_cover)) {

scripts/helpers/aside_archives.js

@@ -98,7 +98,7 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
   return result
 })
 
-var toMomentLocale = function (lang) {
+const toMomentLocale = function (lang) {
   if (lang === undefined) {
     return undefined
   }

scripts/helpers/aside_categories.js

@@ -35,19 +35,19 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
 
   const hierarchicalList = (t, level, parent, topparent = true) => {
     let result = ''
-    var isTopParent = topparent
+    const isTopParent = topparent
     if (t > 0) {
       prepareQuery(parent).forEach((cat, i) => {
         if (t > 0) {
           t = t - 1
           let child
           if (!depth || level + 1 < depth) {
-            var childList = hierarchicalList(t, level + 1, cat._id, false)
+            const childList = hierarchicalList(t, level + 1, cat._id, false)
             child = childList[0]
             t = childList[1]
           }
 
-          var parentClass = isExpand && isTopParent && child ? 'parent' : ''
+          const parentClass = isExpand && isTopParent && child ? 'parent' : ''
 
           result += `<li class="card-category-list-item ${parentClass}">`
 
@@ -79,8 +79,8 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
 
   const list = hierarchicalList(limit, 0)
 
-  var moreButton = function () {
+  const moreButton = function () {
-    var moreHtml = ''
+    let moreHtml = ''
     if (categories.length <= limit) return ''
     moreHtml += '<li class="card-category-list-item more is-center">'
     moreHtml += `<a class="card-category-list-link-more" href="${categoryDir}">

scripts/helpers/page.js

@@ -25,7 +25,7 @@ hexo.extend.helper.register('page_description', function () {
 hexo.extend.helper.register('injectHtml', function (data) {
   let result = ''
   if (!data) return ''
-  for (var i = 0; i < data.length; i++) {
+  for (let i = 0; i < data.length; i++) {
     result += data[i]
   }
   return result
@@ -41,8 +41,8 @@ hexo.extend.helper.register('cloudTags', function (options = {}) {
   let result = ''
   const tagLimit = limit === 0 ? source.length : limit
   source.sort('name').limit(tagLimit).forEach(function (tags) {
-    var fontSize = Math.floor(Math.random() * (maxfontsize - minfontsize) + minfontsize) + 'px'
+    const fontSize = Math.floor(Math.random() * (maxfontsize - minfontsize) + minfontsize) + 'px'
-    var color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
+    const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
     result += `<a href='${env.url_for(tags.path)}' style='font-size:${fontSize}; color:${color}'>${tags.name}</a>`
   })
   return result

scripts/helpers/related_post.js

@@ -7,11 +7,11 @@
 'use strict'
 
 hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
-  var relatedPosts = []
+  let relatedPosts = []
   currentPost.tags.forEach(function (tag) {
     allPosts.forEach(function (post) {
       if (isTagRelated(tag.name, post.tags)) {
-        var relatedPost = {
+        const relatedPost = {
           title: post.title,
           path: post.path,
           cover: post.cover,
@@ -20,7 +20,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
           updated: post.updated,
           created: post.date
         }
-        var index = findItem(relatedPosts, 'path', post.path)
+        const index = findItem(relatedPosts, 'path', post.path)
         if (index !== -1) {
           relatedPosts[index].weight += 1
         } else {
@@ -34,14 +34,14 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
   if (relatedPosts.length === 0) {
     return ''
   }
-  var result = ''
+  let result = ''
   const hexoConfig = hexo.theme.config.rootConfig
   const config = hexo.theme.config
 
-  var limitNum = config.related_post.limit || 6
+  const limitNum = config.related_post.limit || 6
-  var dateType = config.related_post.date_type || 'created'
+  const dateType = config.related_post.date_type || 'created'
-  var headlineLang = this._p('post.recommend')
+  const headlineLang = this._p('post.recommend')
-  var lazySrc = config.lazyload.enable ? 'data-src' : 'src'
+  const lazySrc = config.lazyload.enable ? 'data-src' : 'src'
 
   relatedPosts = relatedPosts.sort(compare('weight'))
 
@@ -54,8 +54,8 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
       '</span></div>'
     result += '<div class="relatedPosts_list">'
 
-    for (var i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
+    for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
-      var cover =
+      const cover =
         relatedPosts[i].cover === false
           ? relatedPosts[i].randomcover
           : relatedPosts[i].cover
@@ -96,7 +96,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
 })
 
 function isTagRelated (tagName, TBDtags) {
-  var result = false
+  let result = false
   TBDtags.forEach(function (tag) {
     if (tagName === tag.name) {
       result = true
@@ -106,7 +106,7 @@ function isTagRelated (tagName, TBDtags) {
 }
 
 function findItem (arrayToSearch, attr, val) {
-  for (var i = 0; i < arrayToSearch.length; i++) {
+  for (let i = 0; i < arrayToSearch.length; i++) {
     if (arrayToSearch[i][attr] === val) {
       return i
     }
@@ -116,8 +116,8 @@ function findItem (arrayToSearch, attr, val) {
 
 function compare (attr) {
   return function (a, b) {
-    var val1 = a[attr]
+    const val1 = a[attr]
-    var val2 = b[attr]
+    const val2 = b[attr]
     return val2 - val1
   }
 }

scripts/tags/button.js

@@ -11,17 +11,18 @@ const urlFor = require('hexo-util').url_for.bind(hexo)
 
 function btn (args) {
   args = args.join(' ').split(',')
-  var url = args[0] || ''
+  let url = args[0] || ''
-  var text = args[1] || ''
+  let text = args[1] || ''
-  var icon = args[2] || ''
+  let icon = args[2] || ''
-  var option = args[3] || ''
+  let option = args[3] || ''
 
   url = url.trim()
   text = text.trim()
   icon = icon.trim()
   option = option.trim()
 
-  return `<a class="btn-beautify button--animated ${option}" href="${urlFor(url)}" title="${text}">${icon.length > 0 ? `<i class="${icon} fa-fw"></i>` : ''} ${text} </a>`
+  return `<a class="btn-beautify button--animated ${option}" href="${urlFor(url)}" 
+  title="${text}">${icon.length > 0 ? `<i class="${icon} fa-fw"></i>` : ''}<span>${text}</span></a>`
 }
 
 hexo.extend.tag.register('btn', btn, { ends: false })

scripts/tags/gallery.js

@@ -5,7 +5,7 @@
 
 'use strict'
 
-const url_for = require('hexo-util').url_for.bind(hexo)
+const urlFor = require('hexo-util').url_for.bind(hexo)
 
 function gallery (args, content) {
   return `<div class="justified-gallery">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
@@ -15,8 +15,8 @@ function gallery (args, content) {
 function galleryGroup (args) {
   const name = args[0]
   const desrc = args[1]
-  const url = url_for(args[2])
+  const url = urlFor(args[2])
-  const img = url_for(args[3])
+  const img = urlFor(args[3])
 
   return `
   <figure class="gallery-group">

scripts/tags/hide.js

@@ -18,42 +18,42 @@
 
 function hideInline (args) {
   args = args.join(' ').split(',')
-  var content = args[0]
+  const content = args[0]
-  var display = args[1] || 'Click'
+  const display = args[1] || 'Click'
-  var bg = args[2] || false
+  const bg = args[2] || false
-  var color = args[3] || false
+  const color = args[3] || false
-  var group = 'style="'
+  let group = 'style="'
 
   if (bg) group += `background-color: ${bg};`
   if (color) group += `color: ${color}`
   group += '"'
 
-  return `<span class="hide-inline"><button class="hide-button button--animated" ${group}>${display}
+  return `<span class="hide-inline"><button type="button" class="hide-button button--animated" ${group}>${display}
   </button><span class="hide-content">${content}</span></span>`
 }
 
 function hideBlock (args, content) {
   args = args.join(' ').split(',')
-  var display = args[0] || 'Click'
+  const display = args[0] || 'Click'
-  var bg = args[1] || false
+  const bg = args[1] || false
-  var color = args[2] || false
+  const color = args[2] || false
-  var group = 'style="'
+  let group = 'style="'
 
   if (bg) group += `background-color: ${bg};`
   if (color) group += `color: ${color}`
   group += '"'
 
-  return `<div class="hide-block"><button class="hide-button button--animated" ${group}>${display}
+  return `<div class="hide-block"><button type="button" class="hide-button button--animated" ${group}>${display}
     </button><span class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}</span></div>`
 }
 
 function hideToggle (args, content) {
   args = args.join(' ').split(',')
-  var display = args[0]
+  const display = args[0]
-  var bg = args[1] || false
+  const bg = args[1] || false
-  var color = args[2] || false
+  const color = args[2] || false
-  var group = 'style="'
+  let group = 'style="'
-  var border = ''
+  let border = ''
 
   if (bg) {
     border = `style="border: 1px solid ${bg}"`

scripts/tags/tabs.js

@@ -44,10 +44,10 @@ function postTabs (args, content) {
     const icon = tabIcon.trim()
     tabIcon.length > 0 && (tabIcon = `<i class="${icon}"${isOnlyicon}></i>`)
 
-    const toTop = '<button class="tab-to-top" onclick="scrollToDest($(this).parents(\'.tabs\'),65)"><i class="fas fa-arrow-up"></i></button>'
+    const toTop = '<button type="button" class="tab-to-top" onclick="scrollToDest($(this).parents(\'.tabs\'),65)"><i class="fas fa-arrow-up"></i></button>'
 
     const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
-    tabNav += `<li class="tab${isActive}"><button data-href="#${tabHref}">${tabIcon + tabCaption.trim()}</button></li>`
+    tabNav += `<li class="tab${isActive}"><button type="button" data-href="#${tabHref}">${tabIcon + tabCaption.trim()}</button></li>`
     tabContent += `<div class="tab-item-content${isActive}" id="${tabHref}">${postContent + toTop}</div>`
   }
 

source/css/_global/index.styl

@@ -191,11 +191,6 @@ img:not([src])
   &:hover
     text-decoration: none !important
 
-.comment_headling
-  margin-bottom: 10px
-  font-weight: 700
-  font-size: 20px
-
 .post-ad
   margin: 2rem 0
 

source/css/_highlight/highlight.styl

@@ -182,11 +182,11 @@ blockquote
     td
       border: none
 
-  if $highlight_theme == 'mac'
+  if $highlight_theme == 'mac' || $highlight_theme == 'mac light'
     figure.highlight
       margin: 0 0 1.2rem
       border-radius: 7px
-      box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .4)
+      box-shadow: 0 5px 10px 0 $highlight-mac-border
       -webkit-transform: translateZ(0)
 
       .highlight-tools

source/css/_highlight/theme.styl

@@ -24,7 +24,7 @@ if $highlight_theme == 'default'
     bg-color: darken($highlight-background, 2)
   }
 
-if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
+if $highlight_theme == 'darker' || $highlight_theme == 'mac'
   $highlight-background = #212121
   $highlight-current-line = #282a2e
   $highlight-selection = #61616150
@@ -39,6 +39,7 @@ if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
   $highlight-purple = #C792EA
   $highlight-deletion = #BF42BF
   $highlight-addition = #105EDE
+  $highlight-mac-border = rgba(0,0,0,.4)
   $highlight-gutter = {
     color: alpha($highlight-foreground, .5),
     bg-color: $highlight-background
@@ -96,7 +97,7 @@ if $highlight_theme == 'ocean'
     bg-color: darken($highlight-background, 2)
   }
 
-if $highlight_theme == 'light'
+if $highlight_theme == 'light' || $highlight_theme == 'mac light'
   $highlight-background = #F6F8FA
   $highlight-current-line = #00346e
   $highlight-selection = #80CBC440
@@ -111,6 +112,7 @@ if $highlight_theme == 'light'
   $highlight-purple = #7C4DFF
   $highlight-deletion = #BF42BF
   $highlight-addition = #105EDE
+  $highlight-mac-border = rgba(144, 164, 174, .4)
   $highlight-gutter = {
     color: alpha($highlight-foreground, .5),
     bg-color: $highlight-background

source/css/_layout/aside.styl

@@ -164,6 +164,7 @@
         background-color: $light-blue
 
       span
+        @extend .limit-one-line
         display: inline-block
         vertical-align: bottom
 
@@ -195,7 +196,7 @@
             width: 70% !important
 
           &-count
-            width: 18%
+            width: calc(100% - 70% - 20px)
             text-align: right
 
           &-icon

source/css/_layout/comments.styl

@@ -0,0 +1,74 @@
+#post-comment
+  .comment-head
+    margin-bottom: 1rem
+
+    .comment-headling
+      display: inline-block
+      vertical-align: middle
+      font-weight: 700
+      font-size: 20px
+
+    .comment-switch
+      display: inline-block
+
+      if hexo-config('comments.text')
+        float: right
+        margin: .1rem auto 0
+        padding: .2rem .8rem
+        width: max-content
+        border-radius: 8px
+        background: $comments-switch-bg
+      else
+        > span
+          display: none
+
+      .first-comment
+        color: $comments-switch-first-text
+
+      .second-comment
+        color: $comments-switch-second-text
+
+      label
+        position: relative
+        display: inline-block
+        margin: 0 .4rem
+        width: 42px
+        height: 22px
+        vertical-align: sub
+
+        input#switch-comments-btn
+          width: 0
+          height: 0
+          opacity: 0
+
+          &:checked + .slider
+            background-color: $comments-switch-second-text
+
+          &:checked + .slider:before
+            transform: translateX(20px)
+
+        .slider
+          position: absolute
+          top: 0
+          right: 0
+          bottom: 0
+          left: 0
+          border-radius: 34px
+          background-color: $comments-switch-first-text
+          cursor: pointer
+          transition: .4s
+
+          &:before
+            position: absolute
+            bottom: 4px
+            left: 4px
+            width: 14px
+            height: 14px
+            border-radius: 50%
+            background-color: $comments-switch-round
+            content: ''
+            transition: .4s
+
+  .comment-wrap
+    .comments-items-2
+      display: none

source/css/_layout/post.styl

@@ -284,6 +284,27 @@ img
   iframe
     margin: 0 0 1rem
 
+  .post-outdate-notice
+    position: relative
+    margin: 0 0 1rem
+    padding: .5rem 1.2rem
+    border-radius: 3px
+    background-color: $noticeOutdate-bg
+    color: $noticeOutdate-color
+
+    if hexo-config('noticeOutdate.style') == 'flat'
+      padding: .5rem 1.2rem .5rem 1.8rem
+      border-left: 5px solid $noticeOutdate-border
+
+      &:before
+        @extend .fontawesomeIcon
+        position: absolute
+        top: 50%
+        left: 1em
+        color: $noticeOutdate-border
+        content: '\f071'
+        transform: translateY(-50%)
+
 @media screen and (max-width: 1024px)
   .layout_post
     width: auto

source/css/_layout/third-party.styl

@@ -86,7 +86,6 @@ if hexo-config('beautify.enable')
 .has-jax
   overflow: auto
 
-//aplayer
 #article-container
   .aplayer
     margin: 0 0 1rem

source/css/_mode/darkmode.styl

@@ -85,6 +85,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
         color: alpha(#FFFFFF, .6) !important
 
       figure.highlight
+        box-shadow: none
+
         .line:before
           color: alpha(#FFFFFF, .6) !important
 
@@ -246,6 +248,17 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
         a
           color: alpha(#FFFFFF, .6) !important
 
+    #post-comment
+      .comment-switch
+        if hexo-config('comments.text')
+          background: #2c2c2c
+
+        label
+          filter: brightness(.7)
+
+    .post-outdate-notice
+      filter: brightness(.7)
+
     // error 404
     #error-wrap
       .error-content

source/css/_mode/readmode.styl

@@ -187,7 +187,8 @@ if hexo-config('readmode')
     #sidebar,
     #toggle-sidebar,
     #mobile-toc-button,
-    #nav
+    #nav,
+    .post-outdate-notice
       display: none !important
 
     #web_bg

source/css/_tags/tabs.styl

@@ -23,10 +23,10 @@
         button
           display: block
           padding: .5rem 1rem
+          width: 100%
           border-top: 2px solid $tab-border-color
           background: $tab-botton-bg
           color: $font-color
-          width 100%
           line-height: 2
           transition: all .4s
 

source/css/var.styl

@@ -75,6 +75,15 @@ $reward-pop-up-color = #858585
 $search-bg = #f6f8fa
 $search-color = $theme-color
 $search-keyword-highlight = #F47466
+// comments
+$comments-switch-first-text = $bright-blue
+$comments-switch-second-text = $light-orange
+$comments-switch-round = #fff
+$comments-switch-bg = #f6f8fa
+// noticeOutdate
+$noticeOutdate-bg = #ffe6e6
+$noticeOutdate-color = #ff6666
+$noticeOutdate-border = #ff8080
 // gallery
 $gallery-color = #fff
 // tag-hide

source/js/main.js

@@ -9,12 +9,12 @@ $(function () {
     * 傳入 1 sidebar打開時
    * 傳入 2 正常狀態下
    */
-  var blogNameWidth = $('#blog_name').width()
+  const blogNameWidth = $('#blog_name').width()
-  var menusWidth = $('.menus').width()
+  const menusWidth = $('.menus').width()
-  var sidebarWidth = $('#sidebar').width()
+  const sidebarWidth = $('#sidebar').width()
 
   function isAdjust (n) {
-    var t
+    let t
     if (n === 1) {
       t = blogNameWidth + menusWidth > $nav.width() - sidebarWidth - 20
     } else if (n === 2) {
@@ -106,7 +106,7 @@ $(function () {
       color: '#99a9bf',
       opacity: '1'
     })
-    var isAdjustTimeCount = window.setInterval(function () {
+    const isAdjustTimeCount = window.setInterval(function () {
       if ($nav.hasClass('fixed')) isAdjust(1)
       else isAdjust(2)
     }, 100)
@@ -116,7 +116,7 @@ $(function () {
   }
 
   $('#toggle-sidebar').on('click', function () {
-    var isOpen = $(this).hasClass('on')
+    const isOpen = $(this).hasClass('on')
     isOpen ? $(this).removeClass('on') : $(this).addClass('on')
     if (isOpen) {
       closeSidebar()
@@ -130,10 +130,10 @@ $(function () {
    * 顯示menu和toc的sidebar
    */
 
-  var $toggleMenu = $('.toggle-menu')
+  const $toggleMenu = $('.toggle-menu')
-  var $mobileSidevarMenus = $('#mobile-sidebar-menus')
+  const $mobileSidebarMenus = $('#mobile-sidebar-menus')
-  var $mobileTocButton = $('#mobile-toc-button')
+  const $mobileTocButton = $('#mobile-toc-button')
-  var $menuMask = $('#menu_mask')
+  const $menuMask = $('#menu_mask')
 
   function openMobileSidebar (name) {
     sidebarPaddingR()
@@ -142,11 +142,11 @@ $(function () {
 
     if (name === 'menu') {
       $toggleMenu.removeClass('close').addClass('open')
-      $mobileSidevarMenus.css('transform', 'translate3d(-100%,0,0)')
+      $mobileSidebarMenus.css('transform', 'translate3d(-100%,0,0)')
-      var $mobileSidevarMenusChild = $mobileSidevarMenus.children()
+      const $mobileSidebarMenusChild = $mobileSidebarMenus.children()
-      for (let i = 0; i <= $mobileSidevarMenusChild.length; i++) {
+      for (let i = 0; i <= $mobileSidebarMenusChild.length; i++) {
         const duration = i / 5 + 0.2
-        $mobileSidevarMenusChild.eq(i).css('animation', 'sidebarItem ' + duration + 's')
+        $mobileSidebarMenusChild.eq(i).css('animation', 'sidebarItem ' + duration + 's')
       }
     }
 
@@ -163,7 +163,7 @@ $(function () {
 
     if (name === 'menu') {
       $toggleMenu.removeClass('open').addClass('close')
-      $mobileSidevarMenus.css('transform', '')
+      $mobileSidebarMenus.css('transform', '')
       $('#mobile-sidebar-menus > div,#mobile-sidebar-menus > hr').css('animation', '')
     }
 
@@ -227,7 +227,7 @@ $(function () {
       return true
     } else { // webkit - safari/chrome
       if (isSnackbar) {
-        var bookmarkText = GLOBAL_CONFIG.Snackbar.bookmark.message_prev + ' ' + (navigator.userAgent.toLowerCase().indexOf('mac') !== -1 ? 'Command/Cmd' : 'CTRL') + '+ D ' + GLOBAL_CONFIG.Snackbar.bookmark.message_next + '.'
+        const bookmarkText = GLOBAL_CONFIG.Snackbar.bookmark.message_prev + ' ' + (navigator.userAgent.toLowerCase().indexOf('mac') !== -1 ? 'Command/Cmd' : 'CTRL') + '+ D ' + GLOBAL_CONFIG.Snackbar.bookmark.message_next + '.'
         snackbarShow(bookmarkText)
       } else {
         alert(GLOBAL_CONFIG.bookmark.message_prev + ' ' + (navigator.userAgent.toLowerCase().indexOf('mac') !== -1 ? 'Command/Cmd' : 'CTRL') + '+ D ' + GLOBAL_CONFIG.bookmark.message_next + '.')
@@ -261,7 +261,7 @@ $(function () {
     }
 
     $(document).on('click', '.highlight-tools >.code-expand', function () {
-      var $hideItem = $(this).parent().nextAll()
+      const $hideItem = $(this).parent().nextAll()
       if ($(this).hasClass('code-closed')) {
         $hideItem.css('display', 'block')
         $(this).removeClass('code-closed')
@@ -275,7 +275,7 @@ $(function () {
     * 代碼語言
     */
     if (isHighlightLang) {
-      var langNameIndex, langName
+      let langNameIndex, langName
       $figureHighlight.each(function () {
         langNameIndex = langName = $(this).attr('class').split(' ')[1]
         if (langNameIndex === 'plain' || langNameIndex === undefined) langName = 'Code'
@@ -289,7 +289,7 @@ $(function () {
     */
     if (isHighlightCopy) {
       $highlightTools.append('<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>')
-      var copy = function (text, ctx) {
+      const copy = function (text, ctx) {
         if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
           try {
             document.execCommand('copy') // Security exception may be thrown by some browsers.
@@ -337,14 +337,14 @@ $(function () {
 
       // click events
       $(document).on('click', '.highlight-tools>.copy-button', function () {
-        var $buttonParent = $(this).parents('figure.highlight')
+        const $buttonParent = $(this).parents('figure.highlight')
         $buttonParent.addClass('copy-true')
-        var selection = window.getSelection()
+        const selection = window.getSelection()
-        var range = document.createRange()
+        const range = document.createRange()
         range.selectNodeContents($buttonParent.find('table .code pre')[0])
         selection.removeAllRanges()
         selection.addRange(range)
-        var text = selection.toString()
+        const text = selection.toString()
         copy(text, this)
         selection.removeAllRanges()
         $buttonParent.removeClass('copy-true')
@@ -358,9 +358,9 @@ $(function () {
   function addPhotoFigcaption () {
     const images = $('#article-container img').not('.justified-gallery img')
     images.each(function (i, o) {
-      var $this = $(o)
+      const $this = $(o)
       if ($this.attr('alt')) {
-        var t = $('<div class="img-alt is-center">' + $this.attr('alt') + '</div>')
+        const t = $('<div class="img-alt is-center">' + $this.attr('alt') + '</div>')
         $this.after(t)
       }
     })
@@ -370,11 +370,11 @@ $(function () {
   /**
    * justified-gallery 圖庫排版
    */
-  var $justifiedGallery = $('.justified-gallery')
+  const $justifiedGallery = $('.justified-gallery')
-  var isJustifiedGallery = false
+  let isJustifiedGallery = false
   if ($justifiedGallery.length) {
     isJustifiedGallery = true
-    var $imgList = $justifiedGallery.find('img')
+    const $imgList = $justifiedGallery.find('img')
     $imgList.unwrap()
     if ($imgList.length) {
       $imgList.each(function (i, o) {
@@ -386,29 +386,18 @@ $(function () {
     loadScript(`${GLOBAL_CONFIG.justifiedGallery.js}`, function () {
       initJustifiedGallery($justifiedGallery)
     })
-
-    var initJustifiedGallery = function (selector) {
-      selector.each(function (i, o) {
-        if ($(this).is(':visible')) {
-          $(this).justifiedGallery({
-            rowHeight: 220,
-            margins: 4
-          })
-        }
-      })
-    }
   }
 
   /**
    * fancybox和 mediumZoom
    */
 
-  var isMediumZoom = GLOBAL_CONFIG.medium_zoom
+  const isMediumZoom = GLOBAL_CONFIG.medium_zoom
-  var isFancybox = GLOBAL_CONFIG.fancybox
+  const isFancybox = GLOBAL_CONFIG.fancybox
   if (isFancybox) {
-    var images = $('#article-container img:not(.gallery-group-img)').not($('a>img'))
+    const images = $('#article-container img:not(.gallery-group-img)').not($('a>img'))
     images.each(function (i, o) {
-      var lazyloadSrc = $(o).attr('data-src') ? $(o).attr('data-src') : $(o).attr('src')
+      const lazyloadSrc = $(o).attr('data-src') ? $(o).attr('data-src') : $(o).attr('src')
       $(o).wrap(`<a href="${lazyloadSrc}" data-fancybox="group" data-caption="${$(o).attr('alt')}" class="fancybox"></a>`)
     })
 
@@ -422,7 +411,7 @@ $(function () {
   } else if (isMediumZoom) {
     const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
     zoom.on('open', function (event) {
-      var photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
+      const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
       zoom.update({
         background: photoBg
       })
@@ -432,13 +421,13 @@ $(function () {
   /**
    * 滾動處理
    */
-  var initTop = 0
+  let initTop = 0
-  var isChatShow = true
+  let isChatShow = true
-  var isChatBtnHide = typeof chatBtnHide === 'function'
+  const isChatBtnHide = typeof chatBtnHide === 'function'
-  var isChatBtnShow = typeof chatBtnShow === 'function'
+  const isChatBtnShow = typeof chatBtnShow === 'function'
   $(window).scroll(throttle(function (event) {
-    var currentTop = $(this).scrollTop()
+    const currentTop = $(this).scrollTop()
-    var isDown = scrollDirection(currentTop)
+    const isDown = scrollDirection(currentTop)
     if (currentTop > 56) {
       if (isDown) {
         if ($nav.hasClass('visible')) $nav.removeClass('visible')
@@ -467,7 +456,7 @@ $(function () {
 
   // find the scroll direction
   function scrollDirection (currentTop) {
-    var result = currentTop > initTop // true is down & false is up
+    const result = currentTop > initTop // true is down & false is up
     initTop = currentTop
     return result
   }
@@ -488,7 +477,7 @@ $(function () {
 
     // main of scroll
     $(window).scroll(throttle(function (event) {
-      var currentTop = $(this).scrollTop()
+      const currentTop = $(this).scrollTop()
       scrollPercent(currentTop)
       findHeadPosition(currentTop)
       autoScrollToc(currentTop)
@@ -505,20 +494,20 @@ $(function () {
     })
 
     // expand toc-item
-    var expandToc = function ($item) {
+    const expandToc = function ($item) {
       if ($item.is(':visible')) {
         return
       }
       $item.fadeIn(400)
     }
 
-    var scrollPercent = function (currentTop) {
+    const scrollPercent = function (currentTop) {
-      var docHeight = $('#article-container').height()
+      const docHeight = $('#article-container').height()
-      var winHeight = $(window).height()
+      const winHeight = $(window).height()
-      var contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight)
+      const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight)
-      var scrollPercent = (currentTop) / (contentMath)
+      const scrollPercent = (currentTop) / (contentMath)
-      var scrollPercentRounded = Math.round(scrollPercent * 100)
+      const scrollPercentRounded = Math.round(scrollPercent * 100)
-      var percentage = (scrollPercentRounded > 100) ? 100
+      const percentage = (scrollPercentRounded > 100) ? 100
         : (scrollPercentRounded <= 0) ? 0
           : scrollPercentRounded
       $('.progress-num').text(percentage)
@@ -528,8 +517,8 @@ $(function () {
     }
 
     // anchor
-    var isanchor = GLOBAL_CONFIG.isanchor
+    const isanchor = GLOBAL_CONFIG.isanchor
-    var updateAnchor = function (anchor) {
+    const updateAnchor = function (anchor) {
       if (window.history.replaceState && anchor !== window.location.hash) {
         window.history.replaceState(undefined, undefined, anchor)
       }
@@ -539,17 +528,17 @@ $(function () {
     // DOM Hierarchy:
     // ol.toc > (li.toc-item, ...)
     // li.toc-item > (a.toc-link, ol.toc-child > (li.toc-item, ...))
-    var findHeadPosition = function (top) {
+    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 ($('.toc-link').length === 0) {
         return false
       }
 
-      var list = $('#article-container').find('h1,h2,h3,h4,h5,h6')
+      const list = $('#article-container').find('h1,h2,h3,h4,h5,h6')
-      var currentId = ''
+      let currentId = ''
       list.each(function () {
-        var head = $(this)
+        const head = $(this)
         if (top > head.offset().top - 25) {
           currentId = '#' + $(this).attr('id')
         }
@@ -560,20 +549,20 @@ $(function () {
         $('.toc-child').hide()
       }
 
-      var currentActive = $('.toc-link.active')
+      const currentActive = $('.toc-link.active')
       if (currentId && currentActive.attr('href') !== currentId) {
         if (isanchor) updateAnchor(currentId)
 
         $('.toc-link').removeClass('active')
 
-        var _this = $('.toc-link[href="' + currentId + '"]')
+        const _this = $('.toc-link[href="' + currentId + '"]')
         _this.addClass('active')
 
-        var parents = _this.parents('.toc-child')
+        const parents = _this.parents('.toc-child')
         // Returned list is in reverse order of the DOM elements
         // Thus `parents.last()` is the outermost .toc-child container
         // i.e. list of subsections
-        var topLink = (parents.length > 0) ? parents.last() : _this
+        const topLink = (parents.length > 0) ? parents.last() : _this
         expandToc(topLink.closest('.toc-item').find('.toc-child'))
         topLink
           // Find all top-level .toc-item containers, i.e. sections
@@ -584,10 +573,10 @@ $(function () {
       }
     }
 
-    var autoScrollToc = function (currentTop) {
+    const autoScrollToc = function (currentTop) {
       if ($('.toc-link').hasClass('active')) {
-        var activePosition = $('.active').offset().top
+        const activePosition = $('.active').offset().top
-        var sidebarScrolltop = $('#sidebar .sidebar-toc__content').scrollTop()
+        const sidebarScrolltop = $('#sidebar .sidebar-toc__content').scrollTop()
         if (activePosition > (currentTop + $(window).height() - 100)) {
           $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrolltop + 100)
         }
@@ -631,7 +620,7 @@ $(function () {
   })
 
   $(window).on('touchmove', function (e) {
-    var $menusChild = $('#nav .menus_item_child')
+    const $menusChild = $('#nav .menus_item_child')
     if ($menusChild.is(':visible')) {
       $menusChild.css('display', 'none')
     }
@@ -651,7 +640,7 @@ $(function () {
   /**
    * 複製時加上版權信息
    */
-  var copyright = GLOBAL_CONFIG.copyright
+  const copyright = GLOBAL_CONFIG.copyright
   if (copyright !== undefined) {
     document.body.oncopy = function (event) {
       event.preventDefault()
@@ -677,9 +666,9 @@ $(function () {
   /**
    * Darkmode
    */
-  var $darkModeButtom = $('#darkmode')
+  const $darkModeButtom = $('#darkmode')
   function switchReadMode () {
-    var nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+    const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
     if (nowMode === 'light') {
       activateDarkMode()
       Cookies.set('theme', 'dark', 2)
@@ -701,26 +690,24 @@ $(function () {
    */
   if (GLOBAL_CONFIG.runtime) {
     // get user config
-    var $runtimeCount = $('#webinfo-runtime-count')
+    const $runtimeCount = $('#webinfo-runtime-count')
-    var startDate = $runtimeCount.attr('publish_date')
+    const startDate = $runtimeCount.attr('publish_date')
-    var showDateTime = function () {
+    const showDateTime = function () {
-      var BirthDay = new Date(startDate)
+      const BirthDay = new Date(startDate)
-      var today = new Date()
+      const today = new Date()
-      var timeold = (today.getTime() - BirthDay.getTime())
+      const timeold = (today.getTime() - BirthDay.getTime())
-      var daysold = Math.floor(timeold / (24 * 60 * 60 * 1000))
+      const daysold = Math.floor(timeold / (24 * 60 * 60 * 1000))
       $runtimeCount.text(daysold + ' ' + GLOBAL_CONFIG.runtime_unit)
     }
-    var interval
     showDateTime()
-    clearInterval(interval)
+    setInterval(showDateTime, 10000)
-    interval = setInterval(showDateTime, 10000)
   }
 
   /**
    * table overflow
    */
 
-  var $table = $('#article-container table').not($('figure.highlight > table'))
+  const $table = $('#article-container table').not($('figure.highlight > table'))
   $table.each(function () {
     $(this).wrap('<div class="table-wrap"></div>')
   })
@@ -730,14 +717,14 @@ $(function () {
    */
   if (GLOBAL_CONFIG.baiduPush) {
     (function () {
-      var bp = document.createElement('script')
+      const bp = document.createElement('script')
-      var curProtocol = window.location.protocol.split(':')[0]
+      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'
       }
-      var s = document.getElementsByTagName('script')[0]
+      const s = document.getElementsByTagName('script')[0]
       s.parentNode.insertBefore(bp, s)
     })()
   }
@@ -745,11 +732,11 @@ $(function () {
   /**
    * tag-hide
    */
-  var $hideInline = $('.hide-button')
+  const $hideInline = $('.hide-button')
   if ($hideInline.length) {
     $hideInline.on('click', function (e) {
-      var $this = $(this)
+      const $this = $(this)
-      var $hideContent = $(this).next('.hide-content')
+      const $hideContent = $(this).next('.hide-content')
       $this.toggleClass('open')
       $hideContent.toggle()
       if ($this.hasClass('open')) {
@@ -779,13 +766,51 @@ $(function () {
     }
   })
 
-  var $cardCategory = $('.card-category-list-item.parent a')
+  const $cardCategory = $('.card-category-list-item.parent a')
   $cardCategory.on('click', function (e) {
     if ($(event.target).hasClass('card-category-list-icon')) {
-      var $this = $(this)
+      const $this = $(this)
       $this.find('.card-category-list-icon').toggleClass('expand')
       $this.parent().next().toggle()
       return false
     }
   })
+
+  let switchDone = false
+  $('#switch-comments-btn').change(function () {
+    $('#post-comment > .comment-wrap > div').each(function () {
+      if ($(this).is(':visible')) {
+        $(this).hide()
+      } else {
+        $(this).css({
+          display: 'block',
+          animation: 'tabshow .5s'
+        })
+      }
+    })
+    if (!switchDone && typeof loadOtherComment === 'function') {
+      switchDone = true
+      loadOtherComment()
+    }
+  })
+
+  if (GLOBAL_CONFIG_SITE.isPost && GLOBAL_CONFIG.noticeOutdate !== undefined) {
+    const data = GLOBAL_CONFIG.noticeOutdate
+    const diffDate = function (d) {
+      const dateNow = new Date()
+      const datePost = new Date(d.replace(/-/g, '/'))
+      const dateDiff = dateNow.getTime() - datePost.getTime()
+      const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000))
+      return dayDiff
+    }
+    var diffDay = diffDate(GLOBAL_CONFIG_SITE.postUpdate)
+    if (diffDay >= data.limitDay) {
+      const code = `<div class="post-outdate-notice">${data.messagePrev + ' ' + diffDay + ' ' + data.messageNext}</div>`
+      if (data.position === 'top') {
+        $('#article-container').prepend(code)
+      } else {
+        $('#article-container').append(code)
+      }
+    }
+  }
 })

source/js/search/algolia.js

@@ -13,7 +13,7 @@ $(function () {
     })
   })
 
-  var closeSearch = function () {
+  const closeSearch = function () {
     $('body').css('width', '')
     $('body').css('overflow', '')
     $('.search-dialog').css({
@@ -33,13 +33,13 @@ $(function () {
   }
   $('.search-mask, .search-close-button').on('click touchstart', closeSearch)
 
-  var algolia = GLOBAL_CONFIG.algolia
+  const algolia = GLOBAL_CONFIG.algolia
-  var isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
+  const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
   if (!isAlgoliaValid) {
     return console.error('Algolia setting is invalid!')
   }
 
-  var search = instantsearch({
+  const search = instantsearch({
     appId: algolia.appId,
     apiKey: algolia.apiKey,
     indexName: algolia.indexName,
@@ -47,7 +47,7 @@ $(function () {
       hitsPerPage: algolia.hits.per_page || 10
     },
     searchFunction: function (helper) {
-      var searchInput = $('#algolia-search-input').find('input')
+      const searchInput = $('#algolia-search-input').find('input')
 
       if (searchInput.val()) {
         helper.search()
@@ -68,7 +68,7 @@ $(function () {
       container: '#algolia-hits',
       templates: {
         item: function (data) {
-          var link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)
+          const link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)
           return (
             '<a href="' + link + '" class="algolia-hit-item-link">' +
             data._highlightResult.title.value +
@@ -94,7 +94,7 @@ $(function () {
       container: '#algolia-stats',
       templates: {
         body: function (data) {
-          var stats = GLOBAL_CONFIG.algolia.languages.hits_stats
+          const stats = GLOBAL_CONFIG.algolia.languages.hits_stats
             .replace(/\$\{hits}/, data.nbHits)
             .replace(/\$\{time}/, data.processingTimeMS)
           return (

source/js/search/local-search.js

@@ -1,5 +1,5 @@
 $(function () {
-  var loadFlag = false
+  let loadFlag = false
   $('a.social-icon.search').on('click', function () {
     $('body').css({
       width: '100%',
@@ -22,7 +22,7 @@ $(function () {
     })
   })
 
-  var closeSearch = function () {
+  const closeSearch = function () {
     $('body').css('width', '')
     $('body').css('overflow', '')
     $('.search-dialog').css({
@@ -48,7 +48,7 @@ $(function () {
       dataType: 'xml',
       success: function (xmlResponse) {
         // get the contents from search data
-        var datas = $('entry', xmlResponse).map(function () {
+        const datas = $('entry', xmlResponse).map(function () {
           return {
             title: $('title', this).text(),
             content: $('content', this).text(),
@@ -56,29 +56,29 @@ $(function () {
           }
         }).get()
 
-        var $input = $('#local-search-input input')[0]
+        const $input = $('#local-search-input input')[0]
-        var $resultContent = $('#local-hits')[0]
+        const $resultContent = $('#local-hits')[0]
         $input.addEventListener('input', function () {
-          var str = '<div class="search-result-list">'
+          let str = '<div class="search-result-list">'
-          var keywords = this.value.trim().toLowerCase().split(/[\s]+/)
+          const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
           $resultContent.innerHTML = ''
           if (this.value.trim().length <= 0) {
             $('.local-search-stats__hr').hide()
             return
           }
-          var count = 0
+          let count = 0
           // perform local searching
           datas.forEach(function (data) {
-            var isMatch = true
+            let isMatch = true
             if (!data.title || data.title.trim() === '') {
               data.title = 'Untitled'
             }
-            var dataTitle = data.title.trim().toLowerCase()
+            let dataTitle = data.title.trim().toLowerCase()
-            var dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
+            const dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
-            var dataUrl = data.url
+            const dataUrl = data.url
-            var indexTitle = -1
+            let indexTitle = -1
-            var indexContent = -1
+            let indexContent = -1
-            var firstOccur = -1
+            let firstOccur = -1
             // only match artiles with not empty titles and contents
             if (dataTitle !== '' || dataContent !== '') {
               keywords.forEach(function (keyword, i) {
@@ -101,11 +101,11 @@ $(function () {
 
             // show search results
             if (isMatch) {
-              var content = data.content.trim().replace(/<[^>]+>/g, '')
+              const content = data.content.trim().replace(/<[^>]+>/g, '')
               if (firstOccur >= 0) {
                 // cut out 130 characters
-                var start = firstOccur - 30
+                let start = firstOccur - 30
-                var end = firstOccur + 100
+                let end = firstOccur + 100
 
                 if (start < 0) {
                   start = 0
@@ -119,11 +119,11 @@ $(function () {
                   end = content.length
                 }
 
-                var matchContent = content.substring(start, end)
+                let matchContent = content.substring(start, end)
 
                 // highlight all keywords
                 keywords.forEach(function (keyword) {
-                  var regS = new RegExp(keyword, 'gi')
+                  const regS = new RegExp(keyword, 'gi')
                   matchContent = matchContent.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
                   dataTitle = dataTitle.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
                 })

source/js/third-party/piao.js

@@ -1,334 +1,332 @@
-	
+(function (name, factory) {
-	(function (name, factory) {
+  if (typeof window === 'object') {
-		if (typeof window === "object") {
+    window[name] = factory()
-			window[name] = factory()
+  }
-		}
+})('Ribbons', function () {
-	})("Ribbons", function () {
+  var _w = window
-		var _w = window,
+  var _b = document.body
-			_b = document.body,
+  var _d = document.documentElement
-			_d = document.documentElement;
+  var random = function () {
-		var random = function () {
+    if (arguments.length === 1) {
-			if (arguments.length === 1) {
+      if (Array.isArray(arguments[0])) {
-				if (Array.isArray(arguments[0])) {
+        var index = Math.round(random(0, arguments[0].length - 1))
-					var index = Math.round(random(0, arguments[0].length - 1));
+        return arguments[0][index]
-					return arguments[0][index]
+      }
-				}
+      return random(0, arguments[0])
-				return random(0, arguments[0])
+    } else if (arguments.length === 2) {
-			} else if (arguments.length === 2) {
+      return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
-				return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
+    }
-			}
+    return 0
-			return 0
+  }
-		};
+  var screenInfo = function (e) {
-		var screenInfo = function (e) {
+    var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0)
-			var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
+    var height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0)
-				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)
-				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)
-				scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0);
+    return {
-			return {
+      width: width,
-				width: width,
+      height: height,
-				height: height,
+      ratio: width / height,
-				ratio: width / height,
+      centerx: width / 2,
-				centerx: width / 2,
+      centery: height / 2,
-				centery: height / 2,
+      scrollx: scrollx,
-				scrollx: scrollx,
+      scrolly: scrolly
-				scrolly: scrolly
+    }
-			}
+  }
-		};
+  var mouseInfo = function (e) {
-		var mouseInfo = function (e) {
+    var screen = screenInfo(e)
-			var screen = screenInfo(e),
+    var mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0
-				mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
+    var mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0
-				mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;
+    return {
-			return {
+      mousex: mousex,
-				mousex: mousex,
+      mousey: mousey,
-				mousey: mousey,
+      centerx: mousex - screen.width / 2,
-				centerx: mousex - screen.width / 2,
+      centery: mousey - screen.height / 2
-				centery: mousey - screen.height / 2
+    }
-			}
+  }
-		};
+  var Point = function (x, y) {
-		var Point = function (x, y) {
+    this.x = 0
-			this.x = 0;
+    this.y = 0
-			this.y = 0;
+    this.set(x, y)
-			this.set(x, y)
+  }
-		};
+  Point.prototype = {
-		Point.prototype = {
+    constructor: Point,
-			constructor: Point,
+    set: function (x, y) {
-			set: function (x, y) {
+      this.x = x || 0
-				this.x = x || 0;
+      this.y = y || 0
-				this.y = y || 0
+    },
-			},
+    copy: function (point) {
-			copy: function (point) {
+      this.x = point.x || 0
-				this.x = point.x || 0;
+      this.y = point.y || 0
-				this.y = point.y || 0;
+      return this
-				return this
+    },
-			},
+    multiply: function (x, y) {
-			multiply: function (x, y) {
+      this.x *= x || 1
-				this.x *= x || 1;
+      this.y *= y || 1
-				this.y *= y || 1;
+      return this
-				return this
+    },
-			},
+    divide: function (x, y) {
-			divide: function (x, y) {
+      this.x /= x || 1
-				this.x /= x || 1;
+      this.y /= y || 1
-				this.y /= y || 1;
+      return this
-				return this
+    },
-			},
+    add: function (x, y) {
-			add: function (x, y) {
+      this.x += x || 0
-				this.x += x || 0;
+      this.y += y || 0
-				this.y += y || 0;
+      return this
-				return this
+    },
-			},
+    subtract: function (x, y) {
-			subtract: function (x, y) {
+      this.x -= x || 0
-				this.x -= x || 0;
+      this.y -= y || 0
-				this.y -= y || 0;
+      return this
-				return this
+    },
-			},
+    clampX: function (min, max) {
-			clampX: function (min, max) {
+      this.x = Math.max(min, Math.min(this.x, max))
-				this.x = Math.max(min, Math.min(this.x, max));
+      return this
-				return this
+    },
-			},
+    clampY: function (min, max) {
-			clampY: function (min, max) {
+      this.y = Math.max(min, Math.min(this.y, max))
-				this.y = Math.max(min, Math.min(this.y, max));
+      return this
-				return this
+    },
-			},
+    flipX: function () {
-			flipX: function () {
+      this.x *= -1
-				this.x *= -1;
+      return this
-				return this
+    },
-			},
+    flipY: function () {
-			flipY: function () {
+      this.y *= -1
-				this.y *= -1;
+      return this
-				return this
+    }
-			}
+  }
-		};
+  var Factory = function (options) {
-		var Factory = function (options) {
+    this._canvas = null
-			this._canvas = null;
+    this._context = null
-			this._context = null;
+    this._sto = null
-			this._sto = null;
+    this._width = 0
-			this._width = 0;
+    this._height = 0
-			this._height = 0;
+    this._scroll = 0
-			this._scroll = 0;
+    this._ribbons = []
-			this._ribbons = [];
+    this._options = {
-			this._options = {
+      colorSaturation: '80%',
-				colorSaturation: "80%",
+      colorBrightness: '60%',
-				colorBrightness: "60%",
+      colorAlpha: 0.65,
-				colorAlpha: 0.65,
+      colorCycleSpeed: 6,
-				colorCycleSpeed: 6,
+      verticalPosition: 'center',
-				verticalPosition: "center",
+      horizontalSpeed: 150,
-				horizontalSpeed: 150,
+      ribbonCount: 5,
-				ribbonCount: 5,
+      strokeSize: 5,
-				strokeSize: 5,
+      parallaxAmount: -0.5,
-				parallaxAmount: -0.5,
+      animateSections: true
-				animateSections: true
+    }
-			};
+    this._onDraw = this._onDraw.bind(this)
-			this._onDraw = this._onDraw.bind(this);
+    this._onResize = this._onResize.bind(this)
-			this._onResize = this._onResize.bind(this);
+    this._onScroll = this._onScroll.bind(this)
-			this._onScroll = this._onScroll.bind(this);
+    this.setOptions(options)
-			this.setOptions(options);
+    this.init()
-			this.init()
+  }
-		};
+  Factory.prototype = {
-		Factory.prototype = {
+    constructor: Factory,
-			constructor: Factory,
+    setOptions: function (options) {
-			setOptions: function (options) {
+      if (typeof options === 'object') {
-				if (typeof options === "object") {
+        for (var key in options) {
-					for (var key in options) {
+          if (options.hasOwnProperty(key)) {
-						if (options.hasOwnProperty(key)) {
+            this._options[key] = options[key]
-							this._options[key] = options[key]
+          }
-						}
+        }
-					}
+      }
-				}
+    },
-			},
+    init: function () {
-			init: function () {
+      try {
-				try {
+        this._canvas = document.createElement('canvas')
-					this._canvas = document.createElement("canvas");
+        this._canvas.style.display = 'block'
-					this._canvas.style["display"] = "block";
+        this._canvas.style.position = 'fixed'
-					this._canvas.style["position"] = "fixed";
+        this._canvas.style.margin = '0'
-					this._canvas.style["margin"] = "0";
+        this._canvas.style.padding = '0'
-					this._canvas.style["padding"] = "0";
+        this._canvas.style.border = '0'
-					this._canvas.style["border"] = "0";
+        this._canvas.style.outline = '0'
-					this._canvas.style["outline"] = "0";
+        this._canvas.style.left = '0'
-					this._canvas.style["left"] = "0";
+        this._canvas.style.top = '0'
-					this._canvas.style["top"] = "0";
+        this._canvas.style.width = '100%'
-					this._canvas.style["width"] = "100%";
+        this._canvas.style.height = '100%'
-					this._canvas.style["height"] = "100%";
+        this._canvas.style['z-index'] = '-1'
-					this._canvas.style["z-index"] = "-1";
+        this._onResize()
-					this._onResize();
+        this._context = this._canvas.getContext('2d')
-					this._context = this._canvas.getContext("2d");
+        this._context.clearRect(0, 0, this._width, this._height)
-					this._context.clearRect(0, 0, this._width, this._height);
+        this._context.globalAlpha = this._options.colorAlpha
-					this._context.globalAlpha = this._options.colorAlpha;
+        window.addEventListener('resize', this._onResize)
-					window.addEventListener("resize", this._onResize);
+        window.addEventListener('scroll', this._onScroll)
-					window.addEventListener("scroll", this._onScroll);
+        document.body.appendChild(this._canvas)
-					document.body.appendChild(this._canvas)
+      } catch (e) {
-				} catch (e) {
+        console.warn('Canvas Context Error: ' + e.toString())
-					console.warn("Canvas Context Error: " + e.toString());
+        return
-					return
+      }
-				}
+      this._onDraw()
-				this._onDraw()
+    },
-			},
+    addRibbon: function () {
-			addRibbon: function () {
+      var dir = Math.round(random(1, 9)) > 5 ? 'right' : 'left'
-				var dir = Math.round(random(1, 9)) > 5 ? "right" : "left",
+      var stop = 1000
-					stop = 1000,
+      var hide = 200
-					hide = 200,
+      var min = 0 - hide
-					min = 0 - hide,
+      var max = this._width + hide
-					max = this._width + hide,
+      var movex = 0
-					movex = 0,
+      var movey = 0
-					movey = 0,
+      var startx = dir === 'right' ? min : max
-					startx = dir === "right" ? min : max,
+      var starty = Math.round(random(0, this._height))
-					starty = Math.round(random(0, this._height));
+      if (/^(top|min)$/i.test(this._options.verticalPosition)) {
-				if (/^(top|min)$/i.test(this._options.verticalPosition)) {
+        starty = 0 + hide
-					starty = 0 + hide
+      } else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
-				} else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
+        starty = this._height / 2
-					starty = this._height / 2
+      } else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
-				} else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
+        starty = this._height - hide
-					starty = this._height - hide
+      }
-				}
+      var ribbon = []
-				var ribbon = [],
+      var point1 = new Point(startx, starty)
-					point1 = new Point(startx, starty),
+      var point2 = new Point(startx, starty)
-					point2 = new Point(startx, starty),
+      var point3 = null
-					point3 = null,
+      var color = Math.round(random(0, 360))
-					color = Math.round(random(0, 360)),
+      var delay = 0
-					delay = 0;
+      while (true) {
-				while (true) {
+        if (stop <= 0) break
-					if (stop <= 0) break;
+        stop--
-					stop--;
+        movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed)
-					movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
+        movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25))
-					movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
+        point3 = new Point()
-					point3 = new Point();
+        point3.copy(point2)
-					point3.copy(point2);
+        if (dir === 'right') {
-					if (dir === "right") {
+          point3.add(movex, movey)
-						point3.add(movex, movey);
+          if (point2.x >= max) break
-						if (point2.x >= max) break
+        } else if (dir === 'left') {
-					} else if (dir === "left") {
+          point3.subtract(movex, movey)
-						point3.subtract(movex, movey);
+          if (point2.x <= min) break
-						if (point2.x <= min) break
+        }
-					}
+        ribbon.push({
-					ribbon.push({
+          point1: new Point(point1.x, point1.y),
-						point1: new Point(point1.x, point1.y),
+          point2: new Point(point2.x, point2.y),
-						point2: new Point(point2.x, point2.y),
+          point3: point3,
-						point3: point3,
+          color: color,
-						color: color,
+          delay: delay,
-						delay: delay,
+          dir: dir,
-						dir: dir,
+          alpha: 0,
-						alpha: 0,
+          phase: 0
-						phase: 0
+        })
-					});
+        point1.copy(point2)
-					point1.copy(point2);
+        point2.copy(point3)
-					point2.copy(point3);
+        delay += 4
-					delay += 4;
+        color += this._options.colorCycleSpeed
-					color += this._options.colorCycleSpeed
+      }
-				}
+      this._ribbons.push(ribbon)
-				this._ribbons.push(ribbon)
+    },
-			},
+    _drawRibbonSection: function (section) {
-			_drawRibbonSection: function (section) {
+      if (section) {
-				if (section) {
+        if (section.phase >= 1 && section.alpha <= 0) {
-					if (section.phase >= 1 && section.alpha <= 0) {
+          return true
-						return true
+        }
-					}
+        if (section.delay <= 0) {
-					if (section.delay <= 0) {
+          section.phase += 0.02
-						section.phase += 0.02;
+          section.alpha = Math.sin(section.phase) * 1
-						section.alpha = Math.sin(section.phase) * 1;
+          section.alpha = section.alpha <= 0 ? 0 : section.alpha
-						section.alpha = section.alpha <= 0 ? 0 : section.alpha;
+          section.alpha = section.alpha >= 1 ? 1 : section.alpha
-						section.alpha = section.alpha >= 1 ? 1 : section.alpha;
+          if (this._options.animateSections) {
-						if (this._options.animateSections) {
+            var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1
-							var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
+            if (section.dir === 'right') {
-							if (section.dir === "right") {
+              section.point1.add(mod, 0)
-								section.point1.add(mod, 0);
+              section.point2.add(mod, 0)
-								section.point2.add(mod, 0);
+              section.point3.add(mod, 0)
-								section.point3.add(mod, 0)
+            } else {
-							} else {
+              section.point1.subtract(mod, 0)
-								section.point1.subtract(mod, 0);
+              section.point2.subtract(mod, 0)
-								section.point2.subtract(mod, 0);
+              section.point3.subtract(mod, 0)
-								section.point3.subtract(mod, 0)
+            }
-							}
+            section.point1.add(0, mod)
-							section.point1.add(0, mod);
+            section.point2.add(0, mod)
-							section.point2.add(0, mod);
+            section.point3.add(0, mod)
-							section.point3.add(0, mod)
+          }
-						}
+        } else {
-					} else {
+          section.delay -= 0.5
-						section.delay -= 0.5
+        }
-					}
+        var s = this._options.colorSaturation
-					var s = this._options.colorSaturation,
+        var l = this._options.colorBrightness
-						l = this._options.colorBrightness,
+        var c = 'hsla(' + section.color + ', ' + s + ', ' + l + ', ' + section.alpha + ' )'
-						c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
+        this._context.save()
-					this._context.save();
+        if (this._options.parallaxAmount !== 0) {
-					if (this._options.parallaxAmount !== 0) {
+          this._context.translate(0, this._scroll * this._options.parallaxAmount)
-						this._context.translate(0, this._scroll * this._options.parallaxAmount)
+        }
-					}
+        this._context.beginPath()
-					this._context.beginPath();
+        this._context.moveTo(section.point1.x, section.point1.y)
-					this._context.moveTo(section.point1.x, section.point1.y);
+        this._context.lineTo(section.point2.x, section.point2.y)
-					this._context.lineTo(section.point2.x, section.point2.y);
+        this._context.lineTo(section.point3.x, section.point3.y)
-					this._context.lineTo(section.point3.x, section.point3.y);
+        this._context.fillStyle = c
-					this._context.fillStyle = c;
+        this._context.fill()
-					this._context.fill();
+        if (this._options.strokeSize > 0) {
-					if (this._options.strokeSize > 0) {
+          this._context.lineWidth = this._options.strokeSize
-						this._context.lineWidth = this._options.strokeSize;
+          this._context.strokeStyle = c
-						this._context.strokeStyle = c;
+          this._context.lineCap = 'round'
-						this._context.lineCap = "round";
+          this._context.stroke()
-						this._context.stroke()
+        }
-					}
+        this._context.restore()
-					this._context.restore()
+      }
-				}
+      return false
-				return false
+    },
-			},
+    _onDraw: function () {
-			_onDraw: function () {
+      for (var i = 0, t = this._ribbons.length; i < t; ++i) {
-				for (var i = 0, t = this._ribbons.length; i < t; ++i) {
+        if (!this._ribbons[i]) {
-					if (!this._ribbons[i]) {
+          this._ribbons.splice(i, 1)
-						this._ribbons.splice(i, 1)
+        }
-					}
+      }
-				}
+      this._context.clearRect(0, 0, this._width, this._height)
-				this._context.clearRect(0, 0, this._width, this._height);
+      for (var a = 0; a < this._ribbons.length; ++a) {
-				for (var a = 0; a < this._ribbons.length; ++a) {
+        var ribbon = this._ribbons[a]
-					var ribbon = this._ribbons[a],
+        var numSections = ribbon.length
-						numSections = ribbon.length,
+        var numDone = 0
-						numDone = 0;
+        for (var b = 0; b < numSections; ++b) {
-					for (var b = 0; b < numSections; ++b) {
+          if (this._drawRibbonSection(ribbon[b])) {
-						if (this._drawRibbonSection(ribbon[b])) {
+            numDone++
-							numDone++
+          }
-						}
+        }
-					}
+        if (numDone >= numSections) {
-					if (numDone >= numSections) {
+          this._ribbons[a] = null
-						this._ribbons[a] = null
+        }
-					}
+      }
-				}
+      if (this._ribbons.length < this._options.ribbonCount) {
-				if (this._ribbons.length < this._options.ribbonCount) {
+        this.addRibbon()
-					this.addRibbon()
+      }
-				}
+      requestAnimationFrame(this._onDraw)
-				requestAnimationFrame(this._onDraw)
+    },
-			},
+    _onResize: function (e) {
-			_onResize: function (e) {
+      var screen = screenInfo(e)
-				var screen = screenInfo(e);
+      this._width = screen.width
-				this._width = screen.width;
+      this._height = screen.height
-				this._height = screen.height;
+      if (this._canvas) {
-				if (this._canvas) {
+        this._canvas.width = this._width
-					this._canvas.width = this._width;
+        this._canvas.height = this._height
-					this._canvas.height = this._height;
+        if (this._context) {
-					if (this._context) {
+          this._context.globalAlpha = this._options.colorAlpha
-						this._context.globalAlpha = this._options.colorAlpha
+        }
-					}
+      }
-				}
+    },
-			},
+    _onScroll: function (e) {
-			_onScroll: function (e) {
+      var screen = screenInfo(e)
-				var screen = screenInfo(e);
+      this._scroll = screen.scrolly
-				this._scroll = screen.scrolly
+    }
-			}
+  }
-		};
+  return Factory
-		return Factory
+})
-	});
 
-	var cn = document.getElementById('ribbon_piao');
+var cn = document.getElementById('ribbon_piao')
-	var mb = cn.getAttribute("mobile");
+var mb = cn.getAttribute('mobile')
-	
-	if ( mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
 
-	} else {
+if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
-		new Ribbons({
-			colorSaturation: "60%",
-			colorBrightness: "50%",
-			colorAlpha: 0.5,
-			colorCycleSpeed: 5,
-			verticalPosition: "random",
-			horizontalSpeed: 200,
-			ribbonCount: 3,
-			strokeSize: 0,
-			parallaxAmount: -0.2,
-			animateSections: true
-		});
-	}
 
+} 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

@@ -1,13 +1,15 @@
+/* eslint-disable no-unused-vars */
+
 function debounce (func, wait, immediate) {
-  var timeout
+  let timeout
   return function () {
-    var context = this
+    const context = this
-    var args = arguments
+    const args = arguments
-    var later = function () {
+    const later = function () {
       timeout = null
       if (!immediate) func.apply(context, args)
     }
-    var callNow = immediate && !timeout
+    const callNow = immediate && !timeout
     clearTimeout(timeout)
     timeout = setTimeout(later, wait)
     if (callNow) func.apply(context, args)
@@ -15,21 +17,21 @@ function debounce (func, wait, immediate) {
 };
 
 function throttle (func, wait, options) {
-  var timeout, context, args
+  let timeout, context, args
-  var previous = 0
+  let previous = 0
   if (!options) options = {}
 
-  var later = function () {
+  const later = function () {
     previous = options.leading === false ? 0 : new Date().getTime()
     timeout = null
     func.apply(context, args)
     if (!timeout) context = args = null
   }
 
-  var throttled = function () {
+  const throttled = function () {
-    var now = new Date().getTime()
+    const now = new Date().getTime()
     if (!previous && options.leading === false) previous = now
-    var remaining = wait - (now - previous)
+    const remaining = wait - (now - previous)
     context = this
     args = arguments
     if (remaining <= 0 || remaining > wait) {
@@ -49,9 +51,9 @@ function throttle (func, wait, options) {
 }
 
 function sidebarPaddingR () {
-  var innerWidth = window.innerWidth
+  const innerWidth = window.innerWidth
-  var clientWidth = document.body.clientWidth
+  const clientWidth = document.body.clientWidth
-  var paddingRight = innerWidth - clientWidth
+  const paddingRight = innerWidth - clientWidth
   if (innerWidth !== clientWidth) {
     $('body').css('padding-right', paddingRight)
   }
@@ -63,8 +65,8 @@ function isIpad () {
 }
 
 function isTMobile () {
-  var ua = navigator.userAgent
+  const ua = navigator.userAgent
-  var pa = /iPad|iPhone|iPod|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g
+  const pa = /iPad|iPhone|iPod|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g
   return window.screen.width < 992 && pa.test(ua)
 }
 
@@ -77,14 +79,14 @@ function isDesktop () {
 }
 
 function scrollToDest (name, offset = 0) {
-  var scrollOffset = $(name).offset()
+  const scrollOffset = $(name).offset()
   $('body,html').animate({
     scrollTop: scrollOffset.top - offset
   })
 };
 
 function loadScript (url, callback) {
-  var script = document.createElement('script')
+  const script = document.createElement('script')
   script.type = 'text/javascript'
   if (script.readyState) { // IE
     script.onreadystatechange = function () {
@@ -104,15 +106,15 @@ function loadScript (url, callback) {
 };
 
 function snackbarShow (text, showAction, duration) {
-  var a = (typeof showAction !== 'undefined') ? showAction : false
+  const sa = (typeof showAction !== 'undefined') ? showAction : false
-  var d = (typeof duration !== 'undefined') ? duration : 2000
+  const dur = (typeof duration !== 'undefined') ? duration : 2000
-  var position = GLOBAL_CONFIG.Snackbar.position
+  const position = GLOBAL_CONFIG.Snackbar.position
-  var bg = document.documentElement.getAttribute('data-theme') === 'light' ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark
+  const bg = document.documentElement.getAttribute('data-theme') === 'light' ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark
   Snackbar.show({
     text: text,
     backgroundColor: bg,
-    showAction: a,
+    showAction: sa,
-    duration: d,
+    duration: dur,
     pos: position
   })
 }
@@ -124,9 +126,9 @@ const Cookies = {
     if (parts.length === 2) return parts.pop().split(';').shift()
   },
   set: function (name, value, days) {
-    var expires = ''
+    let expires = ''
     if (days) {
-      var date = new Date()
+      const date = new Date()
       date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
       expires = '; expires=' + date.toUTCString()
     }
@@ -134,6 +136,17 @@ const Cookies = {
   }
 }
 
+const initJustifiedGallery = function (selector) {
+  selector.each(function (i, o) {
+    if ($(this).is(':visible')) {
+      $(this).justifiedGallery({
+        rowHeight: 220,
+        margins: 4
+      })
+    }
+  })
+}
+
 /**
  * lazyload
  */