fix: Waline 評論系統 設置 avatarCDN 無效的 bug

fix: 修复友情链接的头像带有灯箱的问题

_config.yml

@@ -274,6 +274,7 @@ comments:
 # https://disqus.com/
 disqus:
   shortname:
+  apikey: # For newest comments widget
 
 # Alternative Disqus - Render comments with Disqus API
 # DisqusJS 評論系統，可以實現在網路審查地區載入 Disqus 評論列表，兼容原版
@@ -331,7 +332,7 @@ valine:
 waline:
   serverURL: # Waline server address url
   avatar: monsterid # gravatar style https://zh-tw.gravatar.com/site/implement/images/#default-image
-  emojiCDN: # emoji CDN
+  avatarCDN: # Gravatar CDN baseURL
   bg: # waline background
   visitor: false
   option:
@@ -460,9 +461,9 @@ google_adsense:
 # --------------------------------------
 
 site_verification:
-  # - name: google_site_verification
+  # - name: google-site-verification
   #   content: xxxxxx
-  # - name: baidu_site_verification
+  # - name: baidu-site-verification
   #   content: xxxxxxx
 
 # Beautify/Effect (美化/效果)
@@ -694,17 +695,6 @@ newest_comments:
   limit: 6
   storage: 10 # unit: mins, save data to localStorage
   avatar: true
-  # You can only choose one, or neither
-  valine: false
-  github_issues:
-    enable: false
-    repo:
-  disqus:
-    enable: false
-    forum:
-    api_key:
-  twikoo: false
-  waline: false
 
 # Bottom right button (右下角按鈕)
 # --------------------------------------
@@ -756,7 +746,7 @@ fancybox: true
 # --------------------------------------
 
 # mermaid
-# see https://github.com/knsv/mermaid
+# see https://github.com/mermaid-js/mermaid
 mermaid:
   enable: false
   # built-in themes: default/forest/dark/neutral

layout/includes/404.pug

@@ -1,7 +1,7 @@
 - var top_img = theme.error_404.background || theme.default_top_img
 - var bg_img = `background-image: url('${url_for(top_img)}')`
 
-#body-wrap.error
+#body-wrap.error404
   div(style='display: none')
     include ./header/index.pug
 

layout/includes/head.pug

@@ -1,5 +1,5 @@
 - var pageTitle
-- if (is_archive()) pageTitle = _p('page.archives')
+- if (is_archive()) pageTitle = fragment_cache('findArchivesTitle', function(){return findArchivesTitle(theme.menu);})
 - else if (is_tag()) pageTitle = _p('page.tag') + ': ' + page.tag
 - else if (is_category()) pageTitle = _p('page.category') + ': ' + page.category
 - else if (is_month()) pageTitle += ': ' + page.month + '/' + page.year

layout/includes/header/index.pug

@@ -19,7 +19,7 @@ if !theme.disable_top_img && page.top_img !== false
   if top_img !== false
     - var imgSource = top_img && top_img.indexOf('/') !== -1 ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
     - var bg_img = top_img ? imgSource : ''
-    - var site_title = is_archive() ? _p('page.archives') : page.title || page.tag || page.category || config.title
+    - var site_title = is_archive() ? fragment_cache('findArchivesTitle', function(){return findArchivesTitle(theme.menu);}) : page.title || page.tag || page.category || config.title
     - var isHomeClass = is_home() ? 'full_page' : 'not-home-page'
     - is_post() ? isHomeClass = 'post-bg' : isHomeClass
   else

layout/includes/page/flink.pug

@@ -13,8 +13,9 @@
           each item in i.link_list
             .flink-list-item
               a(href=url_for(item.link)  title=item.name target="_blank")
-                img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
-                span.flink-item-name= item.name 
-                span.flink-item-desc(title=item.descr)= item.descr
+                .flink-item-icon
+                  img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
+                .flink-item-name= item.name 
+                .flink-item-desc(title=item.descr)= item.descr
     != page.content
 

layout/includes/sidebar.pug

@@ -1,8 +1,8 @@
 #sidebar
   #menu-mask
   #sidebar-menus
-    .author-avatar
-      img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
+    .avatar-img.is-center
+      img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
     .site-data
       if site.posts.length
         .data-item.is-center

layout/includes/third-party/card-post-count/waline.pug

@@ -3,10 +3,9 @@ script.
     function loadWaline () {
       function initWaline () {
         let initData = {
-          el: '#waline-wrap',
+          el: null,
           serverURL: '!{theme.waline.serverURL}',
         }
-        
         const waline = new Waline(initData)
       }
 

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

@@ -7,7 +7,7 @@ script.
     if (typeof FB === 'object') FB.XFBML.parse()
     else {
       let ele = document.createElement('script')
-      ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v9.0')
+      ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v10.0')
       ele.setAttribute('async', 'true')
       ele.setAttribute('defer', 'true')
       ele.setAttribute('crossorigin', 'anonymous')

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

@@ -1,19 +1,17 @@
-- let emojiMaps = '""'
-if site.data.waline
-  - emojiMaps = JSON.stringify(site.data.waline)
+- const { serverURL, avatar, avatarCDN, visitor, option } = theme.waline
 
 script.
   function loadWaline () {
     function initWaline () {
       const waline = new Waline(Object.assign({
         el: '#waline-wrap',
-        serverURL: '!{theme.waline.serverURL}',
-        avatar: '#{theme.waline.avatar}',
+        serverURL: '!{serverURL}',
+        avatar: '#{avatar}',
+        avatarCDN: '!{avatarCDN || "https://sdn.geekzu.org/avatar/"}',
         path: location.pathname,
-        emojiCDN: '#{theme.waline.emojiCDN}',
-        emojiMaps: !{emojiMaps},
-        visitor: #{theme.waline.visitor}
-      }, !{JSON.stringify(theme.waline.option)}))
+        visitor: !{visitor},
+        dark: 'html[data-theme="dark"]'
+      }, !{JSON.stringify(option)}))
     }
 
     if (typeof Waline === 'function') initWaline() 

layout/includes/third-party/math/katex.pug

@@ -4,7 +4,7 @@ link(rel="stylesheet" type="text/css" href=theme.CDN.katex_copytex_css)
 script.
   (() => {
     document.querySelectorAll('#article-container span.katex-display').forEach(item => {
-      btf.wrap(item, 'div', '', 'katex-wrap')
+      btf.wrap(item, 'div', { class: 'katex-wrap'})
     })
   })()
   

layout/includes/third-party/math/mathjax.pug

@@ -1,21 +1,14 @@
 //- Mathjax 3
-//- http://docs.mathjax.org/en/latest/upgrading/v2.html#changes-in-the-mathjax-api
-//- https://github.com/mathjax/MathJax/issues/2209
-//- http://docs.mathjax.org/en/latest/options/input/tex.html#the-configuration-block
-//- http://docs.mathjax.org/en/latest/web/typeset.html#resetting-automatic-equation-numbering
-
 script.
   if (!window.MathJax) {
     window.MathJax = {
-      loader: {
-        source: {
-          '[tex]/amsCd': '[tex]/amscd'
-        }
-      },
       tex: {
         inlineMath: [ ['$','$'], ["\\(","\\)"]],
         tags: 'ams'
       },
+      chtml: {
+        scale: 1.2
+      },
       options: {
         renderActions: {
           findScript: [10, doc => {
@@ -29,13 +22,15 @@ script.
               doc.math.push(math)
             }
           }, ''],
-          addClass: [200,() => {
-            document.querySelectorAll('mjx-container:not([display=\'true\']').forEach( node => {
+          insertScript: [200, () => {
+            document.querySelectorAll('mjx-container:not\([display]\)').forEach(node => {
               const target = node.parentNode
-              if (!target.classList.contains('has-jax')) {
-                target.classList.add('mathjax-overflow')
+              if (target.nodeName.toLowerCase() === 'li') {
+                target.parentNode.classList.add('has-jax')
+              } else {
+                target.classList.add('has-jax')
               }
-            })
+            });
           }, '', false]
         }
       }

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

@@ -15,7 +15,7 @@ script.
     }
 
     const getComment = () => {
-      fetch('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{theme.newest_comments.disqus.forum}&related=thread&limit=!{theme.newest_comments.limit}&api_key=!{theme.newest_comments.disqus.api_key}')
+      fetch('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{forum}&related=thread&limit=!{theme.newest_comments.limit}&api_key=!{apiKey}')
         .then(response => response.json())
         .then(data => {
           const disqusArray = data.response.map(item => {

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

@@ -38,7 +38,7 @@ script.
     }
 
     const getComment = () => {
-      fetch('https://api.github.com/repos/!{theme.newest_comments.github_issues.repo}/issues/comments?sort=updated&direction=desc&per_page=!{theme.newest_comments.limit}&page=1',{
+      fetch('https://api.github.com/repos/!{userRepo}/issues/comments?sort=updated&direction=desc&per_page=!{theme.newest_comments.limit}&page=1',{
         "headers": {
           Accept: 'application/vnd.github.v3.html+json'
         }

layout/includes/third-party/newest-comments/index.pug

@@ -1,12 +1,26 @@
-- let config = theme.newest_comments
+- let { use } = theme.comments
 
-if config.valine
-  include ./valine.pug
-else if config.waline
-  include ./waline.pug
-else if config.github_issues.enable
-  include ./github-issues.pug
-else if config.disqus.enable
-  include ./disqus-comment.pug
-else if config.twikoo
-  include ./twikoo-comment.pug
+if use
+  - let forum,apiKey,userRepo
+  case use[0]
+    when 'Valine'
+      include ./valine.pug
+    when 'Waline'
+      include ./waline.pug
+    when 'Twikoo'
+      include ./twikoo-comment.pug
+    when 'Disqus'
+      - forum = theme.disqus.shortname
+      - apiKey = theme.disqus.apikey
+      include ./disqus-comment.pug
+    when 'Disqusjs'
+      - forum = theme.disqusjs.shortname
+      - apiKey = theme.disqusjs.apikey
+      include ./disqus-comment.pug
+    when 'Gitalk'
+      - let { repo,owner } = theme.gitalk
+      - userRepo = owner + '/' + repo
+      include ./github-issues.pug
+    when 'Utterances'
+      - userRepo = theme.utterances.repo
+      include ./github-issues.pug

layout/includes/third-party/newest-comments/waline.pug

@@ -1,4 +1,4 @@
-- let default_avatar = theme.waline.avatar
+- let { avatar,avatarCDN } = theme.waline
 
 script.
   window.addEventListener('load', () => {
@@ -16,10 +16,10 @@ script.
       return content
     }
 
-    const getIcon = (avatar,mail) => {
-      if (avatar) return avatar
-      let defaultIcon = '!{ default_avatar ? `?d=${default_avatar}` : ''}'
-      let iconUrl = `https://gravatar.loli.net/avatar/${mail + defaultIcon}`
+    const getIcon = (ava,mail) => {
+      if (ava) return ava
+      let defaultIcon = '!{ avatar ? `?d=${avatar}` : ''}'
+      let iconUrl = "!{avatarCDN ? avatarCDN : 'https://gravatar.loli.net/avatar/'}" + mail + defaultIcon
       return iconUrl
     }
 
@@ -53,11 +53,10 @@ script.
     const getComment = () => {
       const loadWaline = () => {
         Waline.Widget.RecentComments({
-          el: '#card-newest-comments .aside-list',
           serverURL: '!{theme.waline.serverURL}',
           count: !{theme.newest_comments.limit}
-        }).then(comments => {
-          const walineArray = comments.map(function (e) {
+        }).then(res => {
+          const walineArray = res.comments.map(e => {
             return {
               'content': changeContent(e.comment),
               'avatar': getIcon(e.QQAvatar,e.mail),

layout/includes/third-party/pjax.pug

@@ -28,8 +28,9 @@ script.
 
   document.addEventListener('pjax:send', function () {
 
-    // removeEventListener toc scroll 
+    // removeEventListener scroll 
     window.removeEventListener('scroll', window.tocScrollFn)
+    window.removeEventListener('scroll', scrollCollect)
 
     typeof preloader === 'object' && preloader.initLoading()
     

layout/includes/widget/card_author.pug

@@ -1,7 +1,8 @@
 if theme.aside.card_author.enable
   .card-widget.card-info
-    .card-info-avatar.is-center
-      img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
+    .is-center
+      .avatar-img
+        img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
       .author-info__name= config.author
       .author-info__description!= theme.aside.card_author.description || config.description
 

layout/includes/widget/card_bottom_self.pug

@@ -1,5 +1,5 @@
-if site.data.widget
-  each item in site.data.widget
+if site.data.widget && site.data.widget.bottom
+  each item in site.data.widget.bottom
     .card-widget(class=item.class_name id=item.id_name style=item.order ? `order: ${item.order}` : '')
       .item-headline
         i(class=item.icon)

layout/includes/widget/card_newest_comment.pug

@@ -1,7 +1,7 @@
 if theme.newest_comments.enable
   .card-widget#card-newest-comments
     .item-headline
-      i.fas.fa-bolt
+      i.fas.fa-comment-dots
       span= _p('aside.card_newest_comments.headline')
     .aside-list
       span= _p('aside.card_newest_comments.loading_text')

layout/includes/widget/card_top_self.pug

@@ -0,0 +1,8 @@
+if site.data.widget && site.data.widget.top
+  each item in site.data.widget.top
+    .card-widget(class=item.class_name id=item.id_name)
+      .item-headline
+        i(class=item.icon)
+        span=item.name
+      .item-content
+        !=item.html

layout/includes/widget/index.pug

@@ -7,6 +7,7 @@
     else
       !=partial('includes/widget/card_author', {}, {cache: true})
       !=partial('includes/widget/card_announcement', {}, {cache: true})
+      !=partial('includes/widget/card_top_self', {}, {cache: true})      
       .sticky_layout
         if showToc
           include ./card_post_toc.pug
@@ -16,6 +17,8 @@
     //- page
     !=partial('includes/widget/card_author', {}, {cache: true})
     !=partial('includes/widget/card_announcement', {}, {cache: true})
+    !=partial('includes/widget/card_top_self', {}, {cache: true})      
+
     .sticky_layout
       !=partial('includes/widget/card_recent_post', {}, {cache: true})
       !=partial('includes/widget/card_ad', {}, {cache: true})
@@ -24,4 +27,4 @@
       !=partial('includes/widget/card_tags', {}, {cache: true})
       !=partial('includes/widget/card_archives', {}, {cache: true})
       !=partial('includes/widget/card_webinfo', {}, {cache: true})
-      !=partial('includes/widget/card_self', {}, {cache: true})
+      !=partial('includes/widget/card_bottom_self', {}, {cache: true})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.7.6",
+  "version": "3.8.3",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
@@ -24,9 +24,9 @@
   },
   "dependencies": {
     "hexo-renderer-stylus": "^2.0.1",
-    "hexo-renderer-pug": "^1.0.0"
+    "hexo-renderer-pug": "^2.0.0"
   },
   "homepage": "https://butterfly.js.org/",
-  "author": "Jerry <btf@immyw.com>",
+  "author": "Jerry <i@immyw.com>",
   "license": "Apache-2.0"
 }

scripts/helpers/inject_head_js.js

@@ -6,7 +6,7 @@
 'use strict'
 
 hexo.extend.helper.register('inject_head_js', function () {
-  const { darkmode, aside, change_font_size } = this.theme
+  const { darkmode, aside, change_font_size, index_img, disable_top_img, pjax} = this.theme
 
   const localStore = `
     win.saveToLocal = {
@@ -141,5 +141,21 @@ hexo.extend.helper.register('inject_head_js', function () {
     `
   }
 
-  return `<script>(win=>{${localStore + getScript + darkmodeJs + asideStatus + changFontAside}})(window)</script>`
+  let detectApple = ''
+  if (!disable_top_img || index_img !== false) {
+    detectApple = `
+    const detectApple = () => {
+      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
+        document.documentElement.classList.add('apple')
+      }
+    }
+    detectApple()
+    `
+
+    if (pjax.enable) {
+      detectApple += 'document.addEventListener(\'pjax:complete\', detectApple)'
+    }
+  }
+
+  return `<script>(win=>{${localStore + getScript + darkmodeJs + asideStatus + changFontAside + detectApple}})(window)</script>`
 })

scripts/helpers/page.js

@@ -70,3 +70,22 @@ hexo.extend.helper.register('injectHtml', function (data) {
   }
   return result
 })
+
+hexo.extend.helper.register('findArchivesTitle', function (menu) {
+  const defaultTitle = this._p('page.archives')
+  if (!menu) return defaultTitle
+
+  const loop = (m) => {
+    for (const key in m) {
+      if (typeof m[key] === 'object') {
+        loop(m[key])
+      }
+
+      if (/\/archives\//.test(m[key])) {
+        return key
+      }
+    }
+  }
+
+  return loop(menu) || defaultTitle
+})

source/css/_global/index.styl

@@ -19,7 +19,7 @@
   --btn-hover-color: $button-hover-color
   --btn-color: $button-color
   --btn-bg: $button-bg
-  --text-bg-hover: $text-bg-hover
+  --text-bg-hover: rgba($text-bg-hover, .7)
   --light-grey: $light-grey
   --white: $white
   --text-highlight-color: $text-highlight-color

source/css/_highlight/highlight.styl

@@ -110,7 +110,7 @@ blockquote
     color: var(--hltools-color)
     font-size: $code-font-size
 
-    &.closed + table
+    &.closed ~ *
       display: none
 
     .expand

source/css/_layout/404.styl

@@ -1,82 +0,0 @@
-if hexo-config('error_404.enable')
-  #error-wrap
-    position: absolute
-    top: 50%
-    right: 0
-    left: 0
-    margin: 0 auto
-    padding: 0 1rem
-    max-width: 1000px
-    transform: translate(0, -50%)
-
-    .error-content
-      display: flex
-      flex-direction: row
-      justify-content: center
-      align-items: center
-      margin: 0 1rem
-      height: 18rem
-      border-radius: 8px
-      background: var(--card-bg)
-      box-shadow: var(--card-box-shadow)
-      transition: all .3s
-
-      &:hover
-        box-shadow: var(--card-hover-box-shadow)
-
-      +maxWidth768()
-        flex-direction: column
-        margin: 0
-        height: 25rem
-
-      .error-img
-        flex: 1
-        height: 100%
-        border-top-left-radius: 8px
-        border-bottom-left-radius: 8px
-        background-color: $theme-color
-        background-position: center
-        background-size: cover
-
-        +maxWidth768()
-          flex: 1
-          width: 100%
-          border-top-right-radius: 8px
-          border-bottom-left-radius: 0
-
-      .error-info
-        flex: 1
-        padding: .5rem
-        text-align: center
-        font-size: 14px
-
-        if $site-name-font
-          font-family: $site-name-font
-
-        +maxWidth768()
-          flex: 1.1
-          width: 100%
-
-        .error_title
-          margin-top: -4rem
-          font-size: 9em
-
-          +maxWidth768()
-            margin-top: -3rem
-
-        .error_subtitle
-          @extend .limit-more-line
-          margin-top: -3.5rem
-          word-break: break-word
-          font-size: 1.6em
-          -webkit-line-clamp: 2
-
-        a
-          display: inline-block
-          margin-top: .5rem
-          padding: .3rem 1.5rem
-          background: var(--btn-bg)
-          color: var(--btn-color)
-
-          i
-            padding-right: .3rem

source/css/_layout/aside.styl

@@ -35,15 +35,6 @@
           display: none
 
   .card-info
-    img
-      width: 110px
-      height: 110px
-      border-radius: 70px
-      transition: all .5s
-
-      &:hover
-        transform: rotate(360deg)
-
     .author-info
       &__name
         font-weight: 500
@@ -103,7 +94,7 @@
     font-size: 1.2em
 
     span
-      margin-left: .5rem
+      margin-left: .3rem
 
   .sticky_layout
     +minWidth900()
@@ -331,6 +322,21 @@
     &:hover
       animation: more-btn-move 1s infinite
 
+.avatar-img
+  overflow: hidden
+  margin: 0 auto
+  width: 110px
+  height: 110px
+  border-radius: 70px
+
+  img
+    height: 100%
+    transition: all .5s
+    object-fit: cover
+
+    &:hover
+      transform: rotate(360deg)
+
 @keyframes more-btn-move
   0%,
   100%

source/css/_layout/head.styl

@@ -157,12 +157,9 @@
         top: 70px
         transition: top .5s
 
-// css hack
-// all browser in ios and safari in all apple device
-_::-webkit-full-page-media,
-_:future,
-:root #page-header.full_page
-  background-attachment: scroll !important
+.apple
+  #page-header.full_page
+    background-attachment: scroll !important
 
 #page
   h1.page-title

source/css/_layout/sidebar.styl

@@ -22,22 +22,12 @@
     &.open
       transform: translate3d(-100%, 0, 0)
 
-    & > .author-avatar
-      padding: 1.3rem 1.5rem 0
-      text-align: center
-
-      img
-        width: 110px
-        height: 110px
-        border-radius: 70px
-        transition: all .5s
-
-        &:hover
-          transform: rotate(360deg)
+    & > .avatar-img
+      margin: 1rem auto
 
     .site-data
       display: table
-      padding: .6rem .5rem 0
+      padding: 0 .5rem
       width: 100%
       table-layout: fixed
 
@@ -65,25 +55,21 @@
         @extend .limit-one-line
         position: relative
         display: block
-        padding: .3rem 1.5rem
+        padding: .3rem 1.5rem .3rem 1.1rem
         color: var(--font-color)
         font-size: 1.15em
-        cursor: pointer
+
+        &:hover
+          background: var(--text-bg-hover)
 
         i:first-child
-          width: 25%
+          width: 15%
           text-align: left
 
-        span
-          width: 75%
-
-          &:hover
-            color: $light-blue
-
       .expand
         position: absolute
         top: .78em
-        right: .4rem
+        right: .9rem
         transition: transform .3s
 
         &.hide

source/css/_layout/third-party.styl

@@ -1,5 +1,4 @@
-#vcomment,
-#waline
+#vcomment
   font-size: 1.1em
 
   .vbtn
@@ -21,6 +20,18 @@
     &:after
       z-index: 22
 
+#waline-wrap
+  --waline-font-size: 1.1em
+  --waline-theme-color: $button-bg
+  --waline-active-color: $button-hover-color
+  --waline-avatar-size: 2.75rem
+
+  .vuser
+    transition: all .5s
+
+    &:hover
+      transform: rotate(360deg)
+
 if hexo-config('valine.bg')
   #vcomment
     textarea
@@ -79,15 +90,11 @@ if hexo-config('waline.bg')
       display: none
 
 // mathjax
-.mathjax-overflow
+mjx-container[display],
+.has-jax
   overflow-x: auto
   overflow-y: hidden
 
-mjx-container[jax='CHTML'][display='true']
-  overflow-x: auto
-  overflow-y: hidden
-  padding-bottom: .3rem
-
 .aplayer
   color: $font-black
 

source/css/_page/404.styl

@@ -0,0 +1,86 @@
+if hexo-config('error_404.enable')
+  .error404
+    #error-wrap
+      position: absolute
+      top: 50%
+      right: 0
+      left: 0
+      margin: 0 auto
+      padding: 0 1rem
+      max-width: 1000px
+      transform: translate(0, -50%)
+
+      .error-content
+        display: flex
+        flex-direction: row
+        justify-content: center
+        align-items: center
+        margin: 0 1rem
+        height: 18rem
+        border-radius: 8px
+        background: var(--card-bg)
+        box-shadow: var(--card-box-shadow)
+        transition: all .3s
+
+        &:hover
+          box-shadow: var(--card-hover-box-shadow)
+
+        +maxWidth768()
+          flex-direction: column
+          margin: 0
+          height: 25rem
+
+        .error-img
+          flex: 1
+          height: 100%
+          border-top-left-radius: 8px
+          border-bottom-left-radius: 8px
+          background-color: $theme-color
+          background-position: center
+          background-size: cover
+
+          +maxWidth768()
+            flex: 1
+            width: 100%
+            border-top-right-radius: 8px
+            border-bottom-left-radius: 0
+
+        .error-info
+          flex: 1
+          padding: .5rem
+          text-align: center
+          font-size: 14px
+
+          if $site-name-font
+            font-family: $site-name-font
+
+          +maxWidth768()
+            flex: 1.1
+            width: 100%
+
+          .error_title
+            margin-top: -4rem
+            font-size: 9em
+
+            +maxWidth768()
+              margin-top: -3rem
+
+          .error_subtitle
+            @extend .limit-more-line
+            margin-top: -3.5rem
+            word-break: break-word
+            font-size: 1.6em
+            -webkit-line-clamp: 2
+
+          a
+            display: inline-block
+            margin-top: .5rem
+            padding: .3rem 1.5rem
+            background: var(--btn-bg)
+            color: var(--btn-color)
+
+            i
+              padding-right: .3rem
+
+    & + #rightside
+      display: none

source/css/_page/common.styl

@@ -1,8 +1,15 @@
+#body-wrap
+  display: flex
+  flex-direction: column
+  min-height: 100vh
+
 .layout
   display: flex
+  flex: 1 auto
   margin: 0 auto
   padding: 2rem 15px
   max-width: 1200px
+  width: 100%
 
   +maxWidth900()
     flex-direction: column

source/css/_page/flink.styl

@@ -50,20 +50,24 @@
           color: var(--font-color)
           text-decoration: none
 
-          img
+          .flink-item-icon
             float: left
+            overflow: hidden
             margin: 15px 10px
             width: 60px
             height: 60px
             border-radius: 35px
-            transition: all .3s
+
+            img
+              width: 100%
+              height: 100%
+              transition: all .3s
 
           .img-alt
             display: none
 
           .flink-item-name
             @extend .limit-one-line
-            display: block
             padding: 16px 10px 0 0
             height: 40px
             font-weight: bold
@@ -71,7 +75,6 @@
 
           .flink-item-desc
             @extend .limit-one-line
-            display: block
             padding: 16px 10px 16px 0
             height: 50px
             font-size: .93em

source/css/_search/algolia.styl

@@ -1,7 +1,5 @@
 #algolia-search
   .search-dialog
-    animation: titlescale .5s
-
     .ais-search-box
       margin: 0 auto
       max-width: 100%

source/css/_search/index.styl

@@ -7,7 +7,9 @@
   margin-left: -15rem
   padding: 1rem
   width: 30rem
+  border-radius: 8px
   background: var(--search-bg)
+  animation: titlescale .5s
 
   +maxWidth768()
     top: 0
@@ -15,6 +17,7 @@
     margin: 0
     width: 100%
     height: 100%
+    border-radius: 0
 
   hr
     margin: 1rem auto

source/css/_search/local-search.styl

@@ -1,7 +1,5 @@
 #local-search
   .search-dialog
-    animation: titlescale .5s
-
     .local-search-box
       margin: 0 auto
       max-width: 100%

source/js/main.js

@@ -194,7 +194,7 @@ document.addEventListener('DOMContentLoaded', function () {
         $figureHighlight.forEach(function (item) {
           const langName = item.getAttribute('data-language') ? item.getAttribute('data-language') : 'Code'
           const highlightLangEle = `<div class="code-lang">${langName}</div>`
-          btf.wrap(item, 'figure', '', 'highlight')
+          btf.wrap(item, 'figure', { class: 'highlight' })
           createEle(highlightLangEle, item)
         })
       } else {
@@ -208,7 +208,7 @@ document.addEventListener('DOMContentLoaded', function () {
     } else {
       if (isPrismjs) {
         $figureHighlight.forEach(function (item) {
-          btf.wrap(item, 'figure', '', 'highlight')
+          btf.wrap(item, 'figure', { class: 'highlight' })
           createEle('', item)
         })
       } else {
@@ -294,7 +294,7 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   const addMediumZoom = () => {
-    const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
+    const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a):not(.flink-item-icon) > img'))
     zoom.on('open', e => {
       const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
       zoom.update({
@@ -305,7 +305,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
   const jqLoadAndRun = () => {
     const $fancyboxEle = GLOBAL_CONFIG.lightbox === 'fancybox'
-      ? document.querySelectorAll('#article-container :not(a):not(.gallery-group) > img, #article-container > img')
+      ? document.querySelectorAll('#article-container :not(a):not(.gallery-group):not(.flink-item-icon) > img, #article-container > img')
       : []
     const fbLengthNoZero = $fancyboxEle.length > 0
     const $jgEle = document.querySelectorAll('#article-container .justified-gallery')
@@ -332,50 +332,55 @@ document.addEventListener('DOMContentLoaded', function () {
       return
     }
 
-    let initTop = 0
-    let isChatShow = true
-    const $header = document.getElementById('page-header')
-    const isChatBtnHide = typeof chatBtnHide === 'function'
-    const isChatBtnShow = typeof chatBtnShow === 'function'
-    window.addEventListener('scroll', btf.throttle(function (e) {
-      const currentTop = window.scrollY || document.documentElement.scrollTop
-      const isDown = scrollDirection(currentTop)
-      if (currentTop > 56) {
-        if (isDown) {
-          if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
-          if (isChatBtnShow && isChatShow === true) {
-            chatBtnHide()
-            isChatShow = false
-          }
-        } else {
-          if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
-          if (isChatBtnHide && isChatShow === false) {
-            chatBtnShow()
-            isChatShow = true
-          }
-        }
-        $header.classList.add('nav-fixed')
-        if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
-          $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
-        }
-      } else {
-        if (currentTop === 0) {
-          $header.classList.remove('nav-fixed', 'nav-visible')
-        }
-        $rightside.style.cssText = "opacity: ''; transform: ''"
-      }
-
-      if (document.body.scrollHeight <= innerHeight) {
-        $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
-      }
-    }, 200))
-
     // find the scroll direction
     function scrollDirection (currentTop) {
       const result = currentTop > initTop // true is down & false is up
       initTop = currentTop
       return result
     }
+
+    let initTop = 0
+    let isChatShow = true
+    const $header = document.getElementById('page-header')
+    const isChatBtnHide = typeof chatBtnHide === 'function'
+    const isChatBtnShow = typeof chatBtnShow === 'function'
+
+    window.scrollCollect = () => {
+      return btf.throttle(function (e) {
+        const currentTop = window.scrollY || document.documentElement.scrollTop
+        const isDown = scrollDirection(currentTop)
+        if (currentTop > 56) {
+          if (isDown) {
+            if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
+            if (isChatBtnShow && isChatShow === true) {
+              chatBtnHide()
+              isChatShow = false
+            }
+          } else {
+            if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
+            if (isChatBtnHide && isChatShow === false) {
+              chatBtnShow()
+              isChatShow = true
+            }
+          }
+          $header.classList.add('nav-fixed')
+          if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
+            $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
+          }
+        } else {
+          if (currentTop === 0) {
+            $header.classList.remove('nav-fixed', 'nav-visible')
+          }
+          $rightside.style.cssText = "opacity: ''; transform: ''"
+        }
+
+        if (document.body.scrollHeight <= innerHeight) {
+          $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
+        }
+      }, 200)()
+    }
+
+    window.addEventListener('scroll', scrollCollect)
   }
 
   /**
@@ -687,7 +692,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table')
     if ($table.length) {
       $table.forEach(item => {
-        btf.wrap(item, 'div', '', 'table-wrap')
+        btf.wrap(item, 'div', { class: 'table-wrap' })
       })
     }
   }

source/js/utils.js

@@ -207,18 +207,18 @@ const btf = {
    *
    * @param {*} selector
    * @param {*} eleType the type of create element
-   * @param {*} id id
-   * @param {*} cn class name
+   * @param {*} options object key: value
    */
-  wrap: function (selector, eleType, id = '', cn = '') {
+  wrap: (selector, eleType, options) => {
     const creatEle = document.createElement(eleType)
-    if (id) creatEle.id = id
-    if (cn) creatEle.className = cn
+    for (const [key, value] of Object.entries(options)) {
+      creatEle.setAttribute(key, value)
+    }
     selector.parentNode.insertBefore(creatEle, selector)
     creatEle.appendChild(selector)
   },
 
-  unwrap: function (el) {
+  unwrap: el => {
     const elParentNode = el.parentNode
     if (elParentNode !== document.body) {
       elParentNode.parentNode.insertBefore(el, elParentNode)
@@ -226,7 +226,7 @@ const btf = {
     }
   },
 
-  isJqueryLoad: (fn) => {
+  isJqueryLoad: fn => {
     if (typeof jQuery === 'undefined') {
       getScript(GLOBAL_CONFIG.source.jQuery).then(fn)
     } else {
@@ -234,9 +234,9 @@ const btf = {
     }
   },
 
-  isHidden: (ele) => ele.offsetHeight === 0 && ele.offsetWidth === 0,
+  isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0,
 
-  getEleTop: (ele) => {
+  getEleTop: ele => {
     let actualTop = ele.offsetTop
     let current = ele.offsetParent