feat: 可配置 typed.js 的參數 closed #1154

fix: 修復 typeJSFn 重複賦值的 bug
fix: 修復固定狀態欄後，標題有陰影的 bug
fix: 修復 gallery 標籤將圖片鏈接截斷導致404無法加載圖片的 bug closed #1160
fix: 修復開啟導航欄固定後，點擊部分滾動向上的按鈕，滾動的目標部分被導航欄遮擋的 bug closed #1158
fix: 修復固定導航欄後，toc 被遮擋的 closed #1159
fix: 切換簡繁時，會改變 html 的 lang 屬性

_config.yml

@@ -625,12 +625,9 @@ subtitle:
   enable: false
   # Typewriter Effect (打字效果)
   effect: true
-  # Effect Speed Options (打字效果速度參數)
-  startDelay: 300 # time before typing starts in milliseconds
-  typeSpeed: 150 # type speed in milliseconds
-  backSpeed: 50 # backspacing speed in milliseconds
-  # loop (循環打字)
-  loop: true
+  # Customize typed.js (配置typed.js)
+  # https://github.com/mattboldt/typed.js/#customization
+  typed_option:
   # source 調用第三方服務
   # source: false 關閉調用
   # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
@@ -958,3 +955,4 @@ CDN:
     # prismjs_autoloader:
     # artalk_js:
     # artalk_css:
+    # busuanzi:

layout/includes/header/index.pug

@@ -28,7 +28,9 @@ else
   - var top_img = false
   - var isHomeClass = 'not-top-img'
 
-header#page-header(class=isHomeClass style=bg_img)
+- const isFixedClass = theme.nav.fixed ? ' fixed' : ''
+
+header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
   !=partial('includes/header/nav', {}, {cache: true})
   if top_img !== false
     if is_post()

layout/includes/third-party/subtitle.pug

@@ -1,6 +1,30 @@
-- const { effect,loop,source,sub,startDelay,typeSpeed,backSpeed } = theme.subtitle
+- const { effect,source,sub,typed_option } = theme.subtitle
 - let subContent = sub || new Array()
 
+script.
+  window.typedJSFn = {
+    init: (str) => {
+      window.typed = new Typed('#subtitle', Object.assign({
+        strings: str,
+        startDelay: 300,
+        typeSpeed: 150,
+        loop: true,
+        backSpeed: 50,
+      }, !{JSON.stringify(typed_option)}))
+    },
+    run: (subtitleType) => {
+      if (!{effect}) {
+        if (typeof Typed === 'function') {
+          subtitleType()
+        } else {
+          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
+        }
+      } else {
+        subtitleType()
+      }
+    }
+  }
+
 case source
   when 1
     script.
@@ -12,28 +36,13 @@ case source
               const from = '出自 ' + data.from
               const sub = !{JSON.stringify(subContent)}
               sub.unshift(data.hitokoto, from)
-              window.typed = new Typed('#subtitle', {
-                strings: sub,
-                startDelay: !{startDelay},
-                typeSpeed: !{typeSpeed},
-                loop: !{loop},
-                backSpeed: !{backSpeed},
-              })
+              typedJSFn.init(sub)
             } else {
               document.getElementById('subtitle').innerHTML = data.hitokoto
             }
           })
       }
-
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
+      typedJSFn.run(subtitleType)
 
   when 2
     script.
@@ -44,28 +53,13 @@ case source
             const from = '出自 ' + str[1]
             const sub = !{JSON.stringify(subContent)}
             sub.unshift(con, from)
-            window.typed = new Typed('#subtitle', {
-              strings: sub,
-              startDelay: !{startDelay},
-              typeSpeed: !{typeSpeed},
-              loop: !{loop},
-              backSpeed: !{backSpeed},
-            })
+            typedJSFn.init(sub)
           } else {
             document.getElementById('subtitle').innerHTML = con
           }
         })
       }
-
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
+      typedJSFn.run(subtitleType)
 
   when 3
     script.
@@ -76,53 +70,23 @@ case source
               const sub = !{JSON.stringify(subContent)}
               const content = result.data.content
               sub.unshift(content)
-              window.typed = new Typed('#subtitle', {
-                strings: sub,
-                startDelay: !{startDelay},
-                typeSpeed: !{typeSpeed},
-                loop: !{loop},
-                backSpeed: !{backSpeed},
-              })
+              typedJSFn.init(sub)
             } else {
               document.getElementById('subtitle').innerHTML = result.data.content
             }
           })
         })
       }
-
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
+      typedJSFn.run(subtitleType)
 
   default
     - subContent = subContent.length ? subContent : new Array(config.subtitle)
     script.
       function subtitleType () {
         if (!{effect}) {
-          window.typed = new Typed("#subtitle", {
-            strings: !{JSON.stringify(subContent)},
-            startDelay: !{startDelay},
-            typeSpeed: !{typeSpeed},
-            loop: !{loop},
-            backSpeed: !{backSpeed}
-          })
+          typedJSFn.init(!{JSON.stringify(subContent)})
         } else {
           document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
         }
       }
-
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
+      typedJSFn.run(subtitleType)

scripts/tag/gallery.js

@@ -15,7 +15,7 @@ function gallery (args, content) {
   const rowHeight = args[1] || 220
   const limit = args[2] || 10
   const lazyload = args[0] === 'true'
-  const regex = /!\[(.*?)\]\((.*?)\s*(?:["'](.*?)["']?)?\s*\)/g
+  const regex = /!\[(.*?)\]\(([^\s]*)\s*(?:["'](.*?)["']?)?\s*\)/g
   const lazyloadClass = lazyload ? 'lazyload' : ''
   let m
   const arr = []

source/css/_layout/head.styl

@@ -124,7 +124,8 @@
       background: rgba(255, 255, 255, .8)
       box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
 
-      a
+      a,
+      .site-name
         color: var(--font-color)
         text-shadow: none
 
@@ -137,10 +138,6 @@
       box-shadow: 0 5px 6px -5px alpha($grey, .6)
       transition: transform .2s ease-in-out, opacity .2s ease-in-out
 
-      &.fixed
-        top: 0
-        transition: all .5s
-
       #blog-info
         color: var(--font-color)
 
@@ -158,8 +155,13 @@
         &:hover
           color: $light-blue
 
-  &.nav-visible
-    #nav:not(.fixed)
+    &.fixed
+      #nav
+        top: 0
+        transition: all .5s
+
+  &.nav-visible:not(.fixed)
+    #nav
       transition: all .5s
       transform: translate3d(0, 100%, 0)
 
@@ -168,6 +170,19 @@
         top: 70px
         transition: top .5s
 
+  &.fixed
+    #nav
+      position: fixed
+
+    & + .layout
+      & > .aside-content > .sticky_layout
+        top: 70px
+        transition: top .5s
+
+      #card-toc
+        .toc-content
+          max-height: calc(100vh - 170px)
+
 #page
   h1.page-title
     margin: 8px 0 20px
@@ -265,9 +280,6 @@
   &.show
     opacity: 1
 
-  &.fixed
-    position: fixed
-
   #blog-info
     flex: 1
     color: var(--light-grey)

source/js/utils.js

@@ -122,7 +122,8 @@ const btf = {
 
   scrollToDest: (pos, time = 500) => {
     const currentPos = window.pageYOffset
-    if (currentPos > pos) pos = pos - 70
+    const isNavFixed = document.getElementById('page-header').classList.contains('fixed')
+    if (currentPos > pos || isNavFixed) pos = pos - 70
 
     if ('scrollBehavior' in document.documentElement.style) {
       window.scrollTo({