Merge pull request #2764 from tangly1024/release/4.7.3

Release/4.7.3
2026-05-14 07:26:52 +00:00 · 2024-09-25 10:52:00 +08:00
parent 4be65c2f22 4985b4a237
commit 03c116fac3
52 changed files with 2039 additions and 592 deletions
--- a/.env.local
+++ b/.env.local
@@ -1,5 +1,5 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.7.2
+NEXT_PUBLIC_VERSION=4.7.3


 # 可在此添加环境变量，去掉最左边的（# ）注释即可
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,15 +4,30 @@ module.exports = {
    es2021: true,
    node: true
  },
-  extends: ['plugin:react/recommended', 'plugin:@next/next/recommended', 'standard', 'prettier'],
+  extends: [
+    'plugin:react/jsx-runtime',
+    'plugin:react/recommended',
+    'plugin:@next/next/recommended',
+    'standard',
+    'prettier',
+    'plugin:@typescript-eslint/recommended', // 添加 TypeScript 推荐规则
+    'plugin:@typescript-eslint/recommended-requiring-type-checking' // 添加需要类型检查的规则
+  ],
+  parser: '@typescript-eslint/parser', // 使用 TypeScript 解析器
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
-    sourceType: 'module'
+    sourceType: 'module',
+    project: './tsconfig.json' // 指定 tsconfig.json 的路径
  },
