Merge pull request #2216 from tangly1024/feat/theme-commerce

Feat/theme commerce
2026-05-14 07:26:52 +00:00 · 2024-03-24 22:21:00 +08:00
parent 89dbf49cc8 c25512230a
commit 7fc3063c7a
56 changed files with 2825 additions and 2 deletions
--- a/.env.local
+++ b/.env.local
@@ -1,5 +1,5 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.4.1
+NEXT_PUBLIC_VERSION=4.4.2


 # 可在此添加环境变量，去掉最左边的（# ）注释即可
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "notion-next",
-    "version": "4.4.1",
+    "version": "4.4.2",
    "homepage": "https://github.com/tangly1024/NotionNext.git",
    "license": "MIT",
    "repository": {
--- a/themes/commerce/components/AnalyticsCard.js
+++ b/themes/commerce/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/commerce/components/Announcement.js
+++ b/themes/commerce/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/commerce/components/ArticleAdjacent.js
+++ b/themes/commerce/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/commerce/components/ArticleCopyright.js
+++ b/themes/commerce/components/ArticleCopyright.js
@@ -0,0 +1,43 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
+
+export default function ArticleCopyright () {
+  const router = useRouter()
+  const [path, setPath] = useState(siteConfig('LINK') + router.asPath)
+  useEffect(() => {
+    setPath(window.location.href)
+  })
+
+  const { locale } = useGlobal()
+
+  if (!CONFIG.ARTICLE_COPYRIGHT) {
+    return <></>
+  }
+
+  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-red-500">
+        <li>
+          <strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>
+          <Link href={'/about'} className="hover:underline">
+            {siteConfig('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/commerce/components/ArticleLock.js
+++ b/themes/commerce/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-red-500 hover:bg-red-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/commerce/components/ArticleRecommend.js
+++ b/themes/commerce/components/ArticleRecommend.js
@@ -0,0 +1,60 @@
+import Link from 'next/link'
+import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import LazyImage from '@/components/LazyImage'
+
+/**
+ * 关联推荐文章
+ * @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
+                    ? post.pageCoverThumbnail
+                    : siteInfo?.pageCover
+
+                  return (
+                    (<Link
+                            key={post.id}
+                            title={post.title}
+                            href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
+                            passHref
+                            className="flex h-40 cursor-pointer overflow-hidden">
+
+                            <div className="h-full w-full relative group">
+                                <div className="flex items-center justify-center w-full h-full duration-300 ">
+                                    <div className="z-10 text-lg px-4 font-bold text-white text-center shadow-text select-none">
+                                        {post.title}
+                                    </div>
+                                </div>
+                                <LazyImage src={headerImage} className='absolute top-0 w-full h-full object-cover object-center group-hover:scale-110 group-hover:brightness-50 transform duration-200' />
+                            </div>
+
+                        </Link>)
+                  )
+                })}
+            </div>
+        </div>
+  )
+}
--- a/themes/commerce/components/BlogPostArchive.js
+++ b/themes/commerce/components/BlogPostArchive.js
@@ -0,0 +1,49 @@
+import Link from 'next/link'
+import { siteConfig } from '@/lib/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-red-500 dark:hover:border-red-300 dark:border-red-400 transform duration-500"
+            >
+              <div id={post?.publishDay}>
+                <span className="text-gray-400">{post.date?.start_date}</span>{' '}
+                &nbsp;
+                <Link
+                  href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
+                  passHref
+                  className="dark:text-gray-400  dark:hover:text-red-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+
+                  {post.title}
+
+                </Link>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
+  }
+}
+
+export default BlogPostArchive
--- a/themes/commerce/components/BlogPostCardInfo.js
+++ b/themes/commerce/components/BlogPostCardInfo.js
@@ -0,0 +1,94 @@
+import NotionPage from '@/components/NotionPage'
+import Link from 'next/link'
+import TagItemMini from './TagItemMini'
+import TwikooCommentCount from '@/components/TwikooCommentCount'
+import { siteConfig } from '@/lib/config'
+import formatDate from '@/lib/utils/formatDate'
+
+/**
+ * 博客列表的文字内容
+ * @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={`${siteConfig('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-red-700 dark:hover:text-red-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-red-700 dark:hover:text-red-400 transform">
+
+                <i className="mr-1 far fa-folder" />
+                {post.category}
+
+            </Link>
+
+            <TwikooCommentCount className='text-sm hover:text-red-700 dark:hover:text-red-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, index) => (
+                        <span key={index}>{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#${formatDate(post?.publishDate, 'yyyy-MM')}`}
+                passHref
+                className="font-light menu-link cursor-pointer text-sm leading-4 mr-3">
+
+                <i className="far fa-calendar-alt mr-1" />
+                {post?.publishDay || post.lastEditedDay}
+
+            </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/commerce/components/BlogPostListEmpty.js
+++ b/themes/commerce/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/commerce/components/BlogPostListPage.js
+++ b/themes/commerce/components/BlogPostListPage.js
@@ -0,0 +1,34 @@
+import ProductCard from './ProductCard'
+import PaginationNumber from './PaginationNumber'
+import { siteConfig } from '@/lib/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 / parseInt(siteConfig('POSTS_PER_PAGE')))
+  const showPagination = postCount >= parseInt(siteConfig('POSTS_PER_PAGE'))
+  if (!posts || posts.length === 0 || page > totalPage) {
+    return <BlogPostListEmpty />
+  } else {
+    return (
+      <div id="container" className='w-full'>
+        {/* 文章列表 */}
+        <div className="py-4 gap-4 grid grid-cols-3">
+          {posts?.map(post => (
+            <ProductCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
+          ))}
+        </div>
+        {showPagination && <PaginationNumber page={page} totalPage={totalPage} />}
+      </div>
+    )
+  }
+}
+
+export default BlogPostListPage
--- a/themes/commerce/components/BlogPostListScroll.js
+++ b/themes/commerce/components/BlogPostListScroll.js
@@ -0,0 +1,75 @@
+import { siteConfig } from '@/lib/config'
+import ProductCard from './ProductCard'
+import BlogPostListEmpty from './BlogPostListEmpty'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+import { getListByPage } from '@/lib/utils'
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * 博客列表滚动分页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.POST_LIST_SUMMARY, siteInfo }) => {
+  const postsPerPage = parseInt(siteConfig('POSTS_PER_PAGE'))
+  const [page, updatePage] = 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()
+      }
+    })
+  }
+
+  // 监听滚动
+  useEffect(() => {
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  })
+
+  const targetRef = 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="space-y-6 px-2">
+        {postsToShow.map(post => (
+          <ProductCard 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/commerce/components/Card.js
+++ b/themes/commerce/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/commerce/components/Catalog.js
+++ b/themes/commerce/components/Catalog.js
@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useRef, useState } 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()
+  // 监听滚动事件
+  useEffect(() => {
+    window.addEventListener('scroll', actionSectionScrollSpy)
+    actionSectionScrollSpy()
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [])
+
+  // 目录自动滚动
+  const tRef = useRef(null)
+  const tocIds = []
+
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = useState(null)
+
+  const throttleMs = 200
+  const actionSectionScrollSpy = 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-red-600'}`}
+              >
+                {tocItem.text}
+              </span>
+            </a>
+          )
+        })}
+      </nav>
+
+    </div>
+  </div>
+}
+
+export default Catalog
--- a/themes/commerce/components/CategoryGroup.js
+++ b/themes/commerce/components/CategoryGroup.js
@@ -0,0 +1,30 @@
+import Link from 'next/link'
+
+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-red-600 text-white '
+              : 'dark:text-gray-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-red-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/commerce/components/FloatDarkModeButton.js
+++ b/themes/commerce/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/commerce/components/Footer.js
+++ b/themes/commerce/components/Footer.js
@@ -0,0 +1,121 @@
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+
+/**
+ * 页脚
+ * @param {*} param0
+ * @returns
+ */
+const Footer = (props) => {
+  const d = new Date()
+  const currentYear = d.getFullYear()
+  const since = siteConfig('SINCE')
+  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
+  const { categoryOptions, customMenu } = props
+
+  return <footer id="footer-wrapper" className='relative bg-[#2A2A2A] justify-center w-full leading-6 text-gray-300 text-sm p-10'>
+
+        <div id='footer-container' className='w-full mx-auto max-w-screen-xl'>
+
+            <div className='flex'>
+                <div className='hidden md:flex flex-grow my-6 space-x-20 text-lg  '>
+
+                    {/* 分类菜单  */}
+                    <div>
+                        <div className='font-bold mb-4 text-white'>{siteConfig('COMMERCE_TEXT_FOOTER_MENU_1', 'Product Center')}</div>
+                        <nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
+                            {categoryOptions?.map(category => {
+                              return (
+                                    <Link
+                                        key={`${category.name}`}
+                                        title={`${category.name}`}
+                                        href={`/category/${category.name}`}
+                                        passHref>
+                                        {category.name}
+                                    </Link>
+                              )
+                            })}
+                        </nav>
+                    </div>
+
+                    {/* 系统菜单  */}
+                    <div>
+                        <div className='font-bold mb-4 text-white'>{siteConfig('COMMERCE_TEXT_FOOTER_MENU_2', 'About US')}</div>
+                        <nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
+                            {customMenu?.map(menu => {
+                              return (
+                                    <Link
+                                        key={`${menu.name}`}
+                                        title={`${menu.name}`}
+                                        href={`${menu.to}`}
+                                        passHref>
+                                        {menu.name}
+                                    </Link>
+                              )
+                            })}
+                        </nav>
+                    </div>
+                </div>
+
+                {<div className='md:border-l pl-4 border-gray-600 my-6 whitespace-pre-line text-left flex-grow'>
+                    <div className='font-bold text-l text-white mb-6'>{siteConfig('COMMERCE_TEXT_FOOTER_TITLE', 'Contact US')}</div>
+                    <div className='space-y-4'>
+                        <div className='flex space-x-4 text-2xl'>
+                            {JSON.parse(siteConfig('COMMERCE_CONTACT_WHATSAPP_SHOW'), true) && <div>
+                                {<a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_WHATSAPP', '#')} title={'telegram'} >
+                                    <i className='transform hover:scale-125 duration-150 fa-brands fa-whatsapp dark:hover:text-red-400 hover:text-red-600' />
+                                </a>}
+                            </div>
+                            }
+
+                            {JSON.parse(siteConfig('COMMERCE_CONTACT_TELEGRAM_SHOW', true)) && <div>
+                                {<a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM', '#')} title={'telegram'} >
+                                    <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-red-400 hover:text-red-600' />
+                                </a>}
+                            </div>}
+
+                        </div>
+                        <div className='text-lg'> {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
+                            <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-red-400 hover:text-red-600' /> {siteConfig('CONTACT_EMAIL')}
+                        </a>}</div>
+                        <div className='text-lg'> {siteConfig('CONTACT_PHONE') && <div>
+                            <i className='transform hover:scale-125 duration-150 fas fa-user dark:hover:text-red-400 hover:text-red-600' />  {siteConfig('CONTACT_PHONE')}
+                        </div>}</div>
+                    </div>
+                </div>}
+            </div>
+
+            {/* 底部版权相关 */}
+            <div id='footer-copyright-wrapper' className='flex flex-col md:flex-row justify-between border-t border-gray-600 pt-8'>
+                <div className='text-start space-y-1'>
+
+                    {/* 网站所有者 */}
+                    <div> Copyright <i className='fas fa-copyright' /> {`${copyrightDate}`} <a href={siteConfig('LINK')} className='underline font-bold  dark:text-gray-300 '>{siteConfig('AUTHOR')}</a> All Rights Reserved.</div>
+
+                    {/* 技术支持 */}
+                    <div className='text-xs text-light-500 dark:text-gray-700'>Powered by <a href='https://github.com/tangly1024/NotionNext' className='dark:text-gray-300'>NotionNext {siteConfig('VERSION')}</a>.</div>
+
+                    {/* 站点统计 */}
+                    <div>
+                        <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>
+                    </div>
+                </div>
+
+                {/* 右边公司名字 */}
+                <div className='md:text-right'>
+                    <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{siteConfig('TITLE')} {siteConfig('BIO')}</h1>
+                    <h2> {siteConfig('DESCRIPTION')}</h2>
+                    {/* 可选备案信息 */}
+                    {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a></>}
+                </div>
+            </div>
+
+        </div>
+
+    </footer >
+}
+
+export default Footer
--- a/themes/commerce/components/Header.js
+++ b/themes/commerce/components/Header.js
@@ -0,0 +1,96 @@
+import LogoBar from './LogoBar'
+import { useEffect, useRef, useState } from 'react'
+import Collapse from '@/components/Collapse'
+import { MenuBarMobile } from './MenuBarMobile'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+import { MenuItemDrop } from './MenuItemDrop'
+import { siteConfig } from '@/lib/config'
+import throttle from 'lodash.throttle'
+
+/**
+ * 顶部导航栏 + 菜单
+ * @param {} param0
+ * @returns
+ */
+export default function Header(props) {
+  const { customNav, customMenu } = props
+  const [isOpen, changeShow] = useState(false)
+  const collapseRef = useRef(null)
+
+  const { locale } = useGlobal()
+
+  const defaultLinks = [
+    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
+    { 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 }
+  ]
+
+  let links = defaultLinks.concat(customNav)
+
+  const toggleMenuOpen = () => {
+    changeShow(!isOpen)
+  }
+
+  // 向下滚动时，调整导航条高度
+  useEffect(() => {
+    scrollTrigger()
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  }, [])
+
+  const throttleMs = 150
+
+  const scrollTrigger = throttle(() => {
+    const scrollS = window.scrollY
+    const nav = document.querySelector('#top-navbar')
+
+    const narrowNav = scrollS > 50
+    if (narrowNav) {
+      nav && nav.classList.replace('h-24', 'h-14')
+    } else {
+      nav && nav.classList.replace('h-14', 'h-24')
+    }
+  }, throttleMs)
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (siteConfig('CUSTOM_MENU')) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return <div id='top-navbar-wrapper' className={'sticky top-0 w-full z-40 shadow bg-white dark:bg-hexo-black-gray '}>
+
+        {/* 导航栏菜单内容 */}
+        <div id="top-navbar" className='px-4 flex w-full mx-auto max-w-screen-xl h-24 transition-all duration-200 items-between'>
+
+            {/* 左侧图标Logo */}
+            <LogoBar {...props} />
+
+            {/* 移动端折叠按钮 */}
+            <div className='mr-1 flex md:hidden justify-end items-center text-lg space-x-4 font-serif dark:text-gray-200'>
+                <div onClick={toggleMenuOpen} className='cursor-pointer'>
+                    {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
+                </div>
+            </div>
+
+            {/* 桌面端顶部菜单 */}
+            <div className='hidden md:flex items-center'>
+                {links && links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
+            </div>
+        </div>
+
+          {/* 移动端折叠菜单 */}
+          <Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>
+            <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
+                <MenuBarMobile {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
+            </div>
+        </Collapse>
+    </div>
+}
--- a/themes/commerce/components/Hero.js
+++ b/themes/commerce/components/Hero.js
@@ -0,0 +1,24 @@
+// import Image from 'next/image'
+import CONFIG from '../config'
+import LazyImage from '@/components/LazyImage'
+
+/**
+ * 顶部全屏大图
+ * @returns
+ */
+const Hero = props => {
+  const { siteInfo } = props
+
+  return (
+        <header id="header" className="w-full h-auto aspect-[5/2] relative bg-black" >
+
+            <div className="text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full "></div>
+
+            <LazyImage id='header-cover' src={siteInfo?.pageCover}
+                className={`header-cover w-full h-auto aspect-[5/2] object-cover object-center ${CONFIG.HOME_NAV_BACKGROUND_IMG_FIXED ? 'fixed' : ''}`} />
+
+        </header>
+  )
+}
+
+export default Hero
--- a/themes/commerce/components/HexoRecentComments.js
+++ b/themes/commerce/components/HexoRecentComments.js
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react'
+import { siteConfig } from '@/lib/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] = useState([])
+  const { locale } = useGlobal()
+  const [onLoading, changeLoading] = useState(true)
+  useEffect(() => {
+    RecentComments({
+      serverURL: siteConfig('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/commerce/components/InfoCard.js
+++ b/themes/commerce/components/InfoCard.js
@@ -0,0 +1,33 @@
+import { useRouter } from 'next/router'
+import Card from './Card'
+import SocialButton from './SocialButton'
+import MenuGroupCard from './MenuGroupCard'
+import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 社交信息卡
+ * @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 */}
+                <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={siteConfig('AUTHOR')} />
+            </div>
+            <div className='font-medium text-center text-xl pb-4'>{siteConfig('AUTHOR')}</div>
+            <div className='text-sm text-center'>{siteConfig('BIO')}</div>
+            <MenuGroupCard {...props} />
+            <SocialButton />
+        </Card>
+  )
+}
--- a/themes/commerce/components/JumpToCommentButton.js
+++ b/themes/commerce/components/JumpToCommentButton.js
@@ -0,0 +1,28 @@
+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/commerce/components/JumpToTopButton.js
+++ b/themes/commerce/components/JumpToTopButton.js
@@ -0,0 +1,24 @@
+import { useGlobal } from '@/lib/global'
+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/commerce/components/LatestPostsGroup.js
+++ b/themes/commerce/components/LatestPostsGroup.js
@@ -0,0 +1,64 @@
+import { siteConfig } from '@/lib/config'
+import LazyImage from '@/components/LazyImage'
+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 === `${siteConfig('SUB_PATH', '')}/${post.slug}`
+
+          const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
+
+          return (
+            (<Link
+                    key={post.id}
+                    title={post.title}
+                    href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
+                    passHref
+                    className={'my-3 flex'}>
+
+                    <div className="w-20 h-14 overflow-hidden relative">
+                        <LazyImage src={`${headerImage}`} className='object-cover w-full h-full'/>
+                    </div>
+                    <div
+                        className={
+                            (selected ? ' text-red-400 ' : 'dark:text-gray-400 ') +
+                            ' text-sm overflow-x-hidden hover:text-red-600 px-2 duration-200 w-full rounded ' +
+                            ' hover:text-red-400 cursor-pointer items-center flex'
+                        }
+                    >
+                        <div>
+                            <div className='line-clamp-2 menu-link'>{post.title}</div>
+                            <div className="text-gray-500">{post.lastEditedDay}</div>
+                        </div>
+                    </div>
+
+                </Link>)
+          )
+        })}
+    </>
+}
+export default LatestPostsGroup
--- a/themes/commerce/components/LoadingCover.js
+++ b/themes/commerce/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/commerce/components/LogoBar.js
+++ b/themes/commerce/components/LogoBar.js
@@ -0,0 +1,20 @@
+import Link from 'next/link'
+// import { siteConfig } from '@/lib/config'
+import LazyImage from '@/components/LazyImage';
+
+/**
+ * Logo图标
+ * @param {*} props
+ * @returns
+ */
+export default function LogoBar (props) {
+  const { siteInfo } = props
+  return (
+    <div id='top-wrapper' className='w-full flex items-center'>
+          <Link href='/' className='text-md md:text-xl dark:text-gray-200 r'>
+            <LazyImage className='h-12 mr-3' src={siteInfo?.icon}/>
+          </Link>
+          {/* <div>{siteConfig('TITLE')}</div> */}
+    </div>
+  );
+}
--- a/themes/commerce/components/MenuBarMobile.js
+++ b/themes/commerce/components/MenuBarMobile.js
@@ -0,0 +1,36 @@
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+import { MenuItemCollapse } from './MenuItemCollapse'
+import { siteConfig } from '@/lib/config'
+
+export const MenuBarMobile = (props) => {
+  const { customMenu, customNav } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    // { name: locale.NAV.INDEX, to: '/' || '/', show: true },
+    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
+    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
+    // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
+  if (siteConfig('CUSTOM_MENU')) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+    <nav id='nav' className=' text-md'>
+        {links?.map(link => <MenuItemCollapse onHeightChange={props.onHeightChange} key={link?.id} link={link}/>)}
+    </nav>
+  )
+}
--- a/themes/commerce/components/MenuGroupCard.js
+++ b/themes/commerce/components/MenuGroupCard.js
@@ -0,0 +1,50 @@
+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 }
+  ]
+
+  for (let i = 0; i < links.length; i++) {
+    if (links[i].id !== i) {
+      links[i].id = i
+    }
+  }
+
+  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-red-400 hover:text-red-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/commerce/components/MenuItemCollapse.js
+++ b/themes/commerce/components/MenuItemCollapse.js
@@ -0,0 +1,55 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = (props) => {
+  const { link } = props
+  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} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
+                className="hover:text-[#D2232A] 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="hover:text-[#D2232A]  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} onHeightChange={props.onHeightChange}>
+            {link.subMenus.map((sLink, index) => {
+              return <div key={index} 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} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
+                        <span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
+                    </Link>
+                </div>
+            })}
+        </Collapse>}
+    </>
+}
--- a/themes/commerce/components/MenuItemDrop.js
+++ b/themes/commerce/components/MenuItemDrop.js
@@ -0,0 +1,43 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+  const selected = useRouter().asPath === link?.to
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} className='h-full'>
+
+        {!hasSubMenu &&
+            <Link
+                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
+                className={`${selected && 'border-b-2 border-[#D2232A]'} h-full flex space-x-1 whitespace-nowrap items-center font-sans menu-link pl-2 pr-4  dark:text-gray-200 no-underline tracking-widest pb-1`}>
+                {link?.icon && <i className={link?.icon}/>} <div>{link?.name}</div>
+                {/* {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>} */}
+            </Link>}
+
+        {hasSubMenu && <>
+            <div className='h-full flex space-x-1 whitespace-nowrap items-center cursor-pointer font-sans menu-link pl-2 pr-4  dark:text-gray-200 no-underline tracking-widest pb-1'>
+                {link?.icon && <i className={link?.icon}/>} <div>{link?.name}</div>
+                {/* <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 shadow-lg' : 'invisible opacity-0'} overflow-hidden bg-white transition-all duration-300 z-20 absolute block  `}>
+            {link.subMenus.map((sLink, index) => {
+              return <li key={index} className='cursor-pointer hover:bg-red-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} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
+                        <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/commerce/components/MenuListSide.js
+++ b/themes/commerce/components/MenuListSide.js
@@ -0,0 +1,42 @@
+import { useGlobal } from '@/lib/global'
+import { siteConfig } from '@/lib/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)
+  }
+
+  for (let i = 0; i < links.length; i++) {
+    if (links[i].id !== i) {
+      links[i].id = i
+    }
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (siteConfig('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/commerce/components/MenuListTop.js
+++ b/themes/commerce/components/MenuListTop.js
@@ -0,0 +1,42 @@
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+import { MenuItemDrop } from './MenuItemDrop'
+import { siteConfig } from '@/lib/config'
+
+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)
+  }
+
+  for (let i = 0; i < links.length; i++) {
+    if (links[i].id !== i) {
+      links[i].id = i
+    }
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (siteConfig('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/commerce/components/NavButtonGroup.js
+++ b/themes/commerce/components/NavButtonGroup.js
@@ -0,0 +1,31 @@
+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-6xl space-y-2 md:space-y-0 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 shadow-text 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 hover:scale-105 transform'>
+               {category.name}
+            </Link>
+        )
+      })}
+    </nav>
+  )
+}
+export default NavButtonGroup
--- a/themes/commerce/components/PaginationNumber.js
+++ b/themes/commerce/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-red-700 hover:border-red-400 dark:hover:border-red-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-red-300 dark:border-red-700 hover:border-red-400 dark:hover:border-red-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-red-400 dark:bg-red-500 text-white '
+            : 'border-b duration-500 border-red-300 hover:border-red-400 ') +
+          ' border-white dark:border-red-700 dark:hover:border-red-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/commerce/components/PostHeader.js
+++ b/themes/commerce/components/PostHeader.js
@@ -0,0 +1,39 @@
+import Link from 'next/link'
+import NotionIcon from '@/components/NotionIcon'
+import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
+
+export default function PostHeader({ post }) {
+  if (!post) {
+    return <></>
+  }
+  const headerImage = post?.pageCover ? post.pageCover : siteConfig('HOME_BANNER_IMAGE')
+
+  return (
+    <div id="header" className="w-full h-96 relative md:flex-shrink-0 z-10" >
+      <LazyImage priority={true} src={headerImage} className='w-full h-full object-cover object-center absolute top-0'/>
+
+      <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' /><div className='text-4xl mx-1'>{post.title}</div>
+          </div>
+
+        </div>
+      </header>
+    </div>
+  )
+}
--- a/themes/commerce/components/ProductCard.js
+++ b/themes/commerce/components/ProductCard.js
@@ -0,0 +1,37 @@
+import Link from 'next/link'
+import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
+import LazyImage from '@/components/LazyImage'
+// import Image from 'next/image'
+
+/**
+ * 商品卡
+ */
+const ProductCard = ({ index, post, siteInfo }) => {
+  if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
+    post.pageCoverThumbnail = siteInfo?.pageCover
+  }
+
+  return (
+
+        <div className={`${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
+
+            <div key={post.id} className={'group flex flex-col space-y-2 justify-between  border dark:border-black bg-white dark:bg-hexo-black-gray'}>
+
+                {/* 图片封面 */}
+                <Link href={`${siteConfig('SUB_PATH', '')}/${post.slug}`} passHref legacyBehavior>
+                    <div className="overflow-hidden m-2">
+                        <LazyImage priority={index === 1} src={post?.pageCoverThumbnail} className='h-auto aspect-square w-full object-cover object-center group-hover:scale-110 duration-500' />
+                    </div>
+                </Link>
+
+                <div className='text-center'>{post.title}</div>
+
+            </div>
+
+        </div>
+
+  )
+}
+
+export default ProductCard
--- a/themes/commerce/components/ProductCategories.js
+++ b/themes/commerce/components/ProductCategories.js
@@ -0,0 +1,27 @@
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+
+export default function ProductCategories(props) {
+  const { categoryOptions } = props
+
+  return <div className='hidden md:block w-72 mx-2'>
+        {/* 分类菜单  */}
+        <div className='bg-white  p-4'>
+            <div className='font-bold text-lg mb-4 border-b-2 py-2 border-[#D2232A]'>{siteConfig('COMMERCE_TEXT_MENU_GROUP', 'Product Categories')}</div>
+            <nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
+                {categoryOptions?.map(category => {
+                  return (
+                        <Link
+                            key={`${category.name}`}
+                            title={`${category.name}`}
+                            href={`/category/${category.name}`}
+                            className='hover:text-[#D2232A]'
+                            passHref>
+                            {category.name}
+                        </Link>
+                  )
+                })}
+            </nav>
+        </div>
+    </div>
+}
--- a/themes/commerce/components/ProductCenter.js
+++ b/themes/commerce/components/ProductCenter.js
@@ -0,0 +1,33 @@
+import { siteConfig } from '@/lib/config'
+import ProductCard from './ProductCard'
+import ProductCategories from './ProductCategories'
+
+/**
+ * 产品中心
+ * @param {*} props
+ * @returns
+ */
+export default function ProductCenter(props) {
+  const { allNavPages } = props
+  const posts = allNavPages.slice(0, parseInt(siteConfig('COMMERCE_HOME_POSTS_COUNT', 9)))
+
+  return <div className='w-full my-4 mx-4'>
+        <div className='w-full text-center text-4xl font-bold'>{siteConfig('COMMERCE_TEXT_CENTER_TITLE', 'Product Center')}</div>
+        {siteConfig('COMMERCE_TEXT_CENTER_DESCRIPTION') && <div className='w-full text-center text-lg my-3 text-gray-500'>{siteConfig('COMMERCE_TEXT_CENTER_DESCRIPTION')}</div>}
+
+        <div className='flex'>
+
+            <ProductCategories {...props} />
+
+            <div className='w-full p-4 mx-2'>
+                {/* 文章列表 */}
+                <div className="grid md:grid-cols-3 grid-cols-2 gap-5">
+                    {posts?.map(post => (
+                        <ProductCard index={posts.indexOf(post)} key={post.id} post={post} />
+                    ))}
+                </div>
+
+            </div>
+        </div>
+    </div>
+}
--- a/themes/commerce/components/Progress.js
+++ b/themes/commerce/components/Progress.js
@@ -0,0 +1,44 @@
+import { 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-red-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/commerce/components/RightFloatArea.js
+++ b/themes/commerce/components/RightFloatArea.js
@@ -0,0 +1,41 @@
+import throttle from 'lodash.throttle'
+import { useCallback, useEffect, useState } from 'react'
+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-24 right-1 fixed justify-end z-20  text-white bg-red-500 dark:bg-hexo-black-gray'}>
+                <div className={'justify-center  flex flex-col items-center cursor-pointer'}>
+                    {/* <FloatDarkModeButton /> */}
+                    {floatSlot}
+                    <JumpToTopButton />
+                </div>
+            </div>
+  )
+}
--- a/themes/commerce/components/SearchDrawer.js
+++ b/themes/commerce/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/commerce/components/SearchInput.js
+++ b/themes/commerce/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/commerce/components/SearchNav.js
+++ b/themes/commerce/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-red-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/commerce/components/SideBar.js
+++ b/themes/commerce/components/SideBar.js
@@ -0,0 +1,33 @@
+import { siteConfig } from '@/lib/config'
+import LazyImage from '@/components/LazyImage'
+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'>
+                        <LazyImage src={siteInfo?.icon} className='rounded-full' width={80} alt={siteConfig('AUTHOR')} />
+                    </div>
+                    <MenuGroupCard {...props} />
+                </div>
+            </div>
+            <MenuListSide {...props} />
+        </div>
+  )
+}
+
+export default SideBar
--- a/themes/commerce/components/SideBarDrawer.js
+++ b/themes/commerce/components/SideBarDrawer.js
@@ -0,0 +1,52 @@
+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 lg: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/commerce/components/SideRight.js
+++ b/themes/commerce/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 { siteConfig } from '@/lib/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}/>
+
+      {siteConfig('COMMENT_WALINE_SERVER_URL') && siteConfig('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/commerce/components/SlotBar.js
+++ b/themes/commerce/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-4 font-light hover:text-red-700 dark:hover:text-red-400 transform dark:text-white">
+              <Link key={tag} href={`/tag/${encodeURIComponent(tag)}`} passHref
+                  className={'cursor-pointer inline-block rounded duration-200 mr-2 py-0.5 px-1 text-xl whitespace-nowrap '}>
+                  <div className='border-b-2 border-[#D2232A] font-light dark:text-gray-400 dark:hover:text-white'> #{tag} </div>
+              </Link>
+          </div>
+  } else if (category) {
+    return <div className="cursor-pointer text-lg px-5  mb-4 font-light hover:text-red-700 dark:hover:text-red-400 transform dark:text-white">
+             <span className='border-b-2 pb-4 font-bold border-[#D2232A]'>{category}</span>
+          </div>
+  }
+  return <></>
+}
--- a/themes/commerce/components/SocialButton.js
+++ b/themes/commerce/components/SocialButton.js
@@ -0,0 +1,43 @@
+import { siteConfig } from '@/lib/config'
+/**
+ * 社交联系方式按钮组
+ * @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 '>
+      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
+        <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-red-400 hover:text-red-600'/>
+      </a>}
+      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
+        <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-red-400 hover:text-red-600'/>
+      </a>}
+      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
+        <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-red-400 hover:text-red-600'/>
+      </a>}
+      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkIn'} >
+        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-red-400 hover:text-red-600'/>
+      </a>}
+      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
+        <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-red-400 hover:text-red-600'/>
+      </a>}
+      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
+        <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-red-400 hover:text-red-600'/>
+      </a>}
+      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
+        <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-red-400 hover:text-red-600'/>
+      </a>}
+      {JSON.parse(siteConfig('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-red-400 hover:text-red-600'/>
+      </a>}
+      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
+        <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-red-400 hover:text-red-600'/>
+      </a>}
+      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
+        <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-red-400 hover:text-red-600'/>
+      </a>}
+    </div>
+  </div>
+}
+export default SocialButton
--- a/themes/commerce/components/TagGroups.js
+++ b/themes/commerce/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/commerce/components/TagItemMini.js
+++ b/themes/commerce/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-red-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-red-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/commerce/components/TocDrawer.js
+++ b/themes/commerce/components/TocDrawer.js
@@ -0,0 +1,42 @@
+import Catalog from './Catalog'
+import { 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/commerce/components/TocDrawerButton.js
+++ b/themes/commerce/components/TocDrawerButton.js
@@ -0,0 +1,21 @@
+import { useGlobal } from '@/lib/global'
+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/commerce/config.js
+++ b/themes/commerce/config.js
@@ -0,0 +1,16 @@
+const CONFIG = {
+  // 封面大图
+  COMMERCE_HOME_BANNER_ENABLE: true,
+
+  COMMERCE_TEXT_CENTER_TITLE: 'Product Center', //中间产品区块标题
+  COMMERCE_TEXT_CENTER_DESCRIPTION:
+    'The vision of NotionNext is to help you effortlessly and seamlessly build your own website, amplifying the value of your brand.', // 中间产品区块文字描述
+  COMMERCE_TEXT_CENTER_CATEGORY_TITLE: 'Product Categories', //左侧产品分类标题
+  COMMERCE_TEXT_FOOTER_TITLE: 'Contact US', // COMMERCE主题页脚文案标题；按Shift+Enter键可以换行
+  COMMERCE_TEXT_FOOTER_MENU_1: 'Product Center', //COMMERCE主题页脚左侧菜单标题1
+  COMMERCE_TEXT_FOOTER_MENU_2: 'About US', //COMMERCE主题页脚左侧菜单标题2
+  COMMERCE_HOME_POSTS_COUNT: 9, //首页展示商品数
+  COMMERCE_CONTACT_WHATSAPP_SHOW: true, //是否展示whatsapp联系按钮 请配置 CONTACT_WHATSAPP
+  COMMERCE_CONTACT_TELEGRAM_SHOW: true //联系栏展示telegram按钮 请配置 CONTACT_TELEGRAM
+}
+export default CONFIG
--- a/themes/commerce/index.js
+++ b/themes/commerce/index.js
@@ -0,0 +1,408 @@
+import CONFIG from './config'
+
+import { useEffect, useRef } from 'react'
+import Footer from './components/Footer'
+import { useGlobal } from '@/lib/global'
+import { isBrowser, scanAndConvertToLinks } from '@/lib/utils'
+import BlogPostListPage from './components/BlogPostListPage'
+import BlogPostListScroll from './components/BlogPostListScroll'
+import Hero from './components/Hero'
+import { useRouter } from 'next/router'
+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 PostHeader from './components/PostHeader'
+import TocDrawer from './components/TocDrawer'
+import NotionPage from '@/components/NotionPage'
+import TagItemMini from './components/TagItemMini'
+import Link from 'next/link'
+import SlotBar from './components/SlotBar'
+import { Transition } from '@headlessui/react'
+import { Style } from './style'
+import replaceSearchResult from '@/components/Mark'
+import { siteConfig } from '@/lib/config'
+import Header from './components/Header'
+import ProductCenter from './components/ProductCenter'
+import LazyImage from '@/components/LazyImage'
+import ProductCategories from './components/ProductCategories'
+
+/**
+ * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
+ * @param props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = props => {
+  const { children, post, floatSlot, slotTop, slotRight, meta, className } =
+    props
+  const { onLoading } = useGlobal()
+
+  // 查找页面上的 链接，并便成为可点击
+  useEffect(() => {
+    scanAndConvertToLinks(document.getElementById('theme-commerce'))
+  })
+
+  let headerSlot = null
+  const router = useRouter()
+  if (router.route === '/' && !post) {
+    headerSlot = JSON.parse(siteConfig('COMMERCE_HOME_BANNER_ENABLE', true)) ? (
+      <Hero {...props} />
+    ) : (
+      <></>
+    )
+  } else if (post) {
+    headerSlot = <PostHeader {...props} />
+  }
+
+  return (
+    <div
+      id='theme-commerce'
+      className='flex flex-col min-h-screen justify-between'>
+      <Style />
+
+      {/* 顶部导航 */}
+      <Header {...props} />
+
+      {/* 顶部嵌入 */}
+      <div>{headerSlot}</div>
+
+      {/* 主区块 */}
+      <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 relative`}>
+        <div
+          id='container-inner'
+          className={
+            (JSON.parse(siteConfig('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 h-full max-w-screen-xl overflow-hidden`}>
+            <Transition
+              show={!onLoading}
+              appear={true}
+              enter='transition ease-in-out duration-700 transform order-first'
+              enterFrom='opacity-0 translate-y-16'
+              enterTo='opacity-100'
+              leave='transition ease-in-out duration-300 transform'
+              leaveFrom='opacity-100 translate-y-0'
+              leaveTo='opacity-0 -translate-y-16'
+              unmount={false}>
+              {/* 主区上部嵌入 */}
+              {slotTop}
+
+              {children}
+            </Transition>
+          </div>
+
+          {slotRight}
+        </div>
+      </main>
+
+      {/* 悬浮菜单 */}
+      <RightFloatArea floatSlot={floatSlot} />
+
+      {/* 页脚 */}
+      <Footer {...props} />
+    </div>
+  )
+}
+
+/**
+ * 首页
+ * 是一个博客列表，嵌入一个Hero大图
+ * @param {*} props
+ * @returns
+ */
+const LayoutIndex = props => {
+  const { notice } = props
+  return (
+    <>
+      {/* 产品中心 */}
+      <ProductCenter {...props} />
+
+      {/* 首页企业/品牌介绍 */}
+      {notice && (
+        <div id='brand-introduction' className='w-full my-4 mx-4'>
+          <div className='w-full text-center text-4xl font-bold pt-12'>
+            {siteConfig('TEXT_HOME_ABOUT_US', notice.title)}
+          </div>
+          <NotionPage post={notice} className='text-2xl text-justify' />
+        </div>
+      )}
+
+      {/* 铺开导航菜单 */}
+    </>
+  )
+}
+
+/**
+ * 博客列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutPostList = props => {
+  const slotRight = <ProductCategories {...props} />
+  return (
+    <LayoutBase {...props} slotRight={slotRight}>
+      <div className='bg-white border-[#D2232A] p-4'>
+        <SlotBar {...props} />
+        {siteConfig('POST_LIST_STYLE') === 'page' ? (
+          <BlogPostListPage {...props} />
+        ) : (
+          <BlogPostListScroll {...props} />
+        )}
+      </div>
+    </LayoutBase>
+  )
+}
+
+/**
+ * 搜索
+ * @param {*} props
+ * @returns
+ */
+const LayoutSearch = props => {
+  const { keyword } = props
+  const router = useRouter()
+  const currentSearch = keyword || router?.query?.s
+
+  useEffect(() => {
+    if (currentSearch) {
+      replaceSearchResult({
+        doms: document.getElementsByClassName('replace'),
+        search: keyword,
+        target: {
+          element: 'span',
+          className: 'text-red-500 border-b border-dashed'
+        }
+      })
+    }
+  })
+
+  return (
+    <>
+      {!currentSearch ? (
+        <SearchNav {...props} />
+      ) : (
+        <div id='posts-wrapper'>
+          {' '}
+          {siteConfig('POST_LIST_STYLE') === 'page' ? (
+            <BlogPostListPage {...props} />
+          ) : (
+            <BlogPostListScroll {...props} />
+          )}{' '}
+        </div>
+      )}
+    </>
+  )
+}
+
+/**
+ * 归档
+ * @param {*} props
+ * @returns
+ */
+const LayoutArchive = props => {
+  const { archivePosts } = props
+  return (
+    <>
+      <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>
+    </>
+  )
+}
+
+/**
+ * 文章详情
+ * @param {*} props
+ * @returns
+ */
+const LayoutSlug = props => {
+  const { post, lock, validPassword } = props
+  const drawerRight = useRef(null)
+
+  const targetRef = isBrowser
+    ? document.getElementById('article-wrapper')
+    : null
+  const headerImage = post?.pageCover
+    ? post.pageCover
+    : siteConfig('HOME_BANNER_IMAGE')
+  const floatSlot = <></>
+
+  return (
+    <>
+      <div className='w-full max-w-screen-xl mx-auto lg:hover:shadow lg:border 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 '>
+            {/* 预览区块 */}
+
+            {post?.type === 'Post' && (
+              <div className='flex md:flex-row flex-col w-full justify-between py-4'>
+                <div
+                  id='left-img'
+                  className='w-1/2 flex justify-center items-center border'>
+                  <LazyImage
+                    src={headerImage}
+                    className='m-auto w-full h-auto aspect-square object-cover object-center'
+                  />
+                </div>
+
+                <div id='info-right' className='w-1/2 p-4'>
+                  <div>{post?.title}</div>
+                  <div>{post?.summary}</div>
+                </div>
+              </div>
+            )}
+
+            <hr className='border-2 border-[#D2232A]' />
+
+            <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>
+            </article>
+          </div>
+        )}
+      </div>
+
+      <div className='block lg:hidden'>
+        <TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
+      </div>
+    </>
+  )
+}
+
+/**
+ * 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 (
+    <>
+      <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>
+    </>
+  )
+}
+
+/**
+ * 分类列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutCategoryIndex = props => {
+  const { categoryOptions } = props
+  const { locale } = useGlobal()
+  return (
+    <>
+      <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-red-400'
+                  }>
+                  <i className='mr-4 fas fa-folder' /> {category.name}(
+                  {category.count})
+                </div>
+              </Link>
+            )
+          })}
+        </div>
+      </Card>
+    </>
+  )
+}
+
+/**
+ * 标签列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutTagIndex = props => {
+  const { tagOptions } = props
+  const { locale } = useGlobal()
+  return (
+    <>
+      <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>
+    </>
+  )
+}
+
+export {
+  CONFIG as THEME_CONFIG,
+  LayoutBase,
+  LayoutIndex,
+  LayoutSearch,
+  LayoutArchive,
+  LayoutSlug,
+  Layout404,
+  LayoutCategoryIndex,
+  LayoutPostList,
+  LayoutTagIndex
+}
--- a/themes/commerce/style.js
+++ b/themes/commerce/style.js
@@ -0,0 +1,81 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 这里的css样式只对当前主题生效
+ * 主题客制化css
+ * @returns
+ */
+const Style = () => {
+  return (<style jsx global>{`
+    // 底色
+    body{
+        background-color: #f5f5f5
+    }
+    .dark body{
+        background-color: black;
+    }
+
+    // 产品介绍区域字体放大
+    #brand-introduction .notion {
+        font-size: 1.5rem !important;
+    }
+  
+    /*  菜单下划线动画 */
+    #theme-commerce .menu-link {
+        text-decoration: none;
+        background-image: linear-gradient(#D2232A, #D2232A);
+        background-repeat: no-repeat;
+        background-position: bottom center;
+        background-size: 0 2px;
+        transition: background-size 100ms ease-in-out;
+    }
+    
+    #theme-commerce .menu-link:hover {
+        background-size: 100% 2px;
+        color: #D2232A;
+    }
+
+    /* 设置了从上到下的渐变黑色 */
+    #theme-commerce .header-cover::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
+    }
+
+    /* Custem */
+    .tk-footer{
+        opacity: 0;
+    }
+
+    // 选中字体颜色
+    ::selection {
+        background: rgba(45, 170, 219, 0.3);
+    }
+
+    // 自定义滚动条
+    ::-webkit-scrollbar {
+        width: 5px;
+        height: 5px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: #D2232A;
+    }
+
+    * {
+        scrollbar-width:thin;
+        scrollbar-color: #D2232A transparent
+    }
+    
+
+  `}</style>)
+}
+
+export { Style }