init-heo

2026-05-13 23:16:47 +00:00 · 2023-07-11 18:39:47 +08:00
parent d58dc93d32
commit d08b83aef9
50 changed files with 2695 additions and 0 deletions
--- a/themes/heo/components/AnalyticsCard.js
+++ b/themes/heo/components/AnalyticsCard.js
@@ -0,0 +1,30 @@
+import Card from './Card'
+
+export function AnalyticsCard (props) {
+  const { postCount } = props
+  return <Card>
+    <div className='ml-2 mb-3 '>
+      <i className='fas fa-chart-area' /> 统计
+    </div>
+    <div className='text-xs  font-light justify-center mx-7'>
+      <div className='inline'>
+        <div className='flex justify-between'>
+          <div>文章数:</div>
+          <div>{postCount}</div>
+        </div>
+      </div>
+      <div className='hidden busuanzi_container_page_pv ml-2'>
+        <div className='flex justify-between'>
+          <div>访问量:</div>
+          <div className='busuanzi_value_page_pv' />
+        </div>
+      </div>
+      <div className='hidden busuanzi_container_site_uv ml-2'>
+        <div className='flex justify-between'>
+          <div>访客数:</div>
+          <div className='busuanzi_value_site_uv' />
+        </div>
+      </div>
+    </div>
+  </Card>
+}
--- a/themes/heo/components/Announcement.js
+++ b/themes/heo/components/Announcement.js
@@ -0,0 +1,21 @@
+import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ post, className }) => {
+  const { locale } = useGlobal()
+  if (post?.blockMap) {
+    return <div className={className}>
+        <section id='announcement-wrapper' className="dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-4 bg-white dark:bg-hexo-black-gray">
+            <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div>
+            {post && (<div id="announcement-content">
+            <NotionPage post={post} className='text-center' />
+        </div>)}
+        </section>
+    </div>
+  } else {
+    return <></>
+  }
+}
+export default Announcement
--- a/themes/heo/components/ArticleAdjacent.js
+++ b/themes/heo/components/ArticleAdjacent.js
@@ -0,0 +1,33 @@
+import Link from 'next/link'
+import CONFIG from '../config'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleAdjacent ({ prev, next }) {
+  if (!prev || !next || !CONFIG.ARTICLE_ADJACENT) {
+    return <></>
+  }
+  return (
+    <section className='pt-8 text-gray-800 items-center text-xs md:text-sm flex justify-between m-1 '>
+      <Link
+        href={`/${prev.slug}`}
+        passHref
+        className='py-1  cursor-pointer hover:underline justify-start items-center dark:text-white flex w-full h-full duration-200'>
+
+        <i className='mr-1 fas fa-angle-left' />{prev.title}
+
+      </Link>
+      <Link
+        href={`/${next.slug}`}
+        passHref
+        className='py-1 cursor-pointer hover:underline justify-end items-center dark:text-white flex w-full h-full duration-200'>
+        {next.title}
+        <i className='ml-1 my-1 fas fa-angle-right' />
+
+      </Link>
+    </section>
+  )
+}
--- a/themes/heo/components/ArticleCopyright.js
+++ b/themes/heo/components/ArticleCopyright.js
@@ -0,0 +1,41 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import CONFIG from '../config'
+
+export default function ArticleCopyright () {
+  if (!CONFIG.ARTICLE_COPYRIGHT) {
+    return <></>
+  }
+  const router = useRouter()
+  const [path, setPath] = useState(BLOG.LINK + router.asPath)
+  useEffect(() => {
+    setPath(window.location.href)
+  })
+
+  const { locale } = useGlobal()
+  return (
+    <section className="dark:text-gray-300 mt-6 mx-1 ">
+      <ul className="overflow-x-auto whitespace-nowrap text-sm dark:bg-gray-900 bg-gray-100 p-5 leading-8 border-l-2 border-indigo-500">
+        <li>
+          <strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>
+          <Link href={'/about'} className="hover:underline">
+            {BLOG.AUTHOR}
+          </Link>
+        </li>
+        <li>
+        <strong className='mr-2'>{locale.COMMON.URL}:</strong>
+          <a className="whitespace-normal break-words hover:underline" href={path}>
+            {path}
+          </a>
+        </li>
+        <li>
+          <strong className='mr-2'>{locale.COMMON.COPYRIGHT}:</strong>
+          {locale.COMMON.COPYRIGHT_NOTICE}
+        </li>
+      </ul>
+    </section>
+  );
+}
--- a/themes/heo/components/ArticleLock.js
+++ b/themes/heo/components/ArticleLock.js
@@ -0,0 +1,51 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
+
+/**
+ * 加密文章校验组件
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+export const ArticleLock = props => {
+  const { validPassword } = props
+  const { locale } = useGlobal()
+  const submitPassword = () => {
+    const p = document.getElementById('password')
+    if (!validPassword(p?.value)) {
+      const tips = document.getElementById('tips')
+      if (tips) {
+        tips.innerHTML = ''
+        tips.innerHTML = `<div class='text-red-500 animate__shakeX animate__animated'>${locale.COMMON.PASSWORD_ERROR}</div>`
+      }
+    }
+  }
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
+
+  return <div id='container' className='w-full flex justify-center items-center h-96 '>
+    <div className='text-center space-y-3'>
+      <div className='font-bold dark:text-gray-300 text-black'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
+      <div className='flex mx-4'>
+        <input id="password" type='password'
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                submitPassword()
+              }
+            }}
+            ref={passwordInputRef} // 绑定ref到passwordInputRef变量
+            className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg  font-light leading-10 bg-gray-100 dark:bg-gray-500'>
+        </input>
+        <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
+          <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
+        </div>
+      </div>
+      <div id='tips'>
+      </div>
+    </div>
+  </div>
+}
--- a/themes/heo/components/ArticleRecommend.js
+++ b/themes/heo/components/ArticleRecommend.js
@@ -0,0 +1,65 @@
+import Link from 'next/link'
+import CONFIG from '../config'
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 关联推荐文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleRecommend({ recommendPosts, siteInfo }) {
+  const { locale } = useGlobal()
+
+  if (
+    !CONFIG.ARTICLE_RECOMMEND ||
+    !recommendPosts ||
+    recommendPosts.length === 0
+  ) {
+    return <></>
+  }
+
+  return (
+    <div className="pt-8">
+      <div className=" mb-2 px-1 flex flex-nowrap justify-between">
+        <div className='dark:text-gray-300'>
+          <i className="mr-2 fas fa-thumbs-up" />
+          {locale.COMMON.RELATE_POSTS}
+        </div>
+      </div>
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+        {recommendPosts.map(post => {
+          const headerImage = post?.pageCoverThumbnail
+            ? `url("${post.pageCoverThumbnail}")`
+            : `url("${siteInfo?.pageCover}")`
+
+          return (
+            (<Link
+              key={post.id}
+              title={post.title}
+              href={`${BLOG.SUB_PATH}/${post.slug}`}
+              passHref
+              className="flex h-40 cursor-pointer overflow-hidden">
+
+              <div
+                className="h-full w-full bg-cover bg-center bg-no-repeat hover:scale-110 transform duration-200"
+                style={{ backgroundImage: headerImage }}
+              >
+                <div className="flex items-center justify-center bg-black bg-opacity-60 hover:bg-opacity-10 w-full h-full duration-300 ">
+                  <div className=" text-sm  text-white text-center shadow-text">
+                    <div>
+                      <i className="fas fa-calendar-alt mr-1" />
+                      {post.date?.start_date}
+                    </div>
+                    <div className="">{post.title}</div>
+                  </div>
+                </div>
+              </div>
+
+            </Link>)
+          )
+        })}
+      </div>
+    </div>
+  )
+}
--- a/themes/heo/components/BlogPostArchive.js
+++ b/themes/heo/components/BlogPostArchive.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import Link from 'next/link'
+import BLOG from '@/blog.config'
+/**
+ * 博客归档列表
+ * @param posts 所有文章
+ * @param archiveTitle 归档标题
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostArchive = ({ posts = [], archiveTitle }) => {
+  if (!posts || posts.length === 0) {
+    return <></>
+  } else {
+    return (
+      <div>
+        <div
+          className="pt-16 pb-4 text-3xl dark:text-gray-300"
+          id={archiveTitle}
+        >
+          {archiveTitle}
+        </div>
+        <ul>
+          {posts?.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-indigo-500 dark:hover:border-indigo-300 dark:border-indigo-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-indigo-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+
+                  {post.title}
+
+                </Link>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
+  }
+}
+
+export default BlogPostArchive
--- a/themes/heo/components/BlogPostCard.js
+++ b/themes/heo/components/BlogPostCard.js
@@ -0,0 +1,49 @@
+import Link from 'next/link'
+import React from 'react'
+import CONFIG from '../config'
+import { BlogPostCardInfo } from './BlogPostCardInfo'
+import BLOG from '@/blog.config'
+// import Image from 'next/image'
+
+const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
+  const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
+  if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
+    post.pageCover = siteInfo?.pageCoverThumbnail
+  }
+  const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
+  //   const delay = (index % 2) * 200
+
+  return (
+
+        <div className={`${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
+            <div
+                data-aos="fade-up"
+                data-aos-easing="ease-in-out"
+                data-aos-duration="800"
+                data-aos-once="false"
+                data-aos-anchor-placement="top-bottom"
+                id='blog-post-card'
+                key={post.id}
+                className={`md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${CONFIG.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
+                    overflow-hidden border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
+
+                {/* 文字内容 */}
+                <BlogPostCardInfo index={index} post={post} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary} />
+
+                {/* 图片封面 */}
+                {showPageCover && (
+                    <div className="md:w-5/12 overflow-hidden">
+                        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                            <div className='h-56 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
+                        </Link>
+                    </div>
+                )}
+
+            </div>
+
+        </div>
+
+  )
+}
+
+export default BlogPostCard
--- a/themes/heo/components/BlogPostCardInfo.js
+++ b/themes/heo/components/BlogPostCardInfo.js
@@ -0,0 +1,93 @@
+import NotionPage from '@/components/NotionPage'
+import Link from 'next/link'
+import TagItemMini from './TagItemMini'
+import TwikooCommentCount from '@/components/TwikooCommentCount'
+import BLOG from '@/blog.config'
+
+/**
+ * 博客列表的文字内容
+ * @param {*} param0
+ * @returns
+ */
+export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary }) => {
+  return <div className={`flex flex-col justify-between lg:p-6 p-4  ${showPageCover && !showPreview ? 'md:w-7/12 w-full md:max-h-60' : 'w-full'}`}>
+       <div>
+         {/* 标题 */}
+         <Link
+            href={`${BLOG.SUB_PATH}/${post.slug}`}
+            passHref
+            className={`line-clamp-2 replace cursor-pointer text-2xl ${showPreview ? 'text-center' : ''
+                } leading-tight font-normal text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
+
+            <span className='menu-link '>{post.title}</span>
+
+        </Link>
+
+        {/* 分类 */}
+        { post?.category && <div
+            className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
+                } flex-wrap dark:text-gray-500 text-gray-400 `}
+        >
+            <Link
+                href={`/category/${post.category}`}
+                passHref
+                className="cursor-pointer font-light text-sm menu-link hover:text-indigo-700 dark:hover:text-indigo-400 transform">
+
+                <i className="mr-1 far fa-folder" />
+                {post.category}
+
+            </Link>
+
+            <TwikooCommentCount className='text-sm hover:text-indigo-700 dark:hover:text-indigo-400' post={post}/>
+        </div>}
+
+          {/* 摘要 */}
+          {(!showPreview || showSummary) && !post.results && (
+            <p className="line-clamp-2 replace my-3 text-gray-700  dark:text-gray-300 text-sm font-light leading-7">
+                {post.summary}
+            </p>
+          )}
+
+        {/* 搜索结果 */}
+        {post.results && (
+            <p className="line-clamp-2 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                {post.results.map(r => (
+                    <span key={r}>{r}</span>
+                ))}
+            </p>
+        )}
+        {/* 预览 */}
+        {showPreview && (
+            <div className="overflow-ellipsis truncate">
+                <NotionPage post={post} />
+            </div>
+        )}
+
+       </div>
+
+       <div>
+         {/* 日期标签 */}
+         <div className="text-gray-400 justify-between flex">
+            {/* 日期 */}
+            <Link
+                href={`/archive#${post?.publishTime?.substr(0, 7)}`}
+                passHref
+                className="font-light menu-link cursor-pointer text-sm leading-4 mr-3">
+
+                <i className="far fa-calendar-alt mr-1" />
+                {post?.publishTime || post.lastEditedTime}
+
+            </Link>
+
+            <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
+                <div>
+                    {' '}
+                    {post.tagItems?.map(tag => (
+                        <TagItemMini key={tag.name} tag={tag} />
+                    ))}
+                </div>
+            </div>
+        </div>
+       </div>
+       </div>
+}
--- a/themes/heo/components/BlogPostListEmpty.js
+++ b/themes/heo/components/BlogPostListEmpty.js
@@ -0,0 +1,14 @@
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 空白博客 列表
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListEmpty = ({ currentSearch }) => {
+  const { locale } = useGlobal()
+  return <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
+        <div className='text-gray-500 dark:text-gray-300'>{locale.COMMON.NO_MORE} {(currentSearch && <div>{currentSearch}</div>)}</div>
+  </div>
+}
+export default BlogPostListEmpty
--- a/themes/heo/components/BlogPostListPage.js
+++ b/themes/heo/components/BlogPostListPage.js
@@ -0,0 +1,34 @@
+import BlogPostCard from './BlogPostCard'
+import PaginationNumber from './PaginationNumber'
+import BLOG from '@/blog.config'
+import BlogPostListEmpty from './BlogPostListEmpty'
+
+/**
+ * 文章列表分页表格
+ * @param page 当前页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
+  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+  const showPagination = postCount >= BLOG.POSTS_PER_PAGE
+  if (!posts || posts.length === 0 || page > totalPage) {
+    return <BlogPostListEmpty />
+  } else {
+    return (
+      <div id="container" className='w-full'>
+        {/* 文章列表 */}
+        <div className="space-y-6 px-2">
+          {posts?.map(post => (
+            <BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
+          ))}
+        </div>
+        {showPagination && <PaginationNumber page={page} totalPage={totalPage} />}
+      </div>
+    )
+  }
+}
+
+export default BlogPostListPage
--- a/themes/heo/components/BlogPostListScroll.js
+++ b/themes/heo/components/BlogPostListScroll.js
@@ -0,0 +1,75 @@
+import BLOG from '@/blog.config'
+import BlogPostCard from './BlogPostCard'
+import BlogPostListEmpty from './BlogPostListEmpty'
+import { useGlobal } from '@/lib/global'
+import React from 'react'
+import CONFIG from '../config'
+import { getListByPage } from '@/lib/utils'
+
+/**
+ * 博客列表滚动分页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.POST_LIST_SUMMARY, siteInfo }) => {
+  const postsPerPage = BLOG.POSTS_PER_PAGE
+  const [page, updatePage] = React.useState(1)
+  const postsToShow = getListByPage(posts, page, postsPerPage)
+
+  let hasMore = false
+  if (posts) {
+    const totalCount = posts.length
+    hasMore = page * postsPerPage < totalCount
+  }
+
+  const handleGetMore = () => {
+    if (!hasMore) return
+    updatePage(page + 1)
+  }
+
+  // 监听滚动自动分页加载
+  const scrollTrigger = () => {
+    requestAnimationFrame(() => {
+      const scrollS = window.scrollY + window.outerHeight
+      const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
+      if (scrollS > clientHeight + 100) {
+        handleGetMore()
+      }
+    })
+  }
+
+  // 监听滚动
+  React.useEffect(() => {
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  })
+
+  const targetRef = React.useRef(null)
+  const { locale } = useGlobal()
+
+  if (!postsToShow || postsToShow.length === 0) {
+    return <BlogPostListEmpty currentSearch={currentSearch} />
+  } else {
+    return <div id='container' ref={targetRef} className='w-full'>
+
+      {/* 文章列表 */}
+      <div className='flex flex-wrap space-y-1 lg:space-y-4 px-2'>
+        {postsToShow.map(post => (
+          <BlogPostCard key={post.id} post={post} showSummary={showSummary} siteInfo={siteInfo}/>
+        ))}
+      </div>
+
+      <div>
+        <div onClick={() => { handleGetMore() }}
+             className='w-full my-4 py-4 text-center cursor-pointer rounded-xl dark:text-gray-200'
+        > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE}`} </div>
+      </div>
+    </div>
+  }
+}
+
+export default BlogPostListScroll
--- a/themes/heo/components/Card.js
+++ b/themes/heo/components/Card.js
@@ -0,0 +1,9 @@
+const Card = ({ children, headerSlot, className }) => {
+  return <div className={className}>
+    <>{headerSlot}</>
+    <section className="card shadow-md hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
+        {children}
+    </section>
+  </div>
+}
+export default Card
--- a/themes/heo/components/Catalog.js
+++ b/themes/heo/components/Catalog.js
@@ -0,0 +1,95 @@
+import React, { useRef } from 'react'
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import Progress from './Progress'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ toc }) => {
+  const { locale } = useGlobal()
+  // 监听滚动事件
+  React.useEffect(() => {
+    window.addEventListener('scroll', actionSectionScrollSpy)
+    actionSectionScrollSpy()
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [])
+
+  // 目录自动滚动
+  const tRef = useRef(null)
+  const tocIds = []
+
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = React.useState(null)
+
+  const throttleMs = 200
+  const actionSectionScrollSpy = React.useCallback(throttle(() => {
+    const sections = document.getElementsByClassName('notion-h')
+    let prevBBox = null
+    let currentSectionId = activeSection
+    for (let i = 0; i < sections.length; ++i) {
+      const section = sections[i]
+      if (!section || !(section instanceof Element)) continue
+      if (!currentSectionId) {
+        currentSectionId = section.getAttribute('data-id')
+      }
+      const bbox = section.getBoundingClientRect()
+      const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+      const offset = Math.max(150, prevHeight / 4)
+      // GetBoundingClientRect returns values relative to viewport
+      if (bbox.top - offset < 0) {
+        currentSectionId = section.getAttribute('data-id')
+        prevBBox = bbox
+        continue
+      }
+      // No need to continue loop, if last element has been detected
+      break
+    }
+    setActiveSection(currentSectionId)
+    const index = tocIds.indexOf(currentSectionId) || 0
+    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+  }, throttleMs))
+
+  // 无目录就直接返回空
+  if (!toc || toc.length < 1) {
+    return <></>
+  }
+
+  return <div className='px-3 py-1'>
+    <div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
+    <div className='w-full py-3'>
+      <Progress />
+    </div>
+    <div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}>
+      <nav className='h-full  text-black'>
+        {toc.map((tocItem) => {
+          const id = uuidToId(tocItem.id)
+          tocIds.push(id)
+          return (
+            <a
+              key={id}
+              href={`#${id}`}
+              className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
+            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
+            >
+              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
+                className={`${activeSection === id && ' font-bold text-indigo-600'}`}
+              >
+                {tocItem.text}
+              </span>
+            </a>
+          )
+        })}
+      </nav>
+
+    </div>
+  </div>
+}
+
+export default Catalog
--- a/themes/heo/components/CategoryGroup.js
+++ b/themes/heo/components/CategoryGroup.js
@@ -0,0 +1,31 @@
+import Link from 'next/link'
+import React from 'react'
+
+const CategoryGroup = ({ currentCategory, categories }) => {
+  if (!categories) {
+    return <></>
+  }
+  return <>
+    <div id='category-list' className='dark:border-gray-600 flex flex-wrap  mx-4'>
+      {categories.map(category => {
+        const selected = currentCategory === category.name
+        return (
+          <Link
+            key={category.name}
+            href={`/category/${category.name}`}
+            passHref
+            className={(selected
+              ? 'hover:text-white dark:hover:text-white bg-indigo-600 text-white '
+              : 'dark:text-gray-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-indigo-600') +
+              '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>
+
+            <div> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category.name}({category.count})</div>
+
+          </Link>
+        );
+      })}
+    </div>
+  </>;
+}
+
+export default CategoryGroup
--- a/themes/heo/components/FloatDarkModeButton.js
+++ b/themes/heo/components/FloatDarkModeButton.js
@@ -0,0 +1,31 @@
+import { useGlobal } from '@/lib/global'
+import { saveDarkModeToCookies } from '@/themes/theme'
+import CONFIG from '../config'
+
+export default function FloatDarkModeButton () {
+  const { isDarkMode, updateDarkMode } = useGlobal()
+
+  if (!CONFIG.WIDGET_DARK_MODE) {
+    return <></>
+  }
+
+  // 用户手动设置主题
+  const handleChangeDarkMode = () => {
+    const newStatus = !isDarkMode
+    saveDarkModeToCookies(newStatus)
+    updateDarkMode(newStatus)
+    const htmlElement = document.getElementsByTagName('html')[0]
+    htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
+    htmlElement.classList?.add(newStatus ? 'dark' : 'light')
+  }
+
+  return (
+    <div
+      onClick={handleChangeDarkMode}
+      className={'justify-center items-center w-7 h-7 text-center transform hover:scale-105 duration-200'
+      }
+    >
+      <i id="darkModeButton" className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas text-xs`}/>
+    </div>
+  )
+}
--- a/themes/heo/components/Footer.js
+++ b/themes/heo/components/Footer.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import BLOG from '@/blog.config'
+// import DarkModeButton from '@/components/DarkModeButton'
+
+const Footer = ({ title }) => {
+  const d = new Date()
+  const currentYear = d.getFullYear()
+  const copyrightDate = (function() {
+    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
+      return BLOG.SINCE + '-' + currentYear
+    }
+    return currentYear
+  })()
+
+  return (
+    <footer
+      className='relative z-10 dark:bg-black flex-shrink-0 bg-hexo-light-gray justify-center text-center m-auto w-full leading-6  text-gray-600 dark:text-gray-100 text-sm p-6'
+    >
+      {/* <DarkModeButton/> */}
+
+      <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold  dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>
+
+      {BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
+
+      <span className='hidden busuanzi_container_site_pv'>
+            <i className='fas fa-eye'/><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
+      <span className='pl-2 hidden busuanzi_container_site_uv'>
+        <i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
+        <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} | {BLOG.BIO}</h1>
+        <p className='text-xs pt-2 text-light-500 dark:text-gray-500'>Powered by <a href='https://github.com/tangly1024/NotionNext' className='dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</p></span><br/>
+
+    </footer>
+  )
+}
+
+export default Footer
--- a/themes/heo/components/Header.js
+++ b/themes/heo/components/Header.js
@@ -0,0 +1,82 @@
+// import Image from 'next/image'
+import { useEffect, useState } from 'react'
+import Typed from 'typed.js'
+import CONFIG from '../config'
+import NavButtonGroup from './NavButtonGroup'
+import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
+
+let wrapperTop = 0
+
+/**
+ * 顶部全屏大图
+ * @returns
+ */
+const Hero = props => {
+  const [typed, changeType] = useState()
+  const { siteInfo } = props
+  const { locale } = useGlobal()
+  const scrollToWrapper = () => {
+    window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
+  }
+  useEffect(() => {
+    updateHeaderHeight()
+
+    if (!typed && window && document.getElementById('typed')) {
+      changeType(
+        new Typed('#typed', {
+          strings: BLOG.GREETING_WORDS.split(','),
+          typeSpeed: 200,
+          backSpeed: 100,
+          backDelay: 400,
+          showCursor: true,
+          smartBackspace: true
+        })
+      )
+    }
+
+    window.addEventListener('resize', updateHeaderHeight)
+    return () => {
+      window.removeEventListener('resize', updateHeaderHeight)
+    }
+  })
+
+  function updateHeaderHeight() {
+    requestAnimationFrame(() => {
+      const wrapperElement = document.getElementById('wrapper')
+      wrapperTop = wrapperElement?.offsetTop
+    })
+  }
+
+  return (
+        <header
+            id="header" style={{ zIndex: 1 }}
+            className="w-full h-screen relative bg-black"
+        >
+
+            <div className="text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
+                {/* 站点标题 */}
+                <div className='font-black text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
+                {/* 站点欢迎语 */}
+                <div className='mt-2 h-12 items-center text-center font-medium shadow-text text-lg'>
+                    <span id='typed' />
+                </div>
+
+                {/* 首页导航大按钮 */}
+                {CONFIG.HOME_NAV_BUTTONS && <NavButtonGroup {...props} />}
+
+                {/* 滚动按钮 */}
+                <div onClick={scrollToWrapper} className="z-10 cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white">
+                    <div className="opacity-70 animate-bounce text-xs">{locale.COMMON.START_READING}</div>
+                    <i className='opacity-70 animate-bounce fas fa-angle-down' />
+                </div>
+            </div>
+
+            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo?.pageCover}')` }}
+                className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`} />
+
+        </header>
+  )
+}
+
+export default Hero
--- a/themes/heo/components/HeaderArticle.js
+++ b/themes/heo/components/HeaderArticle.js
@@ -0,0 +1,79 @@
+import Link from 'next/link'
+import TagItemMini from './TagItemMini'
+import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
+import NotionIcon from '@/components/NotionIcon'
+
+export default function HeaderArticle({ post, siteInfo }) {
+  const { locale } = useGlobal()
+
+  if (!post) {
+    return <></>
+  }
+  const headerImage = post?.pageCover ? `url("${post.pageCover}")` : `url("${siteInfo?.pageCover}")`
+
+  return (
+    <div
+      id="header"
+      className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat z-10"
+      style={{ backgroundImage: headerImage }}
+    >
+      <header id='article-header-cover'
+            className="bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
+
+        <div className='mt-10'>
+            <div className='mb-3 flex justify-center'>
+              {post.category && <>
+                <Link href={`/category/${post.category}`} passHref legacyBehavior>
+                  <div className="cursor-pointer px-2 py-1 mb-2 border rounded-sm dark:border-white text-sm font-medium hover:underline duration-200 shadow-text-md text-white">
+                    {post.category}
+                  </div>
+                </Link>
+              </>}
+            </div>
+
+          {/* 文章Title */}
+          <div className="leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
+            <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />{post.title}
+          </div>
+
+          <section className="flex-wrap shadow-text-md flex text-sm justify-center mt-4 text-white dark:text-gray-400 font-light leading-8">
+
+            <div className='flex justify-center dark:text-gray-200 text-opacity-70'>
+              {post?.type !== 'Page' && (
+                <>
+                  <Link
+                    href={`/archive#${post?.publishTime?.substr(0, 7)}`}
+                    passHref
+                    className="pl-1 mr-2 cursor-pointer hover:underline">
+
+                    {locale.COMMON.POST_TIME}:{post?.publishTime}
+
+                  </Link>
+                </>
+              )}
+              <div className="pl-1 mr-2">
+                {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
+              </div>
+            </div>
+
+            {BLOG.ANALYTICS_BUSUANZI_ENABLE && <div className="busuanzi_container_page_pv font-light mr-2">
+              <span className="mr-2 busuanzi_value_page_pv" />
+              {locale.COMMON.VIEWS}
+            </div>}
+          </section>
+
+            <div className='mt-4 mb-1'>
+                {post.tagItems && (
+                    <div className="flex justify-center flex-nowrap overflow-x-auto">
+                        {post.tagItems.map(tag => (
+                            <TagItemMini key={tag.name} tag={tag} />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+      </header>
+    </div>
+  )
+}
--- a/themes/heo/components/HexoRecentComments.js
+++ b/themes/heo/components/HexoRecentComments.js
@@ -0,0 +1,47 @@
+import React from 'react'
+import BLOG from '@/blog.config'
+import Card from '@/themes/hexo/components/Card'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { RecentComments } from '@waline/client'
+
+/**
+ * @see https://waline.js.org/guide/get-started.html
+ * @param {*} props
+ * @returns
+ */
+const HexoRecentComments = (props) => {
+  const [comments, updateComments] = React.useState([])
+  const { locale } = useGlobal()
+  const [onLoading, changeLoading] = React.useState(true)
+  React.useEffect(() => {
+    RecentComments({
+      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      count: 5
+    }).then(({ comments }) => {
+      changeLoading(false)
+      updateComments(comments)
+    })
+  }, [])
+
+  return (
+        <Card >
+            <div className=" mb-2 px-1 justify-between">
+                <i className="mr-2 fas fas fa-comment" />
+                {locale.COMMON.RECENT_COMMENTS}
+            </div>
+
+            {onLoading && <div>Loading...<i className='ml-2 fas fa-spinner animate-spin' /></div>}
+            {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
+            {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2 pl-1'>
+                <div className='dark:text-gray-200 text-sm waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
+                <div className='dark:text-gray-400 text-gray-400  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1 pr-2'>
+                    <Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link>
+                </div>
+            </div>)}
+
+        </Card>
+  )
+}
+
+export default HexoRecentComments
--- a/themes/heo/components/InfoCard.js
+++ b/themes/heo/components/InfoCard.js
@@ -0,0 +1,32 @@
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import Card from './Card'
+import SocialButton from './SocialButton'
+import MenuGroupCard from './MenuGroupCard'
+
+/**
+ * 社交信息卡
+ * @param {*} props
+ * @returns
+ */
+export function InfoCard(props) {
+  const { className, siteInfo } = props
+  const router = useRouter()
+  return (
+        <Card className={className}>
+            <div
+                className='justify-center items-center flex py-6 dark:text-gray-100  transform duration-200 cursor-pointer'
+                onClick={() => {
+                  router.push('/')
+                }}
+            >
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR} />
+            </div>
+            <div className='font-medium text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
+            <div className='text-sm text-center'>{BLOG.BIO}</div>
+            <MenuGroupCard {...props} />
+            <SocialButton />
+        </Card>
+  )
+}
--- a/themes/heo/components/JumpToCommentButton.js
+++ b/themes/heo/components/JumpToCommentButton.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import CONFIG from '../config'
+
+/**
+ * 跳转到评论区
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToCommentButton = () => {
+  if (!CONFIG.WIDGET_TO_COMMENT) {
+    return <></>
+  }
+
+  function navToComment() {
+    if (document.getElementById('comment')) {
+      window.scrollTo({ top: document.getElementById('comment').offsetTop, behavior: 'smooth' })
+    }
+    // 兼容性不好
+    // const commentElement = document.getElementById('comment')
+    // if (commentElement) {
+    // commentElement?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
+  }
+
+  return (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center' onClick={navToComment} >
+    <i className='fas fa-comment text-xs' />
+  </div>)
+}
+
+export default JumpToCommentButton
--- a/themes/heo/components/JumpToTopButton.js
+++ b/themes/heo/components/JumpToTopButton.js
@@ -0,0 +1,25 @@
+import { useGlobal } from '@/lib/global'
+import React from 'react'
+import CONFIG from '../config'
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToTopButton = ({ showPercent = true, percent }) => {
+  const { locale } = useGlobal()
+
+  if (!CONFIG.WIDGET_TO_TOP) {
+    return <></>
+  }
+  return (<div className='space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-auto pb-1 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
+        <div title={locale.POST.TOP} ><i className='fas fa-arrow-up text-xs' /></div>
+        {showPercent && (<div className='text-xs hidden lg:block'>{percent}</div>)}
+    </div>)
+}
+
+export default JumpToTopButton
--- a/themes/heo/components/LatestPostsGroup.js
+++ b/themes/heo/components/LatestPostsGroup.js
@@ -0,0 +1,72 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+// import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 最新文章列表
+ * @param posts 所有文章数据
+ * @param sliceCount 截取展示的数量 默认6
+ * @constructor
+ */
+const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
+  // 获取当前路径
+  const currentPath = useRouter().asPath
+  const { locale } = useGlobal()
+
+  if (!latestPosts) {
+    return <></>
+  }
+
+  return <>
+        <div className=" mb-2 px-1 flex flex-nowrap justify-between">
+            <div>
+                <i className="mr-2 fas fas fa-history" />
+                {locale.COMMON.LATEST_POSTS}
+            </div>
+        </div>
+        {latestPosts.map(post => {
+          const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
+
+          const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
+
+          return (
+            (<Link
+                    key={post.id}
+                    title={post.title}
+                    href={`${BLOG.SUB_PATH}/${post.slug}`}
+                    passHref
+                    className={'my-3 flex'}>
+
+                    <div className="w-20 h-14 overflow-hidden relative">
+                          {/* <Image
+                            src={headerImage}
+                            fill
+                            style={{ objectFit: 'cover' }}
+                            placeholder='blur'
+                            blurDataURL='/bg_image.jpg'
+                            quality={10}
+                            alt={post.title} /> */}
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <img src={`${headerImage}`} className='object-cover w-full h-full'/>
+                    </div>
+                    <div
+                        className={
+                            (selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
+                            ' text-sm overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
+                            ' hover:text-indigo-400 cursor-pointer items-center flex'
+                        }
+                    >
+                        <div>
+                            <div className='line-clamp-2 menu-link'>{post.title}</div>
+                            <div className="text-gray-500">{post.lastEditedTime}</div>
+                        </div>
+                    </div>
+
+                </Link>)
+          )
+        })}
+    </>
+}
+export default LatestPostsGroup
--- a/themes/heo/components/LoadingCover.js
+++ b/themes/heo/components/LoadingCover.js
@@ -0,0 +1,8 @@
+export default function LoadingCover () {
+  return (<div id="loading-cover" className={'md:-mt-20 flex-grow dark:text-white text-black animate__animated animate__fadeIn flex flex-col justify-center z-50 w-full h-screen container mx-auto'}>
+  <div className="mx-auto">
+    <i className="fas fa-spinner animate-spin"/>
+  </div>
+</div>
+  )
+}
--- a/themes/heo/components/Logo.js
+++ b/themes/heo/components/Logo.js
@@ -0,0 +1,15 @@
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+import React from 'react'
+
+const Logo = props => {
+  const { siteInfo } = props
+  return (
+    <Link href='/' passHref legacyBehavior>
+      <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
+        <div className='font-medium text-lg p-1.5 rounded dark:border-white menu-link transform duration-200'> {siteInfo?.title || BLOG.TITLE}</div>
+      </div>
+    </Link>
+  )
+}
+export default Logo
--- a/themes/heo/components/MenuGroupCard.js
+++ b/themes/heo/components/MenuGroupCard.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import Link from 'next/link'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+
+const MenuGroupCard = (props) => {
+  const { postCount, categoryOptions, tagOptions } = props
+  const { locale } = useGlobal()
+  const archiveSlot = <div className='text-center'>{postCount}</div>
+  const categorySlot = <div className='text-center'>{categoryOptions?.length}</div>
+  const tagSlot = <div className='text-center'>{tagOptions?.length}</div>
+
+  const links = [
+    { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: CONFIG.MENU_ARCHIVE },
+    { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: CONFIG.MENU_CATEGORY },
+    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG.MENU_TAG }
+  ]
+
+  return (
+    <nav id='nav' className='leading-8 flex justify-center  dark:text-gray-200 w-full'>
+        {links.map(link => {
+          if (link.show) {
+            return (
+              <Link
+                key={`${link.to}`}
+                title={link.to}
+                href={link.to}
+                target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
+                className={'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'}>
+
+                <div className='w-full items-center justify-center hover:scale-105 duration-200 transform dark:hover:text-indigo-400 hover:text-indigo-600'>
+                  <div className='text-center'>{link.name}</div>
+                  <div className='text-center font-semibold'>{link.slot}</div>
+                </div>
+
+              </Link>
+            )
+          } else {
+            return null
+          }
+        })}
+      </nav>
+  )
+}
+export default MenuGroupCard
--- a/themes/heo/components/MenuItemCollapse.js
+++ b/themes/heo/components/MenuItemCollapse.js
@@ -0,0 +1,54 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  const [isOpen, changeIsOpen] = useState(false)
+
+  const toggleShow = () => {
+    changeShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  return <>
+        <div className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray' onClick={toggleShow} >
+            {!hasSubMenu && <Link
+                href={link?.to}
+                className="font-extralight  flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1">
+                <span className=' transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
+            </Link>}
+            {hasSubMenu && <div
+                onClick={hasSubMenu ? toggleOpenSubMenu : null}
+                className="font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1">
+                <span className='transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
+                <i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
+            </div>}
+        </div>
+
+        {/* 折叠子菜单 */}
+        {hasSubMenu && <Collapse isOpen={isOpen}>
+            {link.subMenus.map(sLink => {
+              return <div key={sLink.id} className='dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  py-3 pr-6'>
+                    <Link href={sLink.to}>
+                        <span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
+                    </Link>
+                </div>
+            })}
+        </Collapse>}
+    </>
+}
--- a/themes/heo/components/MenuItemDrop.js
+++ b/themes/heo/components/MenuItemDrop.js
@@ -0,0 +1,41 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+
+        {!hasSubMenu &&
+            <Link
+                href={link?.to}
+                className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
+                {link?.icon && <i className={link?.icon}/>} {link?.name}
+                {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
+            </Link>}
+
+        {hasSubMenu && <>
+            <div className='cursor-pointer font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
+                {link?.icon && <i className={link?.icon}/>} {link?.name}
+                <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
+            </div>
+        </>}
+
+        {/* 子菜单 */}
+        {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block  `}>
+            {link.subMenus.map((sLink, index) => {
+              return <li key={index} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
+                    <Link href={sLink.to}>
+                        <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
+                    </Link>
+                </li>
+            })}
+        </ul>}
+
+    </div>
+}
--- a/themes/heo/components/MenuListSide.js
+++ b/themes/heo/components/MenuListSide.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
+import { MenuItemCollapse } from './MenuItemCollapse'
+import CONFIG from '../config'
+
+export const MenuListSide = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+  ]
+
+  if (customNav) {
+    links = customNav.concat(links)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+        <nav>
+            {/* {links.map(link => <MenuItemNormal key={link?.id} link={link} />)} */}
+            {links?.map(link => <MenuItemCollapse key={link?.id} link={link} />)}
+        </nav>
+  )
+}
--- a/themes/heo/components/MenuListTop.js
+++ b/themes/heo/components/MenuListTop.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+import BLOG from '@/blog.config'
+import { MenuItemDrop } from './MenuItemDrop'
+
+export const MenuListTop = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG.MENU_INDEX },
+    { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
+    { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
+    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
+    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (<>
+        <nav id='nav-mobile' className='leading-8 justify-center font-light w-full flex'>
+            {links?.map(link => link && link.show && <MenuItemDrop key={link?.id} link={link} />)}
+        </nav>
+    </>)
+}
--- a/themes/heo/components/NavButtonGroup.js
+++ b/themes/heo/components/NavButtonGroup.js
@@ -0,0 +1,33 @@
+
+import React from 'react'
+import Link from 'next/link'
+
+/**
+ * 首页导航大按钮组件
+ * @param {*} props
+ * @returns
+ */
+const NavButtonGroup = (props) => {
+  const { categoryOptions } = props
+  if (!categoryOptions || categoryOptions.length === 0) {
+    return <></>
+  }
+
+  return (
+    <nav id='home-nav-button' className={'w-full z-10 md:h-72 md:mt-6 xl:mt-32 px-5 py-2 mt-8 flex flex-wrap md:max-w-5xl space-y-2 md:space-y-1 md:flex justify-center max-h-80 overflow-auto'}>
+      {categoryOptions.map(category => {
+        return (
+          <Link
+            key={`${category.name}`}
+            title={`${category.name}`}
+            href={`/category/${category.name}`}
+            passHref
+            className='text-center w-full sm:w-4/5 md:mx-6 md:w-40 md:h-14 lg:h-20 h-14 justify-center items-center flex border-2 cursor-pointer rounded-lg glassmorphism hover:bg-white hover:text-black duration-200 font-bold hover:scale-105 transform'>
+                {category.name}
+            </Link>
+        )
+      })}
+    </nav>
+  )
+}
+export default NavButtonGroup
--- a/themes/heo/components/PaginationNumber.js
+++ b/themes/heo/components/PaginationNumber.js
@@ -0,0 +1,107 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 数字翻页插件
+ * @param page 当前页码
+ * @param showNext 是否有下一页
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PaginationNumber = ({ page, totalPage }) => {
+  const router = useRouter()
+  const currentPage = +page
+  const showNext = page < totalPage
+  const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
+  const pages = generatePages(pagePrefix, page, currentPage, totalPage)
+
+  return (
+    <div className="mt-10 mb-5  flex justify-center items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2">
+        {/* 上一页 */}
+        <Link
+          href={{
+            pathname: currentPage === 2
+              ? `${pagePrefix}/`
+              : `${pagePrefix}/page/${currentPage - 1}`,
+            query: router.query.s ? { s: router.query.s } : {}
+          }}
+          rel="prev"
+          className={`${currentPage === 1 ? 'invisible' : 'block'} pb-0.5 border-white dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-200  hover:font-bold`}>
+
+          <i className="fas fa-angle-left" />
+
+        </Link>
+
+        {pages}
+
+        {/* 下一页 */}
+        <Link
+          href={{
+            pathname: `${pagePrefix}/page/${currentPage + 1}`,
+            query: router.query.s ? { s: router.query.s } : {}
+          }}
+          rel="next"
+          className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-b border-indigo-300 dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}>
+
+          <i className="fas fa-angle-right" />
+
+        </Link>
+    </div>
+  )
+}
+
+function getPageElement(page, currentPage, pagePrefix) {
+  return (
+    (<Link
+      href={page === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${page}`}
+      key={page}
+      passHref
+      className={
+          (page + '' === currentPage + ''
+            ? 'font-bold bg-indigo-400 dark:bg-indigo-500 text-white '
+            : 'border-b duration-500 border-indigo-300 hover:border-indigo-400 ') +
+          ' border-white dark:border-indigo-700 dark:hover:border-indigo-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'
+      }>
+
+      {page}
+
+    </Link>)
+  )
+}
+
+function generatePages(pagePrefix, page, currentPage, totalPage) {
+  const pages = []
+  const groupCount = 7 // 最多显示页签数
+  if (totalPage <= groupCount) {
+    for (let i = 1; i <= totalPage; i++) {
+      pages.push(getPageElement(i, page, pagePrefix))
+    }
+  } else {
+    pages.push(getPageElement(1, page, pagePrefix))
+    const dynamicGroupCount = groupCount - 2
+    let startPage = currentPage - 2
+    if (startPage <= 1) {
+      startPage = 2
+    }
+    if (startPage + dynamicGroupCount > totalPage) {
+      startPage = totalPage - dynamicGroupCount
+    }
+    if (startPage > 2) {
+      pages.push(<div key={-1}>... </div>)
+    }
+
+    for (let i = 0; i < dynamicGroupCount; i++) {
+      if (startPage + i < totalPage) {
+        pages.push(getPageElement(startPage + i, page, pagePrefix))
+      }
+    }
+
+    if (startPage + dynamicGroupCount < totalPage) {
+      pages.push(<div key={-2}>... </div>)
+    }
+
+    pages.push(getPageElement(totalPage, page, pagePrefix))
+  }
+  return pages
+}
+export default PaginationNumber
--- a/themes/heo/components/Progress.js
+++ b/themes/heo/components/Progress.js
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react'
+import { isBrowser } from '@/lib/utils'
+
+/**
+ * 顶部页面阅读进度条
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Progress = ({ targetRef, showPercent = true }) => {
+  const currentRef = targetRef?.current || targetRef
+  const [percent, changePercent] = useState(0)
+  const scrollListener = () => {
+    const target = currentRef || (isBrowser() && document.getElementById('article-wrapper'))
+    if (target) {
+      const clientHeight = target.clientHeight
+      const scrollY = window.pageYOffset
+      const fullHeight = clientHeight - window.outerHeight
+      let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
+      if (per > 100) per = 100
+      if (per < 0) per = 0
+      changePercent(per)
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [])
+
+  return (
+    <div className="h-4 w-full shadow-2xl bg-gray-700 rounded-sm">
+      <div
+        className="h-4 bg-indigo-600 duration-200 rounded-sm"
+        style={{ width: `${percent}%` }}
+      >
+        {showPercent && (
+          <div className="text-right text-white text-xs">{percent}%</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Progress
--- a/themes/heo/components/RightFloatArea.js
+++ b/themes/heo/components/RightFloatArea.js
@@ -0,0 +1,42 @@
+import throttle from 'lodash.throttle'
+import { useCallback, useEffect, useState } from 'react'
+import FloatDarkModeButton from './FloatDarkModeButton'
+import JumpToTopButton from './JumpToTopButton'
+
+/**
+ * 悬浮在右下角的按钮，当页面向下滚动100px时会出现
+ * @param {*} param0
+ * @returns
+ */
+export default function RightFloatArea({ floatSlot }) {
+  const [showFloatButton, switchShow] = useState(false)
+  const scrollListener = useCallback(throttle(() => {
+    const targetRef = document.getElementById('wrapper')
+    const clientHeight = targetRef?.clientHeight
+    const scrollY = window.pageYOffset
+    const fullHeight = clientHeight - window.outerHeight
+    let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
+    if (per > 100) per = 100
+    const shouldShow = scrollY > 100 && per > 0
+
+    // 右下角显示悬浮按钮
+    if (shouldShow !== showFloatButton) {
+      switchShow(shouldShow)
+    }
+  }, 200))
+
+  useEffect(() => {
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [])
+
+  return (
+        <div className={(showFloatButton ? 'opacity-100 ' : 'invisible opacity-0') + '  duration-300 transition-all bottom-12 right-1 fixed justify-end z-20  text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'}>
+                <div className={'justify-center  flex flex-col items-center cursor-pointer'}>
+                    <FloatDarkModeButton />
+                    {floatSlot}
+                    <JumpToTopButton />
+                </div>
+            </div>
+  )
+}
--- a/themes/heo/components/SearchDrawer.js
+++ b/themes/heo/components/SearchDrawer.js
@@ -0,0 +1,36 @@
+import { Router } from 'next/router'
+import { useImperativeHandle, useRef } from 'react'
+import SearchInput from './SearchInput'
+const SearchDrawer = ({ cRef, slot }) => {
+  const searchDrawer = useRef()
+  const searchInputRef = useRef()
+  useImperativeHandle(cRef, () => {
+    return {
+      show: () => {
+        searchDrawer?.current?.classList?.remove('hidden')
+        searchInputRef?.current?.focus()
+      }
+    }
+  })
+  const hidden = () => {
+    searchDrawer?.current?.classList?.add('hidden')
+  }
+  Router.events.on('routeChangeComplete', (...args) => {
+    hidden()
+  })
+  return (
+    <div id='search-drawer-wrapper' ref={searchDrawer} className='hidden'>
+      <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}
+          </div>
+      </div>
+
+      {/* 背景蒙版 */}
+      <div id='search-drawer-background' onClick={hidden} className='animate__animated animate__faster animate__fadeIn fixed bg-day dark:bg-night top-0 left-0 z-40 w-full h-full' />
+    </div>
+  )
+}
+
+export default SearchDrawer
--- a/themes/heo/components/SearchInput.js
+++ b/themes/heo/components/SearchInput.js
@@ -0,0 +1,106 @@
+import { useRouter } from 'next/router'
+import { useImperativeHandle, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
+let lock = false
+
+const SearchInput = props => {
+  const { currentSearch, cRef, className } = props
+  const [onLoading, setLoadingState] = useState(false)
+  const router = useRouter()
+  const searchInputRef = useRef()
+  const { locale } = useGlobal()
+  useImperativeHandle(cRef, () => {
+    return {
+      focus: () => {
+        searchInputRef?.current?.focus()
+      }
+    }
+  })
+
+  const handleSearch = () => {
+    const key = searchInputRef.current.value
+    if (key && key !== '') {
+      setLoadingState(true)
+      router.push({ pathname: '/search/' + key }).then(r => {
+        setLoadingState(false)
+      })
+      // location.href = '/search/' + key
+    } else {
+      router.push({ pathname: '/' }).then(r => {})
+    }
+  }
+  const handleKeyUp = e => {
+    if (e.keyCode === 13) {
+      // 回车
+      handleSearch(searchInputRef.current.value)
+    } else if (e.keyCode === 27) {
+      // ESC
+      cleanSearch()
+    }
+  }
+  const cleanSearch = () => {
+    searchInputRef.current.value = ''
+  }
+
+  const [showClean, setShowClean] = useState(false)
+  const updateSearchKey = val => {
+    if (lock) {
+      return
+    }
+    searchInputRef.current.value = val
+
+    if (val) {
+      setShowClean(true)
+    } else {
+      setShowClean(false)
+    }
+  }
+  function lockSearchInput () {
+    lock = true
+  }
+
+  function unLockSearchInput () {
+    lock = false
+  }
+
+  return (
+    <div className={'flex w-full rounded-lg ' + className}>
+      <input
+        ref={searchInputRef}
+        type="text"
+        className={
+          'outline-none w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
+        }
+        onKeyUp={handleKeyUp}
+        onCompositionStart={lockSearchInput}
+        onCompositionUpdate={lockSearchInput}
+        onCompositionEnd={unLockSearchInput}
+        placeholder={locale.SEARCH.ARTICLES}
+        onChange={e => updateSearchKey(e.target.value)}
+        defaultValue={currentSearch || ''}
+      />
+
+      <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>
+
+      {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>
+      )}
+    </div>
+  )
+}
+
+export default SearchInput
--- a/themes/heo/components/SearchNav.js
+++ b/themes/heo/components/SearchNav.js
@@ -0,0 +1,70 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useEffect, useRef } from 'react'
+import Card from './Card'
+import SearchInput from './SearchInput'
+import TagItemMini from './TagItemMini'
+
+/**
+ * 搜索页面的导航
+ * @param {*} props
+ * @returns
+ */
+export default function SearchNav(props) {
+  const { tagOptions, categoryOptions } = props
+  const cRef = useRef(null)
+  const { locale } = useGlobal()
+  useEffect(() => {
+    // 自动聚焦到搜索框
+    cRef?.current?.focus()
+  }, [])
+
+  return <>
+    <div className="my-6 px-2">
+        <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>
+</>
+}
--- a/themes/heo/components/SideBar.js
+++ b/themes/heo/components/SideBar.js
@@ -0,0 +1,33 @@
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import MenuGroupCard from './MenuGroupCard'
+import { MenuListSide } from './MenuListSide'
+
+/**
+ * 侧边抽屉
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBar = (props) => {
+  const { siteInfo } = props
+  const router = useRouter()
+  return (
+        <div id='side-bar'>
+            <div className="h-52 w-full flex justify-center">
+                <div>
+                    <div onClick={() => { router.push('/') }}
+                        className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100  transform duration-200 cursor-pointer'>
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
+                    </div>
+                    <MenuGroupCard {...props} />
+                </div>
+            </div>
+            <MenuListSide {...props} />
+        </div>
+  )
+}
+
+export default SideBar
--- a/themes/heo/components/SideBarDrawer.js
+++ b/themes/heo/components/SideBarDrawer.js
@@ -0,0 +1,51 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+/**
+ * 侧边栏抽屉面板，可以从侧面拉出
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
+  const router = useRouter()
+  useEffect(() => {
+    const sideBarDrawerRouteListener = () => {
+      switchSideDrawerVisible(false)
+    }
+    router.events.on('routeChangeComplete', sideBarDrawerRouteListener)
+    return () => {
+      router.events.off('routeChangeComplete', sideBarDrawerRouteListener)
+    }
+  }, [router.events])
+
+  // 点击按钮更改侧边抽屉状态
+  const switchSideDrawerVisible = (showStatus) => {
+    if (showStatus) {
+      onOpen && onOpen()
+    } else {
+      onClose && onClose()
+    }
+    const sideBarDrawer = window.document.getElementById('sidebar-drawer')
+    const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
+
+    if (showStatus) {
+      sideBarDrawer?.classList.replace('-mr-72', 'mr-0')
+      sideBarDrawerBackground?.classList.replace('hidden', 'block')
+    } else {
+      sideBarDrawer?.classList.replace('mr-0', '-mr-72')
+      sideBarDrawerBackground?.classList.replace('block', 'hidden')
+    }
+  }
+
+  return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
+
+    <div id="sidebar-drawer" className={`${isOpen ? 'mr-0 w-72 visible' : '-mr-72 max-w-side invisible'} bg-gray-50 right-0 top-0 dark:bg-hexo-black-gray shadow-black shadow-lg flex flex-col duration-300 fixed h-full overflow-y-scroll scroll-hidden z-30`}>
+      {children}
+    </div>
+
+    {/* 背景蒙版 */}
+    <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }}
+      className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
+  </div>
+}
+export default SideBarDrawer
--- a/themes/heo/components/SideRight.js
+++ b/themes/heo/components/SideRight.js
@@ -0,0 +1,82 @@
+import Card from './Card'
+import CategoryGroup from './CategoryGroup'
+import LatestPostsGroup from './LatestPostsGroup'
+import TagGroups from './TagGroups'
+import Catalog from './Catalog'
+import { InfoCard } from './InfoCard'
+import { AnalyticsCard } from './AnalyticsCard'
+import CONFIG from '../config'
+import BLOG from '@/blog.config'
+import dynamic from 'next/dynamic'
+import Announcement from './Announcement'
+import { useGlobal } from '@/lib/global'
+import Live2D from '@/components/Live2D'
+
+const HexoRecentComments = dynamic(() => import('./HexoRecentComments'))
+const FaceBookPage = dynamic(
+  () => {
+    let facebook = <></>
+    try {
+      facebook = import('@/components/FacebookPage')
+    } catch (err) {
+      console.error(err)
+    }
+    return facebook
+  },
+  { ssr: false }
+)
+
+/**
+ * Hexo主题右侧栏
+ * @param {*} props
+ * @returns
+ */
+export default function SideRight(props) {
+  const {
+    post, currentCategory, categories, latestPosts, tags,
+    currentTag, showCategory, showTag, rightAreaSlot, notice
+  } = props
+
+  const { locale } = useGlobal()
+  return (
+    <div id='sideRight' className={'space-y-4 lg:w-80 lg:pt-0 px-2 pt-4'}>
+      <InfoCard {...props} />
+      {CONFIG.WIDGET_ANALYTICS && <AnalyticsCard {...props} />}
+
+      {showCategory && (
+        <Card>
+          <div className='ml-2 mb-1 '>
+            <i className='fas fa-th' /> {locale.COMMON.CATEGORY}
+          </div>
+          <CategoryGroup
+            currentCategory={currentCategory}
+            categories={categories}
+          />
+        </Card>
+      )}
+      {showTag && (
+        <Card>
+          <TagGroups tags={tags} currentTag={currentTag} />
+        </Card>
+      )}
+      {CONFIG.WIDGET_LATEST_POSTS && latestPosts && latestPosts.length > 0 && <Card>
+        <LatestPostsGroup {...props} />
+      </Card>}
+
+      <Announcement post={notice}/>
+
+      {BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && <HexoRecentComments/>}
+
+      <div className='sticky top-20'>
+        {post && post.toc && post.toc.length > 1 && <Card>
+          <Catalog toc={post.toc} />
+        </Card>}
+
+        {rightAreaSlot}
+        <FaceBookPage/>
+        <Live2D />
+      </div>
+
+    </div>
+  )
+}
--- a/themes/heo/components/SlotBar.js
+++ b/themes/heo/components/SlotBar.js
@@ -0,0 +1,24 @@
+import Link from 'next/link'
+
+/**
+ * 博客列表上方嵌入条
+ * @param {*} props
+ * @returns
+ */
+export default function SlotBar(props) {
+  const { tag, category } = props
+
+  if (tag) {
+    return <div className="cursor-pointer px-3 py-2 mb-2 font-light hover:text-indigo-700 dark:hover:text-indigo-400 transform dark:text-white">
+              <Link key={tag} href={`/tag/${encodeURIComponent(tag.name)}`} passHref
+                  className={'cursor-pointer inline-block rounded duration-200 mr-2 py-0.5 px-1 text-xl whitespace-nowrap '}>
+                  <div className='font-light dark:text-gray-400 dark:hover:text-white'> #{tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+              </Link>
+          </div>
+  } else if (category) {
+    return <div className="cursor-pointer text-lg px-5 py-1 mb-2 font-light hover:text-indigo-700 dark:hover:text-indigo-400 transform dark:text-white">
+              <i className="mr-1 far fa-folder-open" />  {category}
+          </div>
+  }
+  return <></>
+}
--- a/themes/heo/components/SocialButton.js
+++ b/themes/heo/components/SocialButton.js
@@ -0,0 +1,45 @@
+import BLOG from '@/blog.config'
+import React from 'react'
+
+/**
+ * 社交联系方式按钮组
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SocialButton = () => {
+  return <div className='w-full justify-center flex-wrap flex'>
+    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-300 '>
+      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+        <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+        <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+        <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkIn'} >
+        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+        <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
+        <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+        <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.ENABLE_RSS && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+        <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_BILIBILI && <a target='_blank' rel='noreferrer' title={'bilibili'} href={BLOG.CONTACT_BILIBILI} >
+        <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_YOUTUBE && <a target='_blank' rel='noreferrer' title={'youtube'} href={BLOG.CONTACT_YOUTUBE} >
+        <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+    </div>
+  </div>
+}
+export default SocialButton
--- a/themes/heo/components/TagGroups.js
+++ b/themes/heo/components/TagGroups.js
@@ -0,0 +1,27 @@
+import TagItemMini from './TagItemMini'
+
+/**
+ * 标签组
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TagGroups = ({ tags, currentTag }) => {
+  if (!tags) return <></>
+  return (
+    <div id='tags-group' className='dark:border-gray-600 space-y-2'>
+      <div className='font-light text-xs ml-2 mb-2'><i className='mr-1 fas fa-tag' />标签</div>
+      <div className='px-4'>
+      {
+        tags.map(tag => {
+          const selected = tag.name === currentTag
+          return <TagItemMini key={tag.name} tag={tag} selected={selected} />
+        })
+      }
+      </div>
+    </div>
+  )
+}
+
+export default TagGroups
--- a/themes/heo/components/TagItemMini.js
+++ b/themes/heo/components/TagItemMini.js
@@ -0,0 +1,21 @@
+import Link from 'next/link'
+
+const TagItemMini = ({ tag, selected = false }) => {
+  return (
+    <Link
+      key={tag}
+      href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}
+      passHref
+      className={`cursor-pointer inline-block rounded hover:bg-indigo-400 dark:hover:text-white  hover:text-white duration-200
+        mr-2 py-0.5 px-1 text-xs whitespace-nowrap 
+         ${selected
+        ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-indigo-900'
+        : `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background `}` }>
+
+      <div className='font-light'>{selected && <i className='mr-1 fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+
+    </Link>
+  );
+}
+
+export default TagItemMini
--- a/themes/heo/components/TocDrawer.js
+++ b/themes/heo/components/TocDrawer.js
@@ -0,0 +1,42 @@
+import Catalog from './Catalog'
+import React, { useImperativeHandle, useState } from 'react'
+
+/**
+ * 目录抽屉栏
+ * @param toc
+ * @param post
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TocDrawer = ({ post, cRef }) => {
+  // 暴露给父组件 通过cRef.current.handleMenuClick 调用
+  useImperativeHandle(cRef, () => {
+    return {
+      handleSwitchVisible: () => switchVisible()
+    }
+  })
+  const [showDrawer, switchShowDrawer] = useState(false)
+  const switchVisible = () => {
+    switchShowDrawer(!showDrawer)
+  }
+  return <>
+    <div className='fixed top-0 right-0 z-40 '>
+      {/* 侧边菜单 */}
+      <div
+        className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
+        ' shadow-card animate__animated animate__faster' +
+        ' w-60 duration-200 fixed right-12 bottom-12 rounded py-2 bg-white dark:bg-gray-900'}>
+          {post && <>
+           <div className='dark:text-gray-400 text-gray-600'>
+             <Catalog toc={post.toc}/>
+           </div>
+          </>
+          }
+      </div>
+    </div>
+    {/* 背景蒙版 */}
+    <div id='right-drawer-background' className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
+         onClick={switchVisible} />
+  </>
+}
+export default TocDrawer
--- a/themes/heo/components/TocDrawerButton.js
+++ b/themes/heo/components/TocDrawerButton.js
@@ -0,0 +1,22 @@
+import { useGlobal } from '@/lib/global'
+import React from 'react'
+import CONFIG from '../config'
+
+/**
+ * 点击召唤目录抽屉
+ * 当屏幕下滑500像素后会出现该控件
+ * @param props 父组件传入props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TocDrawerButton = (props) => {
+  const { locale } = useGlobal()
+  if (!CONFIG.WIDGET_TOC) {
+    return <></>
+  }
+  return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer transform duration-200 flex justify-center items-center w-7 h-7 text-center' title={locale.POST.TOP} >
+    <i className='fas fa-list-ol text-xs'/>
+  </div>)
+}
+
+export default TocDrawerButton
--- a/themes/heo/components/TopNav.js
+++ b/themes/heo/components/TopNav.js
@@ -0,0 +1,159 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import CategoryGroup from './CategoryGroup'
+import Logo from './Logo'
+import SearchDrawer from './SearchDrawer'
+import TagGroups from './TagGroups'
+import { MenuListTop } from './MenuListTop'
+import { useRouter } from 'next/router'
+import throttle from 'lodash.throttle'
+import SideBar from './SideBar'
+import SideBarDrawer from './SideBarDrawer'
+
+let windowTop = 0
+
+/**
+ * 顶部导航
+ * @param {*} param0
+ * @returns
+ */
+const TopNav = props => {
+  const searchDrawer = useRef()
+  const { tags, currentTag, categories, currentCategory } = props
+  const { locale } = useGlobal()
+  const { isDarkMode } = useGlobal()
+  const router = useRouter()
+
+  const [isOpen, changeShow] = useState(false)
+
+  const toggleMenuOpen = () => {
+    changeShow(!isOpen)
+  }
+
+  const toggleSideBarClose = () => {
+    changeShow(false)
+  }
+
+  // 监听滚动
+  useEffect(() => {
+    scrollTrigger()
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  }, [])
+
+  const throttleMs = 200
+
+  const scrollTrigger = useCallback(throttle(() => {
+    const scrollS = window.scrollY
+    const nav = document.querySelector('#sticky-nav')
+    const header = document.querySelector('#header')
+    // 是否将导航栏透明
+    const navTransparent = (scrollS < document.documentElement.clientHeight - 12 && router.route === '/') || scrollS < 300 // 透明导航条的条件
+
+    if (header && navTransparent) {
+      nav && nav.classList.replace('bg-white', 'bg-none')
+      nav && nav.classList.replace('text-black', 'text-white')
+      nav && nav.classList.replace('border', 'border-transparent')
+      nav && nav.classList.replace('drop-shadow-md', 'shadow-none')
+      nav && nav.classList.replace('dark:bg-hexo-black-gray', 'transparent')
+    } else {
+      nav && nav.classList.replace('bg-none', 'bg-white')
+      nav && nav.classList.replace('text-white', 'text-black')
+      nav && nav.classList.replace('border-transparent', 'border')
+      nav && nav.classList.replace('shadow-none', 'drop-shadow-md')
+      nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
+    }
+
+    const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
+    if (!showNav) {
+      nav && nav.classList.replace('top-0', '-top-20')
+      windowTop = scrollS
+    } else {
+      nav && nav.classList.replace('-top-20', 'top-0')
+      windowTop = scrollS
+    }
+    navDarkMode()
+  }, throttleMs)
+  )
+
+  const navDarkMode = () => {
+    const nav = document.getElementById('sticky-nav')
+    const header = document.querySelector('#header')
+    if (!isDarkMode && nav && header) {
+      if (window.scrollY < header.clientHeight) {
+        nav?.classList?.add('dark')
+      } else {
+        nav?.classList?.remove('dark')
+      }
+    }
+  }
+
+  const searchDrawerSlot = <>
+        {categories && (
+            <section className='mt-8'>
+                <div className='text-sm flex flex-nowrap justify-between font-light px-2'>
+                    <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
+                    <Link
+                        href={'/category'}
+                        passHref
+                        className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+
+                        {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
+
+                    </Link>
+                </div>
+                <CategoryGroup currentCategory={currentCategory} categories={categories} />
+            </section>
+        )}
+
+        {tags && (
+            <section className='mt-4'>
+                <div className='text-sm py-2 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200'>
+                    <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-tag' />{locale.COMMON.TAGS}</div>
+                    <Link
+                        href={'/tag'}
+                        passHref
+                        className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
+
+                        {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
+
+                    </Link>
+                </div>
+                <div className='p-2'>
+                    <TagGroups tags={tags} currentTag={currentTag} />
+                </div>
+            </section>
+        )}
+    </>
+
+  return (<div id='top-nav' className='z-40'>
+        <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />
+
+        {/* 导航栏 */}
+        <div id='sticky-nav' style={{ backdropFilter: 'blur(3px)' }} className={'top-0 duration-300 transition-all  shadow-none fixed bg-none dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform border-transparent dark:border-transparent'}>
+            <div className='w-full flex justify-between items-center px-4 py-2'>
+                <div className='flex'>
+                    <Logo {...props} />
+                </div>
+
+                {/* 右侧功能 */}
+                <div className='mr-1 justify-end items-center '>
+                    <div className='hidden lg:flex'> <MenuListTop {...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' />}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {/* 折叠侧边栏 */}
+        <SideBarDrawer isOpen={isOpen} onClose={toggleSideBarClose}>
+            <SideBar {...props} />
+        </SideBarDrawer>
+    </div>)
+}
+
+export default TopNav
--- a/themes/heo/config.js
+++ b/themes/heo/config.js
@@ -0,0 +1,36 @@
+const CONFIG = {
+  HOME_BANNER_ENABLE: true,
+  // 3.14.1以后的版本中，欢迎语在blog.config.js中配置，用英文逗号','隔开多个。
+  HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
+
+  HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
+  // 已知未修复bug, 在移动端开启true后会加载不出图片； 暂时建议设置为false。
+  HOME_NAV_BACKGROUND_IMG_FIXED: false, // 首页背景图滚动时是否固定，true 则滚动时图片不懂动； false则随鼠标滚动 ;
+
+  // 菜单配置
+  MENU_INDEX: true, // 显示首页
+  MENU_CATEGORY: true, // 显示分类
+  MENU_TAG: true, // 显示标签
+  MENU_ARCHIVE: true, // 显示归档
+  MENU_SEARCH: true, // 显示搜索
+
+  POST_LIST_COVER: true, // 列表显示文章封面
+  POST_LIST_COVER_HOVER_ENLARGE: false, // 列表鼠标悬停放大
+
+  POST_LIST_COVER_DEFAULT: true, // 封面为空时用站点背景做默认封面
+  POST_LIST_SUMMARY: true, // 文章摘要
+  POST_LIST_PREVIEW: false, // 读取文章预览
+  POST_LIST_IMG_CROSSOVER: true, // 博客列表图片左右交错
+
+  ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
+  ARTICLE_COPYRIGHT: true, // 显示文章版权声明
+  ARTICLE_RECOMMEND: true, // 文章关联推荐
+
+  WIDGET_LATEST_POSTS: true, // 显示最新文章卡
+  WIDGET_ANALYTICS: false, // 显示统计卡
+  WIDGET_TO_TOP: true,
+  WIDGET_TO_COMMENT: true, // 跳到评论区
+  WIDGET_DARK_MODE: true, // 夜间模式
+  WIDGET_TOC: true // 移动端悬浮目录
+}
+export default CONFIG
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -0,0 +1,355 @@
+import CONFIG from './config'
+
+import CommonHead from '@/components/CommonHead'
+import { useEffect, useRef } from 'react'
+import Footer from './components/Footer'
+import SideRight from './components/SideRight'
+import TopNav from './components/TopNav'
+import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
+import BlogPostListPage from './components/BlogPostListPage'
+import BlogPostListScroll from './components/BlogPostListScroll'
+import Hero from './components/Header'
+import { useRouter } from 'next/router'
+import Mark from 'mark.js'
+import Card from './components/Card'
+import RightFloatArea from './components/RightFloatArea'
+import SearchNav from './components/SearchNav'
+import BlogPostArchive from './components/BlogPostArchive'
+import { ArticleLock } from './components/ArticleLock'
+import HeaderArticle from './components/HeaderArticle'
+import JumpToCommentButton from './components/JumpToCommentButton'
+import TocDrawer from './components/TocDrawer'
+import TocDrawerButton from './components/TocDrawerButton'
+import Comment from '@/components/Comment'
+import NotionPage from '@/components/NotionPage'
+import ArticleAdjacent from './components/ArticleAdjacent'
+import ArticleCopyright from './components/ArticleCopyright'
+import ArticleRecommend from './components/ArticleRecommend'
+import ShareBar from '@/components/ShareBar'
+import TagItemMini from './components/TagItemMini'
+import Link from 'next/link'
+import SlotBar from './components/SlotBar'
+import { Transition } from '@headlessui/react'
+
+/**
+ * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
+ * @param props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = props => {
+  const { children, headerSlot, floatSlot, slotTop, meta, siteInfo, className } = props
+  const { onLoading } = useGlobal()
+
+  // 加载主题样式
+  if (isBrowser()) {
+    loadExternalResource('/css/theme-hexo.css', 'css')
+  }
+
+  return (
+        <div id='theme-hexo'>
+            {/* 网页SEO */}
+            <CommonHead meta={meta} siteInfo={siteInfo} />
+
+            {/* 顶部导航 */}
+            <TopNav {...props} />
+
+            {/* 顶部嵌入 */}
+            <Transition
+                show={!onLoading}
+                appear={true}
+                enter="transition ease-in-out duration-700 transform order-first"
+                enterFrom="opacity-0 -translate-y-16"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in-out duration-300 transform"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-16"
+                unmount={false}
+            >
+                {headerSlot}
+            </Transition>
+
+            {/* 主区块 */}
+            <main id="wrapper" className={`${CONFIG.HOME_BANNER_ENABLE ? '' : 'pt-16'} bg-hexo-background-gray dark:bg-black w-full py-8 md:px-8 lg:px-24 min-h-screen relative`}>
+                <div id="container-inner" className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
+                    <div className={`${className || ''} w-full max-w-4xl h-full `}>
+
+                        <Transition
+                            show={!onLoading}
+                            appear={true}
+                            enter="transition ease-in-out duration-700 transform order-first"
+                            enterFrom="opacity-0 translate-y-16"
+                            enterTo="opacity-100 translate-y-0"
+                            leave="transition ease-in-out duration-300 transform"
+                            leaveFrom="opacity-100 translate-y-0"
+                            leaveTo="opacity-0 -translate-y-16"
+                            unmount={false}
+                        >
+                            {/* 主区上部嵌入 */}
+                            {slotTop}
+
+                            {children}
+                        </Transition>
+                    </div>
+
+                    {/* 右侧栏 */}
+                    <SideRight {...props} />
+                </div>
+            </main>
+
+            {/* 悬浮菜单 */}
+            <RightFloatArea floatSlot={floatSlot} />
+
+            {/* 页脚 */}
+            <Footer title={siteInfo?.title || BLOG.TITLE} />
+        </div>
+  )
+}
+
+/**
+ * 首页
+ * 是一个博客列表，嵌入一个Hero大图
+ * @param {*} props
+ * @returns
+ */
+const LayoutIndex = (props) => {
+  const headerSlot = CONFIG.HOME_BANNER_ENABLE && <Hero {...props} />
+  return <LayoutPostList {...props} headerSlot={headerSlot} className='pt-8' />
+}
+
+/**
+ * 博客列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutPostList = (props) => {
+  return <LayoutBase {...props} className='pt-8'>
+        <SlotBar {...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} className='pt-8'>
+            {!currentSearch
+              ? <SearchNav {...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} className='pt-8'>
+        <Card className='w-full'>
+            <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
+  const drawerRight = useRef(null)
+
+  const targetRef = isBrowser() ? document.getElementById('article-wrapper') : null
+
+  const floatSlot = <>
+        {post?.toc?.length > 1 && <div className="block lg:hidden">
+            <TocDrawerButton
+                onClick={() => {
+                  drawerRight?.current?.handleSwitchVisible()
+                }}
+            />
+        </div>}
+        <JumpToCommentButton />
+    </>
+
+  return (
+        <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} showCategory={false} showTag={false} floatSlot={floatSlot} >
+            <div className="w-full lg:hover:shadow lg:border rounded-t-xl lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article">
+                {lock && <ArticleLock validPassword={validPassword} />}
+
+                {!lock && <div id="article-wrapper" className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 ">
+
+                    <article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased overflow-y-hidden" >
+                        {/* Notion文章主体 */}
+                        <section className='px-5 justify-center mx-auto max-w-2xl lg:max-w-full'>
+                            {post && <NotionPage post={post} />}
+                        </section>
+
+                        {/* 分享 */}
+                        <ShareBar post={post} />
+                        {post?.type === 'Post' && <>
+                            <ArticleCopyright {...props} />
+                            <ArticleRecommend {...props} />
+                            <ArticleAdjacent {...props} />
+                        </>}
+
+                    </article>
+
+                    <div className='pt-4 border-dashed'></div>
+
+                    {/* 评论互动 */}
+                    <div className="duration-200 overflow-x-auto bg-white dark:bg-hexo-black-gray px-3">
+                        <Comment frontMatter={post} />
+                    </div>
+                </div>}
+            </div>
+
+            <div className='block lg:hidden'>
+                <TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
+            </div>
+
+        </LayoutBase>
+  )
+}
+
+/**
+ * 404
+ * @param {*} props
+ * @returns
+ */
+const Layout404 = props => {
+  const router = useRouter()
+  useEffect(() => {
+    // 延时3秒如果加载失败就返回首页
+    setTimeout(() => {
+      if (isBrowser()) {
+        const article = 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
+  const { locale } = useGlobal()
+  return (
+        <LayoutBase {...props} className='mt-8'>
+            <Card className="w-full min-h-screen">
+                <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 px-5 cursor-pointer py-2 hover:text-indigo-400'}>
+                                    <i className="mr-4 fas fa-folder" />  {category.name}({category.count})
+                                </div>
+                            </Link>
+                      )
+                    })}
+                </div>
+            </Card>
+        </LayoutBase>
+  )
+}
+
+/**
+ * 标签列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutTagIndex = props => {
+  const { tagOptions } = props
+  const { locale } = useGlobal()
+  return (
+        <LayoutBase {...props} className='mt-8'>
+            <Card className='w-full'>
+                <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 => <div key={tag.name} className="p-2">
+                        <TagItemMini key={tag.name} tag={tag} />
+                    </div>)}
+                </div>
+            </Card>
+        </LayoutBase>
+  )
+}
+
+export {
+  CONFIG as THEME_CONFIG,
+  LayoutIndex,
+  LayoutSearch,
+  LayoutArchive,
+  LayoutSlug,
+  Layout404,
+  LayoutCategoryIndex,
+  LayoutPostList,
+  LayoutTagIndex
+}