Add GitBook theme structure with Traditional Chinese docs

2025-09-17 13:06:47 +08:00
parent 6f6671a024
commit 49dab41935
44 changed files with 2675 additions and 0 deletions
--- a/gitbook/components/BottomMenuBar.js
+++ b/gitbook/components/BottomMenuBar.js
@@ -0,0 +1,50 @@
+import { useGlobal } from '@/lib/global'
+import { useGitBookGlobal } from '..'
+
+/**
+ * 行動版底部導覽
+ * @param {*} param0
+ * @returns
+ */
+export default function BottomMenuBar({ post, className }) {
+  const showTocButton = post?.toc?.length > 1
+  const { locale } = useGlobal()
+  const { pageNavVisible, changePageNavVisible, tocVisible, changeTocVisible } =
+    useGitBookGlobal()
+  const togglePageNavVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+
+  const toggleToc = () => {
+    changeTocVisible(!tocVisible)
+  }
+
+  return (
+    <div className='md:hidden fixed bottom-0 left-0 z-50 w-full h-16 bg-white border-t border-gray-200 dark:bg-gray-700 dark:border-gray-600'>
+      <div
+        className={`grid h-full max-w-lg  mx-auto font-medium ${showTocButton && 'grid-cols-2'}`}>
+        <button
+          type='button'
+          onClick={togglePageNavVisible}
+          className='inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600'>
+          <i className='fa-book fas w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500' />
+          <span className='text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500'>
+            {locale.COMMON.ARTICLE_LIST}
+          </span>
+        </button>
+
+        {showTocButton && (
+          <button
+            type='button'
+            onClick={toggleToc}
+            className='inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600'>
+            <i className='fa-list-ol fas w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500' />
+            <span class='text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500'>
+              {locale.COMMON.TABLE_OF_CONTENTS}
+            </span>
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}