improvement: 優化 pjax 下，右下角按鈕的動畫

fix: 修復頁面設置 aside 爲 true 時，js 報錯的 bug fix: 修復部分頁面右下角按鈕位置遮擋的 bug fix: 修復壓縮 html 代碼,友情鏈接頁面壓縮會報錯的 bug fix: 修復safari上滑動側邊菜單欄會收起的 bug
jerryc127 · Jan 15, 2022 · 241f9b5 · 241f9b5
1 parent 31f17d1
commit 241f9b5
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 30 deletions.
diff --git a/layout/includes/head/config_site.pug b/layout/includes/head/config_site.pug
@@ -7,7 +7,7 @@
   else isHighlightShrink = theme.highlight_shrink
 
   var showToc = false
-  if (theme.aside.enable) {
+  if (theme.aside.enable && page.aside !== false) {
     let tocEnable = false
     if (is_post()) {
       if (theme.toc.post) tocEnable = true

diff --git a/layout/includes/page/flink.pug b/layout/includes/page/flink.pug
@@ -4,64 +4,64 @@
       script.
         (()=>{
           const replaceSymbol = (str) => {
-            return str.replace(/[\p{P}\p{S}]/gu, '-')
+            return str.replace(/[\p{P}\p{S}]/gu, "-")
           }
 
-          let result = ''
-          fetch('!{url_for(page.flink_url)}')
+          let result = ""
+          fetch("!{url_for(page.flink_url)}")
             .then(response => response.json())
             .then(str => {
               for(let i = 0; i < str.length; i++){
                 const replaceClassName = replaceSymbol(str[i].class_name)
-                const className = str[i].class_name ? `<h2 id='${replaceClassName}'><a href="#${replaceClassName}" class="headerlink" title="${str[i].class_name}"></a>${str[i].class_name}</h2>` : ''
-                const classDesc = str[i].class_desc ? `<div class='flink-desc'>${str[i].class_desc}</div>` : ''
+                const className = str[i].class_name ? `<h2 id="${replaceClassName}"><a href="#${replaceClassName}" class="headerlink" title="${str[i].class_name}"></a>${str[i].class_name}</h2>` : ""
+                const classDesc = str[i].class_desc ? `<div class="flink-desc">${str[i].class_desc}</div>` : ""
 
-                let listResult = ''
+                let listResult = ""
                 const lists = str[i].link_list
                 for(let j = 0; j < lists.length; j++){
                   listResult += `
                     <div class="flink-list-item">
-                      <a href='${lists[j].link}' title='${lists[j].name}' target='_blank'>
-                        <div class='flink-item-icon'>
-                          <img class='no-lightbox' src='${lists[j].avatar}' onerror='this.onerror=null;this.src="!{url_for(theme.error_img.flink)}"' alt='${lists[j].name}' />
+                      <a href="${lists[j].link}" title="${lists[j].name}" target="_blank">
+                        <div class="flink-item-icon">
+                          <img class="no-lightbox" src="${lists[j].avatar}" onerror='this.onerror=null;this.src="!{url_for(theme.error_img.flink)}"' alt="${lists[j].name}" />
                         </div>
-                        <div class='flink-item-name'>${lists[j].name}</div> 
-                        <div class='flink-item-desc' title='${lists[j].descr}'>${lists[j].descr}</div>
+                        <div class="flink-item-name">${lists[j].name}</div> 
+                        <div class="flink-item-desc" title="${lists[j].descr}">${lists[j].descr}</div>
                       </a>
                     </div>`
                 }
 
-                result += `${className}${classDesc} <div class='flink-list'>${listResult}</div>`
+                result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`
               }
 
-              document.querySelector('.flink').insertAdjacentHTML('afterbegin', result)
+              document.querySelector(".flink").insertAdjacentHTML("afterbegin", result)
             })
         })()
 
     else
       if site.data.link
-        - let result = ''
+        - let result = ""
         each i in site.data.link
-          - let className = i.class_name ? markdown(`## ${i.class_name}`) : ''
-          - let classDesc = i.class_desc ? `<div class='flink-desc'>${i.class_desc}</div>` : ''
+          - let className = i.class_name ? markdown(`## ${i.class_name}`) : ""
+          - let classDesc = i.class_desc ? `<div class="flink-desc">${i.class_desc}</div>` : ""
 
-          - let listResult = ''
+          - let listResult = ""
 
           each j in i.link_list
             - 
               listResult += `
                 <div class="flink-list-item">
-                  <a href='${j.link}' title='${j.name}' target='_blank'>
-                    <div class='flink-item-icon'>
-                      <img class='no-lightbox' src='${j.avatar}' onerror='this.onerror=null;this.src="${url_for(theme.error_img.flink)}"' alt='${j.name}' />
+                  <a href="${j.link}" title="${j.name}" target="_blank">
+                    <div class="flink-item-icon">
+                      <img class="no-lightbox" src="${j.avatar}" onerror='this.onerror=null;this.src="${url_for(theme.error_img.flink)}"' alt="${j.name}" />
                     </div>
-                    <div class='flink-item-name'>${j.name}</div> 
-                    <div class='flink-item-desc' title='${j.descr}'>${j.descr}</div>
+                    <div class="flink-item-name">${j.name}</div> 
+                    <div class="flink-item-desc" title="${j.descr}">${j.descr}</div>
                   </a>
                 </div>`
             -
 
-          - result += `${className}${classDesc} <div class='flink-list'>${listResult}</div>`
+          - result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`
 
         - page.content = result + page.content
     != page.content

diff --git a/layout/includes/third-party/pjax.pug b/layout/includes/third-party/pjax.pug
@@ -27,10 +27,11 @@ script.
   document.addEventListener('pjax:send', function () {
 
     // removeEventListener scroll 
-    window.removeEventListener('scroll', window.tocScrollFn)
-    window.removeEventListener('scroll', scrollCollect)
+    window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
+    window.scrollCollect && window.removeEventListener('scroll', scrollCollect)
 
     typeof preloader === 'object' && preloader.initLoading()
+    document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
 
     if (window.aplayers) {
       for (let i = 0; i < window.aplayers.length; i++) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

diff --git a/source/js/main.js b/source/js/main.js
@@ -1,5 +1,5 @@
 document.addEventListener('DOMContentLoaded', function () {
-  let blogNameWidth, menusWidth, searchWidth, $nav, hideMenuIndex
+  let blogNameWidth, menusWidth, searchWidth, $nav
   let mobileSidebarOpen = false
 
   const adjustMenu = (init) => {
@@ -13,6 +13,7 @@ document.addEventListener('DOMContentLoaded', function () {
       $nav = document.getElementById('nav')
     }
 
+    let hideMenuIndex = ''
     if (window.innerWidth < 768) hideMenuIndex = true
     else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
 
@@ -259,7 +260,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // 當滾動條小于 56 的時候
     if (document.body.scrollHeight <= innerHeight) {
-      $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
+      $rightside.style.cssText = 'opacity: 1; transform: translateX(-58px)'
       return
     }
 
@@ -734,7 +735,7 @@ document.addEventListener('DOMContentLoaded', function () {
   const unRefreshFn = function () {
     window.addEventListener('resize', () => {
       adjustMenu(false)
-      hideMenuIndex && mobileSidebarOpen && sidebarFn.close()
+      btf.isHidden(document.getElementById('toggle-menu')) && mobileSidebarOpen && sidebarFn.close()
     })
 
     document.getElementById('menu-mask').addEventListener('click', e => { sidebarFn.close() })