diff --git a/blog.config.js b/blog.config.js
index 83fb4061..90726a7e 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -8,11 +8,13 @@ const BLOG = {
   KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开
   NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
   NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
+  DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮
 
+  THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['Next','Hexo',"Fukasawa','Medium']
   LANG: 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
   SINCE: 2021, // e.g if leave this empty, current year will be used.
   BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
-  APPEARANCE: 'auto', // ['light', 'dark', 'auto'],
+  APPEARANCE: 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
   FONT: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
   FONT_AWESOME_PATH: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css', // 图标库CDN ，国内推荐BootCDN，国外推荐 CloudFlare https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
   BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
@@ -20,7 +22,7 @@ const BLOG = {
   PATH: '', // leave this empty unless you want to deploy in a folder
 
   POST_LIST_STYLE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
-  POST_LIST_PREVIEW: false, //  是否在列表加载文章预览, 会被各主题中的同名配置覆盖，例：/themes/NEXT/config_next.js
+  POST_LIST_PREVIEW: false, //  是否在列表加载文章预览
   POST_PREVIEW_LINES: 12, // 预览博客行数
   POSTS_PER_PAGE: 6, // post counts per page
   POSTS_SORT_BY: 'notion', // 排序方式 'date'按时间,'notion'由notion控制
diff --git a/components/DebugPanel.js b/components/DebugPanel.js
new file mode 100644
index 00000000..40f82f54
--- /dev/null
+++ b/components/DebugPanel.js
@@ -0,0 +1,124 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import * as ThemeMap from '@/themes'
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+import Select from './Select'
+import { ALL_THEME } from '@/lib/theme'
+/**
+ *
+ * @returns 调试面板
+ */
+export function DebugPanel () {
+  const [show, setShow] = useState(false)
+  const GlobalConfig = useGlobal()
+  const router = useRouter()
+  const { theme, setTheme } = GlobalConfig
+  const themeOptions = []
+  ALL_THEME.forEach(t => {
+    themeOptions.push({ value: t, text: t })
+  })
+
+  function toggleShow () {
+    setShow(!show)
+  }
+
+  function switchTheme () {
+    const currentIndex = ALL_THEME.indexOf(theme)
+    const newIndex = currentIndex < ALL_THEME.length - 1 ? currentIndex + 1 : 0
+    changeTheme(ALL_THEME[newIndex])
+  }
+  /**
+   * 切换主题
+   */
+  function changeTheme (theme) {
+    router.query.theme = ''
+    setTheme(theme)
+  }
+
+  function filterResult (text) {
+    switch (text) {
+      case 'true':
+        return <span className='text-green-500'>true</span>
+      case 'false':
+        return <span className='text-red-500'>false</span>
+      case '':
+        return '-'
+    }
+    return text
+  }
+
+  return (
+    <>
+      {/* 调试按钮 */}
+      <div>
+        <div
+          style={{ writingMode: 'vertical-lr' }}
+          className={`bg-black text-white shadow-2xl p-2.5 rounded-l-xl cursor-pointer ${show ? 'right-96' : 'right-0'} fixed bottom-36 duration-200 z-50`}
+          onClick={toggleShow}
+        >
+          {show
+            ? (
+            <i className="fas fa-times">&nbsp;关闭调试</i>
+              )
+            : (
+            <i className="fas fa-tools">&nbsp;打开调试</i>
+              )}
+        </div>
+      </div>
+
+      <div
+        className={` ${
+          show ? 'shadow-card' : '-right-96'
+        } w-96 overflow-y-scroll font-sans h-full p-5 bg-white fixed right-0 bottom-0 z-50 duration-200`}
+      >
+        <div className="flex space-x-1 my-12">
+          <Select
+            label="主题切换"
+            value={theme}
+            options={themeOptions}
+            onChange={changeTheme}
+          />
+          <div className="p-2 cursor-pointer" onClick={switchTheme}>
+            <i className="fas fa-sync" />
+          </div>
+        </div>
+
+        <div>
+          <div className="font-bold w-18 border-b my-2">
+            站点配置[blog.config.js]
+          </div>
+          <div className="text-xs">
+            {Object.keys(BLOG).map(k => (
+              <div key={k} className="justify-between flex py-1">
+                <span className="bg-blue-400 p-0.5 rounded text-white mr-2">
+                  {k}
+                </span>
+                <span className="whitespace-nowrap">
+                  {filterResult(BLOG[k] + '')}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div>
+          <div className="font-bold w-18 border-b my-2">
+            主题配置{'(config_' + theme + '.js)'}:
+          </div>
+          <div className="text-xs">
+            {Object.keys(ThemeMap[theme].THEME_CONFIG).map(k => (
+                <div key={k} className="justify-between flex py-1">
+                  <span className="bg-indigo-500 p-0.5 rounded text-white mr-2">
+                    {k}
+                  </span>
+                  <span className="whitespace-nowrap">
+                    {filterResult(ThemeMap[theme].THEME_CONFIG[k] + '')}
+                  </span>
+                </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/components/Select.js b/components/Select.js
new file mode 100644
index 00000000..3ab8cb73
--- /dev/null
+++ b/components/Select.js
@@ -0,0 +1,40 @@
+import React from 'react'
+
+/**
+ * 下拉单选框
+ */
+class Select extends React.Component {
+  constructor (props) {
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+  }
+
+  handleChange (event) {
+    const { onChange } = this.props
+    onChange(event.target.value)
+  }
+
+  render () {
+    return (
+      <div className='py-1 space-x-3'>
+        <label className='text-gray-500'>{this.props.label}</label>
+        <select value={this.props.value} onChange={this.handleChange} className='border p-1 rounded cursor-pointer'>
+          {this.props.options?.map(o => (
+            <option key={o.value} value={o.value}>
+              {o.text}
+            </option>
+          ))}
+        </select>
+      </div>
+    )
+  }
+}
+Select.defaultProps = {
+  label: '',
+  value: '1',
+  options: [
+    { value: '1', text: '选项1' },
+    { value: '2', text: '选项2' }
+  ]
+}
+export default Select
diff --git a/components/SideBarDrawer.js b/components/SideBarDrawer.js
index e6db94a5..b6c33530 100644
--- a/components/SideBarDrawer.js
+++ b/components/SideBarDrawer.js
@@ -44,7 +44,7 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
   }
 
   return <div id='sidebar-wrapper' className={' ' + className}>
-    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0' : '-ml-80'} bg-white dark:bg-gray-900 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-50`}>
+    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0' : '-ml-80'} bg-white dark:bg-gray-900 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-40`}>
       {children}
     </div>
     {/* 背景蒙版 */}
diff --git a/jsconfig.json b/jsconfig.json
index 9802ad57..f6f71d10 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -5,7 +5,6 @@
       "@/*": ["./*"],
       "@/components/*": ["components/*"],
       "@/data/*": ["data/*"],
-      "@/layouts/*": ["theme/*"],
       "@/lib/*": ["lib/*"],
       "@/styles/*": ["styles/*"]
     }
diff --git a/lib/formatDate.js b/lib/formatDate.js
index 8be365fc..5674b170 100644
--- a/lib/formatDate.js
+++ b/lib/formatDate.js
@@ -5,6 +5,7 @@
  * @returns {string}
  */
 export default function formatDate (date, local) {
+  if (!date) return ''
   const d = new Date(date)
   const options = { year: 'numeric', month: 'short', day: 'numeric' }
   const res = d.toLocaleDateString(local, options)
diff --git a/lib/global.js b/lib/global.js
index 08628942..d1357434 100644
--- a/lib/global.js
+++ b/lib/global.js
@@ -1,7 +1,9 @@
 import lang from './lang'
 import { useContext, createContext, useState } from 'react'
 import Router from 'next/router'
-import { initDarkMode } from './theme'
+import { ALL_THEME, initDarkMode } from './theme'
+import BLOG from '@/blog.config'
+
 const GlobalContext = createContext()
 let hasInit = false
 
@@ -15,6 +17,8 @@ export function GlobalContextProvider ({ children }) {
   const [locale, updateLocale] = useState(generateLocaleDict('en-US'))
   const [isDarkMode, updateDarkMode] = useState(false)
   const [onLoading, changeLoadingState] = useState(false)
+  const [theme, setTheme] = useState(BLOG.THEME)
+
   Router.events.on('routeChangeStart', (...args) => {
     changeLoadingState(true)
   })
@@ -29,11 +33,16 @@ export function GlobalContextProvider ({ children }) {
       hasInit = true
       initLocale(locale, updateLocale)
       initDarkMode(isDarkMode, updateDarkMode)
+      // 读取浏览器参数中的主题
+      const userTheme = Router?.router?.query?.theme
+      if (userTheme && ALL_THEME.indexOf(userTheme) > -1) {
+        setTheme(userTheme)
+      }
     }
-  }, 100)
+  }, 50)
 
   return (
-    <GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode }}>
+    <GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode, theme, setTheme }}>
       {children}
     </GlobalContext.Provider>
   )
diff --git a/lib/theme.js b/lib/theme.js
index b11fb8fb..c8a8dffa 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,6 +1,7 @@
 import cookie from 'react-cookies'
 import BLOG from '@/blog.config'
 
+export const ALL_THEME = ['next', 'fukasawa', 'hexo', 'empty', 'medium']
 /**
  * 初始化主题
  * @param isDarkMode
diff --git a/pages/404.js b/pages/404.js
deleted file mode 100644
index 64cc2dc7..00000000
--- a/pages/404.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Layout404 } from '@/themes'
-
-/**
- * 自定义404界面
- * @returns {JSX.Element}
- * @constructor
- */
-
-export default function Custom404 (props) {
-  return <Layout404 {...props}/>
-}
diff --git a/pages/[slug].js b/pages/[slug].js
index 8307c38f..92cffdef 100644
--- a/pages/[slug].js
+++ b/pages/[slug].js
@@ -1,8 +1,8 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutSlug } from '@/themes'
-import Custom404 from '@/pages/404'
+import { useGlobal } from '@/lib/global'
+import * as ThemeMap from '@/themes'
 
 /**
  * 根据notion的slug访问页面，针对类型为Page的页面
@@ -10,10 +10,12 @@ import Custom404 from '@/pages/404'
  * @returns
  */
 const Slug = (props) => {
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   if (!props.post) {
-    return <Custom404 {...props} />
+    return <ThemeComponents.Layout404 {...props}/>
   }
-  return <LayoutSlug {...props} showArticleInfo={false}/>
+  return <ThemeComponents.LayoutSlug {...props} showArticleInfo={false}/>
 }
 
 export async function getStaticPaths () {
diff --git a/pages/_app.js b/pages/_app.js
index e5b63150..143b0d2e 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -14,6 +14,7 @@ import 'prismjs/themes/prism-okaidia.css'
 import 'katex/dist/katex.min.css'
 import dynamic from 'next/dynamic'
 import { GlobalContextProvider } from '@/lib/global'
+import { DebugPanel } from '@/components/DebugPanel'
 
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
@@ -23,6 +24,7 @@ const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr:
 const MyApp = ({ Component, pageProps }) => {
   return (
     <GlobalContextProvider>
+        {BLOG.DEBUG && <DebugPanel/>}
         {BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}
         {BLOG.ANALYTICS_GOOGLE_ID && <Gtag />}
         {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <Busuanzi/>}
diff --git a/pages/archive/index.js b/pages/archive/index.js
index 4dffb49d..75bf91b1 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -1,6 +1,13 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
-import { LayoutArchive } from '@/themes'
+import { useGlobal } from '@/lib/global'
+import * as ThemeMap from '@/themes'
+
+const ArchiveIndex = (props) => {
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
+  return <ThemeComponents.LayoutArchive {...props}/>
+}
 
 export async function getStaticProps () {
   const { allPosts, categories, tags, postCount, customNav } =
@@ -18,8 +25,4 @@ export async function getStaticProps () {
   }
 }
 
-const ArchiveIndex = (props) => {
-  return <LayoutArchive {...props}/>
-}
-
 export default ArchiveIndex
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index d79e0cc7..9eb1bd65 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -1,8 +1,8 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutSlug } from '@/themes'
-import Custom404 from '@/pages/404'
+import { useGlobal } from '@/lib/global'
+import * as ThemeMap from '@/themes'
 
 /**
  * 根据notion的slug访问页面
@@ -10,10 +10,12 @@ import Custom404 from '@/pages/404'
  * @returns
  */
 const Slug = (props) => {
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   if (!props.post) {
-    return <Custom404 {...props} />
+    return <ThemeComponents.Layout404 {...props}/>
   }
-  return <LayoutSlug {...props} showArticleInfo={true}/>
+  return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true}/>
 }
 
 export async function getStaticPaths () {
diff --git a/pages/category/[category].js b/pages/category/[category].js
index 681a23c6..9e9f5f3f 100644
--- a/pages/category/[category].js
+++ b/pages/category/[category].js
@@ -1,9 +1,12 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
-import { LayoutCategory } from '@/themes'
+import { useGlobal } from '@/lib/global'
+import * as ThemeMap from '@/themes'
 
 export default function Category (props) {
-  return <LayoutCategory {...props} />
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
+  return <ThemeComponents.LayoutCategory {...props} />
 }
 
 export async function getStaticProps ({ params }) {
diff --git a/pages/category/index.js b/pages/category/index.js
index 7361a706..dd195d4c 100644
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -1,9 +1,12 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
-import { LayoutCategoryIndex } from '@/themes'
+import { useGlobal } from '@/lib/global'
+import * as ThemeMap from '@/themes'
 
 export default function Category (props) {
-  return <LayoutCategoryIndex {...props}/>
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
+  return <ThemeComponents.LayoutCategoryIndex {...props}/>
 }
 
 export async function getStaticProps () {
diff --git a/pages/index.js b/pages/index.js
index 599b3cf9..02a15885 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,10 +1,12 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutIndex, THEME_CONFIG } from '@/themes'
-
+import * as ThemeMap from '@/themes'
+import { useGlobal } from '@/lib/global'
 const Index = (props) => {
-  return <LayoutIndex {...props}/>
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
+  return <ThemeComponents.LayoutIndex {...props}/>
 }
 
 export async function getStaticProps () {
@@ -26,7 +28,7 @@ export async function getStaticProps () {
       BLOG.POSTS_PER_PAGE * (page - 1),
       BLOG.POSTS_PER_PAGE * page
     )
-    if (THEME_CONFIG.POST_LIST_PREVIEW || BLOG.POST_LIST_PREVIEW) {
+    if (BLOG.POST_LIST_PREVIEW) {
       for (const i in postsToShow) {
         const post = postsToShow[i]
         const blockMap = await getPostBlocks(post.id, 'slug', BLOG.POST_PREVIEW_LINES)
diff --git a/pages/page/[page].js b/pages/page/[page].js
index 211a2f92..0149f12d 100644
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -1,14 +1,16 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutPage, THEME_CONFIG } from '@/themes'
-import Custom404 from '@/pages/404'
+import { useGlobal } from '@/lib/global'
+import * as ThemeMap from '@/themes'
 
 const Page = (props) => {
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
   if (!props?.meta) {
-    return <Custom404 {...props} />
+    return <ThemeComponents.Layout404 {...props}/>
   }
-  return <LayoutPage {...props} />
+  return <ThemeComponents.LayoutPage {...props} />
 }
 
 export async function getStaticPaths () {
@@ -43,8 +45,7 @@ export async function getStaticProps ({ params: { page } }) {
     BLOG.POSTS_PER_PAGE * (page - 1),
     BLOG.POSTS_PER_PAGE * page
   )
-  // 加载预览
-  if (THEME_CONFIG.POST_LIST_PREVIEW || BLOG.POST_LIST_PREVIEW) {
+  if (BLOG.POST_LIST_PREVIEW) {
     for (const i in postsToShow) {
       const post = postsToShow[i]
       const blockMap = await getPostBlocks(post.id, 'slug', BLOG.POST_PREVIEW_LINES)
diff --git a/pages/search/[keyword].js b/pages/search/[keyword].js
index 4bc6166e..c00b6764 100644
--- a/pages/search/[keyword].js
+++ b/pages/search/[keyword].js
@@ -1,8 +1,22 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutSearch } from '@/themes'
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { getDataFromCache } from '@/lib/cache/cache_manager'
+import * as ThemeMap from '@/themes'
+
+const Index = (props) => {
+  const { keyword } = props
+  const { locale } = useGlobal()
+  const meta = {
+    title: `${keyword || ''} | ${locale.NAV.SEARCH} | ${BLOG.TITLE}  `,
+    description: BLOG.DESCRIPTION,
+    type: 'website'
+  }
+
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
+  return <ThemeComponents.LayoutSearch {...props} meta={meta} currentSearch={keyword} />
+}
 
 /**
  * 服务端搜索
@@ -33,17 +47,6 @@ export async function getServerSideProps ({ params: { keyword } }) {
   }
 }
 
-const Index = (props) => {
-  const { keyword } = props
-  const { locale } = useGlobal()
-  const meta = {
-    title: `${keyword || ''} | ${locale.NAV.SEARCH} | ${BLOG.TITLE}  `,
-    description: BLOG.DESCRIPTION,
-    type: 'website'
-  }
-  return <LayoutSearch {...props} meta={meta} currentSearch={keyword} />
-}
-
 /**
  * 将对象的指定字段拼接到字符串
  * @param sourceTextArray
diff --git a/pages/search/index.js b/pages/search/index.js
index fb1ffc89..bf0849d4 100644
--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -1,33 +1,8 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutSearch } from '@/themes'
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
-
-/**
- * 浏览器前端搜索
- */
-export async function getStaticProps () {
-  const {
-    allPosts,
-    categories,
-    tags,
-    postCount,
-    latestPosts,
-    customNav
-  } = await getGlobalNotionData({ from: 'search-props', pageType: ['Post'] })
-  return {
-    props: {
-      posts: allPosts,
-      tags,
-      categories,
-      postCount,
-      latestPosts,
-      customNav
-    },
-    revalidate: 1
-  }
-}
+import * as ThemeMap from '@/themes'
 
 const Search = (props) => {
   const { posts } = props
@@ -51,7 +26,29 @@ const Search = (props) => {
     description: BLOG.DESCRIPTION,
     type: 'website'
   }
-  return <LayoutSearch {...props} posts={filteredPosts} meta={meta} currentSearch={searchKey} />
+
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
+
+  return <ThemeComponents.LayoutSearch {...props} posts={filteredPosts} meta={meta} currentSearch={searchKey} />
+}
+
+/**
+ * 浏览器前端搜索
+ */
+export async function getStaticProps () {
+  const { allPosts, categories, tags, postCount, latestPosts, customNav } = await getGlobalNotionData({ from: 'search-props', pageType: ['Post'] })
+  return {
+    props: {
+      posts: allPosts,
+      tags,
+      categories,
+      postCount,
+      latestPosts,
+      customNav
+    },
+    revalidate: 1
+  }
 }
 
 function getSearchKey () {
diff --git a/pages/tag/[tag].js b/pages/tag/[tag].js
index 169352f6..238248bd 100644
--- a/pages/tag/[tag].js
+++ b/pages/tag/[tag].js
@@ -1,8 +1,11 @@
+import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutTag } from '@/themes'
+import * as ThemeMap from '@/themes'
 
 const Tag = (props) => {
-  return <LayoutTag {...props} />
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
+  return <ThemeComponents.LayoutTag {...props} />
 }
 
 export async function getStaticProps ({ params }) {
diff --git a/pages/tag/index.js b/pages/tag/index.js
index cdf8a401..d8a7911a 100644
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -1,9 +1,12 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
-import { LayoutTagIndex } from '@/themes'
+import { useGlobal } from '@/lib/global'
+import * as ThemeMap from '@/themes'
 
 const TagIndex = (props) => {
-  return <LayoutTagIndex {...props} />
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
+  return <ThemeComponents.LayoutTagIndex {...props} />
 }
 
 export async function getStaticProps () {
diff --git a/styles/notion.css b/styles/notion.css
index b8466a2a..d42d3b11 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -992,7 +992,7 @@ svg.notion-page-icon {
 .notion-board-header {
   display: flex;
   position: absolute;
-  z-index: 82;
+  z-index: 30;
   height: 44px;
   min-width: 100%;
 }
@@ -1749,7 +1749,7 @@ pre[class*='language-'] {
 .notion-table-header {
   display: flex;
   position: absolute;
-  z-index: 82;
+  z-index:30;
   height: 33px;
   color: var(--fg-color-3);
   min-width: var(--notion-max-width);
diff --git a/themes/Empty/LayoutBase.js b/themes/Empty/LayoutBase.js
deleted file mode 100644
index f906fef4..00000000
--- a/themes/Empty/LayoutBase.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import CommonHead from '@/components/CommonHead'
-
-/**
- * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
-
- * @returns {JSX.Element}
- * @constructor
- */
-const LayoutBase = (props) => {
-  const { children, meta } = props
-  return <div>
-    <CommonHead meta={meta} />
-    <main id='wrapper' className='flex justify-center flex-1 pb-12'>
-      {children}
-    </main>
-  </div>
-}
-
-export default LayoutBase
diff --git a/themes/Empty/LayoutIndex.js b/themes/Empty/LayoutIndex.js
deleted file mode 100644
index 9408f97a..00000000
--- a/themes/Empty/LayoutIndex.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import LayoutBase from './LayoutBase'
-
-export const LayoutIndex = (props) => {
-  // const { posts, tags, meta, categories, postCount, latestPosts } = props
-  return <LayoutBase {...props}>Index</LayoutBase>
-}
diff --git a/themes/Empty/LayoutSearch.js b/themes/Empty/LayoutSearch.js
deleted file mode 100644
index fb9244c3..00000000
--- a/themes/Empty/LayoutSearch.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import LayoutBase from './LayoutBase'
-
-export const LayoutSearch = (props) => {
-  return <LayoutBase {...props}>
-  </LayoutBase>
-}
diff --git a/themes/Empty/index.js b/themes/Empty/index.js
deleted file mode 100644
index 22fd5d15..00000000
--- a/themes/Empty/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import CONFIG_EMPTY from './config_empty'
-export { CONFIG_EMPTY as THEME_CONFIG }
-export { LayoutIndex } from './LayoutIndex'
-export { LayoutSearch } from './LayoutSearch'
-export { LayoutArchive } from './LayoutArchive'
-export { LayoutSlug } from './LayoutSlug'
-export { Layout404 } from './Layout404'
-export { LayoutCategory } from './LayoutCategory'
-export { LayoutCategoryIndex } from './LayoutCategoryIndex'
-export { LayoutPage } from './LayoutPage'
-export { LayoutTag } from './LayoutTag'
-export { LayoutTagIndex } from './LayoutTagIndex'
diff --git a/themes/Fukasawa/index.js b/themes/Fukasawa/index.js
deleted file mode 100644
index e9e4db72..00000000
--- a/themes/Fukasawa/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import CONFIG_FUKA from './config_fuka'
-export { CONFIG_FUKA as THEME_CONFIG }
-export { LayoutIndex } from './LayoutIndex'
-export { LayoutSearch } from './LayoutSearch'
-export { LayoutArchive } from './LayoutArchive'
-export { LayoutSlug } from './LayoutSlug'
-export { Layout404 } from './Layout404'
-export { LayoutCategory } from './LayoutCategory'
-export { LayoutCategoryIndex } from './LayoutCategoryIndex'
-export { LayoutPage } from './LayoutPage'
-export { LayoutTag } from './LayoutTag'
-export { LayoutTagIndex } from './LayoutTagIndex'
diff --git a/themes/Hexo/LayoutSearch.js b/themes/Hexo/LayoutSearch.js
deleted file mode 100644
index c9ffc4b3..00000000
--- a/themes/Hexo/LayoutSearch.js
+++ /dev/null
@@ -1,26 +0,0 @@
-
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import BlogPostListPage from './components/BlogPostListPage'
-import LayoutBase from './LayoutBase'
-
-export const LayoutSearch = (props) => {
-  const { keyword } = props
-  const router = useRouter()
-  const currentSearch = keyword || router?.query?.s
-  useEffect(() => {
-    setTimeout(() => {
-      const container = document.getElementById('container')
-      if (container && container.innerHTML) {
-        const re = new RegExp(`${currentSearch}`, 'gim')
-        container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`)
-      }
-    },
-    100)
-  })
-  return <LayoutBase {...props} currentSearch={currentSearch}>
-    <div ic='container'>
-      <BlogPostListPage {...props}/>
-    </div>
-  </LayoutBase>
-}
diff --git a/themes/Hexo/index.js b/themes/Hexo/index.js
deleted file mode 100644
index 15af8476..00000000
--- a/themes/Hexo/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import CONFIG_HEXO from './config_hexo'
-export { LayoutIndex } from './LayoutIndex'
-export { LayoutSearch } from './LayoutSearch'
-export { LayoutArchive } from './LayoutArchive'
-export { LayoutSlug } from './LayoutSlug'
-export { Layout404 } from './Layout404'
-export { LayoutCategory } from './LayoutCategory'
-export { LayoutCategoryIndex } from './LayoutCategoryIndex'
-export { LayoutPage } from './LayoutPage'
-export { LayoutTag } from './LayoutTag'
-export { LayoutTagIndex } from './LayoutTagIndex'
-export { CONFIG_HEXO as THEME_CONFIG }
diff --git a/themes/Medium/index.js b/themes/Medium/index.js
deleted file mode 100644
index 5bcc655c..00000000
--- a/themes/Medium/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import CONFIG_MEDIUM from './config_medium'
-export { CONFIG_MEDIUM as THEME_CONFIG }
-export { LayoutIndex } from './LayoutIndex'
-export { LayoutSearch } from './LayoutSearch'
-export { LayoutArchive } from './LayoutArchive'
-export { LayoutSlug } from './LayoutSlug'
-export { Layout404 } from './Layout404'
-export { LayoutCategory } from './LayoutCategory'
-export { LayoutCategoryIndex } from './LayoutCategoryIndex'
-export { LayoutPage } from './LayoutPage'
-export { LayoutTag } from './LayoutTag'
-export { LayoutTagIndex } from './LayoutTagIndex'
diff --git a/themes/NEXT/index.js b/themes/NEXT/index.js
deleted file mode 100644
index 76179137..00000000
--- a/themes/NEXT/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import CONFIG_NEXT from './config_next'
-export { CONFIG_NEXT as THEME_CONFIG }
-export { LayoutIndex } from './LayoutIndex'
-export { LayoutSearch } from './LayoutSearch'
-export { LayoutArchive } from './LayoutArchive'
-export { LayoutSlug } from './LayoutSlug'
-export { Layout404 } from './Layout404'
-export { LayoutCategory } from './LayoutCategory'
-export { LayoutCategoryIndex } from './LayoutCategoryIndex'
-export { LayoutPage } from './LayoutPage'
-export { LayoutTag } from './LayoutTag'
-export { LayoutTagIndex } from './LayoutTagIndex'
diff --git a/themes/Empty/Layout404.js b/themes/empty/Layout404.js
similarity index 100%
rename from themes/Empty/Layout404.js
rename to themes/empty/Layout404.js
diff --git a/themes/Empty/LayoutArchive.js b/themes/empty/LayoutArchive.js
similarity index 100%
rename from themes/Empty/LayoutArchive.js
rename to themes/empty/LayoutArchive.js
diff --git a/themes/empty/LayoutBase.js b/themes/empty/LayoutBase.js
new file mode 100644
index 00000000..004a12e5
--- /dev/null
+++ b/themes/empty/LayoutBase.js
@@ -0,0 +1,37 @@
+import CommonHead from '@/components/CommonHead'
+import Link from 'next/link'
+
+/**
+ * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
+
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = props => {
+  const { children, meta } = props
+  return (
+    <div>
+      <CommonHead meta={meta} />
+      {/* 导航菜单 */}
+      <div className="w-full flex justify-center my-2">
+        <nav className="max-w-6xl space-x-3 underline">
+          <Link href="/">
+            <a>首页</a>
+          </Link>
+          <Link href="/category">
+            <a>分类</a>
+          </Link>
+          <Link href="/tag">
+            <a>标签</a>
+          </Link>
+        </nav>
+      </div>
+      {/* 内容主体 */}
+      <main id="wrapper" className="flex justify-center flex-1 pb-12">
+        <div className="max-w-6xl px-3">{children}</div>
+      </main>
+    </div>
+  )
+}
+
+export default LayoutBase
diff --git a/themes/Empty/LayoutCategory.js b/themes/empty/LayoutCategory.js
similarity index 100%
rename from themes/Empty/LayoutCategory.js
rename to themes/empty/LayoutCategory.js
diff --git a/themes/Empty/LayoutCategoryIndex.js b/themes/empty/LayoutCategoryIndex.js
similarity index 100%
rename from themes/Empty/LayoutCategoryIndex.js
rename to themes/empty/LayoutCategoryIndex.js
diff --git a/themes/empty/LayoutIndex.js b/themes/empty/LayoutIndex.js
new file mode 100644
index 00000000..39072ba2
--- /dev/null
+++ b/themes/empty/LayoutIndex.js
@@ -0,0 +1,18 @@
+import Link from 'next/link'
+import LayoutBase from './LayoutBase'
+
+export const LayoutIndex = props => {
+  const { posts } = props
+  return (
+    <LayoutBase {...props}>
+      {posts.map(p => (
+        <div key={p.id} className='border my-12'>
+          <Link href={`/article/${p.slug}`}>
+            <a className='underline cursor-pointer'>{p.title}</a>
+          </Link>
+          <div>{p.summary}</div>
+        </div>
+      ))}
+    </LayoutBase>
+  )
+}
diff --git a/themes/Empty/LayoutPage.js b/themes/empty/LayoutPage.js
similarity index 74%
rename from themes/Empty/LayoutPage.js
rename to themes/empty/LayoutPage.js
index f25ee48f..661a104b 100644
--- a/themes/Empty/LayoutPage.js
+++ b/themes/empty/LayoutPage.js
@@ -1,4 +1,4 @@
-import LayoutBase from '../Empty/LayoutBase'
+import LayoutBase from './LayoutBase'
 
 export const LayoutPage = (props) => {
   const { page } = props
diff --git a/themes/empty/LayoutSearch.js b/themes/empty/LayoutSearch.js
new file mode 100644
index 00000000..52b61ba2
--- /dev/null
+++ b/themes/empty/LayoutSearch.js
@@ -0,0 +1,42 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import LayoutBase from './LayoutBase'
+
+export const LayoutSearch = props => {
+  const { keyword, posts } = props
+  const router = useRouter()
+  const currentSearch = keyword || router?.query?.s
+  let handleTextColor = false
+  useEffect(() => {
+    setTimeout(() => {
+      if (currentSearch && !handleTextColor) {
+        const container = document.getElementById('container')
+        if (container && container.innerHTML) {
+          const re = new RegExp(`${currentSearch}`, 'gim')
+          container.innerHTML = container.innerHTML.replace(
+            re,
+            `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`
+          )
+          handleTextColor = true
+        }
+      }
+    }, 100)
+  })
+
+  return (
+    <LayoutBase {...props}>
+      <h2>Search</h2>
+      <div id="container">
+        {posts.map(p => (
+          <div key={p.id} className="border my-12">
+            <Link href={`/article/${p.slug}`}>
+              <a className="underline cursor-pointer">{p.title}</a>
+            </Link>
+            <div>{p.summary}</div>
+          </div>
+        ))}
+      </div>
+    </LayoutBase>
+  )
+}
diff --git a/themes/Empty/LayoutSlug.js b/themes/empty/LayoutSlug.js
similarity index 50%
rename from themes/Empty/LayoutSlug.js
rename to themes/empty/LayoutSlug.js
index 485446ca..caa2bbb2 100644
--- a/themes/Empty/LayoutSlug.js
+++ b/themes/empty/LayoutSlug.js
@@ -6,14 +6,20 @@ import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-markup'
 import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-typescript'
-import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
+import {
+  Code,
+  Collection,
+  CollectionRow,
+  Equation,
+  NotionRenderer
+} from 'react-notion-x'
 import LayoutBase from './LayoutBase'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
 }
 
-export const LayoutSlug = (props) => {
+export const LayoutSlug = props => {
   const { post } = props
   const meta = {
     title: `${post.title} | ${BLOG.TITLE}`,
@@ -27,25 +33,27 @@ export const LayoutSlug = (props) => {
     post.toc = getPageTableOfContents(post, post.blockMap)
   }
 
-  return <LayoutBase {...props} meta={meta}>
-    <h1>Slug - {post?.title}</h1>
-    <p>
-      {/* Notion文章主体 */}
-      <section id='notion-article' className='px-1'>
-        {post.blockMap && (
-          <NotionRenderer
-            recordMap={post.blockMap}
-            mapPageUrl={mapPageUrl}
-            components={{
-              equation: Equation,
-              code: Code,
-              collectionRow: CollectionRow,
-              collection: Collection
-            }}
-          />
-        )}
-      </section>
-      </p>
-
-  </LayoutBase>
+  return (
+    <LayoutBase {...props} meta={meta}>
+      <div>
+        <h2>{post?.title}</h2>
+        <p>
+          <section id="notion-article" className="px-1">
+            {post.blockMap && (
+              <NotionRenderer
+                recordMap={post.blockMap}
+                mapPageUrl={mapPageUrl}
+                components={{
+                  equation: Equation,
+                  code: Code,
+                  collectionRow: CollectionRow,
+                  collection: Collection
+                }}
+              />
+            )}
+          </section>
+        </p>
+      </div>
+    </LayoutBase>
+  )
 }
diff --git a/themes/Empty/LayoutTag.js b/themes/empty/LayoutTag.js
similarity index 100%
rename from themes/Empty/LayoutTag.js
rename to themes/empty/LayoutTag.js
diff --git a/themes/Empty/LayoutTagIndex.js b/themes/empty/LayoutTagIndex.js
similarity index 100%
rename from themes/Empty/LayoutTagIndex.js
rename to themes/empty/LayoutTagIndex.js
diff --git a/themes/Empty/config_empty.js b/themes/empty/config_empty.js
similarity index 100%
rename from themes/Empty/config_empty.js
rename to themes/empty/config_empty.js
diff --git a/themes/empty/index.js b/themes/empty/index.js
new file mode 100644
index 00000000..95b0a6b2
--- /dev/null
+++ b/themes/empty/index.js
@@ -0,0 +1,25 @@
+import CONFIG_EMPTY from './config_empty'
+import { LayoutIndex } from './LayoutIndex'
+import { LayoutSearch } from './LayoutSearch'
+import { LayoutArchive } from './LayoutArchive'
+import { LayoutSlug } from './LayoutSlug'
+import { Layout404 } from './Layout404'
+import { LayoutCategory } from './LayoutCategory'
+import { LayoutCategoryIndex } from './LayoutCategoryIndex'
+import { LayoutPage } from './LayoutPage'
+import { LayoutTag } from './LayoutTag'
+import { LayoutTagIndex } from './LayoutTagIndex'
+
+export {
+  CONFIG_EMPTY as THEME_CONFIG,
+  LayoutIndex,
+  LayoutSearch,
+  LayoutArchive,
+  LayoutSlug,
+  Layout404,
+  LayoutCategory,
+  LayoutCategoryIndex,
+  LayoutPage,
+  LayoutTag,
+  LayoutTagIndex
+}
diff --git a/themes/Fukasawa/Layout404.js b/themes/fukasawa/Layout404.js
similarity index 100%
rename from themes/Fukasawa/Layout404.js
rename to themes/fukasawa/Layout404.js
diff --git a/themes/Fukasawa/LayoutArchive.js b/themes/fukasawa/LayoutArchive.js
similarity index 100%
rename from themes/Fukasawa/LayoutArchive.js
rename to themes/fukasawa/LayoutArchive.js
diff --git a/themes/Fukasawa/LayoutBase.js b/themes/fukasawa/LayoutBase.js
similarity index 93%
rename from themes/Fukasawa/LayoutBase.js
rename to themes/fukasawa/LayoutBase.js
index 39603acb..479e26b3 100644
--- a/themes/Fukasawa/LayoutBase.js
+++ b/themes/fukasawa/LayoutBase.js
@@ -28,7 +28,7 @@ const LayoutBase = (props) => {
     <div className='flex'>
       <AsideLeft {...props}/>
       <main id='wrapper' className='flex w-full py-8 justify-center'>
-        <div className='2xl:max-w-6xl md:max-w-3xl w-full'>
+        <div className='2xl:max-w-6xl md:max-w-4xl w-full'>
           <div> {headerSlot} </div>
           <div>{children}</div>
         </div>
diff --git a/themes/Fukasawa/LayoutCategory.js b/themes/fukasawa/LayoutCategory.js
similarity index 100%
rename from themes/Fukasawa/LayoutCategory.js
rename to themes/fukasawa/LayoutCategory.js
diff --git a/themes/Fukasawa/LayoutCategoryIndex.js b/themes/fukasawa/LayoutCategoryIndex.js
similarity index 100%
rename from themes/Fukasawa/LayoutCategoryIndex.js
rename to themes/fukasawa/LayoutCategoryIndex.js
diff --git a/themes/Fukasawa/LayoutIndex.js b/themes/fukasawa/LayoutIndex.js
similarity index 100%
rename from themes/Fukasawa/LayoutIndex.js
rename to themes/fukasawa/LayoutIndex.js
diff --git a/themes/Fukasawa/LayoutPage.js b/themes/fukasawa/LayoutPage.js
similarity index 100%
rename from themes/Fukasawa/LayoutPage.js
rename to themes/fukasawa/LayoutPage.js
diff --git a/themes/Fukasawa/LayoutSearch.js b/themes/fukasawa/LayoutSearch.js
similarity index 100%
rename from themes/Fukasawa/LayoutSearch.js
rename to themes/fukasawa/LayoutSearch.js
diff --git a/themes/Fukasawa/LayoutSlug.js b/themes/fukasawa/LayoutSlug.js
similarity index 100%
rename from themes/Fukasawa/LayoutSlug.js
rename to themes/fukasawa/LayoutSlug.js
diff --git a/themes/Fukasawa/LayoutTag.js b/themes/fukasawa/LayoutTag.js
similarity index 100%
rename from themes/Fukasawa/LayoutTag.js
rename to themes/fukasawa/LayoutTag.js
diff --git a/themes/Fukasawa/LayoutTagIndex.js b/themes/fukasawa/LayoutTagIndex.js
similarity index 100%
rename from themes/Fukasawa/LayoutTagIndex.js
rename to themes/fukasawa/LayoutTagIndex.js
diff --git a/themes/Fukasawa/components/ArticleAround.js b/themes/fukasawa/components/ArticleAround.js
similarity index 100%
rename from themes/Fukasawa/components/ArticleAround.js
rename to themes/fukasawa/components/ArticleAround.js
diff --git a/themes/Fukasawa/components/ArticleDetail.js b/themes/fukasawa/components/ArticleDetail.js
similarity index 98%
rename from themes/Fukasawa/components/ArticleDetail.js
rename to themes/fukasawa/components/ArticleDetail.js
index 7974d413..0e2b7187 100644
--- a/themes/Fukasawa/components/ArticleDetail.js
+++ b/themes/fukasawa/components/ArticleDetail.js
@@ -125,7 +125,6 @@ export default function ArticleDetail ({ post, recommendPosts, prev, next }) {
 
     {/* 评论互动 */}
     <div className="duration-200 shadow px-12 w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-800">
-        <div className='text-2xl mt-8 mx-8'>发表评论</div>
        <Comment frontMatter={post} />
     </div>
   </div>)
diff --git a/themes/Fukasawa/components/AsideLeft.js b/themes/fukasawa/components/AsideLeft.js
similarity index 100%
rename from themes/Fukasawa/components/AsideLeft.js
rename to themes/fukasawa/components/AsideLeft.js
diff --git a/themes/Fukasawa/components/BlogCard.js b/themes/fukasawa/components/BlogCard.js
similarity index 100%
rename from themes/Fukasawa/components/BlogCard.js
rename to themes/fukasawa/components/BlogCard.js
diff --git a/themes/Fukasawa/components/BlogListEmpty.js b/themes/fukasawa/components/BlogListEmpty.js
similarity index 100%
rename from themes/Fukasawa/components/BlogListEmpty.js
rename to themes/fukasawa/components/BlogListEmpty.js
diff --git a/themes/Fukasawa/components/BlogListPage.js b/themes/fukasawa/components/BlogListPage.js
similarity index 100%
rename from themes/Fukasawa/components/BlogListPage.js
rename to themes/fukasawa/components/BlogListPage.js
diff --git a/themes/Fukasawa/components/BlogPostArchive.js b/themes/fukasawa/components/BlogPostArchive.js
similarity index 100%
rename from themes/Fukasawa/components/BlogPostArchive.js
rename to themes/fukasawa/components/BlogPostArchive.js
diff --git a/themes/Fukasawa/components/Card.js b/themes/fukasawa/components/Card.js
similarity index 100%
rename from themes/Fukasawa/components/Card.js
rename to themes/fukasawa/components/Card.js
diff --git a/themes/Fukasawa/components/Catalog.js b/themes/fukasawa/components/Catalog.js
similarity index 100%
rename from themes/Fukasawa/components/Catalog.js
rename to themes/fukasawa/components/Catalog.js
diff --git a/themes/Fukasawa/components/Collapse.js b/themes/fukasawa/components/Collapse.js
similarity index 100%
rename from themes/Fukasawa/components/Collapse.js
rename to themes/fukasawa/components/Collapse.js
diff --git a/themes/Fukasawa/components/GroupCategory.js b/themes/fukasawa/components/GroupCategory.js
similarity index 100%
rename from themes/Fukasawa/components/GroupCategory.js
rename to themes/fukasawa/components/GroupCategory.js
diff --git a/themes/Fukasawa/components/GroupMenu.js b/themes/fukasawa/components/GroupMenu.js
similarity index 100%
rename from themes/Fukasawa/components/GroupMenu.js
rename to themes/fukasawa/components/GroupMenu.js
diff --git a/themes/Fukasawa/components/GroupTag.js b/themes/fukasawa/components/GroupTag.js
similarity index 100%
rename from themes/Fukasawa/components/GroupTag.js
rename to themes/fukasawa/components/GroupTag.js
diff --git a/themes/Fukasawa/components/Logo.js b/themes/fukasawa/components/Logo.js
similarity index 100%
rename from themes/Fukasawa/components/Logo.js
rename to themes/fukasawa/components/Logo.js
diff --git a/themes/Fukasawa/components/PaginationSimple.js b/themes/fukasawa/components/PaginationSimple.js
similarity index 100%
rename from themes/Fukasawa/components/PaginationSimple.js
rename to themes/fukasawa/components/PaginationSimple.js
diff --git a/themes/Fukasawa/components/SearchInput.js b/themes/fukasawa/components/SearchInput.js
similarity index 100%
rename from themes/Fukasawa/components/SearchInput.js
rename to themes/fukasawa/components/SearchInput.js
diff --git a/themes/Fukasawa/components/SiteInfo.js b/themes/fukasawa/components/SiteInfo.js
similarity index 100%
rename from themes/Fukasawa/components/SiteInfo.js
rename to themes/fukasawa/components/SiteInfo.js
diff --git a/themes/Fukasawa/components/TagItem.js b/themes/fukasawa/components/TagItem.js
similarity index 100%
rename from themes/Fukasawa/components/TagItem.js
rename to themes/fukasawa/components/TagItem.js
diff --git a/themes/Fukasawa/components/TagItemMini.js b/themes/fukasawa/components/TagItemMini.js
similarity index 100%
rename from themes/Fukasawa/components/TagItemMini.js
rename to themes/fukasawa/components/TagItemMini.js
diff --git a/themes/Fukasawa/components/TopNav.js b/themes/fukasawa/components/TopNav.js
similarity index 100%
rename from themes/Fukasawa/components/TopNav.js
rename to themes/fukasawa/components/TopNav.js
diff --git a/themes/Fukasawa/config_fuka.js b/themes/fukasawa/config_fuka.js
similarity index 100%
rename from themes/Fukasawa/config_fuka.js
rename to themes/fukasawa/config_fuka.js
diff --git a/themes/fukasawa/index.js b/themes/fukasawa/index.js
new file mode 100644
index 00000000..58968469
--- /dev/null
+++ b/themes/fukasawa/index.js
@@ -0,0 +1,25 @@
+import CONFIG_FUKA from './config_fuka'
+import { LayoutIndex } from './LayoutIndex'
+import { LayoutSearch } from './LayoutSearch'
+import { LayoutArchive } from './LayoutArchive'
+import { LayoutSlug } from './LayoutSlug'
+import { Layout404 } from './Layout404'
+import { LayoutCategory } from './LayoutCategory'
+import { LayoutCategoryIndex } from './LayoutCategoryIndex'
+import { LayoutPage } from './LayoutPage'
+import { LayoutTag } from './LayoutTag'
+import { LayoutTagIndex } from './LayoutTagIndex'
+
+export {
+  CONFIG_FUKA as THEME_CONFIG,
+  LayoutIndex,
+  LayoutSearch,
+  LayoutArchive,
+  LayoutSlug,
+  Layout404,
+  LayoutCategory,
+  LayoutCategoryIndex,
+  LayoutPage,
+  LayoutTag,
+  LayoutTagIndex
+}
diff --git a/themes/Hexo/Layout404.js b/themes/hexo/Layout404.js
similarity index 100%
rename from themes/Hexo/Layout404.js
rename to themes/hexo/Layout404.js
diff --git a/themes/Hexo/LayoutArchive.js b/themes/hexo/LayoutArchive.js
similarity index 100%
rename from themes/Hexo/LayoutArchive.js
rename to themes/hexo/LayoutArchive.js
diff --git a/themes/Hexo/LayoutBase.js b/themes/hexo/LayoutBase.js
similarity index 100%
rename from themes/Hexo/LayoutBase.js
rename to themes/hexo/LayoutBase.js
diff --git a/themes/Hexo/LayoutCategory.js b/themes/hexo/LayoutCategory.js
similarity index 100%
rename from themes/Hexo/LayoutCategory.js
rename to themes/hexo/LayoutCategory.js
diff --git a/themes/Hexo/LayoutCategoryIndex.js b/themes/hexo/LayoutCategoryIndex.js
similarity index 100%
rename from themes/Hexo/LayoutCategoryIndex.js
rename to themes/hexo/LayoutCategoryIndex.js
diff --git a/themes/Hexo/LayoutIndex.js b/themes/hexo/LayoutIndex.js
similarity index 100%
rename from themes/Hexo/LayoutIndex.js
rename to themes/hexo/LayoutIndex.js
diff --git a/themes/Hexo/LayoutPage.js b/themes/hexo/LayoutPage.js
similarity index 100%
rename from themes/Hexo/LayoutPage.js
rename to themes/hexo/LayoutPage.js
diff --git a/themes/hexo/LayoutSearch.js b/themes/hexo/LayoutSearch.js
new file mode 100644
index 00000000..22abf034
--- /dev/null
+++ b/themes/hexo/LayoutSearch.js
@@ -0,0 +1,34 @@
+
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import BlogPostListPage from './components/BlogPostListPage'
+import LayoutBase from './LayoutBase'
+import SearchInput from './components/SearchInput'
+export const LayoutSearch = (props) => {
+  const { keyword } = props
+  const router = useRouter()
+  const currentSearch = keyword || router?.query?.s
+  let handleTextColor = false
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (currentSearch && !handleTextColor) {
+        const container = document.getElementById('container')
+        if (container && container.innerHTML) {
+          const re = new RegExp(`${currentSearch}`, 'gim')
+          container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`)
+          handleTextColor = true
+        }
+      }
+    },
+    100)
+  })
+  return <LayoutBase {...props} currentSearch={currentSearch}>
+    <div className='m-3'>
+      <SearchInput {...props}/>
+    </div>
+    <div id='container'>
+      <BlogPostListPage {...props}/>
+    </div>
+  </LayoutBase>
+}
diff --git a/themes/Hexo/LayoutSlug.js b/themes/hexo/LayoutSlug.js
similarity index 100%
rename from themes/Hexo/LayoutSlug.js
rename to themes/hexo/LayoutSlug.js
diff --git a/themes/Hexo/LayoutTag.js b/themes/hexo/LayoutTag.js
similarity index 100%
rename from themes/Hexo/LayoutTag.js
rename to themes/hexo/LayoutTag.js
diff --git a/themes/Hexo/LayoutTagIndex.js b/themes/hexo/LayoutTagIndex.js
similarity index 100%
rename from themes/Hexo/LayoutTagIndex.js
rename to themes/hexo/LayoutTagIndex.js
diff --git a/themes/Hexo/components/ArticleDetail.js b/themes/hexo/components/ArticleDetail.js
similarity index 100%
rename from themes/Hexo/components/ArticleDetail.js
rename to themes/hexo/components/ArticleDetail.js
diff --git a/themes/Hexo/components/BlogPostArchive.js b/themes/hexo/components/BlogPostArchive.js
similarity index 100%
rename from themes/Hexo/components/BlogPostArchive.js
rename to themes/hexo/components/BlogPostArchive.js
diff --git a/themes/Hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js
similarity index 98%
rename from themes/Hexo/components/BlogPostCard.js
rename to themes/hexo/components/BlogPostCard.js
index e0672bf1..1937a355 100644
--- a/themes/Hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -14,7 +14,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
       <div className='lg:p-8 p-4 flex flex-col w-full'>
         <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-          <a className={`cursor-pointer hover:underline text-3xl font-sans ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
+          <a className={`cursor-pointer hover:underline text-2xl font-sans ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
             {post.title}
           </a>
         </Link>
diff --git a/themes/Hexo/components/BlogPostListEmpty.js b/themes/hexo/components/BlogPostListEmpty.js
similarity index 100%
rename from themes/Hexo/components/BlogPostListEmpty.js
rename to themes/hexo/components/BlogPostListEmpty.js
diff --git a/themes/Hexo/components/BlogPostListPage.js b/themes/hexo/components/BlogPostListPage.js
similarity index 100%
rename from themes/Hexo/components/BlogPostListPage.js
rename to themes/hexo/components/BlogPostListPage.js
diff --git a/themes/Hexo/components/BlogPostListScroll.js b/themes/hexo/components/BlogPostListScroll.js
similarity index 100%
rename from themes/Hexo/components/BlogPostListScroll.js
rename to themes/hexo/components/BlogPostListScroll.js
diff --git a/themes/Hexo/components/Card.js b/themes/hexo/components/Card.js
similarity index 100%
rename from themes/Hexo/components/Card.js
rename to themes/hexo/components/Card.js
diff --git a/themes/Hexo/components/Catalog.js b/themes/hexo/components/Catalog.js
similarity index 100%
rename from themes/Hexo/components/Catalog.js
rename to themes/hexo/components/Catalog.js
diff --git a/themes/Hexo/components/CategoryGroup.js b/themes/hexo/components/CategoryGroup.js
similarity index 100%
rename from themes/Hexo/components/CategoryGroup.js
rename to themes/hexo/components/CategoryGroup.js
diff --git a/themes/Hexo/components/Collapse.js b/themes/hexo/components/Collapse.js
similarity index 100%
rename from themes/Hexo/components/Collapse.js
rename to themes/hexo/components/Collapse.js
diff --git a/themes/Hexo/components/FloatDarkModeButton.js b/themes/hexo/components/FloatDarkModeButton.js
similarity index 100%
rename from themes/Hexo/components/FloatDarkModeButton.js
rename to themes/hexo/components/FloatDarkModeButton.js
diff --git a/themes/Hexo/components/Footer.js b/themes/hexo/components/Footer.js
similarity index 100%
rename from themes/Hexo/components/Footer.js
rename to themes/hexo/components/Footer.js
diff --git a/themes/Hexo/components/Header.js b/themes/hexo/components/Header.js
similarity index 97%
rename from themes/Hexo/components/Header.js
rename to themes/hexo/components/Header.js
index 25c06f1c..5a335ddb 100644
--- a/themes/Hexo/components/Header.js
+++ b/themes/hexo/components/Header.js
@@ -51,7 +51,7 @@ export default function Header () {
     const scrollS = window.scrollY
     const nav = document.querySelector('#sticky-nav')
 
-    if (scrollS < 300) {
+    if (scrollS < 500) {
       nav && nav.classList.replace('bg-white', 'bg-none')
       nav && nav.classList.replace('text-black', 'text-white')
     } else {
@@ -59,6 +59,7 @@ export default function Header () {
       nav && nav.classList.replace('text-white', 'text-black')
     }
 
+    // 自动滚动
     if ((scrollS > windowTop) & (scrollS < window.innerHeight) && !autoScroll
     ) {
       autoScroll = true
@@ -98,7 +99,7 @@ export default function Header () {
   return (
     <header
       id="header"
-      className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black"
+      className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white"
       style={{
         backgroundImage:
           `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${CONFIG_HEXO.HOME_BANNER_IMAGE}")`
diff --git a/themes/Hexo/components/HeaderArticle.js b/themes/hexo/components/HeaderArticle.js
similarity index 100%
rename from themes/Hexo/components/HeaderArticle.js
rename to themes/hexo/components/HeaderArticle.js
diff --git a/themes/Hexo/components/InfoCard.js b/themes/hexo/components/InfoCard.js
similarity index 92%
rename from themes/Hexo/components/InfoCard.js
rename to themes/hexo/components/InfoCard.js
index 6836ad9f..441c6467 100644
--- a/themes/Hexo/components/InfoCard.js
+++ b/themes/hexo/components/InfoCard.js
@@ -5,8 +5,9 @@ import Card from './Card'
 import SocialButton from './SocialButton'
 import MenuGroupCard from './MenuGroupCard'
 export function InfoCard (props) {
+  const { className } = props
   const router = useRouter()
-  return <Card>
+  return <Card className={className}>
     <div
       className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 transform duration-200 cursor-pointer'
       onClick={() => {
diff --git a/themes/Hexo/components/JumpToCommentButton.js b/themes/hexo/components/JumpToCommentButton.js
similarity index 100%
rename from themes/Hexo/components/JumpToCommentButton.js
rename to themes/hexo/components/JumpToCommentButton.js
diff --git a/themes/Hexo/components/JumpToTopButton.js b/themes/hexo/components/JumpToTopButton.js
similarity index 100%
rename from themes/Hexo/components/JumpToTopButton.js
rename to themes/hexo/components/JumpToTopButton.js
diff --git a/themes/Hexo/components/LatestPostsGroup.js b/themes/hexo/components/LatestPostsGroup.js
similarity index 100%
rename from themes/Hexo/components/LatestPostsGroup.js
rename to themes/hexo/components/LatestPostsGroup.js
diff --git a/themes/Hexo/components/Logo.js b/themes/hexo/components/Logo.js
similarity index 100%
rename from themes/Hexo/components/Logo.js
rename to themes/hexo/components/Logo.js
diff --git a/themes/Hexo/components/MenuButtonGroupTop.js b/themes/hexo/components/MenuButtonGroupTop.js
similarity index 61%
rename from themes/Hexo/components/MenuButtonGroupTop.js
rename to themes/hexo/components/MenuButtonGroupTop.js
index 2f1c466f..71bd7b8e 100644
--- a/themes/Hexo/components/MenuButtonGroupTop.js
+++ b/themes/hexo/components/MenuButtonGroupTop.js
@@ -8,6 +8,7 @@ const MenuButtonGroupTop = (props) => {
   const { locale } = useGlobal()
 
   let links = [
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
     { icon: 'fas fa-archive', name: locale.COMMON.ARTICLE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE },
     { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
     { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG }
@@ -18,20 +19,20 @@ const MenuButtonGroupTop = (props) => {
   }
 
   return <nav id='nav' className='leading-8 flex justify-center font-sans w-full'>
-      {links.map(link => {
-        if (link.show) {
-          return <Link key={`${link.to}`} title={link.to} href={link.to} >
+    {links.map(link => {
+      if (link.show) {
+        return <Link key={`${link.to}`} title={link.to} href={link.to} >
           <a className={'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'} >
-              <div className='w-full flex dark:text-white text-sm items-center justify-center hover:scale-105 duration-200 transform'>
-                <i className={`${link.icon} mr-1`}/>
-                <div className='text-center'>{link.name}</div>
-              </div>
-            </a>
-          </Link>
-        } else {
-          return null
-        }
-      })}
-    </nav>
+            <div className='w-full flex text-sm items-center justify-center hover:scale-105 transform'>
+              <i className={`${link.icon} mr-1`}/>
+              <div className='text-center'>{link.name}</div>
+            </div>
+          </a>
+        </Link>
+      } else {
+        return null
+      }
+    })}
+  </nav>
 }
 export default MenuButtonGroupTop
diff --git a/themes/Hexo/components/MenuGroupCard.js b/themes/hexo/components/MenuGroupCard.js
similarity index 100%
rename from themes/Hexo/components/MenuGroupCard.js
rename to themes/hexo/components/MenuGroupCard.js
diff --git a/themes/Hexo/components/MenuList.js b/themes/hexo/components/MenuList.js
similarity index 94%
rename from themes/Hexo/components/MenuList.js
rename to themes/hexo/components/MenuList.js
index 905a03fd..10439eb3 100644
--- a/themes/Hexo/components/MenuList.js
+++ b/themes/hexo/components/MenuList.js
@@ -15,7 +15,7 @@ const MenuList = (props) => {
     { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
     { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG },
     { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
-    { icon: 'fas fa-user', name: locale.NAV.ABOUT, to: '/about', show: CONFIG_HEXO.MENU_ABOUT }
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH }
   ]
   if (customNav) {
     links = links.concat(customNav)
diff --git a/themes/Hexo/components/PaginationNumber.js b/themes/hexo/components/PaginationNumber.js
similarity index 100%
rename from themes/Hexo/components/PaginationNumber.js
rename to themes/hexo/components/PaginationNumber.js
diff --git a/themes/Hexo/components/Progress.js b/themes/hexo/components/Progress.js
similarity index 100%
rename from themes/Hexo/components/Progress.js
rename to themes/hexo/components/Progress.js
diff --git a/themes/Hexo/components/SearchDrawer.js b/themes/hexo/components/SearchDrawer.js
similarity index 98%
rename from themes/Hexo/components/SearchDrawer.js
rename to themes/hexo/components/SearchDrawer.js
index 3d107e0f..c7ec88a7 100644
--- a/themes/Hexo/components/SearchDrawer.js
+++ b/themes/hexo/components/SearchDrawer.js
@@ -20,7 +20,7 @@ const SearchDrawer = ({ cRef, slot }) => {
   })
   return (
     <div id='search-drawer-wrapper' ref={searchDrawer} className='hidden'>
-      <div className='flex-col fixed px-5 w-full left-0 top-14 z-50 justify-center'>
+      <div className='flex-col fixed px-5 w-full left-0 top-14 z-40 justify-center'>
           <div className='md:max-w-3xl w-full mx-auto animate__animated animate__faster animate__fadeIn'>
             <SearchInput cRef={searchInputRef} />
             {slot}
diff --git a/themes/Hexo/components/SearchInput.js b/themes/hexo/components/SearchInput.js
similarity index 73%
rename from themes/Hexo/components/SearchInput.js
rename to themes/hexo/components/SearchInput.js
index 31074800..438920f7 100644
--- a/themes/Hexo/components/SearchInput.js
+++ b/themes/hexo/components/SearchInput.js
@@ -1,8 +1,9 @@
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
+let lock = false
 
-const SearchInput = ({ currentTag, currentSearch, cRef }) => {
-  const [searchKey, setSearchKey] = useState(currentSearch || '')
+const SearchInput = (props) => {
+  const { currentSearch, cRef, className } = props
   const [onLoading, setLoadingState] = useState(false)
   const router = useRouter()
   const searchInputRef = useRef()
@@ -13,12 +14,12 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
       }
     }
   })
-  const handleSearch = (key) => {
+
+  const handleSearch = () => {
+    const key = searchInputRef.current.value
     if (key && key !== '') {
       setLoadingState(true)
-      router.push({ pathname: '/search', query: { s: key } }).then(r => {
-        setLoadingState(false)
-      })
+      location.href = '/search/' + key
     } else {
       router.push({ pathname: '/' }).then(r => {
       })
@@ -33,12 +34,19 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
   }
   const cleanSearch = () => {
     searchInputRef.current.value = ''
-    setSearchKey('')
   }
-  let lock = false
+
+  const [showClean, setShowClean] = useState(false)
   const updateSearchKey = (val) => {
-    if (!lock) {
-      setSearchKey(val)
+    if (lock) {
+      return
+    }
+    searchInputRef.current.value = val
+
+    if (val) {
+      setShowClean(true)
+    } else {
+      setShowClean(false)
     }
   }
   function lockSearchInput () {
@@ -48,8 +56,9 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
   function unLockSearchInput () {
     lock = false
   }
-  return <div className='flex'>
-    <input
+
+  return <div className={'flex w-full bg-gray-100 ' + className}>
+     <input
       ref={searchInputRef}
       type='text'
       className={'w-full rounded-lg text-sm pl-5 transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'}
@@ -61,12 +70,12 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
       defaultValue={currentSearch}
     />
 
-    <div className='-ml-8 cursor-pointer  float-right items-center justify-center py-2'
-      onClick={() => { handleSearch(searchKey) }}>
+     <div className='-ml-8 cursor-pointer  float-right items-center justify-center py-2'
+      onClick={handleSearch}>
         <i className={`hover:text-black transform duration-200 text-gray-500 dark:text-gray-200 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} />
-    </div>
+     </div>
 
-    {(searchKey && searchKey.length &&
+     {(showClean &&
       <div className='-ml-12 cursor-pointer float-right items-center justify-center py-2'>
         <i className='hover:text-black transform duration-200 text-gray-400 dark:text-gray-300 cursor-pointer fas fa-times' onClick={cleanSearch} />
       </div>
diff --git a/themes/Hexo/components/SideRight.js b/themes/hexo/components/SideRight.js
similarity index 97%
rename from themes/Hexo/components/SideRight.js
rename to themes/hexo/components/SideRight.js
index ad7ba329..0ff07cd6 100644
--- a/themes/Hexo/components/SideRight.js
+++ b/themes/hexo/components/SideRight.js
@@ -17,8 +17,9 @@ export default function SideRight (props) {
     showCategory,
     showTag
   } = props
+
   return (
-    <div className='w-96 space-y-4 hidden lg:block'>
+    <div className={'w-80 space-y-4 hidden lg:block'}>
       <InfoCard {...props}/>
       <Card>
         <div className='ml-2 mb-3 font-sans'>
diff --git a/themes/Hexo/components/SocialButton.js b/themes/hexo/components/SocialButton.js
similarity index 100%
rename from themes/Hexo/components/SocialButton.js
rename to themes/hexo/components/SocialButton.js
diff --git a/themes/Hexo/components/TagGroups.js b/themes/hexo/components/TagGroups.js
similarity index 100%
rename from themes/Hexo/components/TagGroups.js
rename to themes/hexo/components/TagGroups.js
diff --git a/themes/Hexo/components/TagItemMini.js b/themes/hexo/components/TagItemMini.js
similarity index 100%
rename from themes/Hexo/components/TagItemMini.js
rename to themes/hexo/components/TagItemMini.js
diff --git a/themes/Hexo/components/TocDrawer.js b/themes/hexo/components/TocDrawer.js
similarity index 100%
rename from themes/Hexo/components/TocDrawer.js
rename to themes/hexo/components/TocDrawer.js
diff --git a/themes/Hexo/components/TocDrawerButton.js b/themes/hexo/components/TocDrawerButton.js
similarity index 100%
rename from themes/Hexo/components/TocDrawerButton.js
rename to themes/hexo/components/TocDrawerButton.js
diff --git a/themes/Hexo/components/TopNav.js b/themes/hexo/components/TopNav.js
similarity index 97%
rename from themes/Hexo/components/TopNav.js
rename to themes/hexo/components/TopNav.js
index a9ad8aad..a62c927c 100644
--- a/themes/Hexo/components/TopNav.js
+++ b/themes/hexo/components/TopNav.js
@@ -98,7 +98,7 @@ const TopNav = (props) => {
         </div>
 
         {/* 右侧功能 */}
-        <div className='mr-1 justify-end items-center space-x-4 font-serif dark:text-gray-200'>
+        <div className='mr-1 justify-end items-center space-x-4 font-serif'>
           <div className='hidden lg:flex'> <MenuButtonGroupTop {...props}/></div>
           <div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
           { isOpen ? <i className='fas fa-times'/> : <i className='fas fa-bars'/> }
@@ -107,12 +107,11 @@ const TopNav = (props) => {
       </div>
 
       <Collapse isOpen={isOpen} className='shadow-xl'>
-        <div className='bg-white pt-1 py-2 px-5 flex lg:hidden'>
+        <div className='bg-white pt-1 py-2 px-5 lg:hidden'>
           <MenuList {...props}/>
         </div>
       </Collapse>
     </div>
-
   </div>)
 }
 
diff --git a/themes/Hexo/config_hexo.js b/themes/hexo/config_hexo.js
similarity index 100%
rename from themes/Hexo/config_hexo.js
rename to themes/hexo/config_hexo.js
diff --git a/themes/hexo/index.js b/themes/hexo/index.js
new file mode 100644
index 00000000..8528d5da
--- /dev/null
+++ b/themes/hexo/index.js
@@ -0,0 +1,25 @@
+import CONFIG_HEXO from './config_hexo'
+import { LayoutIndex } from './LayoutIndex'
+import { LayoutSearch } from './LayoutSearch'
+import { LayoutArchive } from './LayoutArchive'
+import { LayoutSlug } from './LayoutSlug'
+import { Layout404 } from './Layout404'
+import { LayoutCategory } from './LayoutCategory'
+import { LayoutCategoryIndex } from './LayoutCategoryIndex'
+import { LayoutPage } from './LayoutPage'
+import { LayoutTag } from './LayoutTag'
+import { LayoutTagIndex } from './LayoutTagIndex'
+
+export {
+  CONFIG_HEXO as THEME_CONFIG,
+  LayoutIndex,
+  LayoutSearch,
+  LayoutArchive,
+  LayoutSlug,
+  Layout404,
+  LayoutCategory,
+  LayoutCategoryIndex,
+  LayoutPage,
+  LayoutTag,
+  LayoutTagIndex
+}
diff --git a/themes/index.js b/themes/index.js
index 5acc65dd..286446ca 100644
--- a/themes/index.js
+++ b/themes/index.js
@@ -1,9 +1,15 @@
 /**
- * 修改 from 后面的路径，实现主题切换
+ * 切换主题请修改 blog.config.js 中的 THEME 字段
  */
-
-// export * from './Empty' //  空主题
-// export * from './NEXT'
-// export * from './Fukasawa'
-export * from './Hexo'
-// export * from './Medium'
+import * as next from './next'
+import * as fukasawa from './fukasawa'
+import * as hexo from './hexo'
+import * as medium from './medium'
+import * as empty from './empty'
+export {
+  next,
+  fukasawa,
+  hexo,
+  medium,
+  empty
+}
diff --git a/themes/Medium/Layout404.js b/themes/medium/Layout404.js
similarity index 100%
rename from themes/Medium/Layout404.js
rename to themes/medium/Layout404.js
diff --git a/themes/Medium/LayoutArchive.js b/themes/medium/LayoutArchive.js
similarity index 100%
rename from themes/Medium/LayoutArchive.js
rename to themes/medium/LayoutArchive.js
diff --git a/themes/Medium/LayoutBase.js b/themes/medium/LayoutBase.js
similarity index 100%
rename from themes/Medium/LayoutBase.js
rename to themes/medium/LayoutBase.js
diff --git a/themes/Medium/LayoutCategory.js b/themes/medium/LayoutCategory.js
similarity index 100%
rename from themes/Medium/LayoutCategory.js
rename to themes/medium/LayoutCategory.js
diff --git a/themes/Medium/LayoutCategoryIndex.js b/themes/medium/LayoutCategoryIndex.js
similarity index 100%
rename from themes/Medium/LayoutCategoryIndex.js
rename to themes/medium/LayoutCategoryIndex.js
diff --git a/themes/Medium/LayoutIndex.js b/themes/medium/LayoutIndex.js
similarity index 100%
rename from themes/Medium/LayoutIndex.js
rename to themes/medium/LayoutIndex.js
diff --git a/themes/Medium/LayoutPage.js b/themes/medium/LayoutPage.js
similarity index 100%
rename from themes/Medium/LayoutPage.js
rename to themes/medium/LayoutPage.js
diff --git a/themes/Medium/LayoutSearch.js b/themes/medium/LayoutSearch.js
similarity index 100%
rename from themes/Medium/LayoutSearch.js
rename to themes/medium/LayoutSearch.js
diff --git a/themes/Medium/LayoutSlug.js b/themes/medium/LayoutSlug.js
similarity index 100%
rename from themes/Medium/LayoutSlug.js
rename to themes/medium/LayoutSlug.js
diff --git a/themes/Medium/LayoutTag.js b/themes/medium/LayoutTag.js
similarity index 100%
rename from themes/Medium/LayoutTag.js
rename to themes/medium/LayoutTag.js
diff --git a/themes/Medium/LayoutTagIndex.js b/themes/medium/LayoutTagIndex.js
similarity index 100%
rename from themes/Medium/LayoutTagIndex.js
rename to themes/medium/LayoutTagIndex.js
diff --git a/themes/Medium/components/ArticleAround.js b/themes/medium/components/ArticleAround.js
similarity index 100%
rename from themes/Medium/components/ArticleAround.js
rename to themes/medium/components/ArticleAround.js
diff --git a/themes/Medium/components/BlogPostCard.js b/themes/medium/components/BlogPostCard.js
similarity index 94%
rename from themes/Medium/components/BlogPostCard.js
rename to themes/medium/components/BlogPostCard.js
index c3e2a1df..9932078d 100644
--- a/themes/Medium/components/BlogPostCard.js
+++ b/themes/medium/components/BlogPostCard.js
@@ -15,7 +15,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
         <div className='lg:p-8 p-4 flex flex-col w-full'>
           <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-            <a className={'cursor-pointer font-bold font-sans hover:underline text-3xl flex justify-start leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'}>
+            <a className={'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'}>
               {post.title}
             </a>
           </Link>
diff --git a/themes/Medium/components/BlogPostListEmpty.js b/themes/medium/components/BlogPostListEmpty.js
similarity index 100%
rename from themes/Medium/components/BlogPostListEmpty.js
rename to themes/medium/components/BlogPostListEmpty.js
diff --git a/themes/Medium/components/BlogPostListPage.js b/themes/medium/components/BlogPostListPage.js
similarity index 100%
rename from themes/Medium/components/BlogPostListPage.js
rename to themes/medium/components/BlogPostListPage.js
diff --git a/themes/Medium/components/BlogPostListScroll.js b/themes/medium/components/BlogPostListScroll.js
similarity index 100%
rename from themes/Medium/components/BlogPostListScroll.js
rename to themes/medium/components/BlogPostListScroll.js
diff --git a/themes/Medium/components/BottomMenuBar.js b/themes/medium/components/BottomMenuBar.js
similarity index 91%
rename from themes/Medium/components/BottomMenuBar.js
rename to themes/medium/components/BottomMenuBar.js
index e56b2601..8678afa7 100644
--- a/themes/Medium/components/BottomMenuBar.js
+++ b/themes/medium/components/BottomMenuBar.js
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import React from 'react'
-import JumpToTopButton from '@/themes/Medium/components/JumpToTopButton'
+import JumpToTopButton from './JumpToTopButton'
 
 export default function BottomMenuBar ({ className }) {
   return (
diff --git a/themes/Medium/components/Card.js b/themes/medium/components/Card.js
similarity index 100%
rename from themes/Medium/components/Card.js
rename to themes/medium/components/Card.js
diff --git a/themes/Medium/components/Catalog.js b/themes/medium/components/Catalog.js
similarity index 100%
rename from themes/Medium/components/Catalog.js
rename to themes/medium/components/Catalog.js
diff --git a/themes/Medium/components/CategoryGroup.js b/themes/medium/components/CategoryGroup.js
similarity index 100%
rename from themes/Medium/components/CategoryGroup.js
rename to themes/medium/components/CategoryGroup.js
diff --git a/themes/Medium/components/CategoryItem.js b/themes/medium/components/CategoryItem.js
similarity index 100%
rename from themes/Medium/components/CategoryItem.js
rename to themes/medium/components/CategoryItem.js
diff --git a/themes/Medium/components/Footer.js b/themes/medium/components/Footer.js
similarity index 100%
rename from themes/Medium/components/Footer.js
rename to themes/medium/components/Footer.js
diff --git a/themes/Medium/components/InfoCard.js b/themes/medium/components/InfoCard.js
similarity index 100%
rename from themes/Medium/components/InfoCard.js
rename to themes/medium/components/InfoCard.js
diff --git a/themes/Medium/components/JumpToTopButton.js b/themes/medium/components/JumpToTopButton.js
similarity index 100%
rename from themes/Medium/components/JumpToTopButton.js
rename to themes/medium/components/JumpToTopButton.js
diff --git a/themes/Medium/components/LeftMenuBar.js b/themes/medium/components/LeftMenuBar.js
similarity index 100%
rename from themes/Medium/components/LeftMenuBar.js
rename to themes/medium/components/LeftMenuBar.js
diff --git a/themes/Medium/components/LogoBar.js b/themes/medium/components/LogoBar.js
similarity index 50%
rename from themes/Medium/components/LogoBar.js
rename to themes/medium/components/LogoBar.js
index 869129c9..9bb3aa30 100644
--- a/themes/Medium/components/LogoBar.js
+++ b/themes/medium/components/LogoBar.js
@@ -2,13 +2,9 @@ import BLOG from '@/blog.config'
 import Link from 'next/link'
 
 export default function LogoBar () {
-  return <div id='top-wrapper' className='w-full flex justify-center font-sans'>
-    <div className='flex mx-auto w-full  justify-between '>
-      <div className='space-x-3 flex items-center'>
+  return <div id='top-wrapper' className='w-full flex items-center font-sans'>
         <Link href='/'>
           <a className='text-2xl dark:text-gray-200'>{BLOG.TITLE}</a>
         </Link>
-      </div>
-    </div>
   </div>
 }
diff --git a/themes/Medium/components/PaginationSimple.js b/themes/medium/components/PaginationSimple.js
similarity index 97%
rename from themes/Medium/components/PaginationSimple.js
rename to themes/medium/components/PaginationSimple.js
index 5f4698ac..fcf06ba2 100644
--- a/themes/Medium/components/PaginationSimple.js
+++ b/themes/medium/components/PaginationSimple.js
@@ -14,7 +14,7 @@ const PaginationSimple = ({ page, totalPage }) => {
   const { locale } = useGlobal()
   const router = useRouter()
   const currentPage = +page
-  const showNext = currentPage <= totalPage
+  const showNext = currentPage < totalPage
   return (
     <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
      <Link
diff --git a/themes/Medium/components/Progress.js b/themes/medium/components/Progress.js
similarity index 100%
rename from themes/Medium/components/Progress.js
rename to themes/medium/components/Progress.js
diff --git a/themes/Medium/components/RevolverMaps.js b/themes/medium/components/RevolverMaps.js
similarity index 100%
rename from themes/Medium/components/RevolverMaps.js
rename to themes/medium/components/RevolverMaps.js
diff --git a/themes/Medium/components/SearchInput.js b/themes/medium/components/SearchInput.js
similarity index 100%
rename from themes/Medium/components/SearchInput.js
rename to themes/medium/components/SearchInput.js
diff --git a/themes/Medium/components/SocialButton.js b/themes/medium/components/SocialButton.js
similarity index 100%
rename from themes/Medium/components/SocialButton.js
rename to themes/medium/components/SocialButton.js
diff --git a/themes/Medium/components/TagGroups.js b/themes/medium/components/TagGroups.js
similarity index 100%
rename from themes/Medium/components/TagGroups.js
rename to themes/medium/components/TagGroups.js
diff --git a/themes/Medium/components/TagItemMini.js b/themes/medium/components/TagItemMini.js
similarity index 100%
rename from themes/Medium/components/TagItemMini.js
rename to themes/medium/components/TagItemMini.js
diff --git a/themes/Medium/components/TopNavBar.js b/themes/medium/components/TopNavBar.js
similarity index 85%
rename from themes/Medium/components/TopNavBar.js
rename to themes/medium/components/TopNavBar.js
index fcbb84fc..1d31d251 100644
--- a/themes/Medium/components/TopNavBar.js
+++ b/themes/medium/components/TopNavBar.js
@@ -1,6 +1,6 @@
-import LogoBar from '@/themes/Medium/components/LogoBar'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import LogoBar from './LogoBar'
 
 /**
  * 顶部导航栏 + 菜单
@@ -11,7 +11,7 @@ export default function TopNavBar (props) {
   const { className, customNav } = props
   const router = useRouter()
 
-  return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-50 ' + className}>
+  return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
     <div className='flex w-full h-12 shadow bg-white dark:bg-gray-900 px-5 items-between'>
       <LogoBar />
 
@@ -21,11 +21,11 @@ export default function TopNavBar (props) {
           if (link.show) {
             const selected = (router.pathname === link.to) || (router.asPath === link.to)
             return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
-            <a className={'px-5 duration-300 text-base justify-between dark:text-gray-300 hover:underline cursor-pointer flex flex-nowrap items-center ' +
+            <a className={'px-2 duration-300 text-base justify-between dark:text-gray-300 hover:underline cursor-pointer flex flex-nowrap items-center ' +
                 (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')} >
                 <div className='items-center justify-center flex '>
                   <i className={link.icon} />
-                  <div className='ml-4 whitespace-nowrap'>{link.name}</div>
+                  <div className='ml-2 whitespace-nowrap'>{link.name}</div>
                 </div>
                 {link.slot}
               </a>
diff --git a/themes/Medium/config_medium.js b/themes/medium/config_medium.js
similarity index 100%
rename from themes/Medium/config_medium.js
rename to themes/medium/config_medium.js
diff --git a/themes/medium/index.js b/themes/medium/index.js
new file mode 100644
index 00000000..81961c58
--- /dev/null
+++ b/themes/medium/index.js
@@ -0,0 +1,25 @@
+import CONFIG_MEDIUM from './config_medium'
+import { LayoutIndex } from './LayoutIndex'
+import { LayoutSearch } from './LayoutSearch'
+import { LayoutArchive } from './LayoutArchive'
+import { LayoutSlug } from './LayoutSlug'
+import { Layout404 } from './Layout404'
+import { LayoutCategory } from './LayoutCategory'
+import { LayoutCategoryIndex } from './LayoutCategoryIndex'
+import { LayoutPage } from './LayoutPage'
+import { LayoutTag } from './LayoutTag'
+import { LayoutTagIndex } from './LayoutTagIndex'
+
+export {
+  CONFIG_MEDIUM as THEME_CONFIG,
+  LayoutIndex,
+  LayoutSearch,
+  LayoutArchive,
+  LayoutSlug,
+  Layout404,
+  LayoutCategory,
+  LayoutCategoryIndex,
+  LayoutPage,
+  LayoutTag,
+  LayoutTagIndex
+}
diff --git a/themes/NEXT/Layout404.js b/themes/next/Layout404.js
similarity index 100%
rename from themes/NEXT/Layout404.js
rename to themes/next/Layout404.js
diff --git a/themes/NEXT/LayoutArchive.js b/themes/next/LayoutArchive.js
similarity index 100%
rename from themes/NEXT/LayoutArchive.js
rename to themes/next/LayoutArchive.js
diff --git a/themes/NEXT/LayoutBase.js b/themes/next/LayoutBase.js
similarity index 100%
rename from themes/NEXT/LayoutBase.js
rename to themes/next/LayoutBase.js
diff --git a/themes/NEXT/LayoutCategory.js b/themes/next/LayoutCategory.js
similarity index 100%
rename from themes/NEXT/LayoutCategory.js
rename to themes/next/LayoutCategory.js
diff --git a/themes/NEXT/LayoutCategoryIndex.js b/themes/next/LayoutCategoryIndex.js
similarity index 100%
rename from themes/NEXT/LayoutCategoryIndex.js
rename to themes/next/LayoutCategoryIndex.js
diff --git a/themes/NEXT/LayoutIndex.js b/themes/next/LayoutIndex.js
similarity index 100%
rename from themes/NEXT/LayoutIndex.js
rename to themes/next/LayoutIndex.js
diff --git a/themes/NEXT/LayoutPage.js b/themes/next/LayoutPage.js
similarity index 100%
rename from themes/NEXT/LayoutPage.js
rename to themes/next/LayoutPage.js
diff --git a/themes/NEXT/LayoutSearch.js b/themes/next/LayoutSearch.js
similarity index 100%
rename from themes/NEXT/LayoutSearch.js
rename to themes/next/LayoutSearch.js
diff --git a/themes/NEXT/LayoutSlug.js b/themes/next/LayoutSlug.js
similarity index 100%
rename from themes/NEXT/LayoutSlug.js
rename to themes/next/LayoutSlug.js
diff --git a/themes/NEXT/LayoutTag.js b/themes/next/LayoutTag.js
similarity index 100%
rename from themes/NEXT/LayoutTag.js
rename to themes/next/LayoutTag.js
diff --git a/themes/NEXT/LayoutTagIndex.js b/themes/next/LayoutTagIndex.js
similarity index 100%
rename from themes/NEXT/LayoutTagIndex.js
rename to themes/next/LayoutTagIndex.js
diff --git a/themes/NEXT/components/ArticleCopyright.js b/themes/next/components/ArticleCopyright.js
similarity index 100%
rename from themes/NEXT/components/ArticleCopyright.js
rename to themes/next/components/ArticleCopyright.js
diff --git a/themes/NEXT/components/ArticleDetail.js b/themes/next/components/ArticleDetail.js
similarity index 100%
rename from themes/NEXT/components/ArticleDetail.js
rename to themes/next/components/ArticleDetail.js
diff --git a/themes/NEXT/components/BlogAround.js b/themes/next/components/BlogAround.js
similarity index 100%
rename from themes/NEXT/components/BlogAround.js
rename to themes/next/components/BlogAround.js
diff --git a/themes/NEXT/components/BlogPostArchive.js b/themes/next/components/BlogPostArchive.js
similarity index 100%
rename from themes/NEXT/components/BlogPostArchive.js
rename to themes/next/components/BlogPostArchive.js
diff --git a/themes/NEXT/components/BlogPostCard.js b/themes/next/components/BlogPostCard.js
similarity index 95%
rename from themes/NEXT/components/BlogPostCard.js
rename to themes/next/components/BlogPostCard.js
index 2a0d7614..e5f8ad72 100644
--- a/themes/NEXT/components/BlogPostCard.js
+++ b/themes/next/components/BlogPostCard.js
@@ -17,7 +17,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
       <div className='lg:p-8 p-4 flex flex-col w-full'>
         <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-          <a className={`cursor-pointer font-bold hover:underline text-3xl flex ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
+          <a className={`cursor-pointer font-bold hover:underline text-3xl ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
             {post.title}
           </a>
         </Link>
diff --git a/themes/NEXT/components/BlogPostListEmpty.js b/themes/next/components/BlogPostListEmpty.js
similarity index 100%
rename from themes/NEXT/components/BlogPostListEmpty.js
rename to themes/next/components/BlogPostListEmpty.js
diff --git a/themes/NEXT/components/BlogPostListPage.js b/themes/next/components/BlogPostListPage.js
similarity index 100%
rename from themes/NEXT/components/BlogPostListPage.js
rename to themes/next/components/BlogPostListPage.js
diff --git a/themes/NEXT/components/BlogPostListScroll.js b/themes/next/components/BlogPostListScroll.js
similarity index 100%
rename from themes/NEXT/components/BlogPostListScroll.js
rename to themes/next/components/BlogPostListScroll.js
diff --git a/themes/NEXT/components/Card.js b/themes/next/components/Card.js
similarity index 100%
rename from themes/NEXT/components/Card.js
rename to themes/next/components/Card.js
diff --git a/themes/NEXT/components/CategoryGroup.js b/themes/next/components/CategoryGroup.js
similarity index 100%
rename from themes/NEXT/components/CategoryGroup.js
rename to themes/next/components/CategoryGroup.js
diff --git a/themes/NEXT/components/CategoryList.js b/themes/next/components/CategoryList.js
similarity index 100%
rename from themes/NEXT/components/CategoryList.js
rename to themes/next/components/CategoryList.js
diff --git a/themes/NEXT/components/Collapse.js b/themes/next/components/Collapse.js
similarity index 100%
rename from themes/NEXT/components/Collapse.js
rename to themes/next/components/Collapse.js
diff --git a/themes/NEXT/components/ContactButton.js b/themes/next/components/ContactButton.js
similarity index 100%
rename from themes/NEXT/components/ContactButton.js
rename to themes/next/components/ContactButton.js
diff --git a/themes/NEXT/components/DarkModeButton.js b/themes/next/components/DarkModeButton.js
similarity index 100%
rename from themes/NEXT/components/DarkModeButton.js
rename to themes/next/components/DarkModeButton.js
diff --git a/themes/NEXT/components/FloatDarkModeButton.js b/themes/next/components/FloatDarkModeButton.js
similarity index 100%
rename from themes/NEXT/components/FloatDarkModeButton.js
rename to themes/next/components/FloatDarkModeButton.js
diff --git a/themes/NEXT/components/Footer.js b/themes/next/components/Footer.js
similarity index 100%
rename from themes/NEXT/components/Footer.js
rename to themes/next/components/Footer.js
diff --git a/themes/NEXT/components/Header.js b/themes/next/components/Header.js
similarity index 100%
rename from themes/NEXT/components/Header.js
rename to themes/next/components/Header.js
diff --git a/themes/NEXT/components/InfoCard.js b/themes/next/components/InfoCard.js
similarity index 100%
rename from themes/NEXT/components/InfoCard.js
rename to themes/next/components/InfoCard.js
diff --git a/themes/NEXT/components/JumpToBottomButton.js b/themes/next/components/JumpToBottomButton.js
similarity index 100%
rename from themes/NEXT/components/JumpToBottomButton.js
rename to themes/next/components/JumpToBottomButton.js
diff --git a/themes/NEXT/components/JumpToTopButton.js b/themes/next/components/JumpToTopButton.js
similarity index 100%
rename from themes/NEXT/components/JumpToTopButton.js
rename to themes/next/components/JumpToTopButton.js
diff --git a/themes/NEXT/components/LatestPostsGroup.js b/themes/next/components/LatestPostsGroup.js
similarity index 100%
rename from themes/NEXT/components/LatestPostsGroup.js
rename to themes/next/components/LatestPostsGroup.js
diff --git a/themes/NEXT/components/LeftFloatButton.js b/themes/next/components/LeftFloatButton.js
similarity index 100%
rename from themes/NEXT/components/LeftFloatButton.js
rename to themes/next/components/LeftFloatButton.js
diff --git a/themes/NEXT/components/Live2D.js b/themes/next/components/Live2D.js
similarity index 100%
rename from themes/NEXT/components/Live2D.js
rename to themes/next/components/Live2D.js
diff --git a/themes/NEXT/components/Live2DWaifu.js b/themes/next/components/Live2DWaifu.js
similarity index 100%
rename from themes/NEXT/components/Live2DWaifu.js
rename to themes/next/components/Live2DWaifu.js
diff --git a/themes/NEXT/components/LoadingCover.js b/themes/next/components/LoadingCover.js
similarity index 100%
rename from themes/NEXT/components/LoadingCover.js
rename to themes/next/components/LoadingCover.js
diff --git a/themes/NEXT/components/Logo.js b/themes/next/components/Logo.js
similarity index 100%
rename from themes/NEXT/components/Logo.js
rename to themes/next/components/Logo.js
diff --git a/themes/NEXT/components/MenuButtonGroup.js b/themes/next/components/MenuButtonGroup.js
similarity index 100%
rename from themes/NEXT/components/MenuButtonGroup.js
rename to themes/next/components/MenuButtonGroup.js
diff --git a/themes/NEXT/components/PaginationNumber.js b/themes/next/components/PaginationNumber.js
similarity index 100%
rename from themes/NEXT/components/PaginationNumber.js
rename to themes/next/components/PaginationNumber.js
diff --git a/themes/NEXT/components/PaginationSimple.js b/themes/next/components/PaginationSimple.js
similarity index 100%
rename from themes/NEXT/components/PaginationSimple.js
rename to themes/next/components/PaginationSimple.js
diff --git a/themes/NEXT/components/Progress.js b/themes/next/components/Progress.js
similarity index 100%
rename from themes/NEXT/components/Progress.js
rename to themes/next/components/Progress.js
diff --git a/themes/NEXT/components/RecommendPosts.js b/themes/next/components/RecommendPosts.js
similarity index 100%
rename from themes/NEXT/components/RecommendPosts.js
rename to themes/next/components/RecommendPosts.js
diff --git a/themes/NEXT/components/RewardButton.js b/themes/next/components/RewardButton.js
similarity index 100%
rename from themes/NEXT/components/RewardButton.js
rename to themes/next/components/RewardButton.js
diff --git a/themes/NEXT/components/SearchDrawer.js b/themes/next/components/SearchDrawer.js
similarity index 98%
rename from themes/NEXT/components/SearchDrawer.js
rename to themes/next/components/SearchDrawer.js
index 3d107e0f..c7ec88a7 100644
--- a/themes/NEXT/components/SearchDrawer.js
+++ b/themes/next/components/SearchDrawer.js
@@ -20,7 +20,7 @@ const SearchDrawer = ({ cRef, slot }) => {
   })
   return (
     <div id='search-drawer-wrapper' ref={searchDrawer} className='hidden'>
-      <div className='flex-col fixed px-5 w-full left-0 top-14 z-50 justify-center'>
+      <div className='flex-col fixed px-5 w-full left-0 top-14 z-40 justify-center'>
           <div className='md:max-w-3xl w-full mx-auto animate__animated animate__faster animate__fadeIn'>
             <SearchInput cRef={searchInputRef} />
             {slot}
diff --git a/themes/NEXT/components/SearchInput.js b/themes/next/components/SearchInput.js
similarity index 100%
rename from themes/NEXT/components/SearchInput.js
rename to themes/next/components/SearchInput.js
diff --git a/themes/NEXT/components/ShareBar.js b/themes/next/components/ShareBar.js
similarity index 98%
rename from themes/NEXT/components/ShareBar.js
rename to themes/next/components/ShareBar.js
index cfbf13b1..c2856312 100644
--- a/themes/NEXT/components/ShareBar.js
+++ b/themes/next/components/ShareBar.js
@@ -58,7 +58,7 @@ const ShareBar = ({ post }) => {
         <a className='text-green-600' ref={btnRef} onMouseEnter={openPopover} onMouseLeave={closePopover}>
           <i className='fab fa-weixin'/>
           <div ref={popoverRef} className={(qrCodeShow ? 'animate__animated animate__fadeIn ' : 'hidden') + ' text-center py-2'}>
-            <div className='p-2 bg-white border-0 duration-200 transform block z-50 font-normal shadow-xl mr-10'>
+            <div className='p-2 bg-white border-0 duration-200 transform block z-40 font-normal shadow-xl mr-10'>
               <QRCode value={shareUrl} fgColor='#000000' />
             </div>
             <span className='bg-white text-black font-semibold p-1 mb-0 rounded-t-lg text-sm mx-auto mr-10'>
diff --git a/themes/NEXT/components/ShareButton.js b/themes/next/components/ShareButton.js
similarity index 100%
rename from themes/NEXT/components/ShareButton.js
rename to themes/next/components/ShareButton.js
diff --git a/themes/NEXT/components/SideAreaLeft.js b/themes/next/components/SideAreaLeft.js
similarity index 100%
rename from themes/NEXT/components/SideAreaLeft.js
rename to themes/next/components/SideAreaLeft.js
diff --git a/themes/NEXT/components/SideAreaRight.js b/themes/next/components/SideAreaRight.js
similarity index 100%
rename from themes/NEXT/components/SideAreaRight.js
rename to themes/next/components/SideAreaRight.js
diff --git a/themes/NEXT/components/SideBar.js b/themes/next/components/SideBar.js
similarity index 100%
rename from themes/NEXT/components/SideBar.js
rename to themes/next/components/SideBar.js
diff --git a/themes/NEXT/components/SideBarDrawer.js b/themes/next/components/SideBarDrawer.js
similarity index 98%
rename from themes/NEXT/components/SideBarDrawer.js
rename to themes/next/components/SideBarDrawer.js
index e1ff3d9a..9bc04d48 100644
--- a/themes/NEXT/components/SideBarDrawer.js
+++ b/themes/next/components/SideBarDrawer.js
@@ -48,7 +48,7 @@ const SideBarDrawer = ({ post, cRef, tags, slot, categories, currentCategory })
   }
 
   return <div id='sidebar-wrapper' className='hidden'>
-    <div id='sidebar-drawer' className='-ml-80 bg-white dark:bg-gray-900 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-50'>
+    <div id='sidebar-drawer' className='-ml-80 bg-white dark:bg-gray-900 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-40'>
       <SideBar tags={tags} post={post} slot={slot} categories={categories} currentCategory={currentCategory} />
     </div>
     {/* 背景蒙版 */}
diff --git a/themes/NEXT/components/SocialButton.js b/themes/next/components/SocialButton.js
similarity index 100%
rename from themes/NEXT/components/SocialButton.js
rename to themes/next/components/SocialButton.js
diff --git a/themes/NEXT/components/StickyBar.js b/themes/next/components/StickyBar.js
similarity index 100%
rename from themes/NEXT/components/StickyBar.js
rename to themes/next/components/StickyBar.js
diff --git a/themes/NEXT/components/TagGroups.js b/themes/next/components/TagGroups.js
similarity index 100%
rename from themes/NEXT/components/TagGroups.js
rename to themes/next/components/TagGroups.js
diff --git a/themes/NEXT/components/TagItem.js b/themes/next/components/TagItem.js
similarity index 100%
rename from themes/NEXT/components/TagItem.js
rename to themes/next/components/TagItem.js
diff --git a/themes/NEXT/components/TagItemMini.js b/themes/next/components/TagItemMini.js
similarity index 100%
rename from themes/NEXT/components/TagItemMini.js
rename to themes/next/components/TagItemMini.js
diff --git a/themes/NEXT/components/TagList.js b/themes/next/components/TagList.js
similarity index 100%
rename from themes/NEXT/components/TagList.js
rename to themes/next/components/TagList.js
diff --git a/themes/NEXT/components/Toc.js b/themes/next/components/Toc.js
similarity index 100%
rename from themes/NEXT/components/Toc.js
rename to themes/next/components/Toc.js
diff --git a/themes/NEXT/components/TocDrawer.js b/themes/next/components/TocDrawer.js
similarity index 100%
rename from themes/NEXT/components/TocDrawer.js
rename to themes/next/components/TocDrawer.js
diff --git a/themes/NEXT/components/TocDrawerButton.js b/themes/next/components/TocDrawerButton.js
similarity index 100%
rename from themes/NEXT/components/TocDrawerButton.js
rename to themes/next/components/TocDrawerButton.js
diff --git a/themes/NEXT/components/TopNav.js b/themes/next/components/TopNav.js
similarity index 100%
rename from themes/NEXT/components/TopNav.js
rename to themes/next/components/TopNav.js
diff --git a/themes/NEXT/components/WordCount.js b/themes/next/components/WordCount.js
similarity index 100%
rename from themes/NEXT/components/WordCount.js
rename to themes/next/components/WordCount.js
diff --git a/themes/NEXT/config_next.js b/themes/next/config_next.js
similarity index 100%
rename from themes/NEXT/config_next.js
rename to themes/next/config_next.js
diff --git a/themes/next/index.js b/themes/next/index.js
new file mode 100644
index 00000000..45286719
--- /dev/null
+++ b/themes/next/index.js
@@ -0,0 +1,25 @@
+import CONFIG_NEXT from './config_next'
+import { LayoutIndex } from './LayoutIndex'
+import { LayoutSearch } from './LayoutSearch'
+import { LayoutArchive } from './LayoutArchive'
+import { LayoutSlug } from './LayoutSlug'
+import { Layout404 } from './Layout404'
+import { LayoutCategory } from './LayoutCategory'
+import { LayoutCategoryIndex } from './LayoutCategoryIndex'
+import { LayoutPage } from './LayoutPage'
+import { LayoutTag } from './LayoutTag'
+import { LayoutTagIndex } from './LayoutTagIndex'
+
+export {
+  CONFIG_NEXT as THEME_CONFIG,
+  LayoutIndex,
+  LayoutSearch,
+  LayoutArchive,
+  LayoutSlug,
+  Layout404,
+  LayoutCategory,
+  LayoutCategoryIndex,
+  LayoutPage,
+  LayoutTag,
+  LayoutTagIndex
+}