-  plugins: ['react', 'react-hooks', 'prettier'],
+  plugins: [
+    'react',
+    'react-hooks',
+    'prettier',
+    '@typescript-eslint' // 添加 TypeScript 插件
+  ],
  settings: {
    react: {
      version: 'detect'
@@ -23,7 +38,9 @@ module.exports = {
    'react/no-unknown-property': 'off', // <style jsx>
    'react/prop-types': 'off',
    'space-before-function-paren': 0,
-    'react-hooks/rules-of-hooks': 'error' // Checks rules of Hooks
+    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }], // 确保未使用的变量报错
+    '@typescript-eslint/explicit-function-return-type': 'off' // 关闭强制函数返回类型声明
  },
  globals: {
    React: true
--- a/blog.config.js
+++ b/blog.config.js
@@ -125,8 +125,9 @@ const BLOG = {
    '/[prefix]': 'LayoutSlug',
    '/[prefix]/[slug]': 'LayoutSlug',
    '/[prefix]/[slug]/[...suffix]': 'LayoutSlug',
-    '/signin': 'LayoutSignIn',
-    '/signup': 'LayoutSignUp'
+    '/auth/result': 'LayoutAuth',
+    '/sign-in/[[...index]]': 'LayoutSignIn',
+    '/sign-up/[[...index]]': 'LayoutSignUp'
  },

  CAN_COPY: process.env.NEXT_PUBLIC_CAN_COPY || true, // 是否允许复制页面内容 默认允许，如果设置为false、则全栈禁止复制内容。
--- a/components/OpenWrite.js
+++ b/components/OpenWrite.js
@@ -1,4 +1,5 @@
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import { isBrowser, loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
@@ -24,14 +25,10 @@ const OpenWrite = () => {
  // 白名单
  const whiteList = siteConfig('OPEN_WRITE_WHITE_LIST', '')

+  // 登录信息
+  const { isLoaded, isSignedIn } = useGlobal()
+
  const loadOpenWrite = async () => {
-    const existWhite = existedWhiteList(router.asPath, whiteList)
-
-    // 如果当前页面在白名单中，则屏蔽加锁
-    if (existWhite) {
-      return
-    }
-
    try {
      await loadExternalResource(
        'https://readmore.openwrite.cn/js/readmore-2.0.js',
@@ -74,11 +71,24 @@ const OpenWrite = () => {
    }
  }
  useEffect(() => {
+    const existWhite = existedWhiteList(router.asPath, whiteList)
+    // 白名单中，免检
+    if (existWhite) {
+      return
+    }
+    if (isSignedIn) {
+      // 用户已登录免检
+      console.log('用户已登录')
+      return
+    }
+
+    // 开发环境免检
    if (process.env.NODE_ENV === 'development') {
      console.log('开发环境:屏蔽OpenWrite')
      return
    }
-    if (isBrowser && blogId) {
+
+    if (isBrowser && blogId && !isSignedIn) {
      toggleTocItems(true) // 禁止目录项的点击

      // Check if the element with id 'read-more-wrap' already exists
@@ -89,7 +99,7 @@ const OpenWrite = () => {
        loadOpenWrite()
      }
    }
-  })
+  }, [isLoaded, router])

  // 启动一个监听器，当页面上存在#read-more-wrap对象时，所有的 a .notion-table-of-contents-item 对象都禁止点击

--- a/components/SideBarDrawer.js
+++ b/components/SideBarDrawer.js
@@ -15,6 +15,7 @@ const SideBarDrawer = ({
  showOnPC = false
 }) => {
  const router = useRouter()
+
  useEffect(() => {
    const sideBarDrawerRouteListener = () => {
      switchSideDrawerVisible(false)
@@ -38,10 +39,10 @@ const SideBarDrawer = ({
    )

    if (showStatus) {
-      sideBarDrawer?.classList.replace('-ml-96', 'ml-0')
+      sideBarDrawer?.classList.replace('translate-x-[-100%]', 'translate-x-0')
      sideBarDrawerBackground?.classList.replace('hidden', 'block')
    } else {
-      sideBarDrawer?.classList.replace('ml-0', '-ml-96')
+      sideBarDrawer?.classList.replace('translate-x-0', 'translate-x-[-100%]')
      sideBarDrawerBackground?.classList.replace('block', 'hidden')
    }
  }
@@ -49,22 +50,21 @@ const SideBarDrawer = ({
  return (
    <div
      id='sidebar-wrapper'
-      className={` block ${showOnPC ? '' : 'lg:hidden'} top-0`}>
+      className={`block ${showOnPC ? '' : 'lg:hidden'} top-0`}>
      <div
        id='sidebar-drawer'
-        className={`${className} ${isOpen ? 'ml-0 w-96 visible' : '-ml-96 max-w-side invisible'} bg-white dark:bg-gray-900 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
+        className={`z-50 ${className} ${isOpen ? 'translate-x-0 opacity-100' : 'translate-x-[-100%] opacity-0'} transform transition-transform duration-300 ease-in-out bg-white dark:bg-gray-900 flex flex-col fixed h-full left-0 overflow-y-scroll top-0`}>
        {children}
      </div>

      {/* 背景蒙版 */}
      <div
        id='sidebar-drawer-background'
-        onClick={() => {
-          switchSideDrawerVisible(false)
-        }}
-        className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}
+        onClick={() => switchSideDrawerVisible(false)}
+        className={`${isOpen ? 'block' : 'hidden'} fixed top-0 left-0 z-20 w-full h-full bg-black/70 transition-opacity duration-300`}
      />
    </div>
  )
 }
+
 export default SideBarDrawer
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -64,7 +64,7 @@ const ThemeSwitch = () => {
      </Draggable>

      <SideBarDrawer
-        className='p-10'
+        className='p-10  max-w-3xl 2xl:max-w-5xl'
        isOpen={sideBarVisible}
        showOnPC={true}
        onClose={() => {
@@ -98,7 +98,7 @@ const ThemeSwitch = () => {
        <div> Click below to switch the theme.</div>

        {/* 陈列所有主题 */}
-        <div>
+        <div className='grid lg:grid-cols-2 gap-6'>
          {THEMES?.map(t => {
            return (
              <div
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,5 +1,10 @@
 {
  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "jsx": "react",
+    "allowJs": true,
+    "checkJs": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
--- a/lib/config.js
+++ b/lib/config.js
@@ -50,7 +50,7 @@ export const siteConfig = (key, defaultVal = null, extendConfig = {}) => {
    // console.warn('SiteConfig警告', key, error)
  }

-  // 首先 配置最优先读取NOTION中的表格配置
+  // 配置最优先读取NOTION中的表格配置
  let val = null
  let siteInfo = null

--- a/lib/global.js
+++ b/lib/global.js
@@ -1,10 +1,11 @@
+import { APPEARANCE, LANG, NOTION_PAGE_ID, THEME } from '@/blog.config'
 import {
  THEMES,
  getThemeConfig,
  initDarkMode,
  saveDarkModeToLocalStorage
 } from '@/themes/theme'
-import { APPEARANCE, LANG, NOTION_PAGE_ID, THEME } from 'blog.config'
+import { useUser } from '@clerk/nextjs'
 import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useState } from 'react'
 import {
@@ -13,6 +14,10 @@ import {
  redirectUserLang,
  saveLangToLocalStorage
 } from './lang'
+
+/**
+ * 全局上下文
+ */
 const GlobalContext = createContext()

 export function GlobalContextProvider(props) {
@@ -37,6 +42,12 @@ export function GlobalContextProvider(props) {
  const [onLoading, setOnLoading] = useState(true) // 抓取文章数据
  const router = useRouter()

+  // 登录验证相关
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+  const { isLoaded, isSignedIn, user } = enableClerk
+    ? useUser()
+    : { isLoaded: true, isSignedIn: false, user: false }
+
  // 是否全屏
  const fullWidth = post?.fullWidth ?? false

@@ -119,6 +130,9 @@ export function GlobalContextProvider(props) {
  return (
    <GlobalContext.Provider
      value={{
+        isLoaded,
+        isSignedIn,
+        user,
        fullWidth,
        NOTION_CONFIG,
        THEME_CONFIG,
--- a/lib/lang/en-US.js
+++ b/lib/lang/en-US.js
@@ -21,6 +21,8 @@ export default {
  },
  COMMON: {
    THEME: 'Theme',
+    SIGN_IN: 'Sign In',
+    SIGN_OUT: 'Sign Out',
    ARTICLE_LIST: 'Article List',
    RECOMMEND_POSTS: 'Recommend Posts',
    MORE: 'More',
@@ -66,7 +68,8 @@ export default {
    MINUTE: 'min',
    WORD_COUNT: 'Words',
    READ_TIME: 'Read Time',
-    NEXT_POST: '下一篇'
+    NEXT_POST: 'Next',
+    PREV_POST: 'Prev'
  },
  PAGINATION: {
    PREV: 'Prev',
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -21,6 +21,8 @@ export default {
  },
  COMMON: {
    THEME: 'Theme',
+    SIGN_IN: '登录',
+    SIGN_OUT: '登出',
    ARTICLE_LIST: '文章列表',
    RECOMMEND_POSTS: '推荐文章',
    MORE: '更多',
@@ -66,7 +68,8 @@ export default {
    MINUTE: '分钟',
    WORD_COUNT: '字数',
    READ_TIME: '阅读时长',
-    NEXT_POST: '下一篇'
+    NEXT_POST: '下一篇',
+    PREV_POST: '上一篇'
  },
  PAGINATION: {
    PREV: '上页',
--- a/lib/lang/zh-HK.js
+++ b/lib/lang/zh-HK.js
@@ -37,7 +37,9 @@ export default {
    ARTICLE_LOCK_TIPS: '文章已上鎖，請輸入訪問密碼',
    SUBMIT: '提交',
    POST_TIME: '发布于',
-    LAST_EDITED_TIME: '最后更新'
+    LAST_EDITED_TIME: '最后更新',
+    NEXT_POST: '下一篇',
+    PREV_POST: '上一篇'
  },
  PAGINATION: {
    PREV: '上一頁',
--- a/lib/lang/zh-TW.js
+++ b/lib/lang/zh-TW.js
@@ -37,7 +37,9 @@ export default {
    ARTICLE_LOCK_TIPS: '文章已上鎖，請輸入訪問密碼',
    SUBMIT: '提交',
    POST_TIME: '发布于',
-    LAST_EDITED_TIME: '最后更新'
+    LAST_EDITED_TIME: '最后更新',
+    NEXT_POST: '下一篇',
+    PREV_POST: '上一篇'
  },
  PAGINATION: {
    PREV: '上一頁',
--- a/lib/notion/CustomNotionApi.ts
+++ b/lib/notion/CustomNotionApi.ts
@@ -0,0 +1,131 @@
+const axios = require('axios')
+
+// 发送 Notion API 请求
+async function postNotion(
+  properties: any,
+  databaseId: string,
+  listContentMain: any[],
+  token: string
+) {
+  const url = 'https://api.notion.com/v1/pages'
+
+  const children = listContentMain
+    .map(contentMain => {
+      if (contentMain.type === 'paragraph') {
+        return {
+          object: 'block',
+          type: 'paragraph',
+          paragraph: {
+            rich_text: [
+              { type: 'text', text: { content: contentMain.content } }
+            ]
+          }
+        }
+      } else if (['file', 'image'].includes(contentMain.type)) {
+        return {
+          object: 'block',
+          type: contentMain.type,
+          [contentMain.type]: {
+            type: 'external',
+            external: { url: contentMain.content }
+          }
+        }
+      }
+      return null
+    })
+    .filter(Boolean)
+
+  const payload = {
+    parent: { database_id: databaseId },
+    properties,
+    children
+  }
+
+  const headers = {
+    accept: 'application/json',
+    'Notion-Version': '2022-06-28',
+    'content-type': 'application/json',
+    Authorization: `Bearer ${token}`
+  }
+
+  try {
+    const response = await axios.post(url, payload, { headers })
+    return response
+  } catch (error: any) {
+    console.error('写入Notion异常', error)
+    throw new Error(`Error posting to Notion: ${error.message}`)
+  }
+}
+
+// 处理响应结果
+function responseResult(response: { status: number; data: any }) {
+  if (response.status === 200) {
+    console.log('成功...')
+    console.log(response.data)
+  } else {
+    console.log('失败...')
+    console.log(response.data)
+  }
+}
+
+// 准备属性字段
+function notionProperty(
+  id: any,
+  avatar: any,
+  name: any,
+  mail: any,
+  lastLoginTime: any,
+  token: any
+) {
+  return {
+    id: {
+      rich_text: [
+        {
+          type: 'text',
+          text: {
+            content: id,
+            link: null
+          }
+        }
+      ]
+    },
+    avatar: {
+      files: [
+        {
+          name: 'Project Alpha blueprint',
+          external: {
+            url: avatar
+          }
+        }
+      ]
+    },
+    name: {
+      title: [
+        {
+          text: {
+            content: name
+          }
+        }
+      ]
+    },
+    mail: {
+      email: mail
+    },
+    last_login_time: {
+      date: {
+        start: lastLoginTime
+      }
+    },
+    token: {
+      rich_text: [
+        {
+          type: 'text',
+          text: {
+            content: token,
+            link: null
+          }
+        }
+      ]
+    }
+  }
+}
--- a/middleware.ts
+++ b/middleware.ts
@@ -0,0 +1,57 @@
+import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
+import { NextResponse } from 'next/server'
+
+/**
+ * Clerk 身份验证中间件
+ */
+export const config = {
+  // 这里设置白名单，防止静态资源被拦截
+  matcher: ['/((?!.*\\..*|_next|/sign-in|/auth).*)', '/', '/(api|trpc)(.*)']
+}
+
+// 限制登录访问的路由
+const isTenantRoute = createRouteMatcher([
+  '/user/organization-selector(.*)',
+  '/user/orgid/(.*)'
+])
+
+// 限制权限访问的路由
+const isTenantAdminRoute = createRouteMatcher([
+  '/admin/(.*)/memberships',
+  '/admin/(.*)/domain'
+])
+
+/**
+ * 没有配置权限相关功能的返回
+ * @param req
+ * @param ev
+ * @returns
+ */
+const noAuthMiddleware = async (req: any, ev: any) => {
+  // 如果没有配置 Clerk 相关环境变量，返回一个默认响应或者继续处理请求
+  return NextResponse.next()
+}
+
+/**
+ * 鉴权中间件
+ */
+const authMiddleware = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+  ? clerkMiddleware(
+      (auth, req) => {
+        // 限制管理员路由访问权限
+        if (isTenantAdminRoute(req)) {
+          auth().protect(has => {
+            return (
+              has({ permission: 'org:sys_memberships:manage' }) ||
+              has({ permission: 'org:sys_domains_manage' })
+            )
+          })
+        }
+        // 限制组织路由访问权限
+        if (isTenantRoute(req)) auth().protect()
+      }
+      // { debug: process.env.npm_lifecycle_event === 'dev' } // 开发调试模式打印日志
+    )
+  : noAuthMiddleware
+
+export default authMiddleware
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
--- a/next.config.js
+++ b/next.config.js
@@ -81,6 +81,9 @@ function scanSubdirectories(directory) {
 */

 const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true
+  },
  output: process.env.EXPORT ? 'export' : undefined,
  staticPageGenerationTimeout: 120,
  // 多语言， 在export时禁用
@@ -191,6 +194,8 @@ const nextConfig = {
      },
  webpack: (config, { dev, isServer }) => {
    // 动态主题：添加 resolve.alias 配置，将动态路径映射到实际路径
+    config.resolve.alias['@'] = path.resolve(__dirname)
+
    if (!isServer) {
      console.log('[默认主题]', path.resolve(__dirname, 'themes', THEME))
    }
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "notion-next",
-  "version": "4.7.2",
+  "version": "4.7.3",
  "homepage": "https://github.com/tangly1024/NotionNext.git",
  "license": "MIT",
  "repository": {
@@ -22,10 +22,13 @@
    "build-all-in-dev": "cross-env VERCEL_ENV=production next build"
  },
  "dependencies": {
+    "@clerk/localizations": "^3.0.4",
+    "@clerk/nextjs": "^5.1.5",
    "@headlessui/react": "^1.7.15",
    "@next/bundle-analyzer": "^12.1.1",
    "@vercel/analytics": "^1.0.0",
    "algoliasearch": "^4.18.0",
+    "axios": "^1.7.2",
    "feed": "^4.2.2",
    "js-md5": "^0.7.3",
    "lodash.throttle": "^4.1.1",
@@ -42,10 +45,13 @@
    "react-tweet-embed": "~2.0.0"
  },
  "devDependencies": {
+    "@types/react": "18.3.3",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
    "@waline/client": "^2.5.1",
    "autoprefixer": "^10.4.13",
    "cross-env": "^7.0.3",
-    "eslint": "^7.26.0",
+    "eslint": "^9.6.0",
    "eslint-config-next": "^13.1.1",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-standard": "^16.0.2",
@@ -53,12 +59,13 @@
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
    "next-sitemap": "^1.6.203",
    "postcss": "^8.4.31",
-    "prettier": "3.2.5",
+    "prettier": "^3.3.2",
    "tailwindcss": "^3.3.2",
+    "typescript": "5.5.3",
    "webpack-bundle-analyzer": "^4.5.0"
  },
  "resolutions": {
--- a/pages/[prefix]/index.js
+++ b/pages/[prefix]/index.js
@@ -31,7 +31,7 @@ const Slug = props => {

  /**
   * 验证文章密码
-   * @param {*} result
+   * @param {*} passInput
   */
  const validPassword = passInput => {
    if (!post) {
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -17,6 +17,12 @@ import { getQueryParam } from '../lib/utils'
 import BLOG from '@/blog.config'
 import ExternalPlugins from '@/components/ExternalPlugins'
 import GlobalHead from '@/components/GlobalHead'
+import { zhCN } from '@clerk/localizations'
+import dynamic from 'next/dynamic'
+// import { ClerkProvider } from '@clerk/nextjs'
+const ClerkProvider = dynamic(() =>
+  import('@clerk/nextjs').then(m => m.ClerkProvider)
+)

 /**
 * App挂载DOM 入口文件
@@ -46,7 +52,8 @@ const MyApp = ({ Component, pageProps }) => {
    [queryParam]
  )

-  return (
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+  const content = (
    <GlobalContextProvider {...pageProps}>
      <GLayout {...pageProps}>
        <GlobalHead {...pageProps} />
@@ -55,6 +62,15 @@ const MyApp = ({ Component, pageProps }) => {
      <ExternalPlugins {...pageProps} />
    </GlobalContextProvider>
  )
+  return (
+    <>
+      {enableClerk ? (
+        <ClerkProvider localization={zhCN}>{content}</ClerkProvider>
+      ) : (
+        content
+      )}
+    </>
+  )
 }

 export default MyApp
--- a/pages/api/auth/callback/notion.ts
+++ b/pages/api/auth/callback/notion.ts
@@ -0,0 +1,119 @@
+// pages/api/auth.js
+import axios from 'axios'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+/**
+ * Notion授权返回结果
+ */
+export interface NotionTokenResponseData {
+  access_token: string
+  token_type: string
+  bot_id: string
+  workspace_name: string
+  workspace_icon: string
+  workspace_id: string
+  owner: {
+    type: string
+    user: {
+      object: string
+      id: string
+      name: string
+      avatar_url: string
+      type: string
+      person: {
+        email: string
+      }
+    }
+  }
+  duplicated_template_id: string | null
+  request_id: string
+}
+
+export interface NotionTokenResponse {
+  status: number
+  statusText: string
+  data: NotionTokenResponseData
+}
+
+/**
+ * Notion授权回调
+ * @param req
+ * @param res
+ * @returns
+ */
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  try {
+    const code = Array.isArray(req.query.code)
+      ? req.query.code[0]
+      : req.query.code
+
+    if (!code) {
+      return res.status(400).json({ error: 'Invalid request, code is missing' })
+    }
+
+    const params = await fetchToken(code)
+
+    if (params?.status === 200) {
+      const redirectQuery = {
+        msg: '成功了' + JSON.stringify(params.data)
+      }
+
+      // 这里将用户数据写入到Notion数据库
+      res.redirect(302, `/auth/result?${new URLSearchParams(redirectQuery)}`)
+    } else {
+      const redirectQuery = { msg: params?.statusText || '请求异常' }
+      res.redirect(
+        302,
+        `/auth/result?${new URLSearchParams(redirectQuery).toString()}`
+      )
+    }
+  } catch (error) {
+    console.error(error)
+    res.status(500).json({ error: 'Internal Server Error' })
+  }
+}
+/**
+ * 获取token
+ * @param code
+ * @returns
+ */
+const fetchToken = async (code: string): Promise<NotionTokenResponse> => {
+  const clientId = process.env.OAUTH_CLIENT_ID
+  const clientSecret = process.env.OAUTH_CLIENT_SECRET
+  const redirectUri = process.env.OAUTH_REDIRECT_URI
+  const encoded = Buffer.from(`${clientId}:${clientSecret}`).toString('base64')
+
+  try {
+    const response = await axios.post<NotionTokenResponseData>(
+      'https://api.notion.com/v1/oauth/token',
+      {
+        grant_type: 'authorization_code',
+        code: code,
+        redirect_uri: redirectUri
+      },
+      {
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          Authorization: `Basic ${encoded}`
+        }
+      }
+    )
+    console.log('OAuth身份信息', response.data)
+    return {
+      status: response.status,
+      statusText: response.statusText,
+      data: response.data
+    }
+  } catch (error) {
+    console.error('Error fetching token', error)
+    return {
+      status: 400,
+      statusText: 'failed',
+      data: null as unknown as NotionTokenResponseData
+    }
+  }
+}
--- a/pages/api/user.ts
+++ b/pages/api/user.ts
@@ -0,0 +1,24 @@
+import { getAuth } from '@clerk/nextjs/server'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+/**
+ * Clerk 身份测试
+ * @param req
+ * @param res
+ * @returns
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const { userId } = getAuth(req)
+
+    if (!userId) {
+      return res.status(401).json({ error: 'Unauthorized' })
+    }
+
+    // Retrieve data from your database
+    res.status(200).json({ userId })
+  } catch (error) {
+    console.error(error)
+    res.status(500).json({ error: 'Internal Server Error' })
+  }
+}
--- a/pages/auth/result.js
+++ b/pages/auth/result.js
@@ -0,0 +1,31 @@
+// pages/sitemap.xml.js
+import { getGlobalData } from '@/lib/db/getSiteData'
+import { useRouter } from 'next/router'
+import Slug from '../[prefix]'
+
+/**
+/**
+ * @returns
+ */
+export const getStaticProps = async () => {
+  const from = `auth`
+  const props = await getGlobalData({ from })
+
+  delete props.allPages
+  return {
+    props
+  }
+}
+
+/**
+ * 根据notion的slug访问页面
+ * 解析二级目录 /article/about
+ * @param {*} props
+ * @returns
+ */
+const UI = props => {
+  const router = useRouter()
+  return <Slug {...props} msg={router?.query?.msg} title={'授权结果'} />
+}
+
+export default UI
--- a/pages/sign-in/[[...index]].js
+++ b/pages/sign-in/[[...index]].js
@@ -1,6 +1,7 @@
 import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
+// import { getGlobalData } from '@/lib/db/getSiteData'
 import { getLayoutByTheme } from '@/themes/theme'
 import { useRouter } from 'next/router'

@@ -37,4 +38,18 @@ export async function getStaticProps(req) {
  }
 }

+/**
+ * catch-all route for clerk
+ * @returns
+ */
+export async function getStaticPaths() {
+  return {
+    paths: [
+      { params: { index: [] } }, // 使 /sign-in 路径可访问
+      { params: { index: ['sign-in'] } } // 明确 sign-in 生成路径
+    ],
+    fallback: 'blocking' // 使用 'blocking' 模式让未生成的路径也能正确响应
+  }
+}
+
 export default SignIn
--- a/pages/sign-up/[[...index]].js
+++ b/pages/sign-up/[[...index]].js
@@ -37,4 +37,17 @@ export async function getStaticProps(req) {
  }
 }

+/**
+ * catch-all route for clerk
+ * @returns
+ */
+export async function getStaticPaths() {
+  return {
+    paths: [
+      { params: { index: [] } }, // 使 /sign-up 路径可访问
+      { params: { index: ['sign-up'] } } // 明确 sign-up 生成路径
+    ],
+    fallback: 'blocking' // 使用 'blocking' 模式让未生成的路径也能正确响应
+  }
+}
 export default SignUp
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -276,3 +276,7 @@ a.avatar-wrapper {
 img {
  display: unset;
 }
+
+.adsbygoogle {
+  overflow: hidden;
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -71,7 +71,8 @@ module.exports = {
      maxWidth: {
        side: '14rem',
        '9/10': '90%',
-        'screen-3xl': '1440px'
+        'screen-3xl': '1440px',
+        'screen-4xl': '1560px'
      },
      boxShadow: {
        input: '0px 7px 20px rgba(0, 0, 0, 0.03)',
--- a/themes/gitbook/components/ArticleAround.js
+++ b/themes/gitbook/components/ArticleAround.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import Link from 'next/link'

 /**
@@ -9,21 +10,29 @@ export default function ArticleAround({ prev, next }) {
  if (!prev || !next) {
    return <></>
  }
+  const { locale } = useGlobal()
  return (
-    <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
+    <section className='text-gray-800 dark:text-gray-400 flex items-center justify-between gap-x-3 my-4'>
      <Link
        href={prev.href}
        passHref
-        className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
-        <i className='mr-1 fas fa-angle-double-left' />
-        {prev.title}
+        className='rounded border w-full h-20 px-3 cursor-pointer justify-between items-center flex hover:text-green-500 duration-300'>
+        <i className='mr-1 fas fa-angle-left' />
+        <div>
+          <div>{locale.COMMON.PREV_POST}</div>
+          <div>{prev.title}</div>
+        </div>
      </Link>
+
      <Link
        href={next.href}
        passHref
-        className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>
-        {next.title}
-        <i className='ml-1 my-1 fas fa-angle-double-right' />
+        className='rounded border w-full h-20 px-3 cursor-pointer justify-between items-center flex hover:text-green-500 duration-300'>
+        <div>
+          <div>{locale.COMMON.NEXT_POST}</div>
+          <div> {next.title}</div>
+        </div>
+        <i className='ml-1 my-1 fas fa-angle-right' />
      </Link>
    </section>
  )
--- a/themes/gitbook/components/ArticleInfo.js
+++ b/themes/gitbook/components/ArticleInfo.js
@@ -1,9 +1,17 @@
+/**
+ * 文章补充咨询
+ * @param {*} param0
+ * @returns
+ */
 export default function ArticleInfo({ post }) {
  if (!post) {
    return null
  }
-  return <div className="pt-10 pb-6 text-gray-400 text-sm border-b">
-        <i className="fa-regular fa-clock mr-1" />
-        Last update:  { post.date?.start_date}
+  return (
+    <div className='pt-10 pb-6 text-gray-400 text-sm'>
+      <i className='fa-regular fa-clock mr-1' />
+      Last update:{' '}
+      {post.date?.start_date || post?.publishDay || post?.lastEditedDay}
    </div>
+  )
 }
--- a/themes/gitbook/components/BlogPostCard.js
+++ b/themes/gitbook/components/BlogPostCard.js
@@ -3,7 +3,6 @@ import NotionIcon from '@/components/NotionIcon'
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import CONFIG from '../config'

 const BlogPostCard = ({ post, className }) => {
  const router = useRouter()
@@ -14,8 +13,8 @@ const BlogPostCard = ({ post, className }) => {
    <Link href={post?.href} passHref>
      <div
        key={post.id}
-        className={`${className} relative py-1.5 cursor-pointer px-1.5 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600
-                    ${currentSelected && 'bg-green-50 text-green-500 dark:bg-yellow-100 dark:text-yellow-600'}`}>
+        className={`${className} relative py-1.5 cursor-pointer px-1.5 rounded-md hover:bg-gray-50
+                    ${currentSelected ? 'text-green-500 dark:bg-yellow-100 dark:text-yellow-600 font-semibold' : ' dark:hover:bg-yellow-100 dark:hover:text-yellow-600'}`}>
        <div className='w-full select-none'>
          {siteConfig('POST_TITLE_ICON') && (
            <NotionIcon icon={post?.pageIcon} />
@@ -23,10 +22,9 @@ const BlogPostCard = ({ post, className }) => {
          {post.title}
        </div>
        {/* 最新文章加个红点 */}
-        {post?.isLatest &&
-          siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && (
-            <Badge />
-          )}
+        {post?.isLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE') && (
+          <Badge />
+        )}
      </div>
    </Link>
  )
--- a/themes/gitbook/components/BottomMenuBar.js
+++ b/themes/gitbook/components/BottomMenuBar.js
@@ -12,7 +12,7 @@ export default function BottomMenuBar({ post, className }) {
  return (
    <>
      {/* 移动端底部导航按钮 */}
-      <div className='dark:bg-hexo-black-gray 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='pb-2 dark:bg-hexo-black-gray 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>
--- a/themes/gitbook/components/Catalog.js
+++ b/themes/gitbook/components/Catalog.js
@@ -1,4 +1,3 @@
-import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
@@ -14,7 +13,6 @@ const Catalog = ({ post }) => {
  const toc = post?.toc
  // 同步选中目录事件
  const [activeSection, setActiveSection] = useState(null)
-  const {locale}= useGlobal()

  // 监听滚动事件
  useEffect(() => {
@@ -69,25 +67,29 @@ const Catalog = ({ post }) => {

  return (
    <>
-      <div className='w-full hidden md:block'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
+      {/* <div className='w-full hidden md:block'>
+        <i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}
+        </div> */}
+
      <div
        id='toc-wrapper'
        className='toc-wrapper overflow-y-auto my-2 max-h-80 overscroll-none scroll-hidden'>
-        <nav className='h-full  text-black'>
+        <nav className='h-full text-black'>
          {toc?.map(tocItem => {
            const id = uuidToId(tocItem.id)
            return (
              <a
                key={id}
                href={`#${id}`}
-                className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
+                //  notion-table-of-contents-item
+                className={`${activeSection === id && 'border-green-500 text-green-500 font-bold'} border-l pl-4 block hover:text-green-500 border-lduration-300 transform font-light dark:text-gray-300
              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
                <span
                  style={{
                    display: 'inline-block',
                    marginLeft: tocItem.indentLevel * 16
                  }}
-                  className={`truncate ${activeSection === id ? 'font-bold text-gray-500 underline' : ''}`}>
+                  className={`truncate`}>
                  {tocItem.text}
                </span>
              </a>
--- a/themes/gitbook/components/Footer.js
+++ b/themes/gitbook/components/Footer.js
@@ -13,12 +13,10 @@ const Footer = ({ siteInfo }) => {
    parseInt(since) < currentYear ? since + '-' + currentYear : currentYear

  return (
-    <footer className='z-20 bg:white dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'>
-      <hr className='pb-2' />
-
+    <footer className='z-20 border p-2 rounded-lg bg:white dark:border-black dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'>
      <SocialButton />

-      <div className='flex justify-center pt-1'>
+      <div className='flex justify-center'>
        <div>
          <i className='mx-1 animate-pulse fas fa-heart' />{' '}
          <a
@@ -31,15 +29,6 @@ const Footer = ({ siteInfo }) => {
        © {`${copyrightDate}`}
      </div>

-      <div className='text-xs font-serif'>
-        Powered By{' '}
-        <a
-          href='https://github.com/tangly1024/NotionNext'
-          className='underline text-gray-500 dark:text-gray-300'>
-          NotionNext {siteConfig('VERSION')}
-        </a>
-      </div>
-
      {siteConfig('BEI_AN') && (
        <>
          <i className='fas fa-shield-alt' />{' '}
@@ -58,6 +47,14 @@ const Footer = ({ siteInfo }) => {
        <i className='fas fa-users' />{' '}
        <span className='px-1 busuanzi_value_site_uv'> </span>{' '}
      </span>
+      <div className='text-xs font-serif'>
+        Powered By{' '}
+        <a
+          href='https://github.com/tangly1024/NotionNext'
+          className='underline text-gray-500 dark:text-gray-300'>
+          NotionNext {siteConfig('VERSION')}
+        </a>
+      </div>
      {/* SEO title */}
      <h1 className='pt-1 hidden'>{siteConfig('TITLE')}</h1>
    </footer>
--- a/themes/gitbook/components/Header.js
+++ b/themes/gitbook/components/Header.js
@@ -2,11 +2,13 @@ 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'

 /**
 * 页头：顶部导航栏 + 菜单
@@ -58,8 +60,60 @@ export default function Header(props) {
    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}>
+      {/* PC端菜单 */}
+      <div className='px-5 flex justify-center border-b dark:border-black items-center w-full h-16 glassmorphism bg-white dark:bg-hexo-black-gray'>
+        <div className='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'
@@ -75,35 +129,6 @@ export default function Header(props) {
          />
        </div>
      </Collapse>
-
-      {/* 导航栏菜单 */}
-      <div className='flex w-full h-14 shadow glassmorphism bg-white dark:bg-hexo-black-gray px-7 items-between'>
-        {/* 左侧图标Logo */}
-        <LogoBar {...props} />
-
-        {/* 折叠按钮、仅移动端显示 */}
-        <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 className='hidden md:flex'>
-          {links &&
-            links?.map((link, index) => (
-              <MenuItemDrop key={index} link={link} />
-            ))}
-          <DarkModeButton className='text-sm flex items-center h-full' />
-        </div>
-      </div>
    </div>
  )
 }
--- a/themes/gitbook/components/JumpToTopButton.js
+++ b/themes/gitbook/components/JumpToTopButton.js
@@ -14,7 +14,7 @@ const JumpToTopButton = ({ showPercent = false, percent, className }) => {
      data-aos-duration='300'
      data-aos-once='false'
      data-aos-anchor-placement='top-center'
-      className='fixed xl:right-80 right-2 bottom-24 z-20'>
+      className='fixed xl:right-96 xl:mr-20 right-2 bottom-24 z-20'>
      <i
        className='shadow fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray'
        onClick={() => {
--- a/themes/gitbook/components/LogoBar.js
+++ b/themes/gitbook/components/LogoBar.js
@@ -11,16 +11,16 @@ import CONFIG from '../config'
 export default function LogoBar(props) {
  const { siteInfo } = props
  return (
-    <div id='top-wrapper' className='w-full flex items-center'>
+    <div id='logo-wrapper' className='w-full flex items-center mr-2'>
      <Link
        href={`/${siteConfig('GITBOOK_INDEX_PAGE', '', CONFIG)}`}
-        className='flex text-md md:text-xl dark:text-gray-200'>
+        className='flex text-md font-bold md:text-xl dark:text-gray-200'>
        <LazyImage
          src={siteInfo?.icon}
          width={24}
          height={24}
          alt={siteConfig('AUTHOR')}
-          className='mr-2 hidden md:block'
+          className='mr-2 hidden md:block '
        />
        {siteInfo?.title || siteConfig('TITLE')}
      </Link>
--- a/themes/gitbook/components/NavPostItem.js
+++ b/themes/gitbook/components/NavPostItem.js
@@ -2,7 +2,6 @@ import Badge from '@/components/Badge'
 import Collapse from '@/components/Collapse'
 import { siteConfig } from '@/lib/config'
 import { useEffect, useState } from 'react'
-import CONFIG from '../config'
 import BlogPostCard from './BlogPostCard'

 /**
@@ -14,7 +13,7 @@ import BlogPostCard from './BlogPostCard'
 */
 const NavPostItem = props => {
  const { group, expanded, toggleItem } = props // 接收传递的展开状态和切换函数
-  const hoverExpand = siteConfig('GITBOOK_FOLDER_HOVER_EXPAND', false, CONFIG)
+  const hoverExpand = siteConfig('GITBOOK_FOLDER_HOVER_EXPAND')
  const [isTouchDevice, setIsTouchDevice] = useState(false)

  // 检测是否为触摸设备
@@ -53,21 +52,23 @@ const NavPostItem = props => {
        <div
          onMouseEnter={onHoverToggle}
          onClick={toggleOpenSubMenu}
-          className='cursor-pointer relative flex justify-between text-sm p-2 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600'
+          className='cursor-pointer relative flex justify-between text-md p-2 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600'
          key={group?.category}>
-          <span>{group?.category}</span>
+          <span className={`${expanded && 'font-semibold'}`}>
+            {group?.category}
+          </span>
          <div className='inline-flex items-center select-none pointer-events-none '>
            <i
              className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-700 ${expanded ? '-rotate-90' : ''}`}></i>
          </div>
          {groupHasLatest &&
-            siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) &&
+            siteConfig('GITBOOK_LATEST_POST_RED_BADGE') &&
            !expanded && <Badge />}
        </div>
        <Collapse isOpen={expanded} onHeightChange={props.onHeightChange}>
          {group?.items?.map((post, index) => (
            <div key={index} className='ml-3 border-l'>
-              <BlogPostCard className='text-sm ml-3' post={post} />
+              <BlogPostCard className='ml-3' post={post} />
            </div>
          ))}
        </Collapse>
@@ -78,7 +79,7 @@ const NavPostItem = props => {
      <>
        {group?.items?.map((post, index) => (
          <div key={index}>
-            <BlogPostCard className='text-sm py-2' post={post} />
+            <BlogPostCard className='text-md py-2' post={post} />
          </div>
        ))}
      </>
--- a/themes/gitbook/components/NavPostList.js
+++ b/themes/gitbook/components/NavPostList.js
@@ -3,6 +3,7 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import CONFIG from '../config'
+import BlogPostCard from './BlogPostCard'
 import NavPostItem from './NavPostItem'

 /**
@@ -13,7 +14,7 @@ import NavPostItem from './NavPostItem'
 * @constructor
 */
 const NavPostList = props => {
-  const { filteredNavPages } = props
+  const { filteredNavPages, post } = props
  const { locale, currentSearch } = useGlobal()
  const router = useRouter()

@@ -80,11 +81,22 @@ const NavPostList = props => {
      </div>
    )
  }
+  // 如果href
+  const href = siteConfig('GITBOOK_INDEX_PAGE') + ''
+
+  const homePost = {
+    id: '-1',
+    title: siteConfig('DESCRIPTION'),
+    href: href.indexOf('/') !== 0 ? '/' + href : href
+  }

  return (
    <div
      id='posts-wrapper'
-      className='w-full flex-grow space-y-0.5 tracking-wider'>
+      className='w-full flex-grow space-y-0.5 pr-4 tracking-wider'>
+      {/* 当前文章 */}
+      <BlogPostCard className='mb-4' post={homePost} />
+
      {/* 文章列表 */}
      {categoryFolders?.map((group, index) => (
        <NavPostItem
--- a/themes/gitbook/components/SearchInput.js
+++ b/themes/gitbook/components/SearchInput.js
@@ -2,6 +2,7 @@ import { siteConfig } from '@/lib/config'
 import { deepClone } from '@/lib/utils'
 import { useGitBookGlobal } from '@/themes/gitbook'
 import { useImperativeHandle, useRef, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 let lock = false

 /**
@@ -19,6 +20,15 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
    }
  })

+  /**
+   * 快捷键设置
+   */
+  useHotkeys('ctrl+k', e => {
+    searchInputRef?.current?.focus()
+    e.preventDefault()
+    handleSearch()
+  })
+
  const handleSearch = () => {
    // 使用Algolia
    if (siteConfig('ALGOLIA_APP_ID')) {
@@ -29,6 +39,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
      keyword = keyword.trim()
    } else {
      setFilteredNavPages(allNavPages)
+      return
    }
    const filterAllNavPages = deepClone(allNavPages)

@@ -79,6 +90,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
  const cleanSearch = () => {
    searchInputRef.current.value = ''
    handleSearch()
+    setShowClean(false)
  }

  const [showClean, setShowClean] = useState(false)
@@ -103,22 +115,9 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
  }

  return (
-    <div className={'flex w-full'}>
-      <input
-        ref={searchInputRef}
-        type='text'
-        className={`${className} outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white`}
-        onFocus={handleFocus}
-        onKeyUp={handleKeyUp}
-        onCompositionStart={lockSearchInput}
-        onCompositionUpdate={lockSearchInput}
-        onCompositionEnd={unLockSearchInput}
-        onChange={e => updateSearchKey(e.target.value)}
-        defaultValue={currentSearch}
-      />
-
+    <div className={`${className} relative`}>
      <div
-        className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'
+        className='absolute left-0 ml-4 items-center justify-center py-2'
        onClick={handleSearch}>
        <i
          className={
@@ -126,6 +125,24 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
          }
        />
      </div>
+      <input
+        ref={searchInputRef}
+        type='text'
+        className={`rounded-lg border dark:border-black pl-12 leading-10 placeholder-gray-500 outline-none w-full transition focus:shadow-lg text-black bg-gray-100 dark:bg-black dark:text-white`}
+        onFocus={handleFocus}
+        onKeyUp={handleKeyUp}
+        placeholder='Search'
+        onCompositionStart={lockSearchInput}
+        onCompositionUpdate={lockSearchInput}
+        onCompositionEnd={unLockSearchInput}
+        onChange={e => updateSearchKey(e.target.value)}
+        defaultValue={currentSearch}
+      />
+      <div
+        className='absolute right-0 mr-4 items-center justify-center py-2 text-gray-400 dark:text-gray-600'
+        onClick={handleSearch}>
+        Ctrl+K
+      </div>

      {showClean && (
        <div className='-ml-12 cursor-pointer flex float-right items-center justify-center py-2'>
--- a/themes/gitbook/components/SocialButton.js
+++ b/themes/gitbook/components/SocialButton.js
@@ -144,6 +144,7 @@ const SocialButton = () => {
            target='_blank'
            rel='noreferrer'
            title={'知识星球'}
+            className='flex justify-center items-center'
            href={CONTACT_ZHISHIXINGQIU}>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -11,6 +11,7 @@ import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
 import { getShortId } from '@/lib/utils/pageId'
+import { SignIn, SignUp } from '@clerk/nextjs'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -31,7 +32,6 @@ import JumpToTopButton from './components/JumpToTopButton'
 import NavPostList from './components/NavPostList'
 import PageNavDrawer from './components/PageNavDrawer'
 import RevolverMaps from './components/RevolverMaps'
-import SearchInput from './components/SearchInput'
 import TagItemMini from './components/TagItemMini'
 import CONFIG from './config'
 import { Style } from './style'
@@ -135,7 +135,7 @@ const LayoutBase = props => {

      <div
        id='theme-gitbook'
-        className={`${siteConfig('FONT_STYLE')} pb-16 md:pb-0 scroll-smooth bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300`}>
+        className={`${siteConfig('FONT_STYLE')} pb-16 md:pb-0 scroll-smooth bg-white dark:bg-black w-full h-full min-h-screen justify-center dark:text-gray-300`}>
        <AlgoliaSearchModal cRef={searchModal} {...props} />

        {/* 顶部导航栏 */}
@@ -143,27 +143,18 @@ const LayoutBase = props => {

        <main
          id='wrapper'
-          className={
-            (siteConfig('LAYOUT_SIDEBAR_REVERSE') ? 'flex-row-reverse' : '') +
-            'relative flex justify-between w-full h-full mx-auto'
-          }>
+          className={`${siteConfig('LAYOUT_SIDEBAR_REVERSE') ? 'flex-row-reverse' : ''} relative flex justify-between w-full gap-x-6 h-full mx-auto max-w-screen-4xl`}>
          {/* 左侧推拉抽屉 */}
          {fullWidth ? null : (
-            <div
-              className={
-                'hidden md:block border-r dark:border-transparent relative z-10 dark:bg-hexo-black-gray'
-              }>
-              <div className='w-72 pt-14 pb-4 px-6 sticky top-0 h-screen flex justify-between flex-col'>
+            <div className={'hidden md:block relative z-10 '}>
+              <div className='w-80 pt-14 pb-4 sticky top-0 h-screen flex justify-between flex-col'>
                {/* 导航 */}
-                <div className='overflow-y-scroll scroll-hidden'>
+                <div className='overflow-y-scroll scroll-hidden pt-10'>
                  {/* 嵌入 */}
                  {slotLeft}
-                  {/* 搜索框 */}
-                  <SearchInput className='my-3 rounded-md' />

-                  {/* 文章列表 */}
                  {/* 所有文章列表 */}
-                  <NavPostList filteredNavPages={filteredNavPages} />
+                  <NavPostList filteredNavPages={filteredNavPages} {...props} />
                </div>
                {/* 页脚 */}
                <Footer {...props} />
@@ -171,34 +162,21 @@ const LayoutBase = props => {
            </div>
          )}

+          {/* 中间内容区域 */}
          <div
            id='center-wrapper'
-            className='flex flex-col justify-between w-full relative z-10 pt-14 min-h-screen dark:bg-black'>
+            className='flex flex-col justify-between w-full relative z-10 pt-14 min-h-screen'>
            <div
              id='container-inner'
-              className={`w-full px-7 ${fullWidth ? 'px-10' : 'max-w-3xl'} justify-center mx-auto`}>
+              className={`w-full ${fullWidth ? 'px-5' : 'max-w-3xl px-3 lg:px-0'} justify-center mx-auto`}>
              {slotTop}
              <WWAds className='w-full' orientation='horizontal' />

-              {/* <Transition
-                show={!onLoading}
-                appear={true}
-                enter='transition ease-in-out duration-700 transform order-first'
-                enterFrom='opacity-0 translate-y-16'
-                enterTo='opacity-100'
-                leave='transition ease-in-out duration-300 transform'
-                leaveFrom='opacity-100 translate-y-0'
-                leaveTo='opacity-0 -translate-y-16'
-                unmount={false}> */}
              {children}
-              {/* </Transition> */}

              {/* Google广告 */}
              <AdSlot type='in-article' />
              <WWAds className='w-full' orientation='horizontal' />
-
-              {/* 回顶按钮 */}
-              <JumpToTopButton />
            </div>

            {/* 底部 */}
@@ -207,17 +185,16 @@ const LayoutBase = props => {
            </div>
          </div>

-          {/*  右侧侧推拉抽屉 */}
+          {/*  右侧 */}
          {fullWidth ? null : (
            <div
-              style={{ width: '20rem' }}
              className={
-                'hidden xl:block dark:border-transparent flex-shrink-0 relative z-10 '
+                'w-72 hidden 2xl:block dark:border-transparent flex-shrink-0 relative z-10 '
              }>
-              <div className='py-14 px-6 sticky top-0'>
+              <div className='py-14 sticky top-0'>
                <ArticleInfo post={props?.post ? props?.post : props.notice} />

-                <div className='py-4'>
+                <div>
                  {/* 桌面端目录 */}
                  <Catalog {...props} />
                  {slotRight}
@@ -245,6 +222,9 @@ const LayoutBase = props => {

        {GITBOOK_LOADING_COVER && <LoadingCover />}

+        {/* 回顶按钮 */}
+        <JumpToTopButton />
+
        {/* 移动端导航抽屉 */}
        <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />

@@ -263,29 +243,33 @@ const LayoutBase = props => {
 */
 const LayoutIndex = props => {
  const router = useRouter()
-  useEffect(() => {
-    router.push(siteConfig('GITBOOK_INDEX_PAGE', null, CONFIG)).then(() => {
-      // console.log('跳转到指定首页', siteConfig('INDEX_PAGE', null, CONFIG))
-      setTimeout(() => {
-        if (isBrowser) {
-          const article = document.getElementById('notion-article')
-          if (!article) {
-            console.log(
-              '请检查您的Notion数据库中是否包含此slug页面： ',
-              siteConfig('GITBOOK_INDEX_PAGE', null, CONFIG)
-            )
-            const containerInner = document.querySelector(
-              '#theme-gitbook #container-inner'
-            )
-            const newHTML = `<h1 class="text-3xl pt-12  dark:text-gray-300">配置有误</h1><blockquote class="notion-quote notion-block-ce76391f3f2842d386468ff1eb705b92"><div>请在您的notion中添加一个slug为${siteConfig('GITBOOK_INDEX_PAGE', null, CONFIG)}的文章</div></blockquote>`
-            containerInner?.insertAdjacentHTML('afterbegin', newHTML)
-          }
-        }
-      }, 7 * 1000)
-    })
-  }, [])
+  const index = siteConfig('GITBOOK_INDEX_PAGE')

-  return <></>
+  useEffect(() => {
+    const checkArticleExists = async () => {
+      // 这里可以检查文章是否存在
+      const article = document.getElementById('notion-article')
+      if (!article) {
+        console.log('请检查您的Notion数据库中是否包含此slug页面： ', index)
+
+        // 显示错误信息
+        const containerInner = document.querySelector(
+          '#theme-gitbook #container-inner'
+        )
+        const newHTML = `<h1 class="text-3xl pt-12 dark:text-gray-300">配置有误</h1><blockquote class="notion-quote notion-block-ce76391f3f2842d386468ff1eb705b92"><div>请在您的notion中添加一个slug为${index}的文章</div></blockquote>`
+        containerInner?.insertAdjacentHTML('afterbegin', newHTML)
+      } else {
+        // 如果文章存在，立即重定向
+        if (index) {
+          router.push(index)
+        }
+      }
+    }
+
+    checkArticleExists()
+  }, [index, router])
+
+  return <LoadingCover /> // 返回 null 以不渲染任何内容
 }

 /**
@@ -350,10 +334,11 @@ const LayoutSlug = props => {
              <ShareBar post={post} />
              {/* 文章分类和标签信息 */}
              <div className='flex justify-between'>
-                {siteConfig('POST_DETAIL_CATEGORY', null, CONFIG) &&
-                  post?.category && <CategoryItem category={post.category} />}
+                {siteConfig('POST_DETAIL_CATEGORY') && post?.category && (
+                  <CategoryItem category={post.category} />
+                )}
                <div>
-                  {siteConfig('POST_DETAIL_TAG', null, CONFIG) &&
+                  {siteConfig('POST_DETAIL_TAG') &&
                    post?.tagItems?.map(tag => (
                      <TagItemMini key={tag.name} tag={tag} />
                    ))}
@@ -489,6 +474,58 @@ const LayoutTagIndex = props => {
  )
 }

+/**
+ * 登录页面
+ * @param {*} props
+ * @returns
+ */
+const LayoutSignIn = props => {
+  const { post } = props
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
+  return (
+    <>
+      <div className='grow mt-20'>
+        {/* clerk预置表单 */}
+        {enableClerk && (
+          <div className='flex justify-center py-6'>
+            <SignIn />
+          </div>
+        )}
+        <div id='article-wrapper'>
+          <NotionPage post={post} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+/**
+ * 注册页面
+ * @param {*} props
+ * @returns
+ */
+const LayoutSignUp = props => {
+  const { post } = props
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
+  return (
+    <>
+      <div className='grow mt-20'>
+        {/* clerk预置表单 */}
+        {enableClerk && (
+          <div className='flex justify-center py-6'>
+            <SignUp />
+          </div>
+        )}
+        <div id='article-wrapper'>
+          <NotionPage post={post} />
+        </div>
+      </div>
+    </>
+  )
+}
+
 export {
  Layout404,
  LayoutArchive,
@@ -497,6 +534,8 @@ export {
  LayoutIndex,
  LayoutPostList,
  LayoutSearch,
+  LayoutSignIn,
+  LayoutSignUp,
  LayoutSlug,
  LayoutTagIndex,
  CONFIG as THEME_CONFIG
--- a/themes/magzine/components/Catalog.js
+++ b/themes/magzine/components/Catalog.js
@@ -23,9 +23,6 @@ const Catalog = ({ post, toc, className }) => {
      actionSectionScrollSpy()
      window.addEventListener('scroll', actionSectionScrollSpy)
    }
-    setTimeout(() => {
-      console.log('目录', post, toc)
-    }, 1000)
    return () => {
      window.removeEventListener('scroll', actionSectionScrollSpy)
    }
--- a/themes/magzine/components/Header.js
+++ b/themes/magzine/components/Header.js
@@ -1,6 +1,7 @@
 import Collapse from '@/components/Collapse'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
+import { SignInButton, SignedOut, UserButton } from '@clerk/nextjs'
 import throttle from 'lodash.throttle'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
@@ -112,6 +113,8 @@ export default function Header(props) {
    return null
  }

+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
  return (
    <div
      id='top-navbar-wrapper'
@@ -154,7 +157,7 @@ export default function Header(props) {
          </>
        )}

-        {/* 右侧移动端折叠按钮 */}
+        {/* 右侧按钮 */}
        <div className='flex items-center gap-x-2 pr-2'>
          {/* 搜索按钮 */}
          <div
@@ -167,6 +170,8 @@ export default function Header(props) {
                  : 'fa-solid fa-magnifying-glass' + ' align-middle'
              }></i>
          </div>
+
+          {/* 移动端显示开关 */}
          <div className='mr-1 flex md:hidden justify-end items-center text-lg space-x-4 font-serif dark:text-gray-200'>
            <div onClick={toggleMenuOpen} className='cursor-pointer p-2'>
              {isOpen ? (
@@ -176,6 +181,20 @@ export default function Header(props) {
              )}
            </div>
          </div>
+
+          {/* 登录相关 */}
+          {enableClerk && (
+            <>
+              <SignedOut>
+                <SignInButton mode='modal'>
+                  <button className='bg-gray-800 hover:bg-gray-900 text-white rounded-lg px-3 py-2'>
+                    {locale.COMMON.SIGN_IN}
+                  </button>
+                </SignInButton>
+              </SignedOut>
+              <UserButton />
+            </>
+          )}
        </div>
      </div>

--- a/themes/magzine/index.js
+++ b/themes/magzine/index.js
@@ -9,6 +9,7 @@ import WWAds from '@/components/WWAds'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
+import { SignIn, SignUp } from '@clerk/nextjs'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useRef, useState } from 'react'
@@ -440,6 +441,58 @@ const LayoutTagIndex = props => {
  )
 }

+/**
+ * 登录页面
+ * @param {*} props
+ * @returns
+ */
+const LayoutSignIn = props => {
+  const { post } = props
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
+  return (
+    <>
+      <div className='grow mt-20'>
+        {/* clerk预置表单 */}
+        {enableClerk && (
+          <div className='flex justify-center py-6'>
+            <SignIn />
+          </div>
+        )}
+        <div id='article-wrapper'>
+          <NotionPage post={post} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+/**
+ * 注册页面
+ * @param {*} props
+ * @returns
+ */
+const LayoutSignUp = props => {
+  const { post } = props
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
+  return (
+    <>
+      <div className='grow mt-20'>
+        {/* clerk预置表单 */}
+        {enableClerk && (
+          <div className='flex justify-center py-6'>
+            <SignUp />
+          </div>
+        )}
+        <div id='article-wrapper'>
+          <NotionPage post={post} />
+        </div>
+      </div>
+    </>
+  )
+}
+
 export {
  Layout404,
  LayoutArchive,
@@ -448,6 +501,8 @@ export {
  LayoutIndex,
  LayoutPostList,
  LayoutSearch,
+  LayoutSignIn,
+  LayoutSignUp,
  LayoutSlug,
  LayoutTagIndex,
  CONFIG as THEME_CONFIG
--- a/themes/simple/components/NavBar.js
+++ b/themes/simple/components/NavBar.js
@@ -25,7 +25,7 @@ export default function NavBar(props) {

  const onKeyUp = e => {
    if (e.keyCode === 13) {
-      const search = document.getElementById('simple-search').value
+      const search = document.getElementById('simple-search').innerText
      if (search) {
        router.push({ pathname: '/search/' + search })
      }
@@ -33,30 +33,29 @@ export default function NavBar(props) {
  }

  return (
-    <nav className="w-full bg-white md:pt-0  relative z-20 shadow border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black">
+    <nav className='w-full bg-white md:pt-0  relative z-20 shadow border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black'>
      <div
-        id="nav-bar-inner"
-        className="h-12 mx-auto max-w-9/10 justify-between items-center text-sm md:text-md md:justify-start"
-      >
+        id='nav-bar-inner'
+        className='h-12 mx-auto max-w-9/10 justify-between items-center text-sm md:text-md md:justify-start'>
        {/* 左侧菜单 */}
-        <div className="h-full w-full float-left text-center md:text-left flex flex-wrap items-stretch md:justify-start md:items-start space-x-4">
+        <div className='h-full w-full float-left text-center md:text-left flex flex-wrap items-stretch md:justify-start md:items-start space-x-4'>
          {showSearchInput && (
            <input
              autoFocus
-              id="simple-search"
+              id='simple-search'
              onKeyUp={onKeyUp}
-              className="float-left w-full outline-none h-full px-4"
-              aria-label="Submit search"
-              type="search"
-              name="s"
-              autoComplete="off"
-              placeholder="Type then hit enter to search..."
+              className='float-left w-full outline-none h-full px-4'
+              aria-label='Submit search'
+              type='search'
+              name='s'
+              autoComplete='off'
+              placeholder='Type then hit enter to search...'
            />
          )}
          {!showSearchInput && <MenuList {...props} />}
        </div>

-        <div className="absolute right-12 h-full text-center px-2 flex items-center text-blue-400  cursor-pointer">
+        <div className='absolute right-12 h-full text-center px-2 flex items-center text-blue-400  cursor-pointer'>
          {/* <!-- extra links --> */}
          <i
            className={
@@ -64,8 +63,7 @@ export default function NavBar(props) {
                ? 'fa-regular fa-circle-xmark'
                : 'fa-solid fa-magnifying-glass' + ' align-middle'
            }
-            onClick={toggleShowSearchInput}
-          ></i>
+            onClick={toggleShowSearchInput}></i>
        </div>
      </div>
    </nav>
--- a/themes/starter/components/Header.js
+++ b/themes/starter/components/Header.js
@@ -1,7 +1,9 @@
 /* eslint-disable no-unreachable */
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
+import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
 import throttle from 'lodash.throttle'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'
 import { DarkModeButton } from './DarkModeButton'
@@ -11,12 +13,15 @@ import { MenuList } from './MenuList'
 /**
 * 顶部导航栏
 */
-export const NavBar = props => {
+export const Header = props => {
  const router = useRouter()
  const { isDarkMode } = useGlobal()
  const [buttonTextColor, setColor] = useState(
    router.route === '/' ? 'text-white' : ''
  )
+
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
  useEffect(() => {
    if (isDarkMode || router.route === '/') {
      setColor('text-white')
@@ -60,22 +65,45 @@ export const NavBar = props => {
              <MenuList {...props} />

              {/* 右侧功能 */}
-              <div className='flex items-center justify-end pr-16 lg:pr-0'>
+              <div className='flex items-center gap-4 justify-end pr-16 lg:pr-0'>
                {/* 深色模式切换 */}
                <DarkModeButton />
                {/* 注册登录功能 */}
-                <div className='hidden sm:flex'>
-                  <a
-                    href={siteConfig('STARTER_NAV_BUTTON_1_URL')}
-                    className={`loginBtn ${buttonTextColor}  px-[22px] py-2 text-base font-medium hover:opacity-70`}>
-                    {siteConfig('STARTER_NAV_BUTTON_1_TEXT')}
-                  </a>
-                  <a
-                    href={siteConfig('STARTER_NAV_BUTTON_2_URL')}
-                    className={`signUpBtn ${buttonTextColor} rounded-md bg-white bg-opacity-20 px-6 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}>
-                    {siteConfig('STARTER_NAV_BUTTON_2_TEXT')}
-                  </a>
-                </div>
+                {enableClerk && (
+                  <>
+                    <SignedOut>
+                      <div className='hidden sm:flex gap-4'>
+                        <Link
+                          href={siteConfig('STARTER_NAV_BUTTON_1_URL')}
+                          className={`loginBtn ${buttonTextColor} p-2 text-base font-medium hover:opacity-70`}>
+                          {siteConfig('STARTER_NAV_BUTTON_1_TEXT')}
+                        </Link>
+                        <Link
+                          href={siteConfig('STARTER_NAV_BUTTON_2_URL')}
+                          className={`signUpBtn ${buttonTextColor} p-2 rounded-md bg-white bg-opacity-20 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}>
+                          {siteConfig('STARTER_NAV_BUTTON_2_TEXT')}
+                        </Link>
+                      </div>
+                    </SignedOut>
+                    <SignedIn>
+                      <UserButton />
+                    </SignedIn>
+                  </>
+                )}
+                {!enableClerk && (
+                  <div className='hidden sm:flex gap-4'>
+                    <a
+                      href={siteConfig('STARTER_NAV_BUTTON_1_URL')}
+                      className={`loginBtn ${buttonTextColor} p-2 text-base font-medium hover:opacity-70`}>
+                      {siteConfig('STARTER_NAV_BUTTON_1_TEXT')}
+                    </a>
+                    <a
+                      href={siteConfig('STARTER_NAV_BUTTON_2_URL')}
+                      className={`signUpBtn ${buttonTextColor} p-2 rounded-md bg-white bg-opacity-20 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}>
+                      {siteConfig('STARTER_NAV_BUTTON_2_TEXT')}
+                    </a>
+                  </div>
+                )}
              </div>
            </div>
          </div>
--- a/themes/starter/config.js
+++ b/themes/starter/config.js
@@ -24,10 +24,10 @@ const CONFIG = {

  // 顶部右侧导航暗流
  STARTER_NAV_BUTTON_1_TEXT: 'Sign In',
-  STARTER_NAV_BUTTON_1_URL: '/signin',
+  STARTER_NAV_BUTTON_1_URL: '/sign-in',

  STARTER_NAV_BUTTON_2_TEXT: 'Sign Up',
-  STARTER_NAV_BUTTON_2_URL: '/signup',
+  STARTER_NAV_BUTTON_2_URL: '/sign-up',

  // 特性区块
  STARTER_FEATURE_ENABLE: true, // 特性区块开关
--- a/themes/starter/index.js
+++ b/themes/starter/index.js
@@ -2,13 +2,6 @@
 /* eslint-disable @next/next/no-img-element */

 'use client'
-
-/**
- * 这是一个空白主题，方便您用作创建新主题时的模板，从而开发出您自己喜欢的主题
- * 1. 禁用了代码质量检查功能，提高了代码的宽容度；您可以使用标准的html写法
- * 2. 内容大部分是在此文件中写死，notion数据从props参数中传进来
- * 3. 您可在此网站找到更多喜欢的组件 https://www.tailwind-kit.com/
- */
 import Loading from '@/components/Loading'
 import NotionPage from '@/components/NotionPage'
 import { siteConfig } from '@/lib/config'
@@ -23,8 +16,8 @@ import { Contact } from './components/Contact'
 import { FAQ } from './components/FAQ'
 import { Features } from './components/Features'
 import { Footer } from './components/Footer'
+import { Header } from './components/Header'
 import { Hero } from './components/Hero'
-import { NavBar } from './components/NavBar'
 import { Pricing } from './components/Pricing'
 import { Team } from './components/Team'
 import { Testimonials } from './components/Testimonials'
@@ -32,6 +25,7 @@ import CONFIG from './config'
 import { Style } from './style'
 // import { MadeWithButton } from './components/MadeWithButton'
 import { loadWowJS } from '@/lib/plugins/wow'
+import { SignIn, SignUp } from '@clerk/nextjs'
 import Link from 'next/link'
 import { Banner } from './components/Banner'
 import { CTA } from './components/CTA'
@@ -59,14 +53,17 @@ const LayoutBase = props => {
      id='theme-starter'
      className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col dark:bg-[#212b36] scroll-smooth`}>
      <Style />
-      <NavBar {...props} />
+      {/* 页头 */}
+      <Header {...props} />

      {children}

+      {/* 页脚 */}
      <Footer {...props} />

      {/* 悬浮按钮 */}
      <BackToTopButton />
+
      {/* <MadeWithButton/> */}
    </div>
  )
@@ -102,7 +99,8 @@ const LayoutIndex = props => {
      {siteConfig('STARTER_CONTACT_ENABLE') && <Contact />}
      {/* 合作伙伴 */}
      {siteConfig('STARTER_BRANDS_ENABLE') && <Brand />}
-      <CTA />
+      {/* 行动呼吁 */}
+      {siteConfig('STARTER_CTA_ENABLE') && <CTA />}
    </>
  )
 }
@@ -221,6 +219,7 @@ const LayoutTagIndex = props => <></>
 * @returns
 */
 const LayoutSignIn = props => {
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
  const title = siteConfig('STARTER_SIGNIN', '登录')
  const description = siteConfig(
    'STARTER_SIGNIN_DESCRITION',
@@ -230,7 +229,15 @@ const LayoutSignIn = props => {
    <>
      <div className='grow mt-20'>
        <Banner title={title} description={description} />
-        <SignInForm />
+        {/* clerk预置表单 */}
+        {enableClerk && (
+          <div className='flex justify-center py-6'>
+            <SignIn />
+          </div>
+        )}
+
+        {/* 自定义登录表单 */}
+        {!enableClerk && <SignInForm />}
      </div>
    </>
  )
@@ -242,6 +249,8 @@ const LayoutSignIn = props => {
 * @returns
 */
 const LayoutSignUp = props => {
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
  const title = siteConfig('STARTER_SIGNIN', '注册')
  const description = siteConfig(
    'STARTER_SIGNIN_DESCRITION',
@@ -251,7 +260,16 @@ const LayoutSignUp = props => {
    <>
      <div className='grow mt-20'>
        <Banner title={title} description={description} />
-        <SignInForm />
+
+        {/* clerk预置表单 */}
+        {enableClerk && (
+          <div className='flex justify-center py-6'>
+            <SignUp />
+          </div>
+        )}
+
+        {/* 自定义登录表单 */}
+        {!enableClerk && <SignUpForm />}
      </div>
    </>
  )
--- a/themes/starter/style.js
+++ b/themes/starter/style.js
@@ -10,7 +10,7 @@ const Style = () => {

  #theme-starter .sticky{
    position: fixed;
-    z-index: 9999;
+    z-index: 20;
    background-color: rgb(255 255 255 / 0.8);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
--- a/themes/theme.js
+++ b/themes/theme.js
@@ -84,12 +84,9 @@ export const getLayoutByTheme = ({ router, theme }) => {
 * @returns
 */
 const getLayoutNameByPath = path => {
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path]
-  } else {
-    // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug'
-  }
+  const layoutName = LAYOUT_MAPPINGS[path] || 'LayoutSlug'
+  //   console.log('path-layout',path,layoutName)
+  return layoutName
 }

 /**
@@ -102,7 +99,11 @@ const checkThemeDOM = () => {
      elements[elements.length - 1].scrollIntoView()
      // 删除前面的元素，只保留最后一个元素
      for (let i = 0; i < elements.length - 1; i++) {
-        if (elements[i] && elements[i].parentNode && elements[i].parentNode.contains(elements[i])) {
+        if (
+          elements[i] &&
+          elements[i].parentNode &&
+          elements[i].parentNode.contains(elements[i])
+        ) {
          elements[i].parentNode.removeChild(elements[i])
        }
      }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/blog.config": ["./blog.config"],
+      "@/components/*": ["components/*"],
+      "@/hooks/*": ["hooks/*"],
+      "@/themes/*": ["themes/*"],
+      "@/pages/*": ["pages/*"],
+      "@/data/*": ["data/*"],
+      "@/lib/*": ["lib/*"],
+      "@/styles/*": ["styles/*"]
+    },
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.js", "**/*.ts", "**/*.tsx", "**/*.jsx"],
+  "exclude": ["node_modules"]
+}
--- a/yarn.lock
+++ b/yarn.lock