feat: 修改 toc 打開效果

feat: 適配 hexo-blog-encrypt
fix: 修復 hexo 新版本下，prismjs 的問題
improvement: 在 pjax 關閉的情況下。減少不必要的全局變量
improvement: 更新依賴版本
improvement: 頁面進入效果優化
improvement: 添加平滑滾動
improvement: 兼容性優化
improvement: 優化 lighthouse 分數
improvement: 優化代碼

source/js/main.js

@@ -180,6 +180,7 @@ document.addEventListener('DOMContentLoaded', function () {
    * PhotoFigcaption
    */
   const addPhotoFigcaption = () => {
+    if (!GLOBAL_CONFIG.isPhotoFigcaption) return
     document.querySelectorAll('#article-container img').forEach(item => {
       const altValue = item.title || item.alt
       if (!altValue) return
@@ -333,7 +334,7 @@ document.addEventListener('DOMContentLoaded', function () {
     if (typeof InfiniteGrid === 'function') {
       init()
     } else {
-      await getScript(`${GLOBAL_CONFIG.infinitegrid.js}`)
+      await btf.getScript(`${GLOBAL_CONFIG.infinitegrid.js}`)
       init()
     }
   }
@@ -461,6 +462,9 @@ document.addEventListener('DOMContentLoaded', function () {
           $cardToc.scrollTop = sidebarScrollTop - 150
         }
       }
+
+      // 處理 hexo-blog-encrypt 事件
+      $cardToc.style.display = 'block'
     }
 
     // find head position & add active class
@@ -563,13 +567,13 @@ document.addEventListener('DOMContentLoaded', function () {
     darkmode: () => { // switch between light and dark mode
       const willChangeMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
       if (willChangeMode === 'dark') {
-        activateDarkMode()
+        btf.activateDarkMode()
         GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
       } else {
-        activateLightMode()
+        btf.activateLightMode()
         GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
       }
-      saveToLocal.set('theme', willChangeMode, 2)
+      btf.saveToLocal.set('theme', willChangeMode, 2)
       handleThemeChange(willChangeMode)
     },
     'rightside-config': item => { // Show or hide rightside-hide-btn
@@ -589,15 +593,24 @@ document.addEventListener('DOMContentLoaded', function () {
     'hide-aside-btn': () => { // Hide aside
       const $htmlDom = document.documentElement.classList
       const saveStatus = $htmlDom.contains('hide-aside') ? 'show' : 'hide'
-      saveToLocal.set('aside-status', saveStatus, 2)
+      btf.saveToLocal.set('aside-status', saveStatus, 2)
       $htmlDom.toggle('hide-aside')
     },
-    'mobile-toc-button': item => { // Show mobile toc
+    'mobile-toc-button': function (p, item) { // Show mobile toc
       const tocEle = document.getElementById('card-toc')
       tocEle.style.transition = 'transform 0.3s ease-in-out'
+
+      const tocEleHeight = tocEle.clientHeight
+      const btData = item.getBoundingClientRect()
+
+      const tocEleBottom = window.innerHeight - btData.bottom - 30
+      if (tocEleHeight > tocEleBottom) {
+        tocEle.style.transformOrigin = `right ${tocEleHeight - tocEleBottom - btData.height / 2}px`
+      }
+
       tocEle.classList.toggle('open')
       tocEle.addEventListener('transitionend', () => {
-        tocEle.style.transition = ''
+        tocEle.style.cssText = ''
       }, { once: true })
     },
     'chat-btn': () => { // Show chat
@@ -611,7 +624,7 @@ document.addEventListener('DOMContentLoaded', function () {
   document.getElementById('rightside').addEventListener('click', function (e) {
     const $target = e.target.closest('[id]')
     if ($target && rightSideFn[$target.id]) {
-      rightSideFn[$target.id](this)
+      rightSideFn[$target.id](this, $target)
     }
   })
 
@@ -812,6 +825,10 @@ document.addEventListener('DOMContentLoaded', function () {
       threshold: 0,
       data_src: 'lazy-src'
     })
+
+    btf.addGlobalFn('pjaxComplete', () => {
+      window.lazyLoadInstance.update()
+    }, 'lazyload')
   }
 
   const relativeDate = function (selector) {
@@ -835,14 +852,29 @@ document.addEventListener('DOMContentLoaded', function () {
     GLOBAL_CONFIG.copyright !== undefined && addCopyright()
 
     if (GLOBAL_CONFIG.autoDarkmode) {
-      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-        if (saveToLocal.get('theme') !== undefined) return
+      window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
+        if (btf.saveToLocal.get('theme') !== undefined) return
         e.matches ? handleThemeChange('dark') : handleThemeChange('light')
       })
     }
   }
 
-  window.refreshFn = function () {
+  const forPostFn = () => {
+    addHighlightTool()
+    addPhotoFigcaption()
+
+    btf.removeGlobalFnEvent('justifiedGallery')
+    const galleryContainer = document.querySelectorAll('#article-container .gallery-container')
+    galleryContainer.length && addJustifiedGallery(galleryContainer)
+
+    runLightbox()
+    scrollFnToDo()
+    addTableWrap()
+    clickFnOfTagHide()
+    tabsFn()
+  }
+
+  const refreshFn = () => {
     initAdjust()
 
     if (GLOBAL_CONFIG_SITE.isPost) {
@@ -855,24 +887,24 @@ document.addEventListener('DOMContentLoaded', function () {
       toggleCardCategory()
     }
 
-    scrollFnToDo()
     GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
-    addHighlightTool()
-    GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
     scrollFn()
 
-    btf.removeGlobalFnEvent('justifiedGallery')
-    const galleryContainer = document.querySelectorAll('#article-container .gallery-container')
-    galleryContainer.length && addJustifiedGallery(galleryContainer)
-
-    runLightbox()
-    addTableWrap()
-    clickFnOfTagHide()
-    tabsFn()
+    forPostFn()
     switchComments()
     openMobileMenu()
   }
 
+  btf.addGlobalFn('pjaxComplete', refreshFn, 'refreshFn')
   refreshFn()
   unRefreshFn()
+
+  // 處理 hexo-blog-encrypt 事件
+  window.addEventListener('hexo-blog-decrypt', e => {
+    forPostFn()
+    window.translateFn.translateInitialization()
+    Object.values(window.globalFn.encrypt).forEach(fn => {
+      fn()
+    })
+  })
 })