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 屬性
2026-04-10 21:17:07 +08:00 · 2023-01-17 14:46:55 +08:00
parent 929a5608d3
commit 396fb102da
7 changed files with 108 additions and 112 deletions
--- a/_config.yml
+++ b/_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:
--- a/layout/includes/header/index.pug
+++ b/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()
--- a/layout/includes/third-party/subtitle.pug
+++ b/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}
-          })
+        if (!{effect}) {
+          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)
--- a/scripts/tag/gallery.js
+++ b/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 = []
--- a/source/css/_layout/head.styl
+++ b/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)
--- a/source/js/tw_cn.js
+++ b/source/js/tw_cn.js
--- a/source/js/utils.js
+++ b/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({