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/Header.js
+++ b/gitbook/components/Header.js
@@ -0,0 +1,134 @@
+import Collapse from '@/components/Collapse'
+import DarkModeButton from '@/components/DarkModeButton'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { SignInButton, SignedOut, UserButton } from '@clerk/nextjs'
+import { useRef, useState } from 'react'
+import CONFIG from '../config'
+import LogoBar from './LogoBar'
+import { MenuBarMobile } from './MenuBarMobile'
+import { MenuItemDrop } from './MenuItemDrop'
+import SearchInput from './SearchInput'
+
+/**
+ * 頁首：頂部導覽列 + 選單
+ * @param {} param0
+ * @returns
+ */
+export default function Header(props) {
+  const { className, customNav, customMenu } = props
+  const [isOpen, changeShow] = useState(false)
+  const collapseRef = useRef(null)
+
+  const { locale } = useGlobal()
+
+  const defaultLinks = [
+    {
+      icon: 'fas fa-th',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('GITBOOK_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('GITBOOK_BOOK_MENU_TAG', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('GITBOOK_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('GITBOOK_MENU_SEARCH', null, CONFIG)
+    }
+  ]
+
+  let links = defaultLinks.concat(customNav)
+
+  const toggleMenuOpen = () => {
+    changeShow(!isOpen)
+  }
+
+  // 若啟用自訂選單則覆寫頁面內建選單
+  if (siteConfig('CUSTOM_MENU')) {
+    links = customMenu
+  }
+
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
+  return (
+    <div id='top-nav' className={'fixed top-0 w-full z-20 ' + className}>
+      {/* 桌面端選單 */}
+      <div className='flex justify-center border-b dark:border-black items-center w-full h-16 bg-white dark:bg-hexo-black-gray'>
+        <div className='px-5 max-w-screen-4xl w-full flex gap-x-3 justify-between items-center'>
+          {/* 左側 */}
+          <div className='flex'>
+            <LogoBar {...props} />
+
+            {/* 桌面端頂部選單 */}
+            <div className='hidden md:flex'>
+              {links &&
+                links?.map((link, index) => (
+                  <MenuItemDrop key={index} link={link} />
+                ))}
+            </div>
+          </div>
+
+          {/* 右側 */}
+          <div className='flex items-center gap-4'>
+            {/* 登入相關 */}
+            {enableClerk && (
+              <>
+                <SignedOut>
+                  <SignInButton mode='modal'>
+                    <button className='bg-green-500 hover:bg-green-600 text-white rounded-lg px-3 py-2'>
+                      {locale.COMMON.SIGN_IN}
+                    </button>
+                  </SignInButton>
+                </SignedOut>
+                <UserButton />
+              </>
+            )}
+            <DarkModeButton className='text-sm items-center h-full hidden md:flex' />
+            <SearchInput className='hidden md:flex md:w-52 lg:w-72' />
+            {/* 摺疊按鈕，僅行動版顯示 */}
+            <div className='mr-1 flex md:hidden justify-end items-center space-x-4  dark:text-gray-200'>
+              <DarkModeButton className='flex text-md items-center h-full' />
+              <div
+                onClick={toggleMenuOpen}
+                className='cursor-pointer text-lg hover:scale-110 duration-150'>
+                {isOpen ? (
+                  <i className='fas fa-times' />
+                ) : (
+                  <i className='fa-solid fa-bars' />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 行動版摺疊選單 */}
+      <Collapse
+        type='vertical'
+        collapseRef={collapseRef}
+        isOpen={isOpen}
+        className='md:hidden'>
+        <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
+          <MenuBarMobile
+            {...props}
+            onHeightChange={param =>
+              collapseRef.current?.updateCollapseHeight(param)
+            }
+          />
+        </div>
+      </Collapse>
+    </div>
+  )
+}