diff --git a/themes/matery/Layout404.js b/themes/matery/Layout404.js
deleted file mode 100644
index dff7a952..00000000
--- a/themes/matery/Layout404.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import LayoutBase from './LayoutBase'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-
-export const Layout404 = props => {
-  const router = useRouter()
-  useEffect(() => {
-    // 延时3秒如果加载失败就返回首页
-    setTimeout(() => {
-      const article = typeof document !== 'undefined' && document.getElementById('notion-article')
-      if (!article) {
-        router.push('/').then(() => {
-          // console.log('找不到页面', router.asPath)
-        })
-      }
-    }, 3000)
-  })
-  return (
-    <LayoutBase {...props}>
-      <div className="text-black w-full h-screen text-center justify-center content-center items-center flex flex-col">
-        <div className="dark:text-gray-200">
-          <h2 className="inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top">
-            404
-          </h2>
-          <div className="inline-block text-left h-32 leading-10 items-center">
-            <h2 className="m-0 p-0">页面未找到</h2>
-          </div>
-        </div>
-      </div>
-    </LayoutBase>
-  )
-}
-
-export default Layout404
diff --git a/themes/matery/LayoutArchive.js b/themes/matery/LayoutArchive.js
deleted file mode 100644
index 94b40239..00000000
--- a/themes/matery/LayoutArchive.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useEffect } from 'react'
-import BlogPostArchive from './components/BlogPostArchive'
-import Card from './components/Card'
-import HeaderArticle from './components/HeaderArticle'
-import LayoutBase from './LayoutBase'
-
-export const LayoutArchive = (props) => {
-  const { archivePosts } = props
-
-  useEffect(() => {
-    const anchor = window.location.hash
-    if (anchor) {
-      setTimeout(() => {
-        const anchorElement = document.getElementById(anchor.substring(1))
-        if (anchorElement) {
-          anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' })
-        }
-      }, 300)
-    }
-  }, [])
-  return <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
-    <Card className='w-full -mt-32'>
-    <div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
-        {Object.keys(archivePosts).map(archiveTitle => (
-          <BlogPostArchive
-            key={archiveTitle}
-            posts={archivePosts[archiveTitle]}
-            archiveTitle={archiveTitle}
-          />
-        ))}
-      </div>
-    </Card>
-  </LayoutBase>
-}
-
-export default LayoutArchive
diff --git a/themes/matery/LayoutBase.js b/themes/matery/LayoutBase.js
deleted file mode 100644
index 66954859..00000000
--- a/themes/matery/LayoutBase.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import CommonHead from '@/components/CommonHead'
-import { useCallback, useEffect, useState } from 'react'
-
-import Footer from './components/Footer'
-import JumpToTopButton from './components/JumpToTopButton'
-import TopNav from './components/TopNav'
-import Live2D from '@/components/Live2D'
-import LoadingCover from './components/LoadingCover'
-import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
-import FloatDarkModeButton from './components/FloatDarkModeButton'
-import throttle from 'lodash.throttle'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
-import SocialButton from './components/SocialButton'
-import CONFIG_MATERY from './config_matery'
-
-/**
- * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
- * @param props
- * @returns {JSX.Element}
- * @constructor
- */
-const LayoutBase = props => {
-  const { children, headerSlot, meta, siteInfo } = props
-  const [show, switchShow] = useState(false)
-  const { onLoading } = useGlobal()
-
-  const throttleMs = 200
-  const scrollListener = useCallback(throttle(() => {
-    const scrollY = window.pageYOffset
-    const shouldShow = scrollY > 300
-    if (shouldShow !== show) {
-      switchShow(shouldShow)
-    }
-  }, throttleMs))
-
-  useEffect(() => {
-    document.addEventListener('scroll', scrollListener)
-    return () => document.removeEventListener('scroll', scrollListener)
-  }, [])
-
-  if (isBrowser()) {
-    loadExternalResource('/css/theme-matery.css', 'css')
-  }
-
-  return (
-        <div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
-
-            <CommonHead meta={meta} siteInfo={siteInfo} />
-
-            <TopNav {...props} />
-
-            {headerSlot}
-
-            <main id="wrapper" className={`${CONFIG_MATERY.HOME_BANNER_ENABLE ? '' : 'pt-16'} flex-1 w-full py-8 md:px-8 lg:px-24 relative`}>
-                {/* 嵌入区域 */}
-                <div id="container-slot" className={`w-full max-w-6xl ${props?.post && ' lg:max-w-3xl 2xl:max-w-4xl '} mt-6 px-3 mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
-                   {props.containerSlot}
-                </div>
-
-                <div id="container-inner" className="w-full max-w-6xl mx-auto lg:flex lg:space-x-4 justify-center relative z-10">
-                    {onLoading ? <LoadingCover /> : children}
-                </div>
-
-            </main>
-
-            {/* 左下角悬浮 */}
-            <div className="bottom-4 -left-14 fixed justify-end z-40">
-                <Live2D />
-            </div>
-
-            {/* 右下角悬浮 */}
-            <div className="bottom-40 right-2 fixed justify-end space-y-2 z-20">
-                <FloatDarkModeButton />
-                <JumpToTopButton />
-                <SocialButton/>
-                {/* 可扩展的右下角悬浮 */}
-                {props.floatRightBottom}
-            </div>
-
-            <Footer title={siteInfo?.title || BLOG.TITLE} />
-        </div>
-  )
-}
-
-export default LayoutBase
diff --git a/themes/matery/LayoutCategory.js b/themes/matery/LayoutCategory.js
deleted file mode 100644
index d21f8b0b..00000000
--- a/themes/matery/LayoutCategory.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import BlogPostListScroll from './components/BlogPostListScroll'
-import BlogPostListPage from './components/BlogPostListPage'
-import LayoutBase from './LayoutBase'
-import BLOG from '@/blog.config'
-import Link from 'next/link'
-import HeaderArticle from './components/HeaderArticle'
-
-export const LayoutCategory = props => {
-  const { category, categoryOptions } = props
-  return (
-      <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
-
-            <div id='inner-wrapper' className='w-full'>
-
-                <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
-
-                    <div className='flex justify-center flex-wrap'>
-                        {categoryOptions?.map(e => {
-                          const selected = e.name === category
-                          return (
-                              <Link key={e.name} href={`/category/${e.name}`} passHref legacyBehavior>
-                                  <div className='duration-300 text-md whitespace-nowrap dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400' >
-                                      <i className={`mr-4 fas  ${selected ? 'fa-folder-open' : 'fa-folder'}`}/>
-                                      {e.name}({e.count})
-                                  </div>
-                              </Link>
-                          )
-                        })}
-                    </div>
-                </div>
-
-                {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-
-            </div>
-
-        </LayoutBase>
-  )
-}
-
-export default LayoutCategory
diff --git a/themes/matery/LayoutCategoryIndex.js b/themes/matery/LayoutCategoryIndex.js
deleted file mode 100644
index f6fd0023..00000000
--- a/themes/matery/LayoutCategoryIndex.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import Link from 'next/link'
-import HeaderArticle from './components/HeaderArticle'
-import LayoutBase from './LayoutBase'
-
-export const LayoutCategoryIndex = props => {
-  const { categoryOptions } = props
-
-  return (
-      <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
-
-          <div id='inner-wrapper' className='w-full'>
-
-              <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black dark:text-gray-300">
-
-                  <div className='flex justify-center flex-wrap'>
-                      {categoryOptions.map(e => {
-                        return (
-                            <Link key={e.name} href={`/category/${e.name}`} passHref legacyBehavior>
-                                <div className='duration-300 text-md whitespace-nowrap dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400' >
-                                    <i className={'mr-4 fas fa-folder'} />
-                                    {e.name}({e.count})
-                                </div>
-                            </Link>
-                        )
-                      })}
-                  </div>
-              </div>
-
-          </div>
-      </LayoutBase>
-  )
-}
-
-export default LayoutCategoryIndex
diff --git a/themes/matery/LayoutIndex.js b/themes/matery/LayoutIndex.js
deleted file mode 100644
index 6c92d2c4..00000000
--- a/themes/matery/LayoutIndex.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import BLOG from '@/blog.config'
-import BlogPostListPage from './components/BlogPostListPage'
-import BlogPostListScroll from './components/BlogPostListScroll'
-import Header from './components/Header'
-import CONFIG_MATERY from './config_matery'
-import LayoutBase from './LayoutBase'
-import React from 'react'
-import Announcement from './components/Announcement'
-
-export const LayoutIndex = (props) => {
-  return <LayoutBase {...props} containerSlot={ <Announcement {...props}/>} headerSlot={CONFIG_MATERY.HOME_BANNER_ENABLE && <Header {...props} />}>
-    {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-  </LayoutBase>
-}
-
-export default LayoutIndex
diff --git a/themes/matery/LayoutSearch.js b/themes/matery/LayoutSearch.js
deleted file mode 100644
index 0de3ed54..00000000
--- a/themes/matery/LayoutSearch.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { useRouter } from 'next/router'
-import { useEffect, useRef } from 'react'
-import BLOG from '@/blog.config'
-import BlogPostListScroll from './components/BlogPostListScroll'
-import BlogPostListPage from './components/BlogPostListPage'
-import LayoutBase from './LayoutBase'
-import SearchInput from './components/SearchInput'
-import { useGlobal } from '@/lib/global'
-import Mark from 'mark.js'
-import TagItemMini from './components/TagItemMini'
-import Card from './components/Card'
-import Link from 'next/link'
-
-export const LayoutSearch = props => {
-  const { keyword, tagOptions, categoryOptions } = props
-  const { locale } = useGlobal()
-  const router = useRouter()
-  const currentSearch = keyword || router?.query?.s
-  const cRef = useRef(null)
-
-  useEffect(() => {
-    setTimeout(() => {
-      // 自动聚焦到搜索框
-      cRef?.current?.focus()
-      if (currentSearch) {
-        const targets = document.getElementsByClassName('replace')
-        for (const container of targets) {
-          if (container && container.innerHTML) {
-            const re = new RegExp(currentSearch, 'gim')
-            const instance = new Mark(container)
-            instance.markRegExp(re, {
-              element: 'span',
-              className: 'text-red-500 border-b border-dashed'
-            })
-          }
-        }
-      }
-    }, 100)
-  })
-  return (
-      <LayoutBase {...props} currentSearch={currentSearch}>
-          {!currentSearch && <>
-              <div className="my-6 px-2 mt-12 w-full">
-                  <SearchInput cRef={cRef} {...props} />
-                  {/* 分类 */}
-                  <Card className="w-full mt-4">
-                      <div className="dark:text-gray-200 mb-5 mx-3">
-                          <i className="mr-4 fas fa-th" />
-                          {locale.COMMON.CATEGORY}:
-                      </div>
-                      <div id="category-list" className="duration-200 flex flex-wrap mx-8">
-                          {categoryOptions?.map(category => {
-                            return (
-                                <Link
-                                    key={category.name}
-                                    href={`/category/${category.name}`}
-                                    passHref
-                                    legacyBehavior>
-                                    <div
-                                        className={
-                                            ' duration-300 dark:hover:text-white rounded-lg px-5 cursor-pointer py-2 hover:bg-indigo-400 hover:text-white'
-                                        }
-                                    >
-                                        <i className="mr-4 fas fa-folder" />
-                                        {category.name}({category.count})
-                                    </div>
-                                </Link>
-                            )
-                          })}
-                      </div>
-                  </Card>
-                  {/* 标签 */}
-                  <Card className="w-full mt-4">
-                      <div className="dark:text-gray-200 mb-5 ml-4">
-                          <i className="mr-4 fas fa-tag" />
-                          {locale.COMMON.TAGS}:
-                      </div>
-                      <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
-                          {tagOptions?.map(tag => {
-                            return (
-                                  <div key={tag.name} className="p-2">
-                                      <TagItemMini key={tag.name} tag={tag} />
-                                  </div>
-                            )
-                          })}
-                      </div>
-                  </Card>
-              </div>
-          </>}
-
-          {currentSearch && <>
-              <div id="posts-wrapper">
-                  {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-              </div>
-          </>}
-
-      </LayoutBase>
-  )
-}
-
-export default LayoutSearch
diff --git a/themes/matery/LayoutSlug.js b/themes/matery/LayoutSlug.js
deleted file mode 100644
index e5a4fc53..00000000
--- a/themes/matery/LayoutSlug.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React, { useCallback, useEffect } from 'react'
-import { ArticleLock } from './components/ArticleLock'
-import HeaderArticle from './components/HeaderArticle'
-import LayoutBase from './LayoutBase'
-import Comment from '@/components/Comment'
-import NotionPage from '@/components/NotionPage'
-import ArticleAdjacent from './components/ArticleAdjacent'
-import ArticleCopyright from './components/ArticleCopyright'
-import { ArticleInfo } from './components/ArticleInfo'
-import Catalog from './components/Catalog'
-import JumpToCommentButton from './components/JumpToCommentButton'
-import throttle from 'lodash.throttle'
-import ShareBar from '@/components/ShareBar'
-import Announcement from './components/Announcement'
-
-export const LayoutSlug = props => {
-  const { post, lock, validPassword } = props
-
-  const [show, switchShow] = React.useState(false)
-  const throttleMs = 200
-
-  const scrollListener = useCallback(throttle(() => {
-    const scrollY = window.pageYOffset
-    const shouldShow = scrollY > 220 && post?.toc?.length > 0
-    if (shouldShow !== show) {
-      switchShow(shouldShow)
-    }
-  }, throttleMs))
-
-  useEffect(() => {
-    document.addEventListener('scroll', scrollListener)
-    return () => document.removeEventListener('scroll', scrollListener)
-  }, [])
-
-  if (!post) {
-    return <LayoutBase
-            headerSlot={<HeaderArticle {...props} />}
-            {...props}
-            showCategory={false}
-            showTag={false}
-        ></LayoutBase>
-  }
-
-  return (<LayoutBase
-        headerSlot={<HeaderArticle {...props} />}
-        {...props}
-        showCategory={false}
-        showTag={false}
-        floatRightBottom={<JumpToCommentButton />}
-    >
-
-        <div id='inner-wrapper' className={'w-full lg:max-w-3xl 2xl:max-w-4xl'} >
-            {/* 文章主体卡片 */}
-            <div className="-mt-32 transition-all duration-300 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
-                {lock && <ArticleLock validPassword={validPassword} />}
-
-                {!lock && <div id="article-wrapper" className="overflow-x-auto md:w-full px-3 ">
-                    {post?.type && post?.type === 'Post' && <>
-                        <div
-                            data-aos="fade-down"
-                            data-aos-duration="100"
-                            data-aos-once="false"
-                            data-aos-anchor-placement="top-center"
-                            className='px-10'>
-                            <ArticleInfo post={post} />
-                        </div>
-                        <hr />
-                    </>}
-
-                    <div className='lg:px-10 subpixel-antialiased'>
-                        <article itemScope >
-                            {/* Notion文章主体 */}
-                            <section className='justify-center mx-auto max-w-2xl lg:max-w-full'>
-                                {post && <NotionPage post={post} />}
-                            </section>
-
-                            {/* 分享 */}
-                            <ShareBar post={post} />
-                            {/* 文章版权说明 */}
-                            {post.type === 'Post' && <ArticleCopyright {...props} />}
-
-                        </article>
-
-                        <hr className='border-dashed' />
-
-                        {/* 评论互动 */}
-                        <div className="overflow-x-auto dark:bg-hexo-black-gray px-3">
-                            <Comment frontMatter={post} />
-                        </div>
-                    </div>
-
-                </div>}
-            </div>
-
-            {/* 底部文章推荐 */}
-            {post.type === 'Post' && <ArticleAdjacent {...props} />}
-
-            <Announcement {...props}/>
-
-            {/* 右侧文章目录 */}
-            {post?.toc?.length > 0 && <div id='toc-wrapper' style={{ zIndex: '-1' }} className='absolute top-0 w-full h-full xl:block hidden lg:max-w-3xl 2xl:max-w-4xl' >
-                <div data-aos-delay="200"
-                    data-aos="fade-down"
-                    data-aos-duration="200"
-                    data-aos-once="true"
-                    data-aos-anchor-placement="top-center"
-                    className='relative h-full'>
-                    <div className='float-right xl:-mr-72 xl:w-72 w-56 -mr-56 h-full mt-40'>
-                        <div className='sticky top-24'>
-                            <Catalog toc={post.toc} />
-                        </div>
-                    </div>
-                </div>
-            </div>}
-
-        </div>
-
-    </LayoutBase>
-  )
-}
-
-export default LayoutSlug
diff --git a/themes/matery/LayoutTag.js b/themes/matery/LayoutTag.js
deleted file mode 100644
index 0de70bbd..00000000
--- a/themes/matery/LayoutTag.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import BLOG from '@/blog.config'
-import BlogPostListScroll from './components/BlogPostListScroll'
-import BlogPostListPage from './components/BlogPostListPage'
-import LayoutBase from './LayoutBase'
-import React from 'react'
-import HeaderArticle from './components/HeaderArticle'
-import { useGlobal } from '@/lib/global'
-import TagItemMiddle from './components/TagItemMiddle'
-
-export const LayoutTag = (props) => {
-  const { tagOptions, tag } = props
-
-  const { locale } = useGlobal()
-
-  return <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
-
-        <div className='inner-wrapper'>
-
-            <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
-
-                <div className="dark:text-gray-200 py-5 text-center  text-2xl">
-                    <i className="fas fa-tags" />  {locale.COMMON.TAGS}
-                </div>
-
-                <div id="tags-list" className="duration-200 flex flex-wrap justify-center pb-12">
-                    {tagOptions?.map(e => {
-                      const selected = tag === e.name
-                      return (
-                            <div key={e.id} className="p-2">
-                                <TagItemMiddle key={e.id} tag={e} selected={selected} />
-                            </div>
-                      )
-                    })}
-                </div>
-            </div>
-
-            {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-
-        </div>
-
-    </LayoutBase>
-}
-
-export default LayoutTag
diff --git a/themes/matery/LayoutTagIndex.js b/themes/matery/LayoutTagIndex.js
deleted file mode 100644
index f25ba122..00000000
--- a/themes/matery/LayoutTagIndex.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useGlobal } from '@/lib/global'
-import HeaderArticle from './components/HeaderArticle'
-import TagItemMiddle from './components/TagItemMiddle'
-import LayoutBase from './LayoutBase'
-
-export const LayoutTagIndex = props => {
-  const { tagOptions } = props
-  const { locale } = useGlobal()
-  return (
-        <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
-            <div id='inner-wrapper' className='w-full drop-shadow-xl'>
-
-                <div className="-mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
-
-                    <div className="dark:text-gray-200 py-5 text-center  text-2xl">
-                        <i className="fas fa-tags" />  {locale.COMMON.TAGS}
-                    </div>
-
-                    <div id="tags-list" className="duration-200 flex flex-wrap justify-center pb-12">
-                        {tagOptions.map(tag => {
-                          return (
-                                <div key={tag.name} className="p-2">
-                                    <TagItemMiddle key={tag.name} tag={tag} />
-                                </div>
-                          )
-                        })}
-                    </div>
-                </div>
-            </div>
-        </LayoutBase>
-  )
-}
-
-export default LayoutTagIndex
diff --git a/themes/matery/components/BlogListBar.js b/themes/matery/components/BlogListBar.js
new file mode 100644
index 00000000..4d4b2387
--- /dev/null
+++ b/themes/matery/components/BlogListBar.js
@@ -0,0 +1,50 @@
+import Link from 'next/link'
+import { useGlobal } from '@/lib/global'
+import TagItemMiddle from './components/TagItemMiddle'
+
+export default function BlogListBar(props) {
+  const { category, categoryOptions, tag, tagOptions } = props
+  const { locale } = useGlobal()
+
+  if (category) {
+    return (
+            <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
+
+                <div className='flex justify-center flex-wrap'>
+                    {categoryOptions?.map(e => {
+                      const selected = e.name === category
+                      return (
+                            <Link key={e.name} href={`/category/${e.name}`} passHref legacyBehavior>
+                                <div className='duration-300 text-md whitespace-nowrap dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400' >
+                                    <i className={`mr-4 fas  ${selected ? 'fa-folder-open' : 'fa-folder'}`} />
+                                    {e.name}({e.count})
+                                </div>
+                            </Link>
+                      )
+                    })}
+                </div>
+            </div>
+
+    )
+  } else if (tag) {
+    return <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
+
+            <div className="dark:text-gray-200 py-5 text-center  text-2xl">
+                <i className="fas fa-tags" />  {locale.COMMON.TAGS}
+            </div>
+
+            <div id="tags-list" className="duration-200 flex flex-wrap justify-center pb-12">
+                {tagOptions?.map(e => {
+                  const selected = tag === e.name
+                  return (
+                        <div key={e.id} className="p-2">
+                            <TagItemMiddle key={e.id} tag={e} selected={selected} />
+                        </div>
+                  )
+                })}
+            </div>
+        </div>
+  } else {
+    return <></>
+  }
+}
diff --git a/themes/matery/components/Catalog.js b/themes/matery/components/Catalog.js
index 56bff03e..448b6b08 100644
--- a/themes/matery/components/Catalog.js
+++ b/themes/matery/components/Catalog.js
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import Progress from './Progress'
@@ -13,7 +13,7 @@ import { useGlobal } from '@/lib/global'
 const Catalog = ({ toc }) => {
   const { locale } = useGlobal()
   // 监听滚动事件
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('scroll', actionSectionScrollSpy)
     actionSectionScrollSpy()
     return () => {
diff --git a/themes/matery/components/CatalogWrapper.js b/themes/matery/components/CatalogWrapper.js
new file mode 100644
index 00000000..7d64e2ad
--- /dev/null
+++ b/themes/matery/components/CatalogWrapper.js
@@ -0,0 +1,27 @@
+import Catalog from './Catalog'
+
+/**
+ * 目录
+ * @param {*} param0
+ * @returns
+ */
+export default function CatalogWrapper({ post }) {
+  if (post?.toc?.length > 0) {
+    return <div id='toc-wrapper' style={{ zIndex: '-1' }} className='absolute top-0 w-full h-full xl:block hidden lg:max-w-3xl 2xl:max-w-4xl' >
+            <div data-aos-delay="200"
+                data-aos="fade-down"
+                data-aos-duration="200"
+                data-aos-once="true"
+                data-aos-anchor-placement="top-center"
+                className='relative h-full'>
+                <div className='float-right xl:-mr-72 xl:w-72 w-56 -mr-56 h-full mt-40'>
+                    <div className='sticky top-24'>
+                        <Catalog toc={post.toc} />
+                    </div>
+                </div>
+            </div>
+        </div>
+  } else {
+    return <></>
+  }
+}
diff --git a/themes/matery/components/Header.js b/themes/matery/components/Hero.js
similarity index 98%
rename from themes/matery/components/Header.js
rename to themes/matery/components/Hero.js
index 42a75663..c573703d 100644
--- a/themes/matery/components/Header.js
+++ b/themes/matery/components/Hero.js
@@ -11,7 +11,7 @@ let wrapperTop = 0
  *
  * @returns 头图
  */
-const Header = props => {
+const Hero = props => {
   const [typed, changeType] = useState()
   const { siteInfo } = props
   const { locale } = useGlobal()
@@ -71,4 +71,4 @@ const Header = props => {
   )
 }
 
-export default Header
+export default Hero
diff --git a/themes/matery/components/RightFloatButtons.js b/themes/matery/components/RightFloatButtons.js
new file mode 100644
index 00000000..dc4a1bd8
--- /dev/null
+++ b/themes/matery/components/RightFloatButtons.js
@@ -0,0 +1,19 @@
+import JumpToTopButton from './components/JumpToTopButton'
+import FloatDarkModeButton from './components/FloatDarkModeButton'
+import SocialButton from './components/SocialButton'
+
+/**
+ * 右下角悬浮按钮
+ * @param {*} param0
+ * @returns
+ */
+export default function RightFloatButtons({ props }) {
+  const { floatRightBottom } = props
+  return <div className="bottom-40 right-2 fixed justify-end space-y-2 z-20">
+        <FloatDarkModeButton />
+        <JumpToTopButton />
+        <SocialButton />
+        {/* 可扩展的右下角悬浮 */}
+        {floatRightBottom}
+    </div>
+}
diff --git a/themes/matery/components/SearchNav.js b/themes/matery/components/SearchNav.js
new file mode 100644
index 00000000..0c992ebf
--- /dev/null
+++ b/themes/matery/components/SearchNav.js
@@ -0,0 +1,63 @@
+
+import SearchInput from './components/SearchInput'
+import TagItemMini from './components/TagItemMini'
+import Card from './components/Card'
+import Link from 'next/link'
+import { useEffect, useRef } from 'react'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 搜索页面的导航条
+ * @param {*} props
+ * @returns
+ */
+export default function SearchNave(props) {
+  const cRef = useRef(null)
+  const { locale } = useGlobal()
+  const { tagOptions, categoryOptions } = props
+
+  useEffect(() => {
+    setTimeout(() => {
+      // 自动聚焦到搜索框
+      cRef?.current?.focus()
+    }, 100)
+  })
+  return <>
+        <div className="my-6 px-2 mt-12 w-full">
+            <SearchInput cRef={cRef} {...props} />
+            {/* 分类 */}
+            <Card className="w-full mt-4">
+                <div className="dark:text-gray-200 mb-5 mx-3">
+                    <i className="mr-4 fas fa-th" />
+                    {locale.COMMON.CATEGORY}:
+                </div>
+                <div id="category-list" className="duration-200 flex flex-wrap mx-8">
+                    {categoryOptions?.map(category => {
+                      return (
+                            <Link key={category.name} href={`/category/${category.name}`} passHref legacyBehavior>
+                                <div className={' duration-300 dark:hover:text-white rounded-lg px-5 cursor-pointer py-2 hover:bg-indigo-400 hover:text-white'}>
+                                    <i className="mr-4 fas fa-folder" /> {category.name}({category.count})
+                                </div>
+                            </Link>
+                      )
+                    })}
+                </div>
+            </Card>
+            {/* 标签 */}
+            <Card className="w-full mt-4">
+                <div className="dark:text-gray-200 mb-5 ml-4">
+                    <i className="mr-4 fas fa-tag" /> {locale.COMMON.TAGS}:
+                </div>
+                <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
+                    {tagOptions?.map(tag => {
+                      return (
+                            <div key={tag.name} className="p-2">
+                                <TagItemMini key={tag.name} tag={tag} />
+                            </div>
+                      )
+                    })}
+                </div>
+            </Card>
+        </div>
+    </>
+}
diff --git a/themes/matery/index.js b/themes/matery/index.js
index c767fcd3..1537b68c 100644
--- a/themes/matery/index.js
+++ b/themes/matery/index.js
@@ -1,25 +1,353 @@
 import CONFIG_MATERY from './config_matery'
-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'
+import CommonHead from '@/components/CommonHead'
+import TopNav from './components/TopNav'
+import Live2D from '@/components/Live2D'
+import LoadingCover from './components/LoadingCover'
+import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
+import Footer from './components/Footer'
+import { useEffect } from 'react'
+import RightFloatButtons from './components/RightFloatButtons'
+import { useRouter } from 'next/router'
+import Mark from 'mark.js'
+import SearchNave from './components/SearchNav'
+import BlogPostListPage from './components/BlogPostListPage'
+import BlogPostListScroll from './components/BlogPostListScroll'
+import Hero from './components/Hero'
+import Announcement from './components/Announcement'
+import CatalogWrapper from './components/CatalogWrapper'
+import TagItemMiddle from './components/TagItemMiddle'
+import HeaderArticle from './components/HeaderArticle'
+import Link from 'next/link'
+import ArticleAdjacent from './components/ArticleAdjacent'
+import Comment from '@/components/Comment'
+import ArticleCopyright from './components/ArticleCopyright'
+import ShareBar from '@/components/ShareBar'
+import NotionPage from '@/components/NotionPage'
+import { ArticleInfo } from './components/ArticleInfo'
+import { ArticleLock } from './components/ArticleLock'
+import BlogPostArchive from './components/BlogPostArchive'
+import Card from './components/Card'
+import JumpToCommentButton from './components/JumpToCommentButton'
+import BlogListBar from './components/BlogListBar'
+
+/**
+ * 基础布局
+ * 采用左右两侧布局，移动端使用顶部导航栏
+ * @param props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = props => {
+  const { children, headerSlot, meta, siteInfo, containerSlot, post } = props
+  const { onLoading } = useGlobal()
+
+  if (isBrowser()) {
+    loadExternalResource('/css/theme-matery.css', 'css')
+  }
+
+  return (
+        <div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
+            {/* SEO相关 */}
+            <CommonHead meta={meta} siteInfo={siteInfo} />
+
+            {/* 顶部导航栏 */}
+            <TopNav {...props} />
+
+            {/* 顶部嵌入 */}
+            {headerSlot}
+
+            <main id="wrapper" className={`${CONFIG_MATERY.HOME_BANNER_ENABLE ? '' : 'pt-16'} flex-1 w-full py-8 md:px-8 lg:px-24 relative`}>
+                {/* 嵌入区域 */}
+                <div id="container-slot" className={`w-full max-w-6xl ${post && ' lg:max-w-3xl 2xl:max-w-4xl '} mt-6 px-3 mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
+                    {containerSlot}
+                </div>
+
+                <div id="container-inner" className="w-full max-w-6xl mx-auto lg:flex lg:space-x-4 justify-center relative z-10">
+                    {onLoading ? <LoadingCover /> : children}
+                </div>
+
+            </main>
+
+            {/* 左下角悬浮 */}
+            <div className="bottom-4 -left-14 fixed justify-end z-40">
+                <Live2D />
+            </div>
+
+            {/* 右下角悬浮 */}
+            <RightFloatButtons {...props} />
+
+            {/* 页脚 */}
+            <Footer title={siteInfo?.title || BLOG.TITLE} />
+        </div>
+  )
+}
+
+/**
+ * 首页
+ * 首页就是一个文章列表，但是嵌入了Hero大图和公告
+ * @param {*} props
+ * @returns
+ */
+const LayoutIndex = (props) => {
+  return <LayoutPostList {...props} containerSlot={<Announcement {...props} />} headerSlot={CONFIG_MATERY.HOME_BANNER_ENABLE && <Hero {...props} />} />
+}
+
+/**
+ * 博客列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutPostList = (props) => {
+  return (
+        <LayoutBase {...props} >
+            <BlogListBar {...props} />
+            {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+        </LayoutBase>
+  )
+}
+
+/**
+ * 搜搜
+ * @param {*} props
+ * @returns
+ */
+const LayoutSearch = props => {
+  const { keyword } = props
+  const router = useRouter()
+  const currentSearch = keyword || router?.query?.s
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (currentSearch) {
+        const targets = document.getElementsByClassName('replace')
+        for (const container of targets) {
+          if (container && container.innerHTML) {
+            const re = new RegExp(currentSearch, 'gim')
+            const instance = new Mark(container)
+            instance.markRegExp(re, {
+              element: 'span',
+              className: 'text-red-500 border-b border-dashed'
+            })
+          }
+        }
+      }
+    }, 100)
+  })
+  return (
+        <LayoutBase {...props} currentSearch={currentSearch}>
+            {!currentSearch
+              ? <SearchNave {...props} />
+              : <div id="posts-wrapper">
+                    {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+                </div>}
+        </LayoutBase>
+  )
+}
+
+/**
+ * 归档
+ * @param {*} props
+ * @returns
+ */
+const LayoutArchive = (props) => {
+  const { archivePosts } = props
+  return <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
+        <Card className='w-full -mt-32'>
+            <div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
+                {Object.keys(archivePosts).map(archiveTitle => (
+                    <BlogPostArchive
+                        key={archiveTitle}
+                        posts={archivePosts[archiveTitle]}
+                        archiveTitle={archiveTitle}
+                    />
+                ))}
+            </div>
+        </Card>
+    </LayoutBase>
+}
+
+/**
+ * 文章详情页
+ * @param {*} props
+ * @returns
+ */
+const LayoutSlug = props => {
+  const { post, lock, validPassword } = props
+
+  return (<LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} showCategory={false} showTag={false} floatRightBottom={<JumpToCommentButton />}>
+
+        <div id='inner-wrapper' className={'w-full lg:max-w-3xl 2xl:max-w-4xl'} >
+
+            {/* 文章主体卡片 */}
+            <div className="-mt-32 transition-all duration-300 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
+
+                {lock && <ArticleLock validPassword={validPassword} />}
+
+                {!lock && <div id="article-wrapper" className="overflow-x-auto md:w-full px-3 ">
+
+                    {/* 文章信息 */}
+                    {post?.type && post?.type === 'Post' && <>
+                        <div
+                            data-aos="fade-down"
+                            data-aos-duration="100"
+                            data-aos-once="false"
+                            data-aos-anchor-placement="top-center"
+                            className='px-10'>
+                            <ArticleInfo post={post} />
+                        </div>
+                        <hr />
+                    </>}
+
+                    <div className='lg:px-10 subpixel-antialiased'>
+
+                        <article itemScope >
+
+                            {/* Notion文章主体 */}
+                            <section className='justify-center mx-auto max-w-2xl lg:max-w-full'>
+                                {post && <NotionPage post={post} />}
+                            </section>
+
+                            {/* 分享 */}
+                            <ShareBar post={post} />
+
+                            {/* 版权说明 */}
+                            {post.type === 'Post' && <ArticleCopyright {...props} />}
+
+                        </article>
+
+                        <hr className='border-dashed' />
+
+                        {/* 评论互动 */}
+                        <div className="overflow-x-auto dark:bg-hexo-black-gray px-3">
+                            <Comment frontMatter={post} />
+                        </div>
+                    </div>
+
+                </div>}
+            </div>
+
+            {/* 底部文章推荐 */}
+            {post.type === 'Post' && <ArticleAdjacent {...props} />}
+
+            {/* 底部公告 */}
+            <Announcement {...props} />
+
+            {/* 右侧文章目录 */}
+            <CatalogWrapper post={post} />
+
+        </div>
+
+    </LayoutBase>
+  )
+}
+
+/**
+ * 404
+ * @param {*} props
+ * @returns
+ */
+const Layout404 = props => {
+  const router = useRouter()
+  useEffect(() => {
+    // 延时3秒如果加载失败就返回首页
+    setTimeout(() => {
+      const article = typeof document !== 'undefined' && document.getElementById('notion-article')
+      if (!article) {
+        router.push('/').then(() => {
+          // console.log('找不到页面', router.asPath)
+        })
+      }
+    }, 3000)
+  })
+  return (
+        <LayoutBase {...props}>
+            <div className="text-black w-full h-screen text-center justify-center content-center items-center flex flex-col">
+                <div className="dark:text-gray-200">
+                    <h2 className="inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top">
+                        404
+                    </h2>
+                    <div className="inline-block text-left h-32 leading-10 items-center">
+                        <h2 className="m-0 p-0">页面未找到</h2>
+                    </div>
+                </div>
+            </div>
+        </LayoutBase>
+  )
+}
+
+/**
+ * 分类列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutCategoryIndex = props => {
+  const { categoryOptions } = props
+
+  return (
+        <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
+
+            <div id='inner-wrapper' className='w-full'>
+                <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black dark:text-gray-300">
+                    <div className='flex justify-center flex-wrap'>
+                        {categoryOptions.map(e => {
+                          return (
+                                <Link key={e.name} href={`/category/${e.name}`} passHref legacyBehavior>
+                                    <div className='duration-300 text-md whitespace-nowrap dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400' >
+                                        <i className={'mr-4 fas fa-folder'} />  {e.name}({e.count})
+                                    </div>
+                                </Link>
+                          )
+                        })}
+                    </div>
+                </div>
+            </div>
+        </LayoutBase>
+  )
+}
+
+/**
+ * 标签列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutTagIndex = props => {
+  const { tagOptions } = props
+  const { locale } = useGlobal()
+  return (
+        <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
+            <div id='inner-wrapper' className='w-full drop-shadow-xl'>
+
+                <div className="-mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
+
+                    <div className="dark:text-gray-200 py-5 text-center  text-2xl">
+                        <i className="fas fa-tags" />  {locale.COMMON.TAGS}
+                    </div>
+
+                    <div id="tags-list" className="duration-200 flex flex-wrap justify-center pb-12">
+                        {tagOptions.map(tag => {
+                          return (
+                                <div key={tag.name} className="p-2">
+                                    <TagItemMiddle key={tag.name} tag={tag} />
+                                </div>
+                          )
+                        })}
+                    </div>
+                </div>
+            </div>
+        </LayoutBase>
+  )
+}
 
 export {
   CONFIG_MATERY as THEME_CONFIG,
   LayoutIndex,
+  LayoutPostList,
   LayoutSearch,
   LayoutArchive,
   LayoutSlug,
   Layout404,
-  LayoutCategory,
   LayoutCategoryIndex,
-  LayoutPage,
-  LayoutTag,
   LayoutTagIndex
 }
diff --git a/themes/medium/Layout404.js b/themes/medium/Layout404.js
deleted file mode 100644
index 68b656cc..00000000
--- a/themes/medium/Layout404.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import LayoutBase from './LayoutBase'
-
-export const Layout404 = props => {
-  return <LayoutBase {...props}>
-   <div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
-  </LayoutBase>
-}
-
-export default Layout404
diff --git a/themes/medium/LayoutArchive.js b/themes/medium/LayoutArchive.js
deleted file mode 100644
index 083dd8ac..00000000
--- a/themes/medium/LayoutArchive.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import BLOG from '@/blog.config'
-import Link from 'next/link'
-import LayoutBase from './LayoutBase'
-
-export const LayoutArchive = props => {
-  const { archivePosts } = props
-
-  return (
-    <LayoutBase {...props}>
-      <div className="mb-10 pb-20 md:py-12 py-3  min-h-full">
-        {Object.keys(archivePosts)?.map(archiveTitle => (
-          <div key={archiveTitle}>
-            <div
-              className="pt-16 pb-4 text-3xl dark:text-gray-300"
-              id={archiveTitle}
-            >
-              {archiveTitle}
-            </div>
-            <ul>
-              {archivePosts[archiveTitle]?.map(post => (
-                <li
-                  key={post.id}
-                  className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
-                >
-                  <div id={post?.publishTime}>
-                    <span className="text-gray-400">
-                      {post.date?.start_date}
-                    </span>{' '}
-                    &nbsp;
-                    <Link
-                      href={`${BLOG.SUB_PATH}/${post.slug}`}
-                      passHref
-                      className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
-
-                      {post.title}
-
-                    </Link>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
-    </LayoutBase>
-  )
-}
-
-export default LayoutArchive
diff --git a/themes/medium/LayoutBase.js b/themes/medium/LayoutBase.js
deleted file mode 100644
index be8cfa41..00000000
--- a/themes/medium/LayoutBase.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import CommonHead from '@/components/CommonHead'
-import { useState, createContext, useContext } from 'react'
-import Footer from './components/Footer'
-import InfoCard from './components/InfoCard'
-import RevolverMaps from './components/RevolverMaps'
-import CONFIG_MEDIUM from './config_medium'
-import Tabs from '@/components/Tabs'
-import TopNavBar from './components/TopNavBar'
-import SearchInput from './components/SearchInput'
-import BottomMenuBar from './components/BottomMenuBar'
-import { useGlobal } from '@/lib/global'
-import { useRouter } from 'next/router'
-import Live2D from '@/components/Live2D'
-import BLOG from '@/blog.config'
-import Announcement from './components/Announcement'
-import JumpToTopButton from './components/JumpToTopButton'
-const ThemeGlobalMedium = createContext()
-
-/**
- * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
-
- * @returns {JSX.Element}
- * @constructor
- */
-const LayoutBase = props => {
-  const { children, meta, showInfoCard = true, slotRight, slotTop, siteInfo, notice } = props
-  const { locale } = useGlobal()
-  const router = useRouter()
-  const [tocVisible, changeTocVisible] = useState(false)
-  const { onLoading } = useGlobal()
-
-  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
-        <div className='w-full h-screen flex justify-center items-center'>
-            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
-        </div>
-    </div>
-
-  return (
-        <ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
-            <CommonHead meta={meta} />
-
-            <div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
-
-                <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
-                    {/* 桌面端左侧菜单 */}
-                    {/* <LeftMenuBar/> */}
-
-                    <div id='container-wrapper' className='w-full relative z-10'>
-                        {/* 顶部导航栏 */}
-                        <TopNavBar {...props} />
-
-                        <div id='container-inner' className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
-                            {slotTop}
-
-                            {onLoading ? LoadingCover : children}
-
-                            <JumpToTopButton />
-                        </div>
-
-                        {/* 底部 */}
-                        <Footer title={siteInfo?.title} />
-                    </div>
-
-                    {/* 桌面端右侧 */}
-                    <div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
-                        <div className='py-14 px-6 sticky top-0'>
-                            <Tabs>
-                                {slotRight}
-                                <div key={locale.NAV.ABOUT}>
-                                    {router.pathname !== '/search' && <SearchInput className='mt-6  mb-12' />}
-                                    {showInfoCard && <InfoCard {...props} />}
-                                    {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
-                                </div>
-                            </Tabs>
-                            <Announcement post={notice} />
-                            <Live2D />
-                        </div>
-                    </div>
-                </main>
-
-                {/* 移动端底部导航栏 */}
-                <BottomMenuBar {...props} className='block md:hidden' />
-            </div>
-        </ThemeGlobalMedium.Provider>
-  )
-}
-
-export default LayoutBase
-export const useMediumGlobal = () => useContext(ThemeGlobalMedium)
diff --git a/themes/medium/LayoutCategory.js b/themes/medium/LayoutCategory.js
deleted file mode 100644
index a947b70e..00000000
--- a/themes/medium/LayoutCategory.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import LayoutBase from './LayoutBase'
-import BlogPostListScroll from './components/BlogPostListScroll'
-import BlogPostListPage from './components/BlogPostListPage'
-import BLOG from '@/blog.config'
-
-export const LayoutCategory = props => {
-  const { category } = props
-  const slotTop = <div className='flex items-center  py-8'><div className='text-xl'><i className='mr-2 fas fa-th' />分类：</div>{category}</div>
-
-  return <LayoutBase {...props} slotTop={slotTop}>
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-    </LayoutBase>
-}
-
-export default LayoutCategory
diff --git a/themes/medium/LayoutCategoryIndex.js b/themes/medium/LayoutCategoryIndex.js
deleted file mode 100644
index 2c8121ad..00000000
--- a/themes/medium/LayoutCategoryIndex.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
-import LayoutBase from './LayoutBase'
-
-export const LayoutCategoryIndex = (props) => {
-  const { categoryOptions } = props
-  const { locale } = useGlobal()
-  return (
-    <LayoutBase {...props}>
-         <div className='bg-white dark:bg-gray-700 py-10'>
-        <div className='dark:text-gray-200 mb-5'>
-          <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
-        </div>
-        <div id='category-list' className='duration-200 flex flex-wrap'>
-          {categoryOptions?.map(category => {
-            return (
-              <Link
-                key={category.name}
-                href={`/category/${category.name}`}
-                passHref
-                legacyBehavior>
-                <div
-                  className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
-                  <i className='mr-4 fas fa-folder' />{category.name}({category.count})
-                </div>
-              </Link>
-            )
-          })}
-        </div>
-      </div>
-    </LayoutBase>
-  )
-}
-export default LayoutCategoryIndex
diff --git a/themes/medium/LayoutIndex.js b/themes/medium/LayoutIndex.js
deleted file mode 100644
index 41410467..00000000
--- a/themes/medium/LayoutIndex.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import BLOG from '@/blog.config'
-import BlogPostListPage from './components/BlogPostListPage'
-import BlogPostListScroll from './components/BlogPostListScroll'
-import LayoutBase from './LayoutBase'
-
-export const LayoutIndex = (props) => {
-  return <LayoutBase {...props}>
-    {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-  </LayoutBase>
-}
-
-export default LayoutIndex
diff --git a/themes/medium/LayoutPage.js b/themes/medium/LayoutPage.js
deleted file mode 100644
index 563df90b..00000000
--- a/themes/medium/LayoutPage.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import LayoutBase from './LayoutBase'
-import BlogPostListPage from './components/BlogPostListPage'
-
-export const LayoutPage = (props) => {
-  return <LayoutBase {...props}>
-      <BlogPostListPage {...props} />
-  </LayoutBase>
-}
-
-export default LayoutPage
diff --git a/themes/medium/LayoutSearch.js b/themes/medium/LayoutSearch.js
deleted file mode 100644
index e7fee4c2..00000000
--- a/themes/medium/LayoutSearch.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import LayoutBase from './LayoutBase'
-import SearchInput from './components/SearchInput'
-import { useGlobal } from '@/lib/global'
-import TagGroups from './components/TagGroups'
-import CategoryGroup from './components/CategoryGroup'
-import { useEffect } from 'react'
-import { isBrowser } from '@/lib/utils'
-import BLOG from '@/blog.config'
-import Mark from 'mark.js'
-import BlogPostListScroll from './components/BlogPostListScroll'
-import BlogPostListPage from './components/BlogPostListPage'
-import { useRouter } from 'next/router'
-
-export const LayoutSearch = (props) => {
-  const { locale } = useGlobal()
-  const { keyword } = props
-  const router = useRouter()
-  const currentSearch = keyword || router?.query?.s
-
-  useEffect(() => {
-    setTimeout(() => {
-      const container = isBrowser() && document.getElementById('posts-wrapper')
-      if (container && container.innerHTML) {
-        const re = new RegExp(currentSearch, 'gim')
-        const instance = new Mark(container)
-        instance.markRegExp(re, {
-          element: 'span',
-          className: 'text-red-500 border-b border-dashed'
-        })
-      }
-    },
-    100)
-  })
-  return <LayoutBase {...props}>
-
-    <div className='py-12'>
-      <div className='pb-4 w-full'>{locale.NAV.SEARCH}</div>
-      <SearchInput currentSearch={currentSearch} {...props} />
-
-    {!currentSearch && <>
-        <TagGroups {...props} />
-      <CategoryGroup {...props} />
-    </>}
-
-    </div>
-
-    {currentSearch && <div>
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-    </div>}
-  </LayoutBase>
-}
-
-export default LayoutSearch
diff --git a/themes/medium/LayoutSlug.js b/themes/medium/LayoutSlug.js
deleted file mode 100644
index e0ddfbde..00000000
--- a/themes/medium/LayoutSlug.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import LayoutBase from './LayoutBase'
-import { useGlobal } from '@/lib/global'
-import React from 'react'
-import Catalog from './components/Catalog'
-import { ArticleLock } from './components/ArticleLock'
-import formatDate from '@/lib/formatDate'
-import BLOG from '@/blog.config'
-import Link from 'next/link'
-import NotionPage from '@/components/NotionPage'
-import CONFIG_MEDIUM from './config_medium'
-import Comment from '@/components/Comment'
-import ArticleAround from './components/ArticleAround'
-import TocDrawer from './components/TocDrawer'
-import CategoryItem from './components/CategoryItem'
-import TagItemMini from './components/TagItemMini'
-import ShareBar from '@/components/ShareBar'
-
-export const LayoutSlug = props => {
-  const { post, prev, next, siteInfo, lock, validPassword } = props
-  const { locale } = useGlobal()
-
-  const date = formatDate(
-    post?.publishTime || post?.createdTime,
-    locale.LOCALE
-  )
-  if (!post) {
-    return <LayoutBase {...props} showInfoCard={true} />
-  }
-
-  const slotRight = post?.toc && post?.toc?.length >= 3 && (
-      <div key={locale.COMMON.TABLE_OF_CONTENTS} >
-            <Catalog toc={post.toc} />
-            {/* <JumpToTopButton className='text-gray-400 hover:text-green-500 hover:bg-gray-100 py-1 duration-200' /> */}
-        </div>
-  )
-
-  return (
-        <LayoutBase showInfoCard={true} slotRight={slotRight} {...props} >
-            {/* 文章锁 */}
-            {lock && <ArticleLock validPassword={validPassword} />}
-
-            {!lock && <div id='article-wrapper'>
-
-                {/* title */}
-                <h1 className="text-3xl pt-12  dark:text-gray-300">{post?.title}</h1>
-
-                {/* meta */}
-                <section className="py-2 items-center text-sm  px-1">
-                    <div className='flex flex-wrap text-gray-500 py-1 dark:text-gray-600'>
-                        <span className='whitespace-nowrap'> <i className='far fa-calendar mr-2' />{date}</span>
-                        <span className='mx-1'>|</span>
-                        <span className='whitespace-nowrap mr-2'><i className='far fa-calendar-check mr-2' />{post.lastEditedTime}</span>
-                        <div className="hidden busuanzi_container_page_pv font-light mr-2 whitespace-nowrap">
-                            <i className="mr-1 fas fa-eye" /><span className="busuanzi_value_page_pv" />
-                        </div>
-                    </div>
-                    <Link href="/about" passHref legacyBehavior>
-                        <div className='flex pt-2'>
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={BLOG.AUTHOR} />
-
-                            <div className="mr-3 ml-2 my-auto text-green-500 cursor-pointer">
-                                {BLOG.AUTHOR}
-                            </div>
-                        </div>
-                    </Link>
-                </section>
-
-                {/* Notion文章主体 */}
-                <section className="px-1 max-w-4xl">
-                    {post && (<NotionPage post={post} />)}
-                </section>
-
-                <section>
-
-                    {/* 分享 */}
-                    <ShareBar post={post} />
-                    {/* 文章分类和标签信息 */}
-                    <div className='flex justify-between'>
-                        {CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category} />}
-                        <div>
-                            {CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
-                        </div>
-                    </div>
-
-                    {post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
-                    <Comment frontMatter={post} />
-                </section>
-
-                <TocDrawer {...props} />
-            </div>}
-        </LayoutBase>
-  )
-}
-
-export default LayoutSlug
diff --git a/themes/medium/LayoutTag.js b/themes/medium/LayoutTag.js
deleted file mode 100644
index bedb51ef..00000000
--- a/themes/medium/LayoutTag.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import LayoutBase from './LayoutBase'
-import BLOG from '@/blog.config'
-import BlogPostListScroll from './components/BlogPostListScroll'
-import BlogPostListPage from './components/BlogPostListPage'
-
-export const LayoutTag = (props) => {
-  const { tag } = props
-  const slotTop = <div className='flex items-center  py-8'><div className='text-xl'><i className='mr-2 fas fa-tag'/>标签：</div>{tag}</div>
-
-  return <LayoutBase {...props} slotTop={slotTop}>
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-   </LayoutBase>
-}
-
-export default LayoutTag
diff --git a/themes/medium/LayoutTagIndex.js b/themes/medium/LayoutTagIndex.js
deleted file mode 100644
index cc9f8c94..00000000
--- a/themes/medium/LayoutTagIndex.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useGlobal } from '@/lib/global'
-import TagItemMini from './components/TagItemMini'
-import LayoutBase from './LayoutBase'
-
-export const LayoutTagIndex = props => {
-  const { tagOptions } = props
-  const { locale } = useGlobal()
-  return (
-    <LayoutBase {...props}>
-      <div className="bg-white dark:bg-gray-700 py-10">
-        <div className="dark:text-gray-200 mb-5">
-          <i className="mr-4 fas fa-tag" />
-          {locale.COMMON.TAGS}:
-        </div>
-        <div id="tags-list" className="duration-200 flex flex-wrap">
-          {tagOptions?.map(tag => {
-            return (
-              <div key={tag.name} className="p-2">
-                <TagItemMini key={tag.name} tag={tag} />
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </LayoutBase>
-  )
-}
-
-export default LayoutTagIndex
diff --git a/themes/medium/components/ArticleInfo.js b/themes/medium/components/ArticleInfo.js
new file mode 100644
index 00000000..17fd3ce2
--- /dev/null
+++ b/themes/medium/components/ArticleInfo.js
@@ -0,0 +1,41 @@
+import BLOG from '@/blog.config'
+import formatDate from '@/lib/formatDate'
+import Link from 'next/link'
+
+/**
+ * 文章详情页介绍
+ * @param {*} props
+ * @returns
+ */
+export default function ArticleInfo(props) {
+  const { post, siteInfo } = props
+
+  const date = formatDate(post?.publishTime || post?.createdTime)
+
+  return (<>
+        {/* title */}
+        <h1 className="text-3xl pt-12  dark:text-gray-300">{post?.title}</h1>
+
+        {/* meta */}
+        <section className="py-2 items-center text-sm  px-1">
+            <div className='flex flex-wrap text-gray-500 py-1 dark:text-gray-600'>
+                <span className='whitespace-nowrap'> <i className='far fa-calendar mr-2' />{date}</span>
+                <span className='mx-1'>|</span>
+                <span className='whitespace-nowrap mr-2'><i className='far fa-calendar-check mr-2' />{post.lastEditedTime}</span>
+                <div className="hidden busuanzi_container_page_pv font-light mr-2 whitespace-nowrap">
+                    <i className="mr-1 fas fa-eye" /><span className="busuanzi_value_page_pv" />
+                </div>
+            </div>
+            <Link href="/about" passHref legacyBehavior>
+                <div className='flex pt-2'>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={BLOG.AUTHOR} />
+
+                    <div className="mr-3 ml-2 my-auto text-green-500 cursor-pointer">
+                        {BLOG.AUTHOR}
+                    </div>
+                </div>
+            </Link>
+        </section>
+    </>)
+}
diff --git a/themes/medium/components/BlogArchiveItem.js b/themes/medium/components/BlogArchiveItem.js
new file mode 100644
index 00000000..52b2fefb
--- /dev/null
+++ b/themes/medium/components/BlogArchiveItem.js
@@ -0,0 +1,36 @@
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+
+/**
+ * 归档分组
+ * @param {*} param0
+ * @returns
+ */
+export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
+  return (
+        <div key={archiveTitle}>
+            <div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
+                {archiveTitle}
+            </div>
+            <ul>
+                {archivePosts[archiveTitle]?.map(post => (
+                    <li key={post.id}
+                        className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
+                    >
+                        <div id={post?.publishTime}>
+                            <span className="text-gray-400">
+                                {post.date?.start_date}
+                            </span>{' '}
+                            &nbsp;
+
+                            <Link passHref href={`${BLOG.SUB_PATH}/${post.slug}`}
+                                className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+                                {post.title}
+                            </Link>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+  )
+}
diff --git a/themes/medium/components/BlogPostBar.js b/themes/medium/components/BlogPostBar.js
new file mode 100644
index 00000000..7cada8fa
--- /dev/null
+++ b/themes/medium/components/BlogPostBar.js
@@ -0,0 +1,19 @@
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 文章列表上方嵌入
+ * @param {*} props
+ * @returns
+ */
+export default function BlogPostBar(props) {
+  const { tag, category } = props
+  const { locale } = useGlobal()
+
+  if (tag) {
+    return <div className='flex items-center  py-8'><div className='text-xl'><i className='mr-2 fas fa-tag' />{locale.COMMON.TAGS}:</div>{tag}</div>
+  } else if (category) {
+        <div className='flex items-center  py-8'><div className='text-xl'><i className='mr-2 fas fa-th' />{locale.COMMON.CATEGORY}:</div>{category}</div>
+  } else {
+    return <></>
+  }
+}
diff --git a/themes/medium/components/LoadingCover.js b/themes/medium/components/LoadingCover.js
new file mode 100644
index 00000000..4d8fa828
--- /dev/null
+++ b/themes/medium/components/LoadingCover.js
@@ -0,0 +1,7 @@
+export default function LoadingCover() {
+  return <div id='cover-loading' className={'z-50 opacity-50 pointer-events-none transition-all duration-300'}>
+        <div className='w-full h-screen flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
+}
diff --git a/themes/medium/index.js b/themes/medium/index.js
index cd3239ec..c488ca32 100644
--- a/themes/medium/index.js
+++ b/themes/medium/index.js
@@ -1,14 +1,314 @@
 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'
+
+import CommonHead from '@/components/CommonHead'
+import { useState, createContext, useContext, useEffect } from 'react'
+import Footer from './components/Footer'
+import InfoCard from './components/InfoCard'
+import RevolverMaps from './components/RevolverMaps'
+import Tabs from '@/components/Tabs'
+import TopNavBar from './components/TopNavBar'
+import SearchInput from './components/SearchInput'
+import BottomMenuBar from './components/BottomMenuBar'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import Live2D from '@/components/Live2D'
+import BLOG from '@/blog.config'
+import Announcement from './components/Announcement'
+import JumpToTopButton from './components/JumpToTopButton'
+import LoadingCover from './components/LoadingCover'
+import BlogPostListPage from './components/BlogPostListPage'
+import BlogPostListScroll from './components/BlogPostListScroll'
+import Catalog from './components/Catalog'
+import { ArticleLock } from './components/ArticleLock'
+import TagGroups from './components/TagGroups'
+import CategoryGroup from './components/CategoryGroup'
+import { isBrowser } from '@/lib/utils'
+import Mark from 'mark.js'
+import BlogArchiveItem from './components/BlogArchiveItem'
+import BlogPostBar from './components/BlogPostBar'
+import NotionPage from '@/components/NotionPage'
+import Comment from '@/components/Comment'
+import ArticleAround from './components/ArticleAround'
+import TocDrawer from './components/TocDrawer'
+import CategoryItem from './components/CategoryItem'
+import TagItemMini from './components/TagItemMini'
+import ShareBar from '@/components/ShareBar'
+import Link from 'next/link'
+
+// 主题全局状态
+const ThemeGlobalMedium = createContext()
+export const useMediumGlobal = () => useContext(ThemeGlobalMedium)
+
+/**
+ * 基础布局
+ * 采用左右两侧布局，移动端使用顶部导航栏
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = props => {
+  const { children, meta, showInfoCard = true, slotRight, slotTop, siteInfo, notice } = props
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const [tocVisible, changeTocVisible] = useState(false)
+  const { onLoading } = useGlobal()
+
+  return (
+        <ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
+            <CommonHead meta={meta} />
+
+            <div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
+
+                <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
+                    {/* 桌面端左侧菜单 */}
+                    {/* <LeftMenuBar/> */}
+
+                    {/* 主区 */}
+                    <div id='container-wrapper' className='w-full relative z-10'>
+
+                        {/* 顶部导航栏 */}
+                        <TopNavBar {...props} />
+
+                        <div id='container-inner' className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
+                            {slotTop}
+
+                            {onLoading ? <LoadingCover /> : children}
+
+                            <JumpToTopButton />
+                        </div>
+
+                        {/* 底部 */}
+                        <Footer title={siteInfo?.title} />
+                    </div>
+
+                    {/* 桌面端右侧 */}
+                    <div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
+                        <div className='py-14 px-6 sticky top-0'>
+                            <Tabs>
+                                {slotRight}
+                                <div key={locale.NAV.ABOUT}>
+                                    {router.pathname !== '/search' && <SearchInput className='mt-6  mb-12' />}
+                                    {showInfoCard && <InfoCard {...props} />}
+                                    {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
+                                </div>
+                            </Tabs>
+                            <Announcement post={notice} />
+                            <Live2D />
+                        </div>
+                    </div>
+                </main>
+
+                {/* 移动端底部导航栏 */}
+                <BottomMenuBar {...props} className='block md:hidden' />
+            </div>
+        </ThemeGlobalMedium.Provider>
+  )
+}
+
+/**
+ * 首页
+ * 首页就是一个博客列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutIndex = (props) => {
+  return <LayoutPostList {...props} />
+}
+
+/**
+ * 博客列表
+ * @returns
+ */
+const LayoutPostList = (props) => {
+  const slotTop = <BlogPostBar {...props} />
+  return <LayoutBase {...props} slotTop={slotTop}>
+        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+    </LayoutBase>
+}
+
+/**
+ * 文章详情
+ * @param {*} props
+ * @returns
+ */
+const LayoutSlug = props => {
+  const { post, prev, next, lock, validPassword } = props
+  const { locale } = useGlobal()
+  const slotRight = post?.toc && post?.toc?.length >= 3 && (
+        <div key={locale.COMMON.TABLE_OF_CONTENTS} >
+            <Catalog toc={post?.toc} />
+        </div>
+  )
+
+  return (
+        <LayoutBase showInfoCard={true} slotRight={slotRight} {...props} >
+            {/* 文章锁 */}
+            {lock && <ArticleLock validPassword={validPassword} />}
+
+            {!lock && <div id='article-wrapper'>
+
+                {/* Notion文章主体 */}
+                <section className="px-1 max-w-4xl">
+                    {post && (<NotionPage post={post} />)}
+                </section>
+
+                {/* 文章底部区域  */}
+                <section>
+                    {/* 分享 */}
+                    <ShareBar post={post} />
+                    {/* 文章分类和标签信息 */}
+                    <div className='flex justify-between'>
+                        {CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post?.category} />}
+                        <div>
+                            {CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+                        </div>
+                    </div>
+                    {/* 上一篇下一篇文章 */}
+                    {post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
+                    {/* 评论区 */}
+                    <Comment frontMatter={post} />
+                </section>
+
+                {/* 移动端目录 */}
+                <TocDrawer {...props} />
+            </div>}
+        </LayoutBase>
+  )
+}
+
+/**
+ * 搜索
+ * @param {*} props
+ * @returns
+ */
+const LayoutSearch = (props) => {
+  const { locale } = useGlobal()
+  const { keyword } = props
+  const router = useRouter()
+  const currentSearch = keyword || router?.query?.s
+
+  useEffect(() => {
+    setTimeout(() => {
+      const container = isBrowser() && document.getElementById('posts-wrapper')
+      if (container && container.innerHTML) {
+        const re = new RegExp(currentSearch, 'gim')
+        const instance = new Mark(container)
+        instance.markRegExp(re, {
+          element: 'span',
+          className: 'text-red-500 border-b border-dashed'
+        })
+      }
+    }, 100)
+  })
+  return <LayoutBase {...props}>
+
+        {/* 搜索导航栏 */}
+        <div className='py-12'>
+            <div className='pb-4 w-full'>{locale.NAV.SEARCH}</div>
+            <SearchInput currentSearch={currentSearch} {...props} />
+            {!currentSearch && <>
+                <TagGroups {...props} />
+                <CategoryGroup {...props} />
+            </>}
+        </div>
+
+        {/* 文章列表 */}
+        {currentSearch && <div>
+            {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+        </div>}
+    </LayoutBase>
+}
+
+/**
+ * 归档
+ * @param {*} props
+ * @returns
+ */
+const LayoutArchive = props => {
+  const { archivePosts } = props
+  return (
+        <LayoutBase {...props}>
+            <div className="mb-10 pb-20 md:py-12 py-3  min-h-full">
+                {Object.keys(archivePosts)?.map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />
+                )}
+            </div>
+        </LayoutBase>
+  )
+}
+
+/**
+ * 404
+ * @param {*} props
+ * @returns
+ */
+const Layout404 = props => {
+  return <LayoutBase {...props}>
+        <div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
+    </LayoutBase>
+}
+
+/**
+ * 分类列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutCategoryIndex = (props) => {
+  const { categoryOptions } = props
+  const { locale } = useGlobal()
+  return (
+        <LayoutBase {...props}>
+            <div className='bg-white dark:bg-gray-700 py-10'>
+                <div className='dark:text-gray-200 mb-5'>
+                    <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
+                </div>
+                <div id='category-list' className='duration-200 flex flex-wrap'>
+                    {categoryOptions?.map(category => {
+                      return (
+                            <Link
+                                key={category.name}
+                                href={`/category/${category.name}`}
+                                passHref
+                                legacyBehavior>
+                                <div
+                                    className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
+                                    <i className='mr-4 fas fa-folder' />{category.name}({category.count})
+                                </div>
+                            </Link>
+                      )
+                    })}
+                </div>
+            </div>
+        </LayoutBase>
+  )
+}
+
+/**
+ * 标签列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutTagIndex = props => {
+  const { tagOptions } = props
+  const { locale } = useGlobal()
+  return (
+        <LayoutBase {...props}>
+            <div className="bg-white dark:bg-gray-700 py-10">
+                <div className="dark:text-gray-200 mb-5">
+                    <i className="mr-4 fas fa-tag" />
+                    {locale.COMMON.TAGS}:
+                </div>
+                <div id="tags-list" className="duration-200 flex flex-wrap">
+                    {tagOptions?.map(tag => {
+                      return (
+                            <div key={tag.name} className="p-2">
+                                <TagItemMini key={tag.name} tag={tag} />
+                            </div>
+                      )
+                    })}
+                </div>
+            </div>
+        </LayoutBase>
+  )
+}
 
 export {
   CONFIG_MEDIUM as THEME_CONFIG,
@@ -17,9 +317,6 @@ export {
   LayoutArchive,
   LayoutSlug,
   Layout404,
-  LayoutCategory,
   LayoutCategoryIndex,
-  LayoutPage,
-  LayoutTag,
   LayoutTagIndex
 }