Merge branch 'tangly1024:main' into fix/catalog_style

2026-05-14 07:26:52 +00:00 · 2024-04-25 15:40:39 +08:00
parent e78151cca2 939515b43c
commit 0d476ef00d
8 changed files with 395 additions and 283 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.3
+NEXT_PUBLIC_VERSION=4.4.4


 # 可在此添加环境变量，去掉最左边的（# ）注释即可
--- a/components/GlobalHead.js
+++ b/components/GlobalHead.js
@@ -1,7 +1,9 @@
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
+import { loadExternalResource } from '@/lib/utils'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
+import { useEffect } from 'react'

 /**
 * 页面的Head头，通常有用于SEO
@@ -10,7 +12,9 @@ import { useRouter } from 'next/router'
 */
 const GlobalHead = props => {
  const { children, siteInfo } = props
-  let url = siteConfig('PATH')?.length ? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}` : siteConfig('LINK')
+  let url = siteConfig('PATH')?.length
+    ? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}`
+    : siteConfig('LINK')
  let image
  const router = useRouter()
  const meta = getSEOMeta(props, router, useGlobal())
@@ -24,19 +28,50 @@ const GlobalHead = props => {
  const keywords = meta?.tags || siteConfig('KEYWORDS')
  const lang = siteConfig('LANG').replace('-', '_') // Facebook OpenGraph 要 zh_CN 這樣的格式才抓得到語言
  const category = meta?.category || siteConfig('KEYWORDS') // section 主要是像是 category 這樣的分類，Facebook 用這個來抓連結的分類
+  const favicon = siteConfig('BLOG_FAVICON')
+  const webFontUrl = siteConfig('FONT_URL')
+
+  useEffect(() => {
+    // 使用WebFontLoader字体加载
+    loadExternalResource(
+      'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js',
+      'js'
+    ).then(url => {
+      const WebFont = window?.WebFont
+      if (WebFont) {
+        console.log('LoadWebFont', webFontUrl)
+        WebFont.load({
+          custom: {
+            // families: ['"LXGW WenKai"'],
+            urls: webFontUrl
+          }
+        })
+      }
+    })
+  }, [])

  return (
    <Head>
+      <link rel='icon' href={favicon} />
      <title>{title}</title>
      <meta name='theme-color' content={siteConfig('BACKGROUND_DARK')} />
-      <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0' />
+      <meta
+        name='viewport'
+        content='width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0'
+      />
      <meta name='robots' content='follow, index' />
      <meta charSet='UTF-8' />
      {siteConfig('SEO_GOOGLE_SITE_VERIFICATION') && (
-        <meta name='google-site-verification' content={siteConfig('SEO_GOOGLE_SITE_VERIFICATION')} />
+        <meta
+          name='google-site-verification'
+          content={siteConfig('SEO_GOOGLE_SITE_VERIFICATION')}
+        />
      )}
      {siteConfig('SEO_BAIDU_SITE_VERIFICATION') && (
-        <meta name='baidu-site-verification' content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')} />
+        <meta
+          name='baidu-site-verification'
+          content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')}
+        />
      )}
      <meta name='keywords' content={keywords} />
      <meta name='description' content={description} />
@@ -57,13 +92,17 @@ const GlobalHead = props => {
            rel='webmention'
            href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/webmention`}
          />
-          <link rel='pingback' href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/xmlrpc`} />
+          <link
+            rel='pingback'
+            href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/xmlrpc`}
+          />
        </>
      )}

-      {siteConfig('COMMENT_WEBMENTION_ENABLE') && siteConfig('COMMENT_WEBMENTION_AUTH') !== '' && (
-        <link href={siteConfig('COMMENT_WEBMENTION_AUTH')} rel='me' />
-      )}
+      {siteConfig('COMMENT_WEBMENTION_ENABLE') &&
+        siteConfig('COMMENT_WEBMENTION_AUTH') !== '' && (
+          <link href={siteConfig('COMMENT_WEBMENTION_AUTH')} rel='me' />
+        )}

      {JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && (
        <meta name='referrer' content='no-referrer-when-downgrade' />
@@ -73,7 +112,10 @@ const GlobalHead = props => {
          <meta property='article:published_time' content={meta.publishDay} />
          <meta property='article:author' content={siteConfig('AUTHOR')} />
          <meta property='article:section' content={category} />
-          <meta property='article:publisher' content={siteConfig('FACEBOOK_PAGE')} />
+          <meta
+            property='article:publisher'
+            content={siteConfig('FACEBOOK_PAGE')}
+          />
        </>
      )}
      {children}
@@ -181,7 +223,9 @@ const getSEOMeta = (props, router, global) => {
      }
    default:
      return {
-        title: post ? `${post?.title} | ${siteInfo?.title}` : `${siteInfo?.title} | loading`,
+        title: post
+          ? `${post?.title} | ${siteInfo?.title}`
+          : `${siteInfo?.title} | loading`,
        description: post?.summary,
        type: post?.type,
        slug: post?.slug,
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "notion-next",
-  "version": "4.4.3",
+  "version": "4.4.4",
  "homepage": "https://github.com/tangly1024/NotionNext.git",
  "license": "MIT",
  "repository": {
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -30,25 +30,6 @@ class MyDocument extends Document {
              />
            </>
          )}
-
-          {BLOG.FONT_URL?.map((fontUrl, index) => {
-            if (
-              fontUrl.endsWith('.css') ||
-              fontUrl.includes('googleapis.com/css')
-            ) {
-              return <link key={index} rel='stylesheet' href={fontUrl} />
-            } else {
-              return (
-                <link
-                  key={index}
-                  rel='preload'
-                  href={fontUrl}
-                  as='font'
-                  type='font/woff2'
-                />
-              )
-            }
-          })}
        </Head>

        <body>
--- a/themes/matery/components/BlogPostListPage.js
+++ b/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>
    )
  }
--- a/themes/matery/components/Footer.js
+++ b/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>
  )
 }
--- a/themes/matery/components/PostHeader.js
+++ b/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>
  )
 }
--- a/themes/matery/index.js
+++ b/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
 }