微调matery主题

themes/matery/components/BlogPostListPage.js

@@ -1,5 +1,5 @@
-import BlogPostCard from './BlogPostCard'
 import { siteConfig } from '@/lib/config'
+import BlogPostCard from './BlogPostCard'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import PaginationSimple from './PaginationSimple'
 
@@ -12,7 +12,9 @@ import PaginationSimple from './PaginationSimple'
  * @constructor
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
-  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
+  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 />
@@ -21,12 +23,17 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
       <div className='w-full'>
         <div className='pt-6'></div>
         {/* 文章列表 */}
-        <div className="pt-4 flex flex-wrap pb-12" >
-          {posts?.map(post => (
-           <div key={post.id} className='xl:w-1/3 md:w-1/2 w-full p-4'> <BlogPostCard index={posts.indexOf(post)} post={post} siteInfo={siteInfo} /></div>
+        <div className='pt-4 flex flex-wrap pb-12'>
+          {posts?.map((post, index) => (
+            <div key={post.id} className='xl:w-1/3 md:w-1/2 w-full p-4'>
+              {' '}
+              <BlogPostCard index={index} post={post} siteInfo={siteInfo} />
+            </div>
           ))}
         </div>
-        {showPagination && <PaginationSimple page={page} totalPage={totalPage} />}
+        {showPagination && (
+          <PaginationSimple page={page} totalPage={totalPage} />
+        )}
       </div>
     )
   }

themes/matery/components/Footer.js

@@ -3,31 +3,60 @@ import { siteConfig } from '@/lib/config'
 const Footer = ({ title }) => {
   const d = new Date()
   const currentYear = d.getFullYear()
-  const copyrightDate = (function() {
-    if (Number.isInteger(siteConfig('SINCE')) && siteConfig('SINCE') < currentYear) {
+  const copyrightDate = (function () {
+    if (
+      Number.isInteger(siteConfig('SINCE')) &&
+      siteConfig('SINCE') < currentYear
+    ) {
       return siteConfig('SINCE') + '-' + currentYear
     }
     return currentYear
   })()
 
   return (
-    <footer
-      className='relative z-10 dark:bg-black flex-shrink-0 bg-indigo-700 text-gray-300 justify-center text-center m-auto w-full leading-6  dark:text-gray-100 text-sm p-6'
-    >
+    <footer className='relative z-10 dark:bg-black flex-shrink-0 bg-indigo-700 text-gray-300 justify-center text-center m-auto w-full leading-6  dark:text-gray-100 text-sm p-6'>
       {/* <DarkModeButton/> */}
-
-      <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={siteConfig('LINK')} className='underline font-bold  dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.<br/>
-
-      {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a><br/></>}
-
-      <span className='hidden busuanzi_container_site_pv'>
-            <i className='fas fa-eye'/><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
-      <span className='pl-2 hidden busuanzi_container_site_uv'>
-        <i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
-        <br/>
+      <i className='fas fa-copyright' /> {`${copyrightDate}`}{' '}
+      <span>
+        <span className='w-5 mx-1 text-center'>
+          <i className=' animate-pulse fas fa-heart' />
+        </span>{' '}
+        <a
+          href={siteConfig('LINK')}
+          className='underline font-bold  dark:text-gray-300 '>
+          {siteConfig('AUTHOR')}
+        </a>
+        .<br />
+        {siteConfig('BEI_AN') && (
+          <>
+            <i className='fas fa-shield-alt' />{' '}
+            <a href='https://beian.miit.gov.cn/' className='mr-2'>
+              {siteConfig('BEI_AN')}
+            </a>
+            <br />
+          </>
+        )}
+        <span className='hidden busuanzi_container_site_pv'>
+          <i className='fas fa-eye' />
+          <span className='px-1 busuanzi_value_site_pv'> </span>{' '}
+        </span>
+        <span className='pl-2 hidden busuanzi_container_site_uv'>
+          <i className='fas fa-users' />{' '}
+          <span className='px-1 busuanzi_value_site_uv'> </span>{' '}
+        </span>
+        <br />
         <h1>{title}</h1>
-        <span className='text-xs '>Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline dark:text-gray-300'>NotionNext {siteConfig('VERSION')}</a>.</span></span><br/>
-
+        <span className='text-xs '>
+          Powered by{' '}
+          <a
+            href='https://github.com/tangly1024/NotionNext'
+            className='underline dark:text-gray-300'>
+            NotionNext {siteConfig('VERSION')}
+          </a>
+          .
+        </span>
+      </span>
+      <br />
     </footer>
   )
 }

themes/matery/components/PostHeader.js

@@ -6,15 +6,27 @@ import { siteConfig } from '@/lib/config'
  * 文章背景图
  */
 export default function PostHeader({ post, siteInfo }) {
-  const headerImage = post?.pageCoverThumbnail ? post?.pageCoverThumbnail : siteInfo?.pageCover
+  const headerImage = post?.pageCoverThumbnail
+    ? post?.pageCoverThumbnail
+    : siteInfo?.pageCover
   const title = post?.title
   return (
-        <div id='header' className="flex h-96 justify-center align-middle items-center w-full relative bg-black">
-            <div className="z-10 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">
-                {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{title}
-            </div>
-            <LazyImage alt={title} src={headerImage} className='pointer-events-none select-none w-full h-full object-cover opacity-30 absolute'
-                placeholder='blur' blurDataURL='/bg_image.jpg' />
-        </div>
+    <div
+      id='header'
+      className='flex h-96 justify-center align-middle items-center w-full relative bg-black'>
+      <div
+        data-wow-delay='.1s'
+        className='wow fadeInUp z-10 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'>
+        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}
+        {title}
+      </div>
+      <LazyImage
+        alt={title}
+        src={headerImage}
+        className='pointer-events-none select-none w-full h-full object-cover opacity-30 absolute'
+        placeholder='blur'
+        blurDataURL={siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')}
+      />
+    </div>
   )
 }

themes/matery/index.js

@@ -1,36 +1,38 @@
-import CONFIG from './config'
-import TopNav from './components/TopNav'
-import Live2D from '@/components/Live2D'
-import { useGlobal } from '@/lib/global'
-import Footer from './components/Footer'
-import { useEffect } from 'react'
-import RightFloatButtons from './components/RightFloatButtons'
-import { useRouter } from 'next/router'
-import SearchNave from './components/SearchNav'
-import BlogPostListPage from './components/BlogPostListPage'
-import BlogPostListScroll from './components/BlogPostListScroll'
-import Hero from './components/Hero'
-import Announcement from './components/Announcement'
-import CatalogWrapper from './components/CatalogWrapper'
-import TagItemMiddle from './components/TagItemMiddle'
-import PostHeader from './components/PostHeader'
-import Link from 'next/link'
-import ArticleAdjacent from './components/ArticleAdjacent'
 import Comment from '@/components/Comment'
-import ArticleCopyright from './components/ArticleCopyright'
-import ShareBar from '@/components/ShareBar'
+import { AdSlot } from '@/components/GoogleAdsense'
+import Live2D from '@/components/Live2D'
+import replaceSearchResult from '@/components/Mark'
 import NotionPage from '@/components/NotionPage'
+import ShareBar from '@/components/ShareBar'
+import WWAds from '@/components/WWAds'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { loadWowJS } from '@/lib/plugins/wow'
+import { isBrowser } from '@/lib/utils'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import Announcement from './components/Announcement'
+import ArticleAdjacent from './components/ArticleAdjacent'
+import ArticleCopyright from './components/ArticleCopyright'
 import { ArticleInfo } from './components/ArticleInfo'
 import { ArticleLock } from './components/ArticleLock'
-import BlogPostArchive from './components/BlogPostArchive'
-import Card from './components/Card'
-import JumpToCommentButton from './components/JumpToCommentButton'
 import BlogListBar from './components/BlogListBar'
-import { Transition } from '@headlessui/react'
+import BlogPostArchive from './components/BlogPostArchive'
+import BlogPostListPage from './components/BlogPostListPage'
+import BlogPostListScroll from './components/BlogPostListScroll'
+import Card from './components/Card'
+import CatalogWrapper from './components/CatalogWrapper'
+import Footer from './components/Footer'
+import Hero from './components/Hero'
+import JumpToCommentButton from './components/JumpToCommentButton'
+import PostHeader from './components/PostHeader'
+import RightFloatButtons from './components/RightFloatButtons'
+import SearchNave from './components/SearchNav'
+import TagItemMiddle from './components/TagItemMiddle'
+import TopNav from './components/TopNav'
+import CONFIG from './config'
 import { Style } from './style'
-import replaceSearchResult from '@/components/Mark'
-import { siteConfig } from '@/lib/config'
-import { isBrowser } from '@/lib/utils'
 
 /**
  * 基础布局
@@ -41,25 +43,39 @@ import { isBrowser } from '@/lib/utils'
  */
 const LayoutBase = props => {
   const { children, post } = props
-  const { onLoading, fullWidth } = useGlobal()
+  const { fullWidth } = useGlobal()
   const router = useRouter()
-  const containerSlot = router.route === '/' ? <Announcement {...props} /> : <BlogListBar {...props} />
-  const headerSlot = siteConfig('MATERY_HOME_BANNER_ENABLE', null, CONFIG) && router.route === '/'
-    ? <Hero {...props} />
-    : (post && !fullWidth ? <PostHeader {...props} /> : null)
+  // 加载wow动画
+  useEffect(() => {
+    loadWowJS()
+  }, [])
+  const containerSlot =
+    router.route === '/' ? (
+      <Announcement {...props} />
+    ) : (
+      <BlogListBar {...props} />
+    )
+  const headerSlot =
+    siteConfig('MATERY_HOME_BANNER_ENABLE', null, CONFIG) &&
+    router.route === '/' ? (
+      <Hero {...props} />
+    ) : post && !fullWidth ? (
+      <PostHeader {...props} />
+    ) : null
 
   const floatRightBottom = post ? <JumpToCommentButton /> : null
 
   return (
-        <div id='theme-matery' className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full scroll-smooth`}>
+    <div
+      id='theme-matery'
+      className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full scroll-smooth`}>
+      <Style />
 
-            <Style/>
+      {/* 顶部导航栏 */}
+      <TopNav {...props} />
 
-            {/* 顶部导航栏 */}
-            <TopNav {...props} />
-
-            {/* 顶部嵌入 */}
-            <Transition
+      {/* 顶部嵌入 */}
+      {/* <Transition
                 show={!onLoading}
                 appear={true}
                 enter="transition ease-in-out duration-700 transform order-first"
@@ -69,46 +85,49 @@ const LayoutBase = props => {
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-16"
                 unmount={false}
-            >
-                {headerSlot}
-            </Transition>
+            > */}
+      {headerSlot}
+      {/* </Transition> */}
 
-            <main id="wrapper" className={`${siteConfig('MATERY_HOME_BANNER_ENABLE', null, CONFIG) ? '' : 'pt-16'} flex-1 w-full py-8 md:px-8 lg:px-24 relative`}>
-                {/* 嵌入区域 */}
-                <div id="container-slot" className={`w-full ${fullWidth ? '' : 'max-w-6xl'} ${post && ' lg:max-w-3xl 2xl:max-w-4xl '} mt-6 px-3 mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
-                    {containerSlot}
-                </div>
-
-                <div id="container-inner" className={`w-full min-h-fit ${fullWidth ? '' : 'max-w-6xl'} mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
-                    <Transition
-                        show={!onLoading}
-                        appear={true}
-                        enter="transition ease-in-out duration-700 transform order-first"
-                        enterFrom="opacity-0 translate-y-16"
-                        enterTo="opacity-100 w-full"
-                        leave="transition ease-in-out duration-300 transform"
-                        leaveFrom="opacity-100 translate-y-0"
-                        leaveTo="opacity-0 -translate-y-16"
-                        unmount={false}
-                    >
-                        {children}
-                    </Transition>
-
-                </div>
-
-            </main>
-
-            {/* 左下角悬浮 */}
-            <div className="bottom-4 -left-14 fixed justify-end z-40">
-                <Live2D />
-            </div>
-
-            {/* 右下角悬浮 */}
-            <RightFloatButtons {...props} floatRightBottom={floatRightBottom}/>
-
-            {/* 页脚 */}
-            <Footer title={siteConfig('TITLE')} />
+      <main
+        id='wrapper'
+        className={`${siteConfig('MATERY_HOME_BANNER_ENABLE', null, CONFIG) ? '' : 'pt-16'} flex-1 w-full py-8 md:px-8 lg:px-24 relative`}>
+        {/* 嵌入区域 */}
+        <div
+          id='container-slot'
+          className={`w-full ${fullWidth ? '' : 'max-w-6xl'} ${post && ' lg:max-w-3xl 2xl:max-w-4xl '} mt-6 px-3 mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
+          {containerSlot}
         </div>
+
+        <div
+          id='container-inner'
+          className={`w-full min-h-fit ${fullWidth ? '' : 'max-w-6xl'} mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
+          {/* <Transition
+            show={!onLoading}
+            appear={true}
+            enter='transition ease-in-out duration-700 transform order-first'
+            enterFrom='opacity-0 translate-y-16'
+            enterTo='opacity-100 w-full'
+            leave='transition ease-in-out duration-300 transform'
+            leaveFrom='opacity-100 translate-y-0'
+            leaveTo='opacity-0 -translate-y-16'
+            unmount={false}> */}
+          {children}
+          {/* </Transition> */}
+        </div>
+      </main>
+
+      {/* 左下角悬浮 */}
+      <div className='bottom-4 -left-14 fixed justify-end z-40'>
+        <Live2D />
+      </div>
+
+      {/* 右下角悬浮 */}
+      <RightFloatButtons {...props} floatRightBottom={floatRightBottom} />
+
+      {/* 页脚 */}
+      <Footer title={siteConfig('TITLE')} />
+    </div>
   )
 }
 
@@ -118,8 +137,8 @@ const LayoutBase = props => {
  * @param {*} props
  * @returns
  */
-const LayoutIndex = (props) => {
-  return <LayoutPostList {...props}/>
+const LayoutIndex = props => {
+  return <LayoutPostList {...props} />
 }
 
 /**
@@ -127,11 +146,15 @@ const LayoutIndex = (props) => {
  * @param {*} props
  * @returns
  */
-const LayoutPostList = (props) => {
+const LayoutPostList = props => {
   return (
-        <>
-            {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-        </>
+    <>
+      {siteConfig('POST_LIST_STYLE') === 'page' ? (
+        <BlogPostListPage {...props} />
+      ) : (
+        <BlogPostListScroll {...props} />
+      )}
+    </>
   )
 }
 
@@ -158,13 +181,19 @@ const LayoutSearch = props => {
     }
   })
   return (
-        <>
-            {!currentSearch
-              ? <SearchNave {...props} />
-              : <div id="posts-wrapper">
-                    {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-                </div>}
-        </>
+    <>
+      {!currentSearch ? (
+        <SearchNave {...props} />
+      ) : (
+        <div id='posts-wrapper'>
+          {siteConfig('POST_LIST_STYLE') === 'page' ? (
+            <BlogPostListPage {...props} />
+          ) : (
+            <BlogPostListScroll {...props} />
+          )}
+        </div>
+      )}
+    </>
   )
 }
 
@@ -173,21 +202,23 @@ const LayoutSearch = props => {
  * @param {*} props
  * @returns
  */
-const LayoutArchive = (props) => {
+const LayoutArchive = props => {
   const { archivePosts } = props
-  return <>
-        <Card className='w-full -mt-32'>
-            <div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
-                {Object.keys(archivePosts).map(archiveTitle => (
-                    <BlogPostArchive
-                        key={archiveTitle}
-                        posts={archivePosts[archiveTitle]}
-                        archiveTitle={archiveTitle}
-                    />
-                ))}
-            </div>
-        </Card>
+  return (
+    <>
+      <Card className='w-full -mt-32'>
+        <div className='mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray'>
+          {Object.keys(archivePosts).map(archiveTitle => (
+            <BlogPostArchive
+              key={archiveTitle}
+              posts={archivePosts[archiveTitle]}
+              archiveTitle={archiveTitle}
+            />
+          ))}
+        </div>
+      </Card>
     </>
+  )
 }
 
 /**
@@ -202,81 +233,84 @@ const LayoutSlug = props => {
   useEffect(() => {
     // 404
     if (!post) {
-      setTimeout(() => {
-        if (isBrowser) {
-          const article = document.getElementById('notion-article')
-          if (!article) {
-            router.push('/404').then(() => {
-              console.warn('找不到页面', router.asPath)
-            })
+      setTimeout(
+        () => {
+          if (isBrowser) {
+            const article = document.getElementById('notion-article')
+            if (!article) {
+              router.push('/404').then(() => {
+                console.warn('找不到页面', router.asPath)
+              })
+            }
           }
-        }
-      }, siteConfig('POST_WAITING_TIME_FOR_404') * 1000)
+        },
+        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+      )
     }
   }, [post])
-  return (<>
+  return (
+    <>
+      <div
+        id='inner-wrapper'
+        className={`w-full ${fullWidth ? '' : 'lg:max-w-3xl 2xl:max-w-4xl'}`}>
+        {/* 文章主体 */}
+        <div
+          className={`${fullWidth ? '' : '-mt-32'} transition-all duration-300 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black`}>
+          {lock && <ArticleLock validPassword={validPassword} />}
 
-        <div id='inner-wrapper' className={`w-full ${fullWidth ? '' : 'lg:max-w-3xl 2xl:max-w-4xl'}`} >
+          {!lock && (
+            <div
+              id='article-wrapper'
+              className='overflow-x-auto md:w-full px-3 '>
+              {/* 文章信息 */}
+              {post?.type && post?.type === 'Post' && (
+                <>
+                  <div data-wow-delay='.2s' className='wow fadeInUp px-10'>
+                    <ArticleInfo post={post} />
+                  </div>
+                  <hr />
+                </>
+              )}
 
-            {/* 文章主体卡片 */}
-            <div className={`${fullWidth ? '' : '-mt-32'} transition-all duration-300 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black`}>
+              <div className='lg:px-10 subpixel-antialiased'>
+                <article itemScope>
+                  {/* Notion文章主体 */}
+                  <section
+                    data-wow-delay='.1s'
+                    className={`wow fadeInUp justify-center mx-auto ${fullWidth ? '' : 'max-w-2xl lg:max-w-full'}`}>
+                    <WWAds orientation='horizontal' />
+                    {post && <NotionPage post={post} />}
+                    <AdSlot />
+                  </section>
 
-                {lock && <ArticleLock validPassword={validPassword} />}
+                  {/* 分享 */}
+                  <ShareBar post={post} />
 
-                {!lock && <div id="article-wrapper" className="overflow-x-auto md:w-full px-3 ">
+                  {/* 版权说明 */}
+                  {post?.type === 'Post' && <ArticleCopyright {...props} />}
+                </article>
 
-                    {/* 文章信息 */}
-                    {post?.type && post?.type === 'Post' && <>
-                        <div
-                            data-aos="fade-down"
-                            data-aos-duration="100"
-                            data-aos-once="false"
-                            data-aos-anchor-placement="top-center"
-                            className='px-10'>
-                            <ArticleInfo post={post} />
-                        </div>
-                        <hr />
-                    </>}
+                <hr className='border-dashed' />
 
-                    <div className='lg:px-10 subpixel-antialiased'>
-
-                        <article itemScope >
-
-                            {/* Notion文章主体 */}
-                            <section className={`justify-center mx-auto ${fullWidth ? '' : 'max-w-2xl lg:max-w-full'}`}>
-                                {post && <NotionPage post={post} />}
-                            </section>
-
-                            {/* 分享 */}
-                            <ShareBar post={post} />
-
-                            {/* 版权说明 */}
-                            {post?.type === 'Post' && <ArticleCopyright {...props} />}
-
-                        </article>
-
-                        <hr className='border-dashed' />
-
-                        {/* 评论互动 */}
-                        <div className="overflow-x-auto dark:bg-hexo-black-gray px-3">
-                            <Comment frontMatter={post} />
-                        </div>
-                    </div>
-
-                </div>}
+                {/* 评论互动 */}
+                <div className='overflow-x-auto dark:bg-hexo-black-gray px-3'>
+                  <WWAds orientation='horizontal' />
+                  <Comment frontMatter={post} />
+                </div>
+              </div>
             </div>
-
-            {/* 底部文章推荐 */}
-            {post?.type === 'Post' && <ArticleAdjacent {...props} />}
-
-            {/* 底部公告 */}
-            <Announcement {...props} />
-
-            {/* 右侧文章目录 */}
-            <CatalogWrapper post={post} />
-
+          )}
         </div>
 
+        {/* 底部文章推荐 */}
+        {post?.type === 'Post' && <ArticleAdjacent {...props} />}
+
+        {/* 底部公告 */}
+        <Announcement {...props} />
+
+        {/* 右侧文章目录 */}
+        <CatalogWrapper post={post} />
+      </div>
     </>
   )
 }
@@ -291,7 +325,9 @@ const Layout404 = props => {
   useEffect(() => {
     // 延时3秒如果加载失败就返回首页
     setTimeout(() => {
-      const article = typeof document !== 'undefined' && document.getElementById('notion-article')
+      const article =
+        typeof document !== 'undefined' &&
+        document.getElementById('notion-article')
       if (!article) {
         router.push('/').then(() => {
           // console.log('找不到页面', router.asPath)
@@ -300,18 +336,18 @@ const Layout404 = props => {
     }, 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>
-        </>
+    <>
+      <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>
+    </>
   )
 }
 
@@ -324,24 +360,27 @@ const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
 
   return (
-        <>
-
-            <div id='inner-wrapper' className='w-full'>
-                <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black dark:text-gray-300">
-                    <div className='flex justify-center flex-wrap'>
-                        {categoryOptions?.map(e => {
-                          return (
-                                <Link key={e.name} href={`/category/${e.name}`} passHref legacyBehavior>
-                                    <div className='duration-300 text-md whitespace-nowrap dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400' >
-                                        <i className={'mr-4 fas fa-folder'} />  {e.name}({e.count})
-                                    </div>
-                                </Link>
-                          )
-                        })}
-                    </div>
-                </div>
-            </div>
-        </>
+    <>
+      <div id='inner-wrapper' className='w-full'>
+        <div className='drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black dark:text-gray-300'>
+          <div className='flex justify-center flex-wrap'>
+            {categoryOptions?.map(e => {
+              return (
+                <Link
+                  key={e.name}
+                  href={`/category/${e.name}`}
+                  passHref
+                  legacyBehavior>
+                  <div className='duration-300 text-md whitespace-nowrap dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400'>
+                    <i className={'mr-4 fas fa-folder'} /> {e.name}({e.count})
+                  </div>
+                </Link>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </>
   )
 }
 
@@ -354,39 +393,39 @@ const LayoutTagIndex = props => {
   const { tagOptions } = props
   const { locale } = useGlobal()
   return (
-        <>
-            <div id='inner-wrapper' className='w-full drop-shadow-xl'>
+    <>
+      <div id='inner-wrapper' className='w-full drop-shadow-xl'>
+        <div className='-mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black'>
+          <div className='dark:text-gray-200 py-5 text-center  text-2xl'>
+            <i className='fas fa-tags' /> {locale.COMMON.TAGS}
+          </div>
 
-                <div className="-mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
-
-                    <div className="dark:text-gray-200 py-5 text-center  text-2xl">
-                        <i className="fas fa-tags" />  {locale.COMMON.TAGS}
-                    </div>
-
-                    <div id="tags-list" className="duration-200 flex flex-wrap justify-center pb-12">
-                        {tagOptions.map(tag => {
-                          return (
-                                <div key={tag.name} className="p-2">
-                                    <TagItemMiddle key={tag.name} tag={tag} />
-                                </div>
-                          )
-                        })}
-                    </div>
+          <div
+            id='tags-list'
+            className='duration-200 flex flex-wrap justify-center pb-12'>
+            {tagOptions.map(tag => {
+              return (
+                <div key={tag.name} className='p-2'>
+                  <TagItemMiddle key={tag.name} tag={tag} />
                 </div>
-            </div>
-        </>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </>
   )
 }
 
 export {
-  CONFIG as THEME_CONFIG,
+  Layout404,
+  LayoutArchive,
   LayoutBase,
+  LayoutCategoryIndex,
   LayoutIndex,
   LayoutPostList,
   LayoutSearch,
-  LayoutArchive,
   LayoutSlug,
-  Layout404,
-  LayoutCategoryIndex,
-  LayoutTagIndex
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }