Gitbook 主题微调

components/ThemeSwitch.js

@@ -1,17 +1,18 @@
 import { useGlobal } from '@/lib/global'
-import { useState } from 'react'
-import { Draggable } from './Draggable'
+import LANGS from '@/lib/lang'
+import { getQueryParam } from '@/lib/utils'
 import { THEMES } from '@/themes/theme'
 import { useRouter } from 'next/router'
+import { useState } from 'react'
 import DarkModeButton from './DarkModeButton'
-import { getQueryParam } from '@/lib/utils'
-import LANGS from '@/lib/lang'
+import { Draggable } from './Draggable'
 /**
  *
  * @returns 主题切换
  */
 const ThemeSwitch = () => {
-  const { theme, lang, changeLang, locale, isDarkMode, toggleDarkMode } = useGlobal()
+  const { theme, lang, changeLang, locale, isDarkMode, toggleDarkMode } =
+    useGlobal()
   const router = useRouter()
   const currentTheme = getQueryParam(router.asPath, 'theme') || theme
   //   const currentLang = getQueryParam(router.asPath, 'lang') || lang
@@ -19,8 +20,12 @@ const ThemeSwitch = () => {
 
   // 修改当前路径url中的 theme 参数
   // 例如 http://localhost?theme=hexo 跳转到 http://localhost?theme=newTheme
-  const onThemeSelectChange = (e) => {
-    document.ontouchmove = document.ontouchend = document.onmousemove = document.onmouseup = null
+  const onThemeSelectChange = e => {
+    document.ontouchmove =
+      document.ontouchend =
+      document.onmousemove =
+      document.onmouseup =
+        null
     setIsLoading(true)
     const newTheme = e.target.value
     const query = router.query
@@ -28,59 +33,94 @@ const ThemeSwitch = () => {
     router.push({ pathname: router.pathname, query }).then(() => {
       setTimeout(() => {
         setIsLoading(false)
-      }, 500);
+      }, 500)
     })
   }
 
-  const onLangSelectChange = (e) => {
-    document.ontouchmove = document.ontouchend = document.onmousemove = document.onmouseup = null
+  const onLangSelectChange = e => {
+    document.ontouchmove =
+      document.ontouchend =
+      document.onmousemove =
+      document.onmouseup =
+        null
     const newLang = e.target.value
     changeLang(newLang)
   }
 
-  return (<>
-        <Draggable>
-            <div id="draggableBox" style={{ left: '0px', top: '80vh' }} className="fixed group space-y-2 overflow-hidden z-50 p-3 flex flex-col items-start dark:text-white bg-white dark:bg-black rounded-xl shadow-lg ">
-                {/* 深色按钮 */}
-                <div className="text-sm flex items-center w-0 group-hover:w-32 transition-all duration-200">
-                    <DarkModeButton />
-                    <div onClick={toggleDarkMode} className='cursor-pointer w-0 group-hover:w-24 transition-all duration-200 overflow-hidden whitespace-nowrap pl-1 h-auto'>{isDarkMode ? locale.MENU.DARK_MODE : locale.MENU.LIGHT_MODE}</div>
-                </div>
-
-                {/* 翻译按钮 */}
-                <div className="text-sm flex items-center group-hover:w-32 transition-all duration-200">
-                    <i className="fa-solid fa-language w-5" />
-                    <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
-                        <label htmlFor="langSelect" className="sr-only">选择语言：</label>
-                        <select id="langSelect" value={lang} onChange={onLangSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
-                            {Object.keys(LANGS)?.map(t => {
-                              return <option key={t} value={t}>{LANGS[t].LOCALE}</option>
-                            })}
-                        </select>
-                    </div>
-                </div>
-
-                {/* 主题切换按钮 */}
-                <div className="text-sm flex items-center group-hover:w-32 transition-all duration-200">
-                    <i className="fa-solid fa-palette w-5" />
-                    <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
-                        <label htmlFor="themeSelect" className="sr-only">选择主题：</label>
-                        <select id="themeSelect" value={currentTheme} onChange={onThemeSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
-                            {THEMES?.map(t => {
-                              return <option key={t} value={t}>{t}</option>
-                            })}
-                        </select>
-                    </div>
-                </div>
+  return (
+    <>
+      <Draggable>
+        <div
+          id='draggableBox'
+          style={{ left: '0px', top: '80vh' }}
+          className='fixed group hover:scale-105 transition-all space-y-2 overflow-hidden z-50 p-3 flex flex-col items-start dark:text-white bg-white dark:bg-black rounded-xl shadow-lg '>
+          {/* 主题切换按钮 */}
+          <div className='text-sm flex items-center group-hover:w-32 transition-all duration-200'>
+            <i className='fa-solid fa-palette w-5' />
+            <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
+              <label htmlFor='themeSelect' className='sr-only'>
+                {locale.COMMON.THEME}
+              </label>
+              <select
+                id='themeSelect'
+                value={currentTheme}
+                onChange={onThemeSelectChange}
+                name='themes'
+                className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
+                {THEMES?.map(t => {
+                  return (
+                    <option key={t} value={t}>
+                      {t}
+                    </option>
+                  )
+                })}
+              </select>
             </div>
-        </Draggable>
+          </div>
 
-        {/* 切换主题加载时的全屏遮罩 */}
-        <div className={`${isLoading ? 'opacity-90 ' : 'opacity-0'} 
+          {/* 深色按钮 */}
+          <div className='text-sm flex items-center w-0 group-hover:w-32 transition-all duration-200'>
+            <DarkModeButton />
+            <div
+              onClick={toggleDarkMode}
+              className='cursor-pointer w-0 group-hover:w-24 transition-all duration-200 overflow-hidden whitespace-nowrap pl-1 h-auto'>
+              {isDarkMode ? locale.MENU.DARK_MODE : locale.MENU.LIGHT_MODE}
+            </div>
+          </div>
+
+          {/* 翻译按钮 */}
+          <div className='text-sm flex items-center group-hover:w-32 transition-all duration-200'>
+            <i className='fa-solid fa-language w-5' />
+            <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
+              <label htmlFor='langSelect' className='sr-only'>
+                选择语言：
+              </label>
+              <select
+                id='langSelect'
+                value={lang}
+                onChange={onLangSelectChange}
+                name='themes'
+                className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
+                {Object.keys(LANGS)?.map(t => {
+                  return (
+                    <option key={t} value={t}>
+                      {LANGS[t].LOCALE}
+                    </option>
+                  )
+                })}
+              </select>
+            </div>
+          </div>
+        </div>
+      </Draggable>
+
+      {/* 切换主题加载时的全屏遮罩 */}
+      <div
+        className={`${isLoading ? 'opacity-90 ' : 'opacity-0'} 
             w-screen h-screen glassmorphism bg-black text-white shadow-text flex justify-center items-center
             transition-all fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner`}>
-            <i className='text-3xl mr-5 fas fa-spinner animate-spin' />
-        </div>
+        <i className='text-3xl mr-5 fas fa-spinner animate-spin' />
+      </div>
     </>
   )
 }

lib/lang/en-US.js

@@ -14,11 +14,14 @@ export default {
     INDEX: 'Home',
     RSS: 'RSS',
     SEARCH: 'Search',
+    NAVIGATOR: 'NAV',
     ABOUT: 'About',
     MAIL: 'E-Mail',
     ARCHIVE: 'Archive'
   },
   COMMON: {
+    THEME: 'Theme',
+    ARTICLE_LIST: 'Article List',
     MORE: 'More',
     NO_MORE: 'No More',
     LATEST_POSTS: 'Latest posts',

lib/lang/zh-CN.js

@@ -20,6 +20,8 @@ export default {
     ARCHIVE: '归档'
   },
   COMMON: {
+    THEME: 'Theme',
+    ARTICLE_LIST: '文章列表',
     MORE: '更多',
     NO_MORE: '没有更多了',
     LATEST_POSTS: '最新发布',
@@ -63,7 +65,7 @@ export default {
     MINUTE: '分钟',
     WORD_COUNT: '字数',
     READ_TIME: '阅读时长',
-    NEXT_POST:'下一篇'
+    NEXT_POST: '下一篇'
   },
   PAGINATION: {
     PREV: '上页',

lib/lang/zh-HK.js

@@ -5,7 +5,39 @@ export default {
     RSS: '訂閱',
     SEARCH: '搜尋',
     ABOUT: '關於',
-    MAIL: '電郵'
+    MAIL: '電郵',
+    NAVIGATOR: '導航',
+    ARCHIVE: '封存'
+  },
+  COMMON: {
+    ARTICLE_LIST: '文章列表',
+    MORE: '更多',
+    NO_MORE: '沒有更多了',
+    LATEST_POSTS: '最新文章',
+    TAGS: '標籤',
+    NO_TAG: '無標籤',
+    CATEGORY: '分類',
+    SHARE: '分享',
+    SCAN_QR_CODE: 'QRCode',
+    URL_COPIED: '連結已複製！',
+    TABLE_OF_CONTENTS: '目錄',
+    RELATE_POSTS: '相關文章',
+    COPYRIGHT: '著作權',
+    AUTHOR: '作者',
+    URL: '連結',
+    ANALYTICS: '分析',
+    POSTS: '篇文章',
+    ARTICLE: '文章',
+    VISITORS: '位訪客',
+    VIEWS: '次查看',
+    COPYRIGHT_NOTICE: '本文採用 CC BY-NC-SA 4.0 許可協議，轉載請註明出處。',
+    RESULT_OF_SEARCH: '篇搜尋到的结果',
+    ARTICLE_DETAIL: '完整文章',
+    PASSWORD_ERROR: '密碼錯誤！',
+    ARTICLE_LOCK_TIPS: '文章已上鎖，請輸入訪問密碼',
+    SUBMIT: '提交',
+    POST_TIME: '发布于',
+    LAST_EDITED_TIME: '最后更新'
   },
   PAGINATION: {
     PREV: '上一頁',
@@ -13,7 +45,7 @@ export default {
   },
   SEARCH: {
     ARTICLES: '搜尋文章',
-    TAGS: '搜尋標簽'
+    TAGS: '搜尋標籤'
   },
   POST: {
     BACK: '返回',

lib/lang/zh-TW.js

@@ -10,6 +10,7 @@ export default {
     ARCHIVE: '封存'
   },
   COMMON: {
+    ARTICLE_LIST: '文章列表',
     MORE: '更多',
     NO_MORE: '沒有更多了',
     LATEST_POSTS: '最新文章',

themes/gitbook/components/BottomMenuBar.js

@@ -1,23 +1,27 @@
-import { useGitBookGlobal } from '@/themes/gitbook'
-import JumpToTopButton from './JumpToTopButton'
+import MobileButtonCatalog from './MobileButtonCatalog'
+import MobileButtonPageNav from './MobileButtonPageNav'
 
+/**
+ * 移动端底部导航
+ * @param {*} param0
+ * @returns
+ */
 export default function BottomMenuBar({ post, className }) {
-  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-
-  const togglePageNavVisible = () => {
-    changePageNavVisible(!pageNavVisible)
-  }
+  const showTocButton = post?.toc?.length > 1
 
   return (
-        <div className={'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
-            <div className='flex justify-between h-full shadow-card'>
-                <div onClick={togglePageNavVisible} className='flex w-full items-center justify-center cursor-pointer'>
-                <i className="fa-solid fa-book"></i>
-                </div>
-                <div className='flex w-full items-center justify-center cursor-pointer'>
-                    <JumpToTopButton />
-                </div>
-            </div>
+    <>
+      {/* 移动端底部导航按钮 */}
+      <div className='bottom-button-group md:hidden w-screen h-14 px-4 fixed flex items-center justify-between right-left bottom-0 z-30 bg-white border-t dark:border-gray-800'>
+        <div className='w-full'>
+          <MobileButtonPageNav />
         </div>
+        {showTocButton && (
+          <div className='w-full'>
+            <MobileButtonCatalog />
+          </div>
+        )}
+      </div>
+    </>
   )
 }

themes/gitbook/components/Footer.js

@@ -1,6 +1,10 @@
 import { siteConfig } from '@/lib/config'
 import SocialButton from './SocialButton'
-
+/**
+ * 站点也叫
+ * @param {*} param0
+ * @returns
+ */
 const Footer = ({ siteInfo }) => {
   const d = new Date()
   const currentYear = d.getFullYear()

themes/gitbook/components/MobileButtonCatalog.js

@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { useGitBookGlobal } from '@/themes/gitbook'
 
 /**
@@ -5,6 +6,7 @@ import { useGitBookGlobal } from '@/themes/gitbook'
  */
 export default function MobileButtonCatalog() {
   const { tocVisible, changeTocVisible } = useGitBookGlobal()
+  const { locale } = useGlobal()
 
   const toggleToc = () => {
     changeTocVisible(!tocVisible)
@@ -19,9 +21,11 @@ export default function MobileButtonCatalog() {
       <a
         id='toc-button'
         className={
-          'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'
-        }
-      />
+          'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
+        }>
+        <i className='fa-list-ol fas' />
+        <span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
+      </a>
     </div>
   )
 }

themes/gitbook/components/MobileButtonPageNav.js

@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { useGitBookGlobal } from '@/themes/gitbook'
 
 /**
@@ -5,7 +6,7 @@ import { useGitBookGlobal } from '@/themes/gitbook'
  */
 export default function MobileButtonPageNav() {
   const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-
+  const { locale } = useGlobal()
   const togglePageNavVisible = () => {
     changePageNavVisible(!pageNavVisible)
   }
@@ -17,11 +18,13 @@ export default function MobileButtonPageNav() {
         'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
       }>
       <a
-        id='toc-button'
+        id='nav-button'
         className={
-          'fa-book cursor-pointer fas hover:scale-150 transform duration-200'
-        }
-      />
+          'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
+        }>
+        <i className='fa-book fas' />
+        <span>{locale.COMMON.ARTICLE_LIST}</span>
+      </a>
     </div>
   )
 }

themes/gitbook/components/PageNavDrawer.js

@@ -34,7 +34,7 @@ const PageNavDrawer = props => {
           className={`${pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft'} 
                       overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
           <div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
-            <span>{locale.COMMON.ARTICLE}</span>
+            <span>{locale.COMMON.ARTICLE_LIST}</span>
             <i
               className='fas fa-times p-1 cursor-pointer'
               onClick={() => {

themes/gitbook/index.js

@@ -19,6 +19,7 @@ import ArticleAround from './components/ArticleAround'
 import ArticleInfo from './components/ArticleInfo'
 import { ArticleLock } from './components/ArticleLock'
 import BlogArchiveItem from './components/BlogArchiveItem'
+import BottomMenuBar from './components/BottomMenuBar'
 import Catalog from './components/Catalog'
 import CatalogDrawerWrapper from './components/CatalogDrawerWrapper'
 import CategoryItem from './components/CategoryItem'
@@ -26,8 +27,6 @@ import Footer from './components/Footer'
 import Header from './components/Header'
 import InfoCard from './components/InfoCard'
 import JumpToTopButton from './components/JumpToTopButton'
-import MobileButtonCatalog from './components/MobileButtonCatalog'
-import MobileButtonPageNav from './components/MobileButtonPageNav'
 import NavPostList from './components/NavPostList'
 import PageNavDrawer from './components/PageNavDrawer'
 import RevolverMaps from './components/RevolverMaps'
@@ -108,7 +107,6 @@ const LayoutBase = props => {
   const [pageNavVisible, changePageNavVisible] = useState(false)
   const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
 
-  const showTocButton = post?.toc?.length > 1
   const searchModal = useRef(null)
 
   useEffect(() => {
@@ -239,23 +237,11 @@ const LayoutBase = props => {
           )}
         </main>
 
-        {/* 移动端底部导航按钮 */}
-        <div className='bottom-button-group md:hidden w-screen h-12 px-4 fixed flex items-center justify-between right-0 bottom-0 z-30 bg-white border-l border-t dark:border-gray-800'>
-          <div className='w-full'>
-            <MobileButtonPageNav />
-          </div>
-          {showTocButton && (
-            <div className='w-full'>
-              <MobileButtonCatalog />
-            </div>
-          )}
-        </div>
-
         {/* 移动端导航抽屉 */}
         <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />
 
         {/* 移动端底部导航栏 */}
-        {/* <BottomMenuBar {...props} className='block md:hidden' /> */}
+        <BottomMenuBar {...props} />
       </div>
     </ThemeGlobalGitbook.Provider>
   )