Merge branch 'main' into deploy/preview.tangly1024.com

.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.6
 
 
 # 可在此添加环境变量，去掉最左边的（# ）注释即可
@@ -62,6 +62,7 @@ NEXT_PUBLIC_VERSION=4.4.3
 # NEXT_PUBLIC_ALGOLIA_INDEX=
 # NEXT_PUBLIC_PREVIEW_CATEGORY_COUNT=  
 # NEXT_PUBLIC_PREVIEW_TAG_COUNT=
+# NEXT_PUBLIC_POST_TITLE_ICON=
 # NEXT_PUBLIC_POST_DISABLE_GALLERY_CLICK=   
 # NEXT_PUBLIC_FIREWORKS=
 # NEXT_PUBLIC_FIREWORKS_COLOR=

blog.config.js

@@ -9,7 +9,7 @@ const BLOG = {
   THEME: process.env.NEXT_PUBLIC_THEME || 'simple', // 当前主题，在themes文件夹下可找到所有支持的主题；主题名称就是文件夹名，例如 example,fukasawa,gitbook,heo,hexo,landing,matery,medium,next,nobelium,plog,simple
   THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮
   LANG: process.env.NEXT_PUBLIC_LANG || 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
-  SINCE: process.env.NEXT_SINCE || 2021, // e.g if leave this empty, current year will be used.
+  SINCE: process.env.NEXT_PUBLIC_SINCE || 2021, // e.g if leave this empty, current year will be used.
   APPEARANCE: process.env.NEXT_PUBLIC_APPEARANCE || 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
   APPEARANCE_DARK_TIME: process.env.NEXT_PUBLIC_APPEARANCE_DARK_TIME || [18, 6], // 夜间模式起至时间，false时关闭根据时间自动切换夜间模式
 
@@ -230,6 +230,7 @@ const BLOG = {
   PREVIEW_CATEGORY_COUNT: 16, // 首页最多展示的分类数量，0为不限制
   PREVIEW_TAG_COUNT: 16, // 首页最多展示的标签数量，0为不限制
 
+  POST_TITLE_ICON: process.env.NEXT_PUBLIC_POST_TITLE_ICON || true, // 是否显示标题icon
   POST_DISABLE_GALLERY_CLICK:
     process.env.NEXT_PUBLIC_POST_DISABLE_GALLERY_CLICK || false, // 画册视图禁止点击，方便在友链页面的画册插入链接
 

components/Comment.js

@@ -1,9 +1,10 @@
-import dynamic from 'next/dynamic'
 import Tabs from '@/components/Tabs'
-import { isBrowser, isSearchEngineBot } from '@/lib/utils'
-import { useRouter } from 'next/router'
-import Artalk from './Artalk'
 import { siteConfig } from '@/lib/config'
+import { isBrowser, isSearchEngineBot } from '@/lib/utils'
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
+import { useEffect, useRef, useState } from 'react'
+import Artalk from './Artalk'
 
 const WalineComponent = dynamic(
   () => {
@@ -57,11 +58,14 @@ const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
 
 /**
  * 评论组件
+ * 只有当前组件在浏览器可见范围内才会加载内容
  * @param {*} param0
  * @returns
  */
-const Comment = ({ siteInfo, frontMatter, className }) => {
+const Comment = ({ frontMatter, className }) => {
   const router = useRouter()
+  const [shouldLoad, setShouldLoad] = useState(false)
+  const commentRef = useRef(null)
 
   const COMMENT_ARTALK_SERVER = siteConfig('COMMENT_ARTALK_SERVER')
   const COMMENT_TWIKOO_ENV_ID = siteConfig('COMMENT_TWIKOO_ENV_ID')
@@ -73,16 +77,39 @@ const Comment = ({ siteInfo, frontMatter, className }) => {
   const COMMENT_GITALK_CLIENT_ID = siteConfig('COMMENT_GITALK_CLIENT_ID')
   const COMMENT_WEBMENTION_ENABLE = siteConfig('COMMENT_WEBMENTION_ENABLE')
 
-  if (isSearchEngineBot()) {
-    return null
-  }
+  useEffect(() => {
+    // Check if the component is visible in the viewport
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          setShouldLoad(true)
+          observer.unobserve(entry.target)
+        }
+      })
+    })
+
+    if (commentRef.current) {
+      observer.observe(commentRef.current)
+    }
+
+    return () => {
+      if (commentRef.current) {
+        observer.unobserve(commentRef.current)
+      }
+    }
+  }, [frontMatter])
 
   // 当连接中有特殊参数时跳转到评论区
-  if (isBrowser && ('giscus' in router.query || router.query.target === 'comment')) {
+  if (
+    isBrowser &&
+    ('giscus' in router.query || router.query.target === 'comment')
+  ) {
     setTimeout(() => {
       const url = router.asPath.replace('?target=comment', '')
       history.replaceState({}, '', url)
-      document?.getElementById('comment')?.scrollIntoView({ block: 'start', behavior: 'smooth' })
+      document
+        ?.getElementById('comment')
+        ?.scrollIntoView({ block: 'start', behavior: 'smooth' })
     }, 1000)
   }
 
@@ -90,48 +117,85 @@ const Comment = ({ siteInfo, frontMatter, className }) => {
     return <>Loading...</>
   }
 
+  if (isSearchEngineBot()) {
+    return null
+  }
+
   return (
-        <div key={frontMatter?.id} id='comment' className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}>
-            <Tabs>
-                {COMMENT_ARTALK_SERVER && (<div key='Artalk'>
-                    <Artalk />
-                </div>)}
-
-                {COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
-                    <TwikooCompenent />
-                </div>)}
-
-                {COMMENT_WALINE_SERVER_URL && (<div key='Waline'>
-                    <WalineComponent />
-                </div>)}
-
-                {COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
-                    <ValineComponent path={frontMatter.id} />
-                </div>)}
-
-                {COMMENT_GISCUS_REPO && (
-                    <div key="Giscus">
-                        <GiscusComponent className="px-2" />
-                    </div>
-                )}
-
-                {COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
-                    <CusdisComponent frontMatter={frontMatter} />
-                </div>)}
-
-                {COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
-                    <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
-                </div>)}
-
-                {COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
-                    <GitalkComponent frontMatter={frontMatter} />
-                </div>)}
-
-                {COMMENT_WEBMENTION_ENABLE && (<div key='WebMention'>
-                    <WebMentionComponent frontMatter={frontMatter} className="px-2" />
-                </div>)}
-            </Tabs>
+    <div
+      key={frontMatter?.id}
+      id='comment'
+      ref={commentRef}
+      className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}>
+      {/* 延迟加载评论区 */}
+      {!shouldLoad && (
+        <div className='text-center'>
+          Loading...
+          <i className='fas fa-spinner animate-spin text-3xl ' />
         </div>
+      )}
+
+      {shouldLoad && (
+        <Tabs>
+          {COMMENT_ARTALK_SERVER && (
+            <div key='Artalk'>
+              <Artalk />
+            </div>
+          )}
+
+          {COMMENT_TWIKOO_ENV_ID && (
+            <div key='Twikoo'>
+              <TwikooCompenent />
+            </div>
+          )}
+
+          {COMMENT_WALINE_SERVER_URL && (
+            <div key='Waline'>
+              <WalineComponent />
+            </div>
+          )}
+
+          {COMMENT_VALINE_APP_ID && (
+            <div key='Valine' name='reply'>
+              <ValineComponent path={frontMatter.id} />
+            </div>
+          )}
+
+          {COMMENT_GISCUS_REPO && (
+            <div key='Giscus'>
+              <GiscusComponent className='px-2' />
+            </div>
+          )}
+
+          {COMMENT_CUSDIS_APP_ID && (
+            <div key='Cusdis'>
+              <CusdisComponent frontMatter={frontMatter} />
+            </div>
+          )}
+
+          {COMMENT_UTTERRANCES_REPO && (
+            <div key='Utterance'>
+              <UtterancesComponent
+                issueTerm={frontMatter.id}
+                className='px-2'
+              />
+            </div>
+          )}
+
+          {COMMENT_GITALK_CLIENT_ID && (
+            <div key='GitTalk'>
+              <GitalkComponent frontMatter={frontMatter} />
+            </div>
+          )}
+
+          {COMMENT_WEBMENTION_ENABLE && (
+            <div key='WebMention'>
+              <WebMentionComponent frontMatter={frontMatter} className='px-2' />
+            </div>
+          )}
+        </Tabs>
+      )}
+    </div>
   )
 }
 

components/ExternalPlugins.js

@@ -100,8 +100,8 @@ const ExternalPlugin = props => {
   const CHATBASE_ID = siteConfig('CHATBASE_ID')
   const COMMENT_DAO_VOICE_ID = siteConfig('COMMENT_DAO_VOICE_ID')
   const AD_WWADS_ID = siteConfig('AD_WWADS_ID')
-  const COMMENT_TWIKOO_ENV_ID = siteConfig('COMMENT_TWIKOO_ENV_ID')
-  const COMMENT_TWIKOO_CDN_URL = siteConfig('COMMENT_TWIKOO_CDN_URL')
+  //   const COMMENT_TWIKOO_ENV_ID = siteConfig('COMMENT_TWIKOO_ENV_ID')
+  //   const COMMENT_TWIKOO_CDN_URL = siteConfig('COMMENT_TWIKOO_CDN_URL')
   const COMMENT_ARTALK_SERVER = siteConfig('COMMENT_ARTALK_SERVER')
   const COMMENT_ARTALK_JS = siteConfig('COMMENT_ARTALK_JS')
   const COMMENT_TIDIO_ID = siteConfig('COMMENT_TIDIO_ID')
@@ -152,12 +152,16 @@ const ExternalPlugin = props => {
   }
 
   useEffect(() => {
+    // 异步渲染谷歌广告
     if (ADSENSE_GOOGLE_ID) {
       setTimeout(() => {
-        // 异步渲染谷歌广告
         initGoogleAdsense()
       }, 1000)
     }
+
+    // 执行注入脚本
+    // eslint-disable-next-line no-eval
+    eval(GLOBAL_JS)
   }, [])
 
   if (DISABLE_PLUGIN) {
@@ -206,16 +210,6 @@ const ExternalPlugin = props => {
         </>
       )}
 
-      {/* 注入JS脚本 */}
-      {GLOBAL_JS && (
-        <script
-          async
-          dangerouslySetInnerHTML={{
-            __html: GLOBAL_JS
-          }}
-        />
-      )}
-
       {CHATBASE_ID && (
         <>
           <script
@@ -285,7 +279,7 @@ const ExternalPlugin = props => {
           async></script>
       )}
 
-      {COMMENT_TWIKOO_ENV_ID && <script defer src={COMMENT_TWIKOO_CDN_URL} />}
+      {/* {COMMENT_TWIKOO_ENV_ID && <script defer src={COMMENT_TWIKOO_CDN_URL} />} */}
 
       {COMMENT_ARTALK_SERVER && <script defer src={COMMENT_ARTALK_JS} />}
 

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
@@ -9,8 +11,10 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const GlobalHead = props => {
-  const { children, siteInfo } = props
-  let url = siteConfig('PATH')?.length ? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}` : siteConfig('LINK')
+  const { children, siteInfo, post } = props
+  let url = siteConfig('PATH')?.length
+    ? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}`
+    : siteConfig('LINK')
   let image
   const router = useRouter()
   const meta = getSEOMeta(props, router, useGlobal())
@@ -21,22 +25,58 @@ const GlobalHead = props => {
   const title = meta?.title || siteConfig('TITLE')
   const description = meta?.description || `${siteInfo?.description}`
   const type = meta?.type || 'website'
-  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')
+
+  // SEO关键词
+  let keywords = meta?.tags || siteConfig('KEYWORDS')
+  if (post?.tags && post?.tags?.length > 0) {
+    keywords = post?.tags?.join(',')
+  }
+
+  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 +97,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 +117,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 +228,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,

lib/notion/getPageProperties.js

@@ -105,12 +105,7 @@ export default async function getPageProperties(
   properties.pageIcon = mapImgUrl(value?.format?.page_icon, value) ?? ''
   properties.pageCover = mapImgUrl(value?.format?.page_cover, value) ?? ''
   properties.pageCoverThumbnail =
-    mapImgUrl(
-      value?.format?.page_cover,
-      value,
-      'block',
-      'pageCoverThumbnail'
-    ) ?? ''
+    mapImgUrl(value?.format?.page_cover, value, 'block') ?? ''
   properties.ext = converToJSON(properties?.ext)
   properties.content = value.content ?? []
   properties.tagItems =

lib/notion/mapImage.js

@@ -3,16 +3,18 @@ import { siteConfig } from '../config'
 
 /**
  * 图片映射
- * 1. 如果是 /xx.xx 相对路径格式，则转化为 完整notion域名图片
- * 2. 如果是 bookmark类型的block 图片封面无需处理
- * @param {*} img
- * @param {*} value
+ *
+ * @param {*} img 图片地址，可能是相对路径，可能是外链
+ * @param {*} block 数据块，可能是单个内容块，可能是Page
+ * @param {*} type block 单个内容块 ； collection 集合列表
+ * @param {*} from 来自
  * @returns
  */
-const mapImgUrl = (img, block, type = 'block', from = 'post') => {
+const mapImgUrl = (img, block, type = 'block', needCompress = true) => {
   if (!img) {
     return null
   }
+
   let ret = null
   // 相对目录，则视为notion的自带图片
   if (img.startsWith('/')) {
@@ -22,12 +24,16 @@ const mapImgUrl = (img, block, type = 'block', from = 'post') => {
   }
 
   // Notion 图床转换为永久地址
-  const isNotionSignImg =
-    ret.indexOf('https://www.notion.so/image') !== 0 &&
+  const hasConverted = ret.indexOf('https://www.notion.so/image') === 0
+  // 需要转化的URL ; 识别aws图床地址，或者bookmark类型的外链图片
+  const needConvert =
+    !hasConverted &&
     (ret.indexOf('secure.notion-static.com') > 0 ||
-      ret.indexOf('prod-files-secure') > 0)
-  const isImgBlock = BLOG.IMG_URL_TYPE === 'Notion' || type !== 'block'
-  if (isNotionSignImg && isImgBlock) {
+      ret.indexOf('prod-files-secure') > 0 ||
+      block.type === 'bookmark')
+
+  // 使用Notion图传
+  if (needConvert) {
     ret =
       BLOG.NOTION_HOST +
       '/image/' +
@@ -60,7 +66,11 @@ const mapImgUrl = (img, block, type = 'block', from = 'post') => {
     }
 
     // 图片url优化，确保每一篇文章的图片url唯一
-    if (ret && ret.length > 4) {
+    if (
+      ret &&
+      ret.length > 4 &&
+      !ret.includes('https://www.notion.so/images/')
+    ) {
       // 图片接口拼接唯一识别参数，防止请求的图片被缓，而导致随机结果相同
       const separator = ret.includes('?') ? '&' : '?'
       ret = `${ret.trim()}${separator}t=${block.id}`
@@ -68,11 +78,7 @@ const mapImgUrl = (img, block, type = 'block', from = 'post') => {
   }
 
   // 统一压缩图片
-  if (
-    from === 'pageCoverThumbnail' ||
-    block?.type === 'image' ||
-    block?.type === 'page'
-  ) {
+  if (needCompress) {
     const width = block?.format?.block_width
     ret = compressImage(ret, width)
   }

next.config.js

@@ -54,21 +54,6 @@ function scanSubdirectories(directory) {
 }
 
 const nextConfig = {
-  images: {
-    // 图片压缩
-    formats: ['image/avif', 'image/webp'],
-    // 允许next/image加载的图片 域名
-    domains: [
-      'gravatar.com',
-      'www.notion.so',
-      'avatars.githubusercontent.com',
-      'images.unsplash.com',
-      'source.unsplash.com',
-      'p1.qhimg.com',
-      'webmention.io',
-      'ko-fi.com'
-    ]
-  },
   // 默认将feed重定向至 /public/rss/feed.xml
   async redirects() {
     return [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "4.4.3",
+  "version": "4.4.6",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {

pages/_app.js

@@ -3,8 +3,8 @@ import '@/styles/globals.css'
 import '@/styles/utility-patterns.css'
 
 // core styles shared by all of react-notion-x (required)
-import '@/styles/notion.css' //  重写部分样式
-import 'react-notion-x/src/styles.css'
+import '@/styles/notion.css' //  重写部分notion样式
+import 'react-notion-x/src/styles.css' // 原版的react-notion-x
 
 import useAdjustStyle from '@/hooks/useAdjustStyle'
 import { GlobalContextProvider } from '@/lib/global'

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>

styles/notion.css

@@ -706,7 +706,7 @@ svg.notion-page-icon {
 }
 
 .notion-asset-wrapper-full {
-  /* max-width: 100vw; */
+  max-width: inherit;
 }
 
 .notion-asset-wrapper img {
@@ -1565,7 +1565,7 @@ code[class*='language-'] {
   }
 
   .notion-asset-wrapper-full {
-    max-width: 100vw;
+    max-width: inherit;
   }
 }
 

themes/commerce/components/Catalog.js

@@ -79,7 +79,7 @@ const Catalog = ({ toc }) => {
             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'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-red-600': ''}`}
               >
                 {tocItem.text}
               </span>

themes/commerce/components/PostHeader.js

@@ -29,7 +29,7 @@ export default function PostHeader({ post }) {
 
           {/* 文章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>
+            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />}<div className='text-4xl mx-1'>{post.title}</div>
           </div>
 
         </div>

themes/example/components/Announcement.js

@@ -3,20 +3,30 @@ import dynamic from 'next/dynamic'
 
 const NotionPage = dynamic(() => import('@/components/NotionPage'))
 
+/**
+ * 公告模块
+ * 其实就是一篇文章
+ * @param {*} param0
+ * @returns
+ */
 const Announcement = ({ post, className }) => {
   const { locale } = useGlobal()
   if (!post || Object.keys(post).length === 0) {
     return <></>
   }
-  return <aside className="rounded shadow overflow-hidden mb-6">
+  return (
+    <aside className='rounded shadow overflow-hidden mb-6'>
+      <h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
+        <i className='mr-2 fas fa-bullhorn' />
+        {locale.COMMON.ANNOUNCEMENT}
+      </h3>
 
-           <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">
-                <i className="mr-2 fas fa-bullhorn" />{locale.COMMON.ANNOUNCEMENT}
-           </h3>
-
-        {post && (<div id="announcement-content">
-            <NotionPage post={post} className='text-center ' />
-        </div>)}
-</aside>
+      {post && (
+        <div id='announcement-content'>
+          <NotionPage post={post} className='text-center' />
+        </div>
+      )}
+    </aside>
+  )
 }
 export default Announcement

themes/example/components/ArticleInfo.js

@@ -1,51 +0,0 @@
-import Link from 'next/link'
-import { useGlobal } from '@/lib/global'
-import { formatDateFmt } from '@/lib/utils/formatDate'
-
-export const ArticleInfo = (props) => {
-  const { post } = props
-
-  const { locale } = useGlobal()
-
-  return (
-      <section className="flex-wrap flex mt-2 text-gray-400 dark:text-gray-400 font-light leading-8">
-            <div>
-                {post?.type !== 'Page' && <>
-                    <Link
-                        href={`/category/${post?.category}`}
-                        passHref
-                        className="cursor-pointer text-md mr-2 hover:text-black dark:hover:text-white border-b dark:border-gray-500 border-dashed">
-
-                        <i className="mr-1 fas fa-folder-open" />
-                        {post?.category}
-
-                    </Link>
-                    <span className='mr-2'>|</span>
-                </>}
-
-                {post?.type !== 'Page' && (<>
-                    <Link
-                        href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
-                        passHref
-                        className="pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed">
-
-                        {post?.publishDay}
-
-                    </Link>
-                    <span className='mr-2'>|</span>
-                    <span className='mx-2 text-gray-400 dark:text-gray-500'>
-                        {locale.COMMON.LAST_EDITED_TIME}: {post?.lastEditedDay}
-                    </span>
-                    <span className='mr-2'>|</span>
-                    <span className="hidden busuanzi_container_page_pv font-light mr-2">
-                    <i className='mr-1 fas fa-eye' />
-                    &nbsp;
-                    <span className="mr-2 busuanzi_value_page_pv" />
-                </span>
-                </>)}
-
-            </div>
-
-        </section>
-  )
-}

themes/example/components/ArticleLock.js

@@ -1,52 +0,0 @@
-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'>{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 text-black dark:bg-gray-500 bg-gray-50'
-                ></input>
-                <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
-                    <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
-                </div>
-            </div>
-            <div id='tips'>
-            </div>
-        </div>
-    </div>
-}

themes/example/components/BlogItem.js

@@ -0,0 +1,87 @@
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import TwikooCommentCount from '@/components/TwikooCommentCount'
+import { siteConfig } from '@/lib/config'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import Link from 'next/link'
+import CONFIG from '../config'
+
+/**
+ * 博客列表的单个卡片
+ * @param {*} param0
+ * @returns
+ */
+const BlogItem = ({ post }) => {
+  const showPageCover =
+    siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG) &&
+    post?.pageCoverThumbnail
+  const url = checkContainHttp(post.slug)
+    ? sliceUrlFromHttp(post.slug)
+    : `${siteConfig('SUB_PATH', '')}/${post.slug}`
+
+  return (
+    <article
+      className={`${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''} replace mb-12 `}>
+      <div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
+        <h2 className='mb-4'>
+          <Link
+            href={`/${post.slug}`}
+            className='text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline'>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post.pageIcon} />
+            )}
+            {post?.title}
+          </Link>
+        </h2>
+
+        <div className='mb-4 text-sm text-gray-700 dark:text-gray-300'>
+          by{' '}
+          <a href='#' className='text-gray-700 dark:text-gray-300'>
+            {siteConfig('AUTHOR')}
+          </a>{' '}
+          on {post.date?.start_date || post.createdTime}
+          <TwikooCommentCount post={post} className='pl-1' />
+          {post.category && (
+            <>
+              <span className='font-bold mx-1'> | </span>
+              <Link
+                href={`/category/${post.category}`}
+                className='text-gray-700 dark:text-gray-300 hover:underline'>
+                {post.category}
+              </Link>
+            </>
+          )}
+          {/* <span className="font-bold mx-1"> | </span> */}
+          {/* <a href="#" className="text-gray-700">2 Comments</a> */}
+        </div>
+
+        {!post.results && (
+          <p className='line-clamp-3 text-gray-700 dark:text-gray-400 leading-normal'>
+            {post.summary}
+          </p>
+        )}
+        {/* 搜索结果 */}
+        {post.results && (
+          <p className='line-clamp-3 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>
+        )}
+      </div>
+      {/* 图片封面 */}
+      {showPageCover && (
+        <div className='md:w-5/12 w-full h-44 overflow-hidden p-1'>
+          <Link href={url} passHref legacyBehavior>
+            <LazyImage
+              src={post?.pageCoverThumbnail}
+              className='w-full bg-cover hover:scale-110 duration-200'
+            />
+          </Link>
+        </div>
+      )}
+    </article>
+  )
+}
+
+export default BlogItem

themes/example/components/BlogListArchive.js

@@ -0,0 +1,42 @@
+import { siteConfig } from '@/lib/config'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import Link from 'next/link'
+
+/**
+ * 博客归档列表；仅归档页面使用
+ * 按照日期将文章分组
+ * @param {*} param0
+ * @returns
+ */
+export default function BlogListArchive({ archiveTitle, archivePosts }) {
+  return (
+    <div key={archiveTitle}>
+      <div id={archiveTitle} className='pt-16 pb-4 text-3xl dark:text-gray-300'>
+        {archiveTitle}
+      </div>
+
+      <ul>
+        {archivePosts[archiveTitle].map(post => {
+          const url = checkContainHttp(post.slug)
+            ? sliceUrlFromHttp(post.slug)
+            : `${siteConfig('SUB_PATH', '')}/${post.slug}`
+
+          return (
+            <li
+              key={post.id}
+              className='border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500'>
+              <div id={post?.publishDay}>
+                <span className='text-gray-400'>{post?.publishDay}</span> &nbsp;
+                <Link
+                  href={url}
+                  className='dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600'>
+                  {post.title}
+                </Link>
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}

themes/example/components/BlogListGroupByDate.js

@@ -1,38 +0,0 @@
-import { siteConfig } from '@/lib/config'
-import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
-import Link from 'next/link'
-
-/**
- * 按照日期将文章分组
- * 归档页面用到
- * @param {*} param0
- * @returns
- */
-export default function BlogListGroupByDate({ archiveTitle, archivePosts }) {
-  return <div key={archiveTitle}>
-    <div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
-        {archiveTitle}
-    </div>
-
-    <ul>
-        {archivePosts[archiveTitle].map(post => {
-          const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
-
-          return <li
-                key={post.id}
-                className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
-            >
-                <div id={post?.publishDay}>
-                    <span className="text-gray-400">
-                        {post?.publishDay}
-                    </span>{' '}
-                    &nbsp;
-                    <Link href={url} className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
-                        {post.title}
-                    </Link>
-                </div>
-            </li>
-        })}
-    </ul>
-</div>
-}

themes/example/components/BlogListPage.js

@@ -1,45 +1,61 @@
-
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
-import { useRouter } from 'next/router'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import CONFIG from '../config'
-import BlogPostCard from './BlogPostCard'
-
+import BlogItem from './BlogItem'
+/**
+ * 使用分页插件的博客列表
+ * @param {*} props
+ * @returns
+ */
 export const BlogListPage = props => {
   const { page = 1, posts, postCount } = props
   const { locale } = useGlobal()
   const router = useRouter()
-  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
+  const totalPage = Math.ceil(
+    postCount / parseInt(siteConfig('POSTS_PER_PAGE'))
+  )
   const currentPage = +page
 
   const showPrev = currentPage > 1
   const showNext = page < totalPage
-  const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
+  const pagePrefix = router.asPath
+    .split('?')[0]
+    .replace(/\/page\/[1-9]\d*/, '')
+    .replace(/\/$/, '')
 
   const showPageCover = siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG)
 
   return (
-        <div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'} mb-12`}>
+    <div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'} mb-12`}>
+      <div id='posts-wrapper'>
+        {posts?.map(post => (
+          <BlogItem key={post.id} post={post} />
+        ))}
+      </div>
 
-            <div id="posts-wrapper">
-                {posts?.map(post => (
-                    <BlogPostCard key={post.id} post = {post}/>
-                ))}
-            </div>
-
-            <div className="flex justify-between text-xs">
-                <Link
-                    href={{ pathname: currentPage - 1 === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${currentPage - 1}`, query: router.query.s ? { s: router.query.s } : {} }}
-                    className={`${showPrev ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
-                    {locale.PAGINATION.PREV}
-                </Link>
-                <Link
-                    href={{ pathname: `${pagePrefix}/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} }}
-                    className={`${showNext ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
-                    {locale.PAGINATION.NEXT}
-                </Link>
-            </div>
-        </div>
+      <div className='flex justify-between text-xs'>
+        <Link
+          href={{
+            pathname:
+              currentPage - 1 === 1
+                ? `${pagePrefix}/`
+                : `${pagePrefix}/page/${currentPage - 1}`,
+            query: router.query.s ? { s: router.query.s } : {}
+          }}
+          className={`${showPrev ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
+          {locale.PAGINATION.PREV}
+        </Link>
+        <Link
+          href={{
+            pathname: `${pagePrefix}/page/${currentPage + 1}`,
+            query: router.query.s ? { s: router.query.s } : {}
+          }}
+          className={`${showNext ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
+          {locale.PAGINATION.NEXT}
+        </Link>
+      </div>
+    </div>
   )
 }

themes/example/components/BlogListScroll.js

@@ -1,10 +1,14 @@
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
-import { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
-import BlogPostCard from './BlogPostCard'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import CONFIG from '../config'
-
+import BlogItem from './BlogItem'
+/**
+ * 使用滚动无限加载的博客列表
+ * @param {*} props
+ * @returns
+ */
 export const BlogListScroll = props => {
   const { posts } = props
   const { locale } = useGlobal()
@@ -13,7 +17,10 @@ export const BlogListScroll = props => {
 
   let hasMore = false
   const postsToShow = posts
-    ? Object.assign(posts).slice(0, parseInt(siteConfig('POSTS_PER_PAGE')) * page)
+    ? Object.assign(posts).slice(
+        0,
+        parseInt(siteConfig('POSTS_PER_PAGE')) * page
+      )
     : []
 
   if (posts) {
@@ -28,13 +35,19 @@ export const BlogListScroll = props => {
   const targetRef = useRef(null)
 
   // 监听滚动自动分页加载
-  const scrollTrigger = useCallback(throttle(() => {
-    const scrollS = window.scrollY + window.outerHeight
-    const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
-    if (scrollS > clientHeight + 100) {
-      handleGetMore()
-    }
-  }, 500))
+  const scrollTrigger = useCallback(
+    throttle(() => {
+      const scrollS = window.scrollY + window.outerHeight
+      const clientHeight = targetRef
+        ? targetRef.current
+          ? targetRef.current.clientHeight
+          : 0
+        : 0
+      if (scrollS > clientHeight + 100) {
+        handleGetMore()
+      }
+    }, 500)
+  )
   const showPageCover = siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG)
 
   useEffect(() => {
@@ -46,21 +59,20 @@ export const BlogListScroll = props => {
   })
 
   return (
+    <div
+      id='posts-wrapper'
+      className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`}
+      ref={targetRef}>
+      {postsToShow?.map(post => (
+        <BlogItem key={post.id} post={post} />
+      ))}
 
-        <div id='posts-wrapper' className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`} ref={targetRef}>
-
-            {postsToShow?.map(post => (
-                <BlogPostCard key={post.id} post={post} />
-            ))}
-
-            <div
-                onClick={handleGetMore}
-                className="w-full my-4 py-4 text-center cursor-pointer "
-            >
-                {' '}
-                {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
-            </div>
-
-        </div>
+      <div
+        onClick={handleGetMore}
+        className='w-full my-4 py-4 text-center cursor-pointer '>
+        {' '}
+        {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+      </div>
+    </div>
   )
 }

themes/example/components/BlogPostCard.js

@@ -1,57 +0,0 @@
-import { siteConfig } from '@/lib/config'
-import CONFIG from '../config'
-import Link from 'next/link'
-import TwikooCommentCount from '@/components/TwikooCommentCount'
-import LazyImage from '@/components/LazyImage'
-import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
-import NotionIcon from '@/components/NotionIcon'
-
-const BlogPostCard = ({ post }) => {
-  const showPageCover = siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail
-  const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
-
-  return <article className={`${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''} replace mb-12 `}>
-        <div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
-            <h2 className="mb-4">
-                <Link
-                    href={`/${post.slug}`}
-                    className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
-                    <NotionIcon icon={post.pageIcon} />{post?.title}
-                </Link>
-            </h2>
-
-            <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
-                by <a href="#" className="text-gray-700 dark:text-gray-300">{siteConfig('AUTHOR')}</a> on {post.date?.start_date || post.createdTime}
-                <TwikooCommentCount post={post} className='pl-1'/>
-               {post.category && <>
-                <span className="font-bold mx-1"> | </span>
-                <Link href={`/category/${post.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{post.category}</Link>
-               </>}
-                            {/* <span className="font-bold mx-1"> | </span> */}
-                {/* <a href="#" className="text-gray-700">2 Comments</a> */}
-            </div>
-
-            {!post.results && <p className="line-clamp-3 text-gray-700 dark:text-gray-400 leading-normal">
-                {post.summary}
-            </p>}
-            {/* 搜索结果 */}
-            {post.results && (
-                <p className="line-clamp-3 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>
-            )}
-        </div>
-        {/* 图片封面 */}
-        {showPageCover && (
-            <div className="md:w-5/12 w-full h-44 overflow-hidden p-1">
-                <Link href={url} passHref legacyBehavior>
-                    <LazyImage src={post?.pageCoverThumbnail} className='w-full bg-cover hover:scale-110 duration-200' />
-                </Link>
-            </div>
-        )}
-    </article>
-}
-
-export default BlogPostCard

themes/example/components/CategoryItem.js

@@ -1,20 +0,0 @@
-import Link from 'next/link'
-
-/**
- * 文章分类
- * @param {*} param0
- * @returns
- */
-export default function CategoryItem({ category }) {
-  return (
-        <Link
-            key={category.name}
-            href={`/category/${category.name}`}
-            passHref
-            legacyBehavior>
-            <div className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
-                <i className='mr-4 fas fa-folder' />{category.name}({category.count})
-            </div>
-        </Link>
-  )
-}

themes/example/components/ExampleRecentComments.js

@@ -1,35 +0,0 @@
-import { useEffect, useState } from 'react'
-import { siteConfig } from '@/lib/config'
-import Link from 'next/link'
-import { RecentComments } from '@waline/client'
-
-/**
- * @see https://waline.js.org/guide/get-started.html
- * @param {*} props
- * @returns
- */
-const ExampleRecentComments = (props) => {
-  const [comments, updateComments] = useState([])
-  const [onLoading, changeLoading] = useState(true)
-  useEffect(() => {
-    RecentComments({
-      serverURL: siteConfig('COMMENT_WALINE_SERVER_URL'),
-      count: 5
-    }).then(({ comments }) => {
-      changeLoading(false)
-      updateComments(comments)
-    })
-  }, [])
-
-  return <>
-         {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'>
-            <div className='dark:text-gray-300 text-gray-600 text-xs 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'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
-        </div>)}
-
-  </>
-}
-
-export default ExampleRecentComments

themes/example/components/Header.js

@@ -1,24 +1,27 @@
-import Link from 'next/link'
 import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+import { MenuList } from './MenuList'
 
 /**
  * 网站顶部
  * @returns
  */
-export const Header = (props) => {
+export const Header = props => {
   return (
-      <header className="w-full px-6 bg-white  dark:bg-black relative z-10">
-            <div className="container mx-auto max-w-4xl md:flex justify-between items-center">
-                <Link
-                    href='/'
-                    className="py-6 w-full text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center">
+    <header className='w-full px-6 bg-white  dark:bg-black relative z-10'>
+      <div className='container mx-auto max-w-4xl md:flex justify-between items-center'>
+        <Link
+          href='/'
+          className='py-6 w-full text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center'>
+          {siteConfig('TITLE')}
+        </Link>
+        <div className='w-full md:w-auto text-center md:text-right'>
+          {/* 右侧文字 */}
+        </div>
+      </div>
 
-                    {siteConfig('TITLE')}
-                </Link>
-                <div className="w-full md:w-auto text-center md:text-right">
-                    {/* 右侧文字 */}
-                </div>
-            </div>
-        </header>
+      {/* 菜单 */}
+      <MenuList {...props} />
+    </header>
   )
 }

themes/example/components/JumpToTopButton.js

@@ -1,18 +0,0 @@
-import { useGlobal } from '@/lib/global'
-
-/**
- * 跳转到网页顶部
- * 当屏幕下滑500像素后会出现该控件
- * @param targetRef 关联高度的目标html标签
- * @param showPercent 是否显示百分比
- * @returns {JSX.Element}
- * @constructor
- */
-const JumpToTopButton = () => {
-  const { locale } = useGlobal()
-  return <div title={locale.POST.TOP} className='cursor-pointer p-2 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-    ><i className='fas fa-angle-up text-2xl' />
-    </div>
-}
-
-export default JumpToTopButton

themes/example/components/LoadingCover.js

@@ -1,8 +0,0 @@
-
-export default function LoadingCover() {
-  return <div id='cover-loading' className={'z-50 opacity-50  pointer-events-none transition-all duration-300'}>
- <div className='w-full h-screen flex justify-center items-center'>
-     <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
- </div>
-</div>
-}

themes/example/components/MenuItemDrop.js

@@ -1,6 +1,11 @@
 import Link from 'next/link'
 import { useState } from 'react'
 
+/**
+ * 支持下拉二级的菜单
+ * @param {*} param0
+ * @returns
+ */
 export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0

themes/example/components/MenuList.js

@@ -0,0 +1,73 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+import { MenuItemDrop } from './MenuItemDrop'
+
+/**
+ * 导航菜单列表
+ * @param {*} props
+ * @returns
+ */
+export const MenuList = props => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    {
+      id: 1,
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      to: '/search',
+      show: siteConfig('EXAMPLE_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      id: 2,
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      to: '/archive',
+      show: siteConfig('EXAMPLE_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      id: 3,
+      icon: 'fas fa-folder',
+      name: locale.COMMON.CATEGORY,
+      to: '/category',
+      show: siteConfig('EXAMPLE_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      id: 4,
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      to: '/tag',
+      show: siteConfig('EXAMPLE_MENU_TAG', null, CONFIG)
+    }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
+  if (siteConfig('CUSTOM_MENU')) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+    <nav className='w-full bg-white md:pt-0 px-6 relative z-20 border-t border-b border-gray-light dark:border-hexo-black-gray dark:bg-black'>
+      <div className='container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start'>
+        <ul className='w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start'>
+          {links.map((link, index) => (
+            <MenuItemDrop key={index} link={link} />
+          ))}
+        </ul>
+        {/* <div className="w-full md:w-1/3 text-center md:text-right"> */}
+        {/* <!-- extra links --> */}
+        {/* </div> */}
+      </div>
+    </nav>
+  )
+}

themes/example/components/Nav.js

@@ -1,47 +0,0 @@
-import { siteConfig } from '@/lib/config'
-import { useGlobal } from '@/lib/global'
-import CONFIG from '../config'
-import { MenuItemDrop } from './MenuItemDrop'
-
-/**
- * 菜单导航
- * @param {*} props
- * @returns
- */
-export const Nav = (props) => {
-  const { customNav, customMenu } = props
-  const { locale } = useGlobal()
-
-  let links = [
-    { id: 1, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('EXAMPLE_MENU_SEARCH', null, CONFIG) },
-    { id: 2, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('EXAMPLE_MENU_ARCHIVE', null, CONFIG) },
-    { id: 3, icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('EXAMPLE_MENU_CATEGORY', null, CONFIG) },
-    { id: 4, icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('EXAMPLE_MENU_TAG', null, CONFIG) }
-  ]
-
-  if (customNav) {
-    links = links.concat(customNav)
-  }
-
-  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
-  if (siteConfig('CUSTOM_MENU')) {
-    links = customMenu
-  }
-
-  if (!links || links.length === 0) {
-    return null
-  }
-
-  return (
-        <nav className="w-full bg-white md:pt-0 px-6 relative z-20 border-t border-b border-gray-light dark:border-hexo-black-gray dark:bg-black">
-            <div className="container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
-                <ul className="w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
-                    {links.map((link, index) => <MenuItemDrop key={index} link={link} />)}
-                </ul>
-                {/* <div className="w-full md:w-1/3 text-center md:text-right"> */}
-                    {/* <!-- extra links --> */}
-                {/* </div> */}
-            </div>
-        </nav>
-  )
-}

themes/example/components/NormalMenuItem.js

@@ -1,14 +0,0 @@
-import Link from 'next/link'
-
-/**
- * 旧的普通菜单
- * @param {*} props
- * @returns
- */
-export const NormalMenuItem = (props) => {
-  const { link } = props
-  return link?.show && <Link href={link.to} key={link.to}
-        className="px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light">
-        {link.name}
-    </Link>
-}

themes/example/components/PostLock.js

@@ -0,0 +1,63 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
+
+/**
+ * 文章锁；通过此组件校验密码访问文章
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+export const PostLock = 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'>{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 text-black dark:bg-gray-500 bg-gray-50'></input>
+          <div
+            onClick={submitPassword}
+            className='px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300'>
+            <i
+              className={
+                'duration-200 cursor-pointer fas fa-key dark:text-black'
+              }>
+              &nbsp;{locale.COMMON.SUBMIT}
+            </i>
+          </div>
+        </div>
+        <div id='tips'></div>
+      </div>
+    </div>
+  )
+}

themes/example/components/PostMeta.js

@@ -0,0 +1,51 @@
+import { useGlobal } from '@/lib/global'
+import { formatDateFmt } from '@/lib/utils/formatDate'
+import Link from 'next/link'
+/**
+ * 文章详情的元信息
+ * 标题、作者、分类、标签、创建日期等等。
+ */
+export const PostMeta = props => {
+  const { post } = props
+  const { locale } = useGlobal()
+
+  return (
+    <section className='flex-wrap flex mt-2 text-gray-400 dark:text-gray-400 font-light leading-8'>
+      <div>
+        {post?.type !== 'Page' && (
+          <>
+            <Link
+              href={`/category/${post?.category}`}
+              passHref
+              className='cursor-pointer text-md mr-2 hover:text-black dark:hover:text-white border-b dark:border-gray-500 border-dashed'>
+              <i className='mr-1 fas fa-folder-open' />
+              {post?.category}
+            </Link>
+            <span className='mr-2'>|</span>
+          </>
+        )}
+
+        {post?.type !== 'Page' && (
+          <>
+            <Link
+              href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
+              passHref
+              className='pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed'>
+              {post?.publishDay}
+            </Link>
+            <span className='mr-2'>|</span>
+            <span className='mx-2 text-gray-400 dark:text-gray-500'>
+              {locale.COMMON.LAST_EDITED_TIME}: {post?.lastEditedDay}
+            </span>
+            <span className='mr-2'>|</span>
+            <span className='hidden busuanzi_container_page_pv font-light mr-2'>
+              <i className='mr-1 fas fa-eye' />
+              &nbsp;
+              <span className='mr-2 busuanzi_value_page_pv' />
+            </span>
+          </>
+        )}
+      </div>
+    </section>
+  )
+}

themes/example/components/RecentCommentListForExample.js

@@ -0,0 +1,62 @@
+import { siteConfig } from '@/lib/config'
+import { RecentComments } from '@waline/client'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+
+/**
+ * 最近评论列表
+ * 基于Waline实现
+ * @see https://waline.js.org/guide/get-started.html
+ * @param {*} props
+ * @returns
+ */
+const RecentCommentListForExample = props => {
+  const [comments, updateComments] = useState([])
+  const [onLoading, changeLoading] = useState(true)
+  useEffect(() => {
+    RecentComments({
+      serverURL: siteConfig('COMMENT_WALINE_SERVER_URL'),
+      count: 5
+    }).then(({ comments }) => {
+      changeLoading(false)
+      updateComments(comments)
+    })
+  }, [])
+
+  return (
+    <>
+      {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'>
+            <div
+              className='dark:text-gray-300 text-gray-600 text-xs 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'>
+              <Link
+                href={{
+                  pathname: comment.url,
+                  hash: comment.objectId,
+                  query: { target: 'comment' }
+                }}>
+                --{comment.nick}
+              </Link>
+            </div>
+          </div>
+        ))}
+    </>
+  )
+}
+
+export default RecentCommentListForExample

themes/example/components/SearchInput.js

@@ -1,9 +1,14 @@
-import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
 
 let lock = false
 
+/**
+ * 搜索输入框
+ * @param {*} param0 
+ * @returns 
+ */
 const SearchInput = ({ currentTag, keyword, cRef }) => {
   const { locale } = useGlobal()
   const router = useRouter()

themes/example/components/SideBar.js

@@ -1,68 +1,92 @@
-import { siteConfig } from '@/lib/config'
 import Live2D from '@/components/Live2D'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
 import dynamic from 'next/dynamic'
+import Link from 'next/link'
 import Announcement from './Announcement'
-const ExampleRecentComments = dynamic(() => import('./ExampleRecentComments'))
+const ExampleRecentComments = dynamic(
+  () => import('./RecentCommentListForExample')
+)
 
-export const SideBar = (props) => {
+/**
+ * 侧边栏
+ */
+export const SideBar = props => {
   const { locale } = useGlobal()
   const { latestPosts, categoryOptions, notice } = props
   return (
-      <div className="w-full md:w-64 sticky top-8">
-
-            <aside className="rounded shadow overflow-hidden mb-6">
-                <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.CATEGORY}</h3>
-
-                <div className="p-4">
-                    <ul className="list-reset leading-normal">
-                        {categoryOptions?.map(category => {
-                          return (
-                              <Link
-                                  key={category.name}
-                                  href={`/category/${category.name}`}
-                                  passHref
-                                  legacyBehavior>
-                                    <li>  <a href={`/category/${category.name}`} className="text-gray-darkest text-sm">{category.name}({category.count})</a></li>
-                                </Link>
-                          )
-                        })}
-                    </ul>
-                </div>
-
-            </aside>
-
-            <aside className="rounded shadow overflow-hidden mb-6">
-                <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.LATEST_POSTS}</h3>
-
-                <div className="p-4">
-                    <ul className="list-reset leading-normal">
-                        {latestPosts?.map(p => {
-                          return (
-                              <Link key={p.id} href={`/${p.slug}`} passHref legacyBehavior>
-                                    <li>  <a href={`/${p.slug}`} className="text-gray-darkest text-sm">{p.title}</a></li>
-                                </Link>
-                          )
-                        })}
-                    </ul>
-                </div>
-            </aside>
-
-            <Announcement post={notice}/>
-
-            {siteConfig('COMMENT_WALINE_SERVER_URL') && siteConfig('COMMENT_WALINE_RECENT') && <aside className="rounded shadow overflow-hidden mb-6">
-                <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.RECENT_COMMENTS}</h3>
-
-                <div className="p-4">
-                    <ExampleRecentComments/>
-                </div>
-            </aside>}
-
-            <aside className="rounded  overflow-hidden mb-6">
-                <Live2D />
-            </aside>
+    <div className='w-full md:w-64 sticky top-8'>
+      <aside className='rounded shadow overflow-hidden mb-6'>
+        <h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
+          {locale.COMMON.CATEGORY}
+        </h3>
 
+        <div className='p-4'>
+          <ul className='list-reset leading-normal'>
+            {categoryOptions?.map(category => {
+              return (
+                <Link
+                  key={category.name}
+                  href={`/category/${category.name}`}
+                  passHref
+                  legacyBehavior>
+                  <li>
+                    {' '}
+                    <a
+                      href={`/category/${category.name}`}
+                      className='text-gray-darkest text-sm'>
+                      {category.name}({category.count})
+                    </a>
+                  </li>
+                </Link>
+              )
+            })}
+          </ul>
         </div>
+      </aside>
+      <aside className='rounded shadow overflow-hidden mb-6'>
+        <h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
+          {locale.COMMON.LATEST_POSTS}
+        </h3>
+
+        <div className='p-4'>
+          <ul className='list-reset leading-normal'>
+            {latestPosts?.map(p => {
+              return (
+                <Link key={p.id} href={`/${p.slug}`} passHref legacyBehavior>
+                  <li>
+                    {' '}
+                    <a
+                      href={`/${p.slug}`}
+                      className='text-gray-darkest text-sm'>
+                      {p.title}
+                    </a>
+                  </li>
+                </Link>
+              )
+            })}
+          </ul>
+        </div>
+      </aside>
+      {/* 公告栏 */}
+      <Announcement post={notice} />
+
+      {/* 最近评论 */}
+      {siteConfig('COMMENT_WALINE_SERVER_URL') &&
+        siteConfig('COMMENT_WALINE_RECENT') && (
+          <aside className='rounded shadow overflow-hidden mb-6'>
+            <h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
+              {locale.COMMON.RECENT_COMMENTS}
+            </h3>
+
+            <div className='p-4'>
+              <ExampleRecentComments />
+            </div>
+          </aside>
+        )}
+      <aside className='rounded  overflow-hidden mb-6'>
+        <Live2D />
+      </aside>
+    </div>
   )
 }

themes/example/components/TagItem.js

@@ -1,18 +0,0 @@
-import Link from 'next/link'
-
-/**
- * 标签
- * @param {*} param0
- * @returns
- */
-export default function TagItem({ tag }) {
-  return <div key={tag.name} className='p-2'>
-        <Link
-            key={tag}
-            href={`/tag/${encodeURIComponent(tag.name)}`}
-            passHref
-            className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200 mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
-            <div className='font-light dark:text-gray-400'><i className='mr-1 fas fa-tag' /> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
-        </Link>
-    </div>
-}

themes/example/components/Title.js

@@ -1,20 +0,0 @@
-import NotionIcon from '@/components/NotionIcon'
-import { siteConfig } from '@/lib/config'
-
-/**
- * 标题栏
- * @param {*} props
- * @returns
- */
-export const Title = (props) => {
-  const { post } = props
-  const title = post?.title || siteConfig('TITLE')
-  const description = post?.description || siteConfig('AUTHOR')
-
-  return <div className="text-center px-6 py-12 mb-6 bg-gray-100 dark:bg-hexo-black-gray dark:border-hexo-black-gray border-b">
-        <h1 className="text-xl md:text-4xl pb-4"><NotionIcon icon={post?.pageIcon} />{title}</h1>
-        <p className="leading-loose text-gray-dark">
-            {description}
-        </p>
-    </div>
-}

themes/example/index.js

@@ -1,31 +1,28 @@
 'use client'
 
-import CONFIG from './config'
+import Comment from '@/components/Comment'
+import replaceSearchResult from '@/components/Mark'
+import NotionIcon from '@/components/NotionIcon'
+import NotionPage from '@/components/NotionPage'
+import ShareBar from '@/components/ShareBar'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { isBrowser } from '@/lib/utils'
+import { Transition } from '@headlessui/react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { useEffect } from 'react'
-import { Header } from './components/Header'
-import { Nav } from './components/Nav'
-import { Footer } from './components/Footer'
-import { Title } from './components/Title'
-import { SideBar } from './components/SideBar'
+import BlogListArchive from './components/BlogListArchive'
 import { BlogListPage } from './components/BlogListPage'
 import { BlogListScroll } from './components/BlogListScroll'
-import { useGlobal } from '@/lib/global'
-import { ArticleLock } from './components/ArticleLock'
-import { ArticleInfo } from './components/ArticleInfo'
-import JumpToTopButton from './components/JumpToTopButton'
-import NotionPage from '@/components/NotionPage'
-import Comment from '@/components/Comment'
-import ShareBar from '@/components/ShareBar'
+import { Footer } from './components/Footer'
+import { Header } from './components/Header'
+import { PostLock } from './components/PostLock'
+import { PostMeta } from './components/PostMeta'
 import SearchInput from './components/SearchInput'
-import replaceSearchResult from '@/components/Mark'
-import { isBrowser } from '@/lib/utils'
-import BlogListGroupByDate from './components/BlogListGroupByDate'
-import CategoryItem from './components/CategoryItem'
-import TagItem from './components/TagItem'
-import { useRouter } from 'next/router'
-import { Transition } from '@headlessui/react'
+import { SideBar } from './components/SideBar'
+import CONFIG from './config'
 import { Style } from './style'
-import { siteConfig } from '@/lib/config'
 
 /**
  * 基础布局框架
@@ -36,84 +33,105 @@ import { siteConfig } from '@/lib/config'
  */
 const LayoutBase = props => {
   const { children } = props
-  const { onLoading, fullWidth } = useGlobal()
+  const { onLoading, fullWidth, locale } = useGlobal()
   const router = useRouter()
-  const { category, tag } = props
+  const { post, category, tag } = props
+
+  const title = post?.title || siteConfig('TITLE')
+  const description = post?.description || siteConfig('AUTHOR')
+
   // 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
   // 如果是搜索，则列表顶部嵌入 搜索框
   let slotTop = null
   if (category) {
-    slotTop = <div className='pb-12'><i className="mr-1 fas fa-folder-open" />{category}</div>
+    slotTop = (
+      <div className='pb-12'>
+        <i className='mr-1 fas fa-folder-open' />
+        {category}
+      </div>
+    )
   } else if (tag) {
     slotTop = <div className='pb-12'>#{tag}</div>
   } else if (props.slotTop) {
     slotTop = props.slotTop
   } else if (router.route === '/search') {
     // 嵌入一个搜索框在顶部
-    slotTop = <div className='pb-12'><SearchInput {...props} /></div>
+    slotTop = (
+      <div className='pb-12'>
+        <SearchInput {...props} />
+      </div>
+    )
   }
 
-  // 增加一个状态以触发 Transition 组件的动画
-  //   const [showTransition, setShowTransition] = useState(true)
-  //   useEffect(() => {
-  //     // 当 location 或 children 发生变化时，触发动画
-  //     setShowTransition(false)
-  //     setTimeout(() => setShowTransition(true), 5)
-  //   }, [onLoading])
-
   return (
-        <div id='theme-example' className={`${siteConfig('FONT_STYLE')} dark:text-gray-300  bg-white dark:bg-black scroll-smooth`} >
+    <div
+      id='theme-example'
+      className={`${siteConfig('FONT_STYLE')} dark:text-gray-300  bg-white dark:bg-black scroll-smooth`}>
+      <Style />
 
-            <Style/>
+      {/* 页头 */}
+      <Header {...props} />
 
-            {/* 页头 */}
-            <Header {...props} />
+      {/* 主体 */}
+      <div id='container-inner' className='w-full relative z-10'>
+        {/* 标题栏 */}
+        {!fullWidth && (
+          <div className='text-center px-6 py-12 mb-6 bg-gray-100 dark:bg-hexo-black-gray dark:border-hexo-black-gray border-b'>
+            <h1 className='text-xl md:text-4xl pb-4'>
+              {siteConfig('POST_TITLE_ICON') && (
+                <NotionIcon icon={post?.pageIcon} />
+              )}
+              {title}
+            </h1>
+            <p className='leading-loose text-gray-dark'>{description}</p>
+          </div>
+        )}
 
-            {/* 菜单 */}
-            <Nav {...props} />
+        <div
+          id='container-wrapper'
+          className={
+            (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
+              ? 'flex-row-reverse'
+              : '') +
+            'relative container mx-auto justify-center md:flex items-start py-8 px-2'
+          }>
+          {/* 内容 */}
+          <div
+            className={`w-full ${fullWidth ? '' : 'max-w-3xl'} xl:px-14 lg:px-4`}>
+            <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>
 
-            {/* 主体 */}
-            <div id='container-inner' className="w-full relative z-10">
-
-                {/* 标题栏 */}
-                {fullWidth ? null : <Title {...props} />}
-
-                <div id='container-wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + 'relative container mx-auto justify-center md:flex items-start py-8 px-2'}>
-
-                    {/* 内容 */}
-                    <div className={`w-full ${fullWidth ? '' : 'max-w-3xl'} xl:px-14 lg:px-4`}>
-                        <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>
-
-                    {/* 侧边栏 */}
-                    {!fullWidth && <SideBar {...props} />}
-
-                </div>
-
-            </div>
-
-            {/* 页脚 */}
-            <Footer {...props} />
-
-            {/* 回顶按钮 */}
-            <div className='fixed right-4 bottom-4 z-10'>
-                <JumpToTopButton />
-            </div>
+          {/* 侧边栏 */}
+          {!fullWidth && <SideBar {...props} />}
         </div>
+      </div>
+
+      {/* 页脚 */}
+      <Footer {...props} />
+
+      {/* 回顶按钮 */}
+      <div className='fixed right-4 bottom-4 z-10'>
+        <div
+          title={locale.POST.TOP}
+          className='cursor-pointer p-2 text-center'
+          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
+          <i className='fas fa-angle-up text-2xl' />
+        </div>
+      </div>
+    </div>
   )
 }
 
@@ -133,9 +151,13 @@ const LayoutIndex = props => {
  */
 const LayoutPostList = props => {
   return (
-        <>
-            {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-        </>
+    <>
+      {siteConfig('POST_LIST_STYLE') === 'page' ? (
+        <BlogListPage {...props} />
+      ) : (
+        <BlogListScroll {...props} />
+      )}
+    </>
   )
 }
 
@@ -150,29 +172,34 @@ 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 (
-        <>
-            {lock
-              ? <ArticleLock validPassword={validPassword} />
-              : <div id="article-wrapper" className="px-2">
-                    <ArticleInfo post={post} />
-                    <NotionPage post={post} />
-                    <ShareBar post={post} />
-                    <Comment frontMatter={post} />
-                </div>}
-        </>
+    <>
+      {lock ? (
+        <PostLock validPassword={validPassword} />
+      ) : (
+        <div id='article-wrapper' className='px-2'>
+          <PostMeta post={post} />
+          <NotionPage post={post} />
+          <ShareBar post={post} />
+          <Comment frontMatter={post} />
+        </div>
+      )}
+    </>
   )
 }
 
@@ -181,7 +208,7 @@ const LayoutSlug = props => {
  * @param {*} props
  * @returns
  */
-const Layout404 = (props) => {
+const Layout404 = props => {
   return <>404 Not found.</>
 }
 
@@ -220,13 +247,19 @@ const LayoutSearch = props => {
  */
 const LayoutArchive = props => {
   const { archivePosts } = props
-  return (<>
-            <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
-                {Object.keys(archivePosts).map(archiveTitle => (
-                    <BlogListGroupByDate key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />
-                ))}
-            </div>
-        </>)
+  return (
+    <>
+      <div className='mb-10 pb-20 md:py-12 p-3  min-h-screen w-full'>
+        {Object.keys(archivePosts).map(archiveTitle => (
+          <BlogListArchive
+            key={archiveTitle}
+            archiveTitle={archiveTitle}
+            archivePosts={archivePosts}
+          />
+        ))}
+      </div>
+    </>
+  )
 }
 
 /**
@@ -237,11 +270,25 @@ const LayoutArchive = props => {
 const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
   return (
-        <>
-            <div id='category-list' className='duration-200 flex flex-wrap'>
-                {categoryOptions?.map(category => <CategoryItem key={category.name} category={category} />)}
+    <>
+      <div id='category-list' className='duration-200 flex flex-wrap'>
+        {categoryOptions?.map(category => (
+          <Link
+            key={category.name}
+            href={`/category/${category.name}`}
+            passHref
+            legacyBehavior>
+            <div
+              className={
+                'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'
+              }>
+              <i className='mr-4 fas fa-folder' />
+              {category.name}({category.count})
             </div>
-        </>
+          </Link>
+        ))}
+      </div>
+    </>
   )
 }
 
@@ -250,26 +297,39 @@ const LayoutCategoryIndex = props => {
  * @param {*} props
  * @returns
  */
-const LayoutTagIndex = (props) => {
+const LayoutTagIndex = props => {
   const { tagOptions } = props
   return (
-        <>
-            <div id='tags-list' className='duration-200 flex flex-wrap'>
-                {tagOptions.map(tag => <TagItem key={tag.name} tag={tag} />)}
-            </div>
-        </>
+    <>
+      <div id='tags-list' className='duration-200 flex flex-wrap'>
+        {tagOptions.map(tag => (
+          <div key={tag.name} className='p-2'>
+            <Link
+              key={tag}
+              href={`/tag/${encodeURIComponent(tag.name)}`}
+              passHref
+              className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200 mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
+              <div className='font-light dark:text-gray-400'>
+                <i className='mr-1 fas fa-tag' />{' '}
+                {tag.name + (tag.count ? `(${tag.count})` : '')}{' '}
+              </div>
+            </Link>
+          </div>
+        ))}
+      </div>
+    </>
   )
 }
 
 export {
-  CONFIG as THEME_CONFIG,
-  LayoutBase,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
   Layout404,
-  LayoutPostList,
+  LayoutArchive,
+  LayoutBase,
   LayoutCategoryIndex,
-  LayoutTagIndex
+  LayoutIndex,
+  LayoutPostList,
+  LayoutSearch,
+  LayoutSlug,
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }

themes/fukasawa/components/ArticleDetail.js

@@ -10,6 +10,7 @@ import LazyImage from '@/components/LazyImage'
 import { formatDateFmt } from '@/lib/utils/formatDate'
 import WWAds from '@/components/WWAds'
 import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
 
 /**
  *
@@ -37,7 +38,7 @@ export default function ArticleDetail(props) {
 
           {/* 文章Title */}
           <div className="font-bold text-4xl text-black dark:text-white">
-            <NotionIcon icon={post?.pageIcon} />{post.title}
+            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post.title}
           </div>
 
           <section className="flex-wrap flex mt-2 text-gray-400 dark:text-gray-400 font-light leading-8">

themes/fukasawa/components/BlogCard.js

@@ -71,7 +71,7 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
               passHref
               href={url}
               className={`break-words cursor-pointer font-bold hover:underline text-xl ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
-              <NotionIcon icon={post.pageIcon} /> {post.title}
+              {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />} {post.title}
             </Link>
           </h2>
 

themes/fukasawa/components/Catalog.js

@@ -71,7 +71,7 @@ const Catalog = ({ toc }) => {
               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-400 underline'}`}
+              className={`truncate ${activeSection === id ? 'font-bold text-red-400 underline' : ''}`}
               title={tocItem.text}
             >
               {tocItem.text}

themes/game/components/BlogPost.js

@@ -15,7 +15,7 @@ const BlogPost = ({ post }) => {
       <article key={post.id} className="mb-6 md:mb-8">
         <header className="flex flex-col justify-between md:flex-row md:items-baseline">
           <h2 className="text-lg md:text-xl font-medium mb-2 cursor-pointer text-black dark:text-gray-100">
-            <NotionIcon icon={post.pageIcon} />{post.title}
+            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
           </h2>
           <time className="flex-shrink-0 text-gray-600 dark:text-gray-400">
             {post?.publishDay}

themes/game/components/PostInfo.js

@@ -1,6 +1,7 @@
 import NotionIcon from '@/components/NotionIcon'
 import Link from 'next/link'
 import TagItem from './TagItem'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 文章详情页说明信息
@@ -25,7 +26,7 @@ export default function PostInfo(props) {
         </div>
 
         <h1 className='font-bold text-3xl text-black dark:text-white'>
-          <NotionIcon icon={post?.pageIcon} />
+          {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}
           {post?.title}
         </h1>
 

themes/gitbook/components/BlogPostCard.js

@@ -14,7 +14,7 @@ const BlogPostCard = ({ post, className }) => {
         <Link href={url} passHref>
             <div key={post.id} className={`${className} relative py-1.5 cursor-pointer px-1.5 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600  ${currentSelected ? 'bg-green-50 text-green-500 dark:bg-yellow-100 dark:text-yellow-600' : ''}`}>
                 <div className="w-full select-none">
-                    <NotionIcon icon={post?.pageIcon}/> {post.title}
+                    {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />} {post.title}
                 </div>
                 {/* 最新文章加个红点 */}
                 {post?.isLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && <Badge/>}

themes/gitbook/components/BlogPostListPage.js

@@ -1,34 +0,0 @@
-import BlogPostCard from './BlogPostCard'
-import { siteConfig } from '@/lib/config'
-import NavPostListEmpty from './NavPostListEmpty'
-import PaginationSimple from './PaginationSimple'
-
-/**
- * 文章列表分页表格
- * @param page 当前页
- * @param posts 所有文章
- * @param tags 所有标签
- * @returns {JSX.Element}
- * @constructor
- */
-const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
-  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
-
-  if (!posts || posts.length === 0) {
-    return <NavPostListEmpty />
-  }
-
-  return (
-      <div className='w-full justify-center'>
-        <div id='posts-wrapper'>
-        {/* 文章列表 */}
-        {posts?.map(post => (
-          <BlogPostCard key={post.id} post={post} />
-        ))}
-        </div>
-        <PaginationSimple page={page} totalPage={totalPage} />
-      </div>
-  )
-}
-
-export default BlogPostListPage

themes/gitbook/components/Catalog.js

@@ -74,7 +74,7 @@ const Catalog = ({ post }) => {
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-gray-500 underline'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-gray-500 underline' : ''}`}
               >
                 {tocItem.text}
               </span>

themes/gitbook/components/NavPostItem.js

@@ -1,9 +1,8 @@
-import BlogPostCard from './BlogPostCard'
-import { useState } from 'react'
-import Collapse from '@/components/Collapse'
 import Badge from '@/components/Badge'
+import Collapse from '@/components/Collapse'
 import { siteConfig } from '@/lib/config'
 import CONFIG from '../config'
+import BlogPostCard from './BlogPostCard'
 
 /**
  * 导航列表
@@ -12,36 +11,53 @@ import CONFIG from '../config'
  * @returns {JSX.Element}
  * @constructor
  */
-const NavPostItem = (props) => {
-  const { group } = props
-  const [isOpen, changeIsOpen] = useState(group?.selected)
+const NavPostItem = props => {
+  const { group, expanded, toggleItem } = props // 接收传递的展开状态和切换函数
+  // const [isOpen, setIsOpen] = useState(expanded) // 使用展开状态作为组件内部状态
 
+  // 当展开状态改变时触发切换函数，并根据传入的展开状态更新内部状态
   const toggleOpenSubMenu = () => {
-    changeIsOpen(!isOpen)
+    toggleItem() // 调用父组件传递的切换函数
+    // setIsOpen(!expanded) // 更新内部状态为传入的展开状态的相反值
   }
 
   const groupHasLatest = group?.items?.some(post => post.isLatest)
 
   if (group?.category) {
-    return <>
-            <div onClick={toggleOpenSubMenu}
-                className='select-none relative flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
-                <span>{group?.category}</span>
-                <div className='inline-flex items-center select-none pointer-events-none '><i className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
-                {groupHasLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && !isOpen && <Badge/>}
+    return (
+      <>
+        <div
+          onClick={toggleOpenSubMenu}
+          className='select-none relative flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600'
+          key={group?.category}>
+          <span>{group?.category}</span>
+          <div className='inline-flex items-center select-none pointer-events-none '>
+            <i
+              className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-200 ${expanded ? '-rotate-90' : ''}`}></i>
+          </div>
+          {groupHasLatest &&
+            siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) &&
+            !expanded && <Badge />}
+        </div>
+        <Collapse isOpen={expanded} onHeightChange={props.onHeightChange}>
+          {group?.items?.map(post => (
+            <div key={post.id} className='ml-3 border-l'>
+              <BlogPostCard className='text-sm ml-3' post={post} />
             </div>
-            <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-                {group?.items?.map(post => (<div key={post.id} className='ml-3 border-l'>
-                    <BlogPostCard className='text-sm ml-3' post={post} /></div>))
-                }
-            </Collapse>
-        </>
+          ))}
+        </Collapse>
+      </>
+    )
   } else {
-    return <>
-            {group?.items?.map(post => (<div key={post.id} >
-                <BlogPostCard className='text-sm py-2' post={post} /></div>))
-            }
-        </>
+    return (
+      <>
+        {group?.items?.map(post => (
+          <div key={post.id}>
+            <BlogPostCard className='text-sm py-2' post={post} />
+          </div>
+        ))}
+      </>
+    )
   }
 }
 

themes/gitbook/components/NavPostList.js

@@ -1,8 +1,9 @@
-import NavPostListEmpty from './NavPostListEmpty'
-import { useRouter } from 'next/router'
-import NavPostItem from './NavPostItem'
-import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import CONFIG from '../config'
+import NavPostItem from './NavPostItem'
 
 /**
  * 博客列表滚动分页
@@ -11,11 +12,23 @@ import { siteConfig } from '@/lib/config'
  * @returns {JSX.Element}
  * @constructor
  */
-const NavPostList = (props) => {
+const NavPostList = props => {
   const { filteredNavPages } = props
+  const { locale, currentSearch } = useGlobal()
   const router = useRouter()
-  let selectedSth = false
-  const groupedArray = filteredNavPages?.reduce((groups, item) => {
+
+  // 存放被展开的分组
+  const [expandedGroups, setExpandedGroups] = useState([])
+
+  // 排他折叠
+  const GITBOOK_EXCLUSIVE_COLLAPSE = siteConfig(
+    'GITBOOK_EXCLUSIVE_COLLAPSE',
+    null,
+    CONFIG
+  )
+
+  // 按照分类、分组折叠内榕
+  const categoryFolders = filteredNavPages?.reduce((groups, item) => {
     const categoryName = item?.category ? item?.category : '' // 将category转换为字符串
 
     let existingGroup = null
@@ -35,32 +48,79 @@ const NavPostList = (props) => {
     return groups
   }, [])
 
-  // 处理是否选中
-  groupedArray?.map((group) => {
-    let groupSelected = false
-    for (const post of group?.items) {
+  // 首次打开页面时，跟踪是否已经选择了一个项
+  categoryFolders?.forEach(group => {
+    let hasExpandFolder = false
+    group.items.forEach(post => {
       if (router.asPath.split('?')[0] === '/' + post.slug) {
-        groupSelected = true
-        selectedSth = true
+        hasExpandFolder = true
       }
-    }
-    group.selected = groupSelected
-    return null
+    })
+    group.selected = hasExpandFolder
   })
 
   // 如果都没有选中默认打开第一个
-  if (!selectedSth && groupedArray && groupedArray?.length > 0) {
-    groupedArray[0].selected = true
+  useEffect(() => {
+    setTimeout(() => {
+      if (expandedGroups.length === 0) {
+        setExpandedGroups([0])
+      }
+    }, 500)
+  }, [router])
+
+  // 折叠项切换，当折叠或展开数组时会调用
+  const toggleItem = index => {
+    let newExpandedGroups = [...expandedGroups] // 创建一个新的展开分组数组
+
+    // 如果expandedGroups中不存在，增加入，若存在则移除
+    if (expandedGroups.includes(index)) {
+      // 如果expandedGroups中包含index，则移除index
+      newExpandedGroups = newExpandedGroups.filter(
+        expandedIndex => expandedIndex !== index
+      )
+    } else {
+      // 如果expandedGroups中不包含index，则加入index
+      newExpandedGroups.push(index)
+    }
+    // 是否排他
+    if (GITBOOK_EXCLUSIVE_COLLAPSE) {
+      // 如果折叠菜单排他性为 true，则只展开当前分组，关闭其他已展开的分组
+      newExpandedGroups = newExpandedGroups.filter(
+        expandedIndex => expandedIndex === index
+      )
+    }
+
+    // 更新展开分组数组
+    setExpandedGroups(newExpandedGroups)
+  }
+  if (!categoryFolders || categoryFolders.length === 0) {
+    // 空白内容
+    return (
+      <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
+        <p className='text-gray-500 dark:text-gray-300'>
+          {locale.COMMON.NO_RESULTS_FOUND}{' '}
+          {currentSearch && <div>{currentSearch}</div>}
+        </p>
+      </div>
+    )
   }
 
-  if (!groupedArray || groupedArray.length === 0) {
-    return <NavPostListEmpty />
-  } else {
-    return <div id='posts-wrapper' className='w-full flex-grow space-y-0.5 tracking-wider'>
-            {/* 文章列表 */}
-            {groupedArray?.map((group, index) => <NavPostItem key={index} group={group} onHeightChange={props.onHeightChange}/>)}
-        </div>
-  }
+  return (
+    <div
+      id='posts-wrapper'
+      className='w-full flex-grow space-y-0.5 tracking-wider'>
+      {/* 文章列表 */}
+      {categoryFolders?.map((group, index) => (
+        <NavPostItem
+          key={index}
+          group={group}
+          onHeightChange={props.onHeightChange}
+          expanded={expandedGroups.includes(index)} // 将展开状态传递给子组件
+          toggleItem={() => toggleItem(index)} // 将切换函数传递给子组件
+        />
+      ))}
+    </div>
+  )
 }
 
 export default NavPostList

themes/gitbook/components/NavPostListEmpty.js

@@ -1,14 +0,0 @@
-import { useGlobal } from '@/lib/global'
-
-/**
- * 空白博客 列表
- * @returns {JSX.Element}
- * @constructor
- */
-const NavPostListEmpty = ({ currentSearch }) => {
-  const { locale } = useGlobal()
-  return <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
-        <p className='text-gray-500 dark:text-gray-300'>{locale.COMMON.NO_RESULTS_FOUND}  {(currentSearch && <div>{currentSearch}</div>)}</p>
-  </div>
-}
-export default NavPostListEmpty

themes/gitbook/config.js

@@ -1,10 +1,10 @@
 const CONFIG = {
-
   GITBOOK_INDEX_PAGE: 'about', // 文档首页显示的文章，请确此路径包含在您的notion数据库中
 
   GITBOOK_AUTO_SORT: process.env.NEXT_PUBLIC_GITBOOK_AUTO_SORT || true, // 是否自动按分类名 归组排序文章；自动归组可能会打乱您Notion中的文章顺序
 
-  GITBOOK_LATEST_POST_RED_BADGE: process.env.NEXT_PUBLIC_GITBOOK_LATEST_POST_RED_BADGE || true, // 是否给最新文章显示红点
+  GITBOOK_LATEST_POST_RED_BADGE:
+    process.env.NEXT_PUBLIC_GITBOOK_LATEST_POST_RED_BADGE || true, // 是否给最新文章显示红点
 
   // 菜单
   GITBOOK_MENU_CATEGORY: true, // 显示分类
@@ -12,8 +12,12 @@ const CONFIG = {
   GITBOOK_MENU_ARCHIVE: true, // 显示归档
   GITBOOK_MENU_SEARCH: true, // 显示搜索
 
+  // 导航文章自动排他折叠
+  GITBOOK_EXCLUSIVE_COLLAPSE: true, // 一次只展开一个分类，其它文件夹自动关闭。
+
   // Widget
-  GITBOOK_WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
+  GITBOOK_WIDGET_REVOLVER_MAPS:
+    process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
   GITBOOK_WIDGET_TO_TOP: true // 跳回顶部
 }
 export default CONFIG

themes/gitbook/index.js

@@ -166,7 +166,7 @@ const LayoutBase = (props) => {
                     {/*  右侧侧推拉抽屉 */}
                     {fullWidth
                       ? null
-                      : <div style={{ width: '32rem' }} className={'hidden xl:block dark:border-transparent relative z-10 '}>
+                      : <div style={{ width: '20rem' }} className={'hidden xl:block dark:border-transparent flex-shrink-0 relative z-10 '}>
                       <div className='py-14 px-6 sticky top-0'>
                           <ArticleInfo post={props?.post ? props?.post : props.notice} />
 
@@ -275,7 +275,7 @@ const LayoutSlug = (props) => {
             {!lock && <div id='container'>
 
                 {/* title */}
-                <h1 className="text-3xl pt-12  dark:text-gray-300"><NotionIcon icon={post?.pageIcon} />{post?.title}</h1>
+                <h1 className="text-3xl pt-12  dark:text-gray-300">{siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post?.title}</h1>
 
                 {/* Notion文章主体 */}
                 {post && (<section id="article-wrapper" className="px-1">

themes/heo/components/BlogPostCard.js

@@ -44,7 +44,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                             href={url}
                             passHref
                             className={' group-hover:text-indigo-700 dark:hover:text-yellow-700 dark:group-hover:text-yellow-600 text-black dark:text-gray-100  line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'}>
-                            <NotionIcon icon={post.pageIcon} /><span className='menu-link '>{post.title}</span>
+                            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}<span className='menu-link '>{post.title}</span>
                         </Link>
                     </header>
 

themes/heo/components/Catalog.js

@@ -74,7 +74,7 @@ const Catalog = ({ toc }) => {
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-indigo-600'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-indigo-600' : ''}`}
               >
                 {tocItem.text}
               </span>

themes/heo/components/Hero.js

@@ -18,16 +18,13 @@ const Hero = props => {
   const HEO_HERO_REVERSE = siteConfig('HEO_HERO_REVERSE', false, CONFIG)
   return (
     <div
-      id="hero-wrapper"
-      className="recent-top-post-group w-full overflow-hidden select-none px-5 mb-4"
-    >
+      id='hero-wrapper'
+      className='recent-top-post-group w-full overflow-hidden select-none px-5 mb-4'>
       <div
-        id="hero"
+        id='hero'
         style={{ zIndex: 1 }}
         className={`${HEO_HERO_REVERSE ? 'xl:flex-row-reverse' : ''}
-           recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex relative`
-        }
-      >
+           recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex relative`}>
         {/* 左侧banner组 */}
         <BannerGroup {...props} />
 
@@ -49,9 +46,8 @@ function BannerGroup(props) {
   return (
     // 左侧英雄区
     <div
-      id="bannerGroup"
-      className="flex flex-col justify-between flex-1 mr-2 max-w-[42rem]"
-    >
+      id='bannerGroup'
+      className='flex flex-col justify-between flex-1 mr-2 max-w-[42rem]'>
       {/* 动图 */}
       <Banner {...props} />
       {/* 导航分类 */}
@@ -78,17 +74,16 @@ function Banner(props) {
 
   return (
     <div
-      id="banners"
+      id='banners'
       onClick={handleClickBanner}
-      className="hidden xl:flex xl:flex-col group h-full bg-white dark:bg-[#1e1e1e] rounded-xl border dark:border-gray-700 mb-3 relative overflow-hidden"
-    >
-      <div id="banner-title" className="flex flex-col absolute top-10 left-10">
-        <div className="text-4xl font-bold mb-3  dark:text-white">
+      className='hidden xl:flex xl:flex-col group h-full bg-white dark:bg-[#1e1e1e] rounded-xl border dark:border-gray-700 mb-3 relative overflow-hidden'>
+      <div id='banner-title' className='flex flex-col absolute top-10 left-10'>
+        <div className='text-4xl font-bold mb-3  dark:text-white'>
           {siteConfig('HEO_HERO_TITLE_1', null, CONFIG)}
           <br />
           {siteConfig('HEO_HERO_TITLE_2', null, CONFIG)}
         </div>
-        <div className="text-xs text-gray-600  dark:text-gray-200">
+        <div className='text-xs text-gray-600  dark:text-gray-200'>
           {siteConfig('HEO_HERO_TITLE_3', null, CONFIG)}
         </div>
       </div>
@@ -98,15 +93,14 @@ function Banner(props) {
 
       {/* 遮罩 */}
       <div
-        id="banner-cover"
+        id='banner-cover'
         style={{ backdropFilter: 'blur(15px)' }}
         className={
           'rounded-xl overflow-hidden opacity-0 group-hover:opacity-100 duration-300 transition-all bg-[#4259efdd] dark:bg-[#dca846] dark:text-white cursor-pointer absolute w-full h-full top-0 flex justify-start items-center'
-        }
-      >
-        <div className="ml-12 -translate-x-32 group-hover:translate-x-0 duration-300 transition-all ease-in">
-          <div className="text-7xl text-white font-extrabold">随便逛逛</div>
-          <div className="-ml-3 text-gray-300">
+        }>
+        <div className='ml-12 -translate-x-32 group-hover:translate-x-0 duration-300 transition-all ease-in'>
+          <div className='text-7xl text-white font-extrabold'>随便逛逛</div>
+          <div className='-ml-3 text-gray-300'>
             <ArrowSmallRight className={'w-24 h-24 stroke-2'} />
           </div>
         </div>
@@ -120,38 +114,38 @@ function Banner(props) {
  * 英雄区左上角banner条中斜向滚动的图标
  */
 function TagsGroupBar() {
-  const groupIcons = siteConfig('HEO_GROUP_ICONS', null, CONFIG).concat(siteConfig('HEO_GROUP_ICONS', null, CONFIG))
+  const groupIcons = siteConfig('HEO_GROUP_ICONS', null, CONFIG).concat(
+    siteConfig('HEO_GROUP_ICONS', null, CONFIG)
+  )
 
   return (
-    <div className="tags-group-all flex -rotate-[30deg] h-full">
-      <div className="tags-group-wrapper flex flex-nowrap absolute top-16">
+    <div className='tags-group-all flex -rotate-[30deg] h-full'>
+      <div className='tags-group-wrapper flex flex-nowrap absolute top-16'>
         {groupIcons?.map((g, index) => {
           return (
-            <div key={index} className="tags-group-icon-pair ml-6 select-none">
+            <div key={index} className='tags-group-icon-pair ml-6 select-none'>
               <div
                 style={{ background: g.color_1 }}
                 className={
                   'tags-group-icon w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'
-                }
-              >
+                }>
                 <LazyImage
                   priority={true}
                   src={g.img_1}
                   title={g.title_1}
-                  className="w-2/3 hidden xl:block"
+                  className='w-2/3 hidden xl:block'
                 />
               </div>
               <div
                 style={{ background: g.color_2 }}
                 className={
                   'tags-group-icon  mt-5 w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'
-                }
-              >
+                }>
                 <LazyImage
                   priority={true}
                   src={g.img_2}
                   title={g.title_2}
-                  className="w-2/3 hidden xl:block"
+                  className='w-2/3 hidden xl:block'
                 />
               </div>
             </div>
@@ -168,42 +162,39 @@ function TagsGroupBar() {
  */
 function GroupMenu() {
   return (
-    <div className="h-[165px] select-none xl:h-20 flex flex-col justify-between xl:space-y-0 xl:flex-row w-28 lg:w-48 xl:w-full xl:flex-nowrap xl:space-x-3">
+    <div className='h-[165px] select-none xl:h-20 flex flex-col justify-between xl:space-y-0 xl:flex-row w-28 lg:w-48 xl:w-full xl:flex-nowrap xl:space-x-3'>
       <Link
         href={siteConfig('HEO_HERO_CATEGORY_1', null, CONFIG)?.url}
-        className="group relative overflow-hidden bg-gradient-to-r from-blue-500 to-blue-400 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in"
-      >
-        <div className="font-bold lg:text-lg  pl-5 relative -mt-2">
+        className='group relative overflow-hidden bg-gradient-to-r from-blue-500 to-blue-400 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in'>
+        <div className='font-bold lg:text-lg  pl-5 relative -mt-2'>
           {siteConfig('HEO_HERO_CATEGORY_1', null, CONFIG)?.title}
-          <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
+          <span className='absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full'></span>
         </div>
-        <div className="hidden lg:block absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0">
-          <i className="fa-solid fa-star text-4xl"></i>
+        <div className='hidden lg:block absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
+          <i className='fa-solid fa-star text-4xl'></i>
         </div>
       </Link>
       <Link
         href={siteConfig('HEO_HERO_CATEGORY_2', null, CONFIG)?.url}
-        className="group relative overflow-hidden bg-gradient-to-r from-red-500 to-yellow-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in"
-      >
-        <div className="font-bold lg:text-lg pl-5 relative -mt-2">
+        className='group relative overflow-hidden bg-gradient-to-r from-red-500 to-yellow-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in'>
+        <div className='font-bold lg:text-lg pl-5 relative -mt-2'>
           {siteConfig('HEO_HERO_CATEGORY_2', null, CONFIG)?.title}
-          <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
+          <span className='absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full'></span>
         </div>
-        <div className="hidden lg:block absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0">
-          <i className="fa-solid fa-fire-flame-curved text-4xl"></i>
+        <div className='hidden lg:block absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
+          <i className='fa-solid fa-fire-flame-curved text-4xl'></i>
         </div>
       </Link>
       {/* 第三个标签在小屏上不显示 */}
       <Link
         href={siteConfig('HEO_HERO_CATEGORY_3', null, CONFIG)?.url}
-        className="group relative overflow-hidden bg-gradient-to-r from-teal-300 to-cyan-300 hidden h-20 xl:flex justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in"
-      >
-        <div className="font-bold text-lg pl-5 relative -mt-2">
+        className='group relative overflow-hidden bg-gradient-to-r from-teal-300 to-cyan-300 hidden h-20 xl:flex justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in'>
+        <div className='font-bold text-lg pl-5 relative -mt-2'>
           {siteConfig('HEO_HERO_CATEGORY_3', null, CONFIG)?.title}
-          <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
+          <span className='absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full'></span>
         </div>
-        <div className="absolute right-6 duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0">
-          <i className="fa-solid fa-book-bookmark text-4xl "></i>
+        <div className='absolute right-6 duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
+          <i className='fa-solid fa-book-bookmark text-4xl '></i>
         </div>
       </Link>
     </div>
@@ -225,30 +216,28 @@ function TopGroup(props) {
 
   return (
     <div
-      id="hero-right-wrapper"
+      id='hero-right-wrapper'
       onMouseLeave={handleMouseLeave}
-      className="flex-1 relative w-full"
-    >
+      className='flex-1 relative w-full'>
       {/* 置顶推荐文章 */}
       <div
-        id="top-group"
-        className="w-full flex space-x-3 xl:space-x-0 xl:grid xl:grid-cols-3 xl:gap-3 xl:h-[342px]"
-      >
+        id='top-group'
+        className='w-full flex space-x-3 xl:space-x-0 xl:grid xl:grid-cols-3 xl:gap-3 xl:h-[342px]'>
         {topPosts?.map((p, index) => {
           return (
             <Link href={`${siteConfig('SUB_PATH', '')}/${p?.slug}`} key={index}>
-              <div className="cursor-pointer h-[164px] group relative flex flex-col w-52 xl:w-full overflow-hidden shadow bg-white dark:bg-black dark:text-white rounded-xl">
+              <div className='cursor-pointer h-[164px] group relative flex flex-col w-52 xl:w-full overflow-hidden shadow bg-white dark:bg-black dark:text-white rounded-xl'>
                 <LazyImage
                   priority={index === 0}
-                  className="h-24 object-cover"
+                  className='h-24 object-cover'
                   alt={p?.title}
                   src={p?.pageCoverThumbnail || siteInfo?.pageCover}
                 />
-                <div className="group-hover:text-indigo-600 dark:group-hover:text-yellow-600 line-clamp-2 overflow-hidden m-2 font-semibold">
+                <div className='group-hover:text-indigo-600 dark:group-hover:text-yellow-600 line-clamp-2 overflow-hidden m-2 font-semibold'>
                   {p?.title}
                 </div>
                 {/* hover 悬浮的 ‘荐’ 字 */}
-                <div className="opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 dark:bg-yellow-600  text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs">
+                <div className='opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 dark:bg-yellow-600  text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs'>
                   荐
                 </div>
               </div>
@@ -256,7 +245,7 @@ function TopGroup(props) {
           )
         })}
       </div>
-      <TodayCard cRef={todayCardRef} siteInfo={siteInfo}/>
+      <TodayCard cRef={todayCardRef} siteInfo={siteInfo} />
     </div>
   )
 }
@@ -277,7 +266,11 @@ function getTopPosts({ latestPosts, allNavPages }) {
   let sortPosts = []
 
   // 排序方式
-  if (JSON.parse(siteConfig('HEO_HERO_RECOMMEND_POST_SORT_BY_UPDATE_TIME', null, CONFIG))) {
+  if (
+    JSON.parse(
+      siteConfig('HEO_HERO_RECOMMEND_POST_SORT_BY_UPDATE_TIME', null, CONFIG)
+    )
+  ) {
     sortPosts = Object.create(allNavPages).sort((a, b) => {
       const dateA = new Date(a?.lastEditedDate)
       const dateB = new Date(b?.lastEditedDate)
@@ -293,7 +286,11 @@ function getTopPosts({ latestPosts, allNavPages }) {
       break
     }
     // 查找标签
-    if (post?.tags?.indexOf(siteConfig('HEO_HERO_RECOMMEND_POST_TAG', null, CONFIG)) >= 0) {
+    if (
+      post?.tags?.indexOf(
+        siteConfig('HEO_HERO_RECOMMEND_POST_TAG', null, CONFIG)
+      ) >= 0
+    ) {
       topPosts.push(post)
     }
   }
@@ -306,6 +303,7 @@ function getTopPosts({ latestPosts, allNavPages }) {
  */
 function TodayCard({ cRef, siteInfo }) {
   const router = useRouter()
+  const link = siteConfig('HEO_HERO_TITLE_LINK', null, CONFIG)
   // 卡牌是否盖住下层
   const [isCoverUp, setIsCoverUp] = useState(true)
 
@@ -334,56 +332,55 @@ function TodayCard({ cRef, siteInfo }) {
    * @param {*} e
    */
   function handleCardClick(e) {
-    router.push(siteConfig('HEO_HERO_TITLE_LINK', null, CONFIG))
+    router.push(link)
   }
 
   return (
     <div
-      id="today-card"
+      id='today-card'
       className={`${
         isCoverUp ? ' ' : 'pointer-events-none'
-      } overflow-hidden absolute hidden xl:flex flex-1 flex-col h-full top-0 w-full`}
-    >
+      } overflow-hidden absolute hidden xl:flex flex-1 flex-col h-full top-0 w-full`}>
       <div
-        id="card-body"
+        id='card-body'
         onClick={handleCardClick}
         className={`${
           isCoverUp
             ? 'opacity-100 cursor-pointer'
             : 'opacity-0 transform scale-110 pointer-events-none'
-        } shadow transition-all duration-200 today-card h-full bg-[#0E57D5] rounded-xl relative overflow-hidden flex items-end`}
-      >
+        } shadow transition-all duration-200 today-card h-full bg-[#0E57D5] rounded-xl relative overflow-hidden flex items-end`}>
         <div
-          id="today-card-info"
-          className="z-10 flex justify-between w-full relative text-white p-10 items-end"
-        >
-          <div className="flex flex-col">
-            <div className="text-xs font-light">{siteConfig('HEO_HERO_TITLE_4', null, CONFIG)}</div>
-            <div className="text-3xl font-bold">{siteConfig('HEO_HERO_TITLE_5', null, CONFIG)}</div>
+          id='today-card-info'
+          className='z-10 flex justify-between w-full relative text-white p-10 items-end'>
+          <div className='flex flex-col'>
+            <div className='text-xs font-light'>
+              {siteConfig('HEO_HERO_TITLE_4', null, CONFIG)}
+            </div>
+            <div className='text-3xl font-bold'>
+              {siteConfig('HEO_HERO_TITLE_5', null, CONFIG)}
+            </div>
           </div>
           <div
             onClick={handleClickMore}
             className={`'${
               isCoverUp ? '' : 'hidden pointer-events-none '
-            } flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}
-          >
+            } flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}>
             <PlusSmall
               className={'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400'}
             />
-            <div id="more" className="select-none">
+            <div id='more' className='select-none'>
               更多推荐
             </div>
           </div>
         </div>
         <div
-          id="today-card-cover"
+          id='today-card-cover'
           className={`${
             isCoverUp ? '' : ' pointer-events-none'
           } cursor-pointer today-card-cover absolute w-full h-full top-0`}
           style={{
             background: `url('${siteInfo?.pageCover}') no-repeat center /cover`
-          }}
-        ></div>
+          }}></div>
       </div>
     </div>
   )

themes/heo/components/PostHeader.js

@@ -65,7 +65,7 @@ export default function PostHeader({ post, siteInfo }) {
 
                     {/* 文章Title */}
                     <div className="max-w-5xl font-bold text-3xl lg:text-5xl md:leading-snug shadow-text-md flex  justify-center md:justify-start text-white">
-                        <NotionIcon icon={post.pageIcon} />{post.title}
+                        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
                     </div>
 
                     {/* 标题底部补充信息 */}

themes/hexo/components/BlogPostCardInfo.js

@@ -25,7 +25,7 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
                         className={`line-clamp-2 replace cursor-pointer text-2xl ${showPreview ? 'text-center' : ''
                             } leading-tight font-normal text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
 
-                        <NotionIcon icon={post.pageIcon} /><span className='menu-link '>{post.title}</span>
+                        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}<span className='menu-link '>{post.title}</span>
 
                     </Link>
                 </h2>

themes/hexo/components/Catalog.js

@@ -79,7 +79,7 @@ const Catalog = ({ toc }) => {
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-indigo-600'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-indigo-600' : ''}`}
               >
                 {tocItem.text}
               </span>

themes/hexo/components/Header.js

@@ -0,0 +1,187 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import throttle from 'lodash.throttle'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import CONFIG from '../config'
+import CategoryGroup from './CategoryGroup'
+import Logo from './Logo'
+import { MenuListTop } from './MenuListTop'
+import SearchButton from './SearchButton'
+import SearchDrawer from './SearchDrawer'
+import SideBar from './SideBar'
+import SideBarDrawer from './SideBarDrawer'
+import TagGroups from './TagGroups'
+
+let windowTop = 0
+
+/**
+ * 顶部导航
+ * @param {*} param0
+ * @returns
+ */
+const Header = props => {
+  const searchDrawer = useRef()
+  const { tags, currentTag, categories, currentCategory } = props
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const [isOpen, changeShow] = useState(false)
+  const showSearchButton = siteConfig('HEXO_MENU_SEARCH', false, CONFIG)
+
+  const toggleMenuOpen = () => {
+    changeShow(!isOpen)
+  }
+
+  const toggleSideBarClose = () => {
+    changeShow(false)
+  }
+
+  // 监听滚动
+  useEffect(() => {
+    window.addEventListener('scroll', topNavStyleHandler)
+    router.events.on('routeChangeComplete', topNavStyleHandler)
+    topNavStyleHandler()
+    return () => {
+      router.events.off('routeChangeComplete', topNavStyleHandler)
+      window.removeEventListener('scroll', topNavStyleHandler)
+    }
+  }, [])
+
+  const throttleMs = 200
+
+  const topNavStyleHandler = useCallback(
+    throttle(() => {
+      const scrollS = window.scrollY
+      const nav = document.querySelector('#sticky-nav')
+      // 首页和文章页会有头图
+      const header = document.querySelector('#header')
+      // 导航栏和头图是否重叠
+      const scrollInHeader =
+        header && (scrollS < 10 || scrollS < header?.clientHeight - 50) // 透明导航条的条件
+
+      // const textWhite = header && scrollInHeader
+
+      if (scrollInHeader) {
+        nav && nav.classList.replace('bg-white', 'bg-none')
+        nav && nav.classList.replace('border', 'border-transparent')
+        nav && nav.classList.replace('drop-shadow-md', 'shadow-none')
+        nav && nav.classList.replace('dark:bg-hexo-black-gray', 'transparent')
+      } else {
+        nav && nav.classList.replace('bg-none', 'bg-white')
+        nav && nav.classList.replace('border-transparent', 'border')
+        nav && nav.classList.replace('shadow-none', 'drop-shadow-md')
+        nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
+      }
+
+      if (scrollInHeader) {
+        nav && nav.classList.replace('text-black', 'text-white')
+      } else {
+        nav && nav.classList.replace('text-white', 'text-black')
+      }
+
+      // 导航栏不在头图里，且页面向下滚动一定程度 隐藏导航栏
+      const showNav =
+        scrollS <= windowTop ||
+        scrollS < 5 ||
+        (header && scrollS <= header.clientHeight + 100)
+      if (!showNav) {
+        nav && nav.classList.replace('top-0', '-top-20')
+        windowTop = scrollS
+      } else {
+        nav && nav.classList.replace('-top-20', 'top-0')
+        windowTop = scrollS
+      }
+    }, throttleMs)
+  )
+
+  const searchDrawerSlot = (
+    <>
+      {categories && (
+        <section className='mt-8'>
+          <div className='text-sm flex flex-nowrap justify-between font-light px-2'>
+            <div className='text-gray-600 dark:text-gray-200'>
+              <i className='mr-2 fas fa-th-list' />
+              {locale.COMMON.CATEGORY}
+            </div>
+            <Link
+              href={'/category'}
+              passHref
+              className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+              {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
+            </Link>
+          </div>
+          <CategoryGroup
+            currentCategory={currentCategory}
+            categories={categories}
+          />
+        </section>
+      )}
+
+      {tags && (
+        <section className='mt-4'>
+          <div className='text-sm py-2 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200'>
+            <div className='text-gray-600 dark:text-gray-200'>
+              <i className='mr-2 fas fa-tag' />
+              {locale.COMMON.TAGS}
+            </div>
+            <Link
+              href={'/tag'}
+              passHref
+              className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
+              {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
+            </Link>
+          </div>
+          <div className='p-2'>
+            <TagGroups tags={tags} currentTag={currentTag} />
+          </div>
+        </section>
+      )}
+    </>
+  )
+
+  return (
+    <div id='top-nav' className='z-40'>
+      <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />
+
+      {/* 导航栏 */}
+      <div
+        id='sticky-nav'
+        style={{ backdropFilter: 'blur(3px)' }}
+        className={
+          'top-0 duration-300 transition-all  shadow-none fixed bg-none dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform border-transparent dark:border-transparent'
+        }>
+        <div className='w-full flex justify-between items-center px-4 py-2'>
+          <div className='flex'>
+            <Logo {...props} />
+          </div>
+
+          {/* 右侧功能 */}
+          <div className='mr-1 flex justify-end items-center '>
+            <div className='hidden lg:flex'>
+              {' '}
+              <MenuListTop {...props} />
+            </div>
+            <div
+              onClick={toggleMenuOpen}
+              className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
+              {isOpen ? (
+                <i className='fas fa-times' />
+              ) : (
+                <i className='fas fa-bars' />
+              )}
+            </div>
+            {showSearchButton && <SearchButton />}
+          </div>
+        </div>
+      </div>
+
+      {/* 折叠侧边栏 */}
+      <SideBarDrawer isOpen={isOpen} onClose={toggleSideBarClose}>
+        <SideBar {...props} />
+      </SideBarDrawer>
+    </div>
+  )
+}
+
+export default Header

themes/hexo/components/Hero.js

@@ -66,7 +66,7 @@ const Hero = props => {
       <div className='text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full '>
         {/* 站点标题 */}
         <div className='font-black text-4xl md:text-5xl shadow-text'>
-          {siteConfig('TITLE')}
+          {siteInfo?.title || siteConfig('TITLE')}
         </div>
         {/* 站点欢迎语 */}
         <div className='mt-2 h-12 items-center text-center font-medium shadow-text text-lg'>

themes/hexo/components/Logo.js

@@ -1,11 +1,20 @@
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
-
+/**
+ * Logo
+ * 实际值支持文字
+ * @param {*} props
+ * @returns
+ */
 const Logo = props => {
+  const { siteInfo } = props
   return (
     <Link href='/' passHref legacyBehavior>
       <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
-        <div className='font-medium text-lg p-1.5 rounded dark:border-white dark:text-white menu-link transform duration-200'> {siteConfig('TITLE') }</div>
+        <div className='font-medium text-lg p-1.5 rounded dark:border-white dark:text-white menu-link transform duration-200'>
+          {' '}
+          {siteInfo?.title || siteConfig('TITLE')}
+        </div>
       </div>
     </Link>
   )

themes/hexo/components/MenuItemCollapse.js

@@ -29,13 +29,13 @@ export const MenuItemCollapse = props => {
   return (
     <>
       <div
-        className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray'
+        className='w-full px-8 py-3 dark:hover:bg-indigo-500  hover:bg-indigo-500 hover:text-white text-left dark:bg-hexo-black-gray'
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
             href={link?.to}
             target={link?.target}
-            className='font-extralight  flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
+            className=' font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
             <span className=' transition-all items-center duration-200'>
               {link?.icon && <i className={link.icon + ' mr-4'} />}
               {link?.name}
@@ -63,7 +63,7 @@ export const MenuItemCollapse = props => {
             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'>
+                className='dark:hover:bg-indigo-500 hover:bg-indigo-500 hover:text-white dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 tracking-widest transition-all duration-200  py-3 pr-6'>
                 <Link href={sLink.to} target={link?.target}>
                   <span className='text-sm ml-4 whitespace-nowrap'>
                     {link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}

themes/hexo/components/MenuItemDrop.js

@@ -1,6 +1,10 @@
 import Link from 'next/link'
 import { useState } from 'react'
-
+/**
+ * 支持二级展开的菜单
+ * @param {*} param0
+ * @returns
+ */
 export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -25,7 +29,7 @@ export const MenuItemDrop = ({ link }) => {
 
       {hasSubMenu && (
         <>
-          <div className='cursor-pointer  menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
+          <div className='cursor-pointer menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
             {link?.icon && <i className={link?.icon} />} {link?.name}
             <i
               className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
@@ -42,7 +46,7 @@ export const MenuItemDrop = ({ link }) => {
             return (
               <li
                 key={index}
-                className='cursor-pointer hover:bg-indigo-300 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
+                className='cursor-pointer hover:bg-indigo-500 hover:text-white tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
                 <Link href={sLink.to} target={link?.target}>
                   <span className='text-sm text-nowrap font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}

themes/hexo/components/MenuListSide.js

@@ -1,17 +1,41 @@
-import { useGlobal } from '@/lib/global'
 import { siteConfig } from '@/lib/config'
-import { MenuItemCollapse } from './MenuItemCollapse'
+import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-
-export const MenuListSide = (props) => {
+import { MenuItemCollapse } from './MenuItemCollapse'
+/**
+ * 侧拉抽屉菜单
+ * @param {*} props
+ * @returns
+ */
+export const MenuListSide = props => {
   const { customNav, customMenu } = props
   const { locale } = useGlobal()
 
   let links = [
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG) },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('HEXO_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('HEXO_MENU_TAG', null, CONFIG) }
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      to: '/archive',
+      show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      to: '/search',
+      show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-folder',
+      name: locale.COMMON.CATEGORY,
+      to: '/category',
+      show: siteConfig('HEXO_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      to: '/tag',
+      show: siteConfig('HEXO_MENU_TAG', null, CONFIG)
+    }
   ]
 
   if (customNav) {
@@ -34,8 +58,10 @@ export const MenuListSide = (props) => {
   }
 
   return (
-        <nav>
-            {links?.map((link, index) => <MenuItemCollapse key={index} link={link} />)}
-        </nav>
+    <nav>
+      {links?.map((link, index) => (
+        <MenuItemCollapse key={index} link={link} />
+      ))}
+    </nav>
   )
 }

themes/hexo/components/PostHeader.js

@@ -1,85 +0,0 @@
-import Link from 'next/link'
-import TagItemMini from './TagItemMini'
-import { useGlobal } from '@/lib/global'
-import NotionIcon from '@/components/NotionIcon'
-import LazyImage from '@/components/LazyImage'
-import { formatDateFmt } from '@/lib/utils/formatDate'
-import { siteConfig } from '@/lib/config'
-
-export default function PostHeader({ post, siteInfo }) {
-  const { locale, fullWidth } = useGlobal()
-
-  if (!post) {
-    return <></>
-  }
-
-  // 文章全屏隐藏标头
-  if (fullWidth) {
-    return <div className='my-8'/>
-  }
-
-  const headerImage = post?.pageCover ? post.pageCover : siteInfo?.pageCover
-
-  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' />{post.title}
-          </div>
-
-          <section className="flex-wrap shadow-text-md flex text-sm justify-center mt-4 text-white dark:text-gray-400 font-light leading-8">
-
-            <div className='flex justify-center dark:text-gray-200 text-opacity-70'>
-              {post?.type !== 'Page' && (
-                <>
-                  <Link
-                    href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
-                    passHref
-                    className="pl-1 mr-2 cursor-pointer hover:underline">
-
-                    {locale.COMMON.POST_TIME}: {post?.publishDay}
-
-                  </Link>
-                </>
-              )}
-              <div className="pl-1 mr-2">
-                {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedDay}
-              </div>
-            </div>
-
-            {JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && <div className="busuanzi_container_page_pv font-light mr-2">
-              <span className="mr-2 busuanzi_value_page_pv" />
-              {locale.COMMON.VIEWS}
-            </div>}
-          </section>
-
-            <div className='mt-4 mb-1'>
-                {post.tagItems && (
-                    <div className="flex justify-center flex-nowrap overflow-x-auto">
-                        {post.tagItems.map(tag => (
-                            <TagItemMini key={tag.name} tag={tag} />
-                        ))}
-                    </div>
-                )}
-            </div>
-        </div>
-      </header>
-    </div>
-  )
-}

themes/hexo/components/PostHero.js

@@ -0,0 +1,99 @@
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { formatDateFmt } from '@/lib/utils/formatDate'
+import Link from 'next/link'
+import TagItemMini from './TagItemMini'
+
+/**
+ * 文章详情页的Hero块
+ */
+export default function PostHero({ post, siteInfo }) {
+  const { locale, fullWidth } = useGlobal()
+
+  if (!post) {
+    return <></>
+  }
+
+  // 文章全屏隐藏标头
+  if (fullWidth) {
+    return <div className='my-8' />
+  }
+
+  const headerImage = post?.pageCover ? post.pageCover : siteInfo?.pageCover
+
+  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'>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />
+            )}
+            {post.title}
+          </div>
+
+          <section className='flex-wrap shadow-text-md flex text-sm justify-center mt-4 text-white dark:text-gray-400 font-light leading-8'>
+            <div className='flex justify-center dark:text-gray-200 text-opacity-70'>
+              {post?.type !== 'Page' && (
+                <>
+                  <Link
+                    href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
+                    passHref
+                    className='pl-1 mr-2 cursor-pointer hover:underline'>
+                    {locale.COMMON.POST_TIME}: {post?.publishDay}
+                  </Link>
+                </>
+              )}
+              <div className='pl-1 mr-2'>
+                {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedDay}
+              </div>
+            </div>
+
+            {JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && (
+              <div className='busuanzi_container_page_pv font-light mr-2'>
+                <span className='mr-2 busuanzi_value_page_pv' />
+                {locale.COMMON.VIEWS}
+              </div>
+            )}
+          </section>
+
+          <div className='mt-4 mb-1'>
+            {post.tagItems && (
+              <div className='flex justify-center flex-nowrap overflow-x-auto'>
+                {post.tagItems.map(tag => (
+                  <TagItemMini key={tag.name} tag={tag} />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </header>
+    </div>
+  )
+}

themes/hexo/components/SideBar.js

@@ -1,5 +1,5 @@
-import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
 import { useRouter } from 'next/router'
 import MenuGroupCard from './MenuGroupCard'
 import { MenuListSide } from './MenuListSide'
@@ -11,22 +11,33 @@ import { MenuListSide } from './MenuListSide'
  * @returns {JSX.Element}
  * @constructor
  */
-const SideBar = (props) => {
+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 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>
   )
 }
 

themes/hexo/components/TopNav.js

@@ -1,159 +0,0 @@
-import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import CategoryGroup from './CategoryGroup'
-import Logo from './Logo'
-import SearchDrawer from './SearchDrawer'
-import TagGroups from './TagGroups'
-import { MenuListTop } from './MenuListTop'
-import throttle from 'lodash.throttle'
-import SideBar from './SideBar'
-import SideBarDrawer from './SideBarDrawer'
-import { siteConfig } from '@/lib/config'
-import SearchButton from './SearchButton'
-import CONFIG from '../config'
-import { useRouter } from 'next/router'
-
-let windowTop = 0
-
-/**
- * 顶部导航
- * @param {*} param0
- * @returns
- */
-const TopNav = props => {
-  const searchDrawer = useRef()
-  const { tags, currentTag, categories, currentCategory } = props
-  const { locale } = useGlobal()
-  const router = useRouter()
-  const [isOpen, changeShow] = useState(false)
-  const showSearchButton = siteConfig('HEXO_MENU_SEARCH', false, CONFIG)
-
-  const toggleMenuOpen = () => {
-    changeShow(!isOpen)
-  }
-
-  const toggleSideBarClose = () => {
-    changeShow(false)
-  }
-
-  // 监听滚动
-  useEffect(() => {
-    window.addEventListener('scroll', topNavStyleHandler)
-    router.events.on('routeChangeComplete', topNavStyleHandler)
-    topNavStyleHandler()
-    return () => {
-      router.events.off('routeChangeComplete', topNavStyleHandler)
-      window.removeEventListener('scroll', topNavStyleHandler)
-    }
-  }, [])
-
-  const throttleMs = 200
-
-  const topNavStyleHandler = useCallback(throttle(() => {
-    const scrollS = window.scrollY
-    const nav = document.querySelector('#sticky-nav')
-    // 首页和文章页会有头图
-    const header = document.querySelector('#header')
-    // 导航栏和头图是否重叠
-    const scrollInHeader = header && (scrollS < 10 || scrollS < header?.clientHeight - 50) // 透明导航条的条件
-
-    // const textWhite = header && scrollInHeader
-
-    if (scrollInHeader) {
-      nav && nav.classList.replace('bg-white', 'bg-none')
-      nav && nav.classList.replace('border', 'border-transparent')
-      nav && nav.classList.replace('drop-shadow-md', 'shadow-none')
-      nav && nav.classList.replace('dark:bg-hexo-black-gray', 'transparent')
-    } else {
-      nav && nav.classList.replace('bg-none', 'bg-white')
-      nav && nav.classList.replace('border-transparent', 'border')
-      nav && nav.classList.replace('shadow-none', 'drop-shadow-md')
-      nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
-    }
-
-    if (scrollInHeader) {
-      nav && nav.classList.replace('text-black', 'text-white')
-    } else {
-      nav && nav.classList.replace('text-white', 'text-black')
-    }
-
-    // 导航栏不在头图里，且页面向下滚动一定程度 隐藏导航栏
-    const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight + 100)
-    if (!showNav) {
-      nav && nav.classList.replace('top-0', '-top-20')
-      windowTop = scrollS
-    } else {
-      nav && nav.classList.replace('-top-20', 'top-0')
-      windowTop = scrollS
-    }
-  }, throttleMs)
-  )
-
-  const searchDrawerSlot = <>
-        {categories && (
-            <section className='mt-8'>
-                <div className='text-sm flex flex-nowrap justify-between font-light px-2'>
-                    <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
-                    <Link
-                        href={'/category'}
-                        passHref
-                        className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
-
-                        {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
-
-                    </Link>
-                </div>
-                <CategoryGroup currentCategory={currentCategory} categories={categories} />
-            </section>
-        )}
-
-        {tags && (
-            <section className='mt-4'>
-                <div className='text-sm py-2 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200'>
-                    <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-tag' />{locale.COMMON.TAGS}</div>
-                    <Link
-                        href={'/tag'}
-                        passHref
-                        className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
-
-                        {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
-
-                    </Link>
-                </div>
-                <div className='p-2'>
-                    <TagGroups tags={tags} currentTag={currentTag} />
-                </div>
-            </section>
-        )}
-    </>
-
-  return (<div id='top-nav' className='z-40'>
-        <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />
-
-        {/* 导航栏 */}
-        <div id='sticky-nav' style={{ backdropFilter: 'blur(3px)' }} className={'top-0 duration-300 transition-all  shadow-none fixed bg-none dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform border-transparent dark:border-transparent'}>
-            <div className='w-full flex justify-between items-center px-4 py-2'>
-                <div className='flex'>
-                    <Logo {...props} />
-                </div>
-
-                {/* 右侧功能 */}
-                <div className='mr-1 flex justify-end items-center '>
-                    <div className='hidden lg:flex'> <MenuListTop {...props} /></div>
-                    <div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
-                        {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
-                    </div>
-                    {showSearchButton && <SearchButton />}
-                </div>
-            </div>
-        </div>
-
-        {/* 折叠侧边栏 */}
-        <SideBarDrawer isOpen={isOpen} onClose={toggleSideBarClose}>
-            <SideBar {...props} />
-        </SideBarDrawer>
-    </div>)
-}
-
-export default TopNav

themes/hexo/index.js

@@ -19,9 +19,10 @@ import BlogPostListPage from './components/BlogPostListPage'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import Card from './components/Card'
 import Footer from './components/Footer'
+import Header from './components/Header'
 import Hero from './components/Hero'
 import JumpToCommentButton from './components/JumpToCommentButton'
-import PostHeader from './components/PostHeader'
+import PostHero from './components/PostHero'
 import RightFloatArea from './components/RightFloatArea'
 import SearchNav from './components/SearchNav'
 import SideRight from './components/SideRight'
@@ -29,7 +30,6 @@ import SlotBar from './components/SlotBar'
 import TagItemMini from './components/TagItemMini'
 import TocDrawer from './components/TocDrawer'
 import TocDrawerButton from './components/TocDrawerButton'
-import TopNav from './components/TopNav'
 import CONFIG from './config'
 import { Style } from './style'
 
@@ -54,7 +54,7 @@ const LayoutBase = props => {
 
   const router = useRouter()
   const headerSlot = post ? (
-    <PostHeader {...props} />
+    <PostHero {...props} />
   ) : router.route === '/' &&
     siteConfig('HEXO_HOME_BANNER_ENABLE', null, CONFIG) ? (
     <Hero {...props} />
@@ -89,7 +89,7 @@ const LayoutBase = props => {
         <Style />
 
         {/* 顶部导航 */}
-        <TopNav {...props} />
+        <Header {...props} />
 
         {/* 顶部嵌入 */}
         <Transition

themes/matery/components/BlogPostCard.js

@@ -40,7 +40,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                                 className="h-full w-full group-hover:scale-125 group-hover:brightness-50 brightness-90 rounded-t-md transform object-cover duration-500"
                             />
                             <h2 className='absolute bottom-0 left-0 text-white p-6 text-2xl replace break-words w-full shadow-text'>
-                                <NotionIcon icon={post.pageIcon} />{post.title}
+                                {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
                             </h2>
                         </div>
                     </Link>

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/Catalog.js

@@ -78,7 +78,7 @@ const Catalog = ({ toc }) => {
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-green-500 underline overflow-ellipsis truncate'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-green-500 underline' : ''}`}
               >
                 {tocItem.text}
               </span>

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/Header.js

@@ -0,0 +1,190 @@
+import SideBarDrawer from '@/components/SideBarDrawer'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import throttle from 'lodash.throttle'
+import Link from 'next/link'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import CONFIG from '../config'
+import CategoryGroup from './CategoryGroup'
+import Logo from './Logo'
+import { MenuListTop } from './MenuListTop'
+import SearchButton from './SearchButton'
+import SearchDrawer from './SearchDrawer'
+import SideBar from './SideBar'
+import TagGroups from './TagGroups'
+
+let windowTop = 0
+
+/**
+ * 顶部导航(页头)
+ * @param {*} param0
+ * @returns
+ */
+const Header = props => {
+  const { tags, currentTag, categories, currentCategory } = props
+  const { locale } = useGlobal()
+  const searchDrawer = useRef()
+  const { isDarkMode } = useGlobal()
+  const throttleMs = 200
+  const showSearchButton = siteConfig('MATERY_MENU_SEARCH', false, CONFIG)
+
+  const scrollTrigger = useCallback(
+    throttle(() => {
+      requestAnimationFrame(() => {
+        const scrollS = window.scrollY
+        const nav = document.querySelector('#sticky-nav')
+        const header = document.querySelector('#header')
+        const showNav =
+          scrollS <= windowTop ||
+          scrollS < 5 ||
+          (header && scrollS <= header.clientHeight * 2) // 非首页无大图时影藏顶部 滚动条置顶时隐藏// 非首页无大图时影藏顶部 滚动条置顶时隐藏
+        // 是否将导航栏透明
+        const navTransparent = header && scrollS < 300 // 透明导航条的条件
+
+        if (navTransparent) {
+          nav && nav.classList.replace('bg-indigo-700', 'bg-none')
+          nav && nav.classList.replace('text-black', 'text-white')
+          nav && nav.classList.replace('shadow-xl', 'shadow-none')
+          nav && nav.classList.replace('dark:bg-hexo-black-gray', 'transparent')
+        } else {
+          nav && nav.classList.replace('bg-none', 'bg-indigo-700')
+          nav && nav.classList.replace('text-white', 'text-black')
+          nav && nav.classList.replace('shadow-none', 'shadow-xl')
+          nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
+        }
+
+        if (!showNav) {
+          nav && nav.classList.replace('top-0', '-top-20')
+          windowTop = scrollS
+        } else {
+          nav && nav.classList.replace('-top-20', 'top-0')
+          windowTop = scrollS
+        }
+        navDarkMode()
+      })
+    }, throttleMs)
+  )
+
+  const navDarkMode = () => {
+    const nav = document.getElementById('sticky-nav')
+    const header = document.querySelector('#header')
+    if (!isDarkMode && nav && header) {
+      if (window.scrollY < header.clientHeight) {
+        nav?.classList?.add('dark')
+      } else {
+        nav?.classList?.remove('dark')
+      }
+    }
+  }
+
+  // 监听滚动
+  useEffect(() => {
+    scrollTrigger()
+
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  }, [])
+
+  const [isOpen, changeShow] = useState(false)
+
+  const toggleMenuOpen = () => {
+    changeShow(!isOpen)
+  }
+
+  const toggleMenuClose = () => {
+    changeShow(false)
+  }
+
+  const searchDrawerSlot = (
+    <>
+      {categories && (
+        <section className='mt-8'>
+          <div className='text-sm flex flex-nowrap justify-between font-light px-2'>
+            <div className='text-gray-600 dark:text-gray-200'>
+              <i className='mr-2 fas fa-th-list' />
+              {locale.COMMON.CATEGORY}
+            </div>
+            <Link
+              href={'/category'}
+              passHref
+              className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+              {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
+            </Link>
+          </div>
+          <CategoryGroup
+            currentCategory={currentCategory}
+            categories={categories}
+          />
+        </section>
+      )}
+
+      {tags && (
+        <section className='mt-4'>
+          <div className='text-sm py-2 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200'>
+            <div className='text-gray-600 dark:text-gray-200'>
+              <i className='mr-2 fas fa-tag' />
+              {locale.COMMON.TAGS}
+            </div>
+            <Link
+              href={'/tag'}
+              passHref
+              className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
+              {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
+            </Link>
+          </div>
+          <div className='p-2'>
+            <TagGroups tags={tags} currentTag={currentTag} />
+          </div>
+        </section>
+      )}
+    </>
+  )
+
+  return (
+    <div id='top-nav'>
+      <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />
+      {/* 导航栏 */}
+      <div
+        id='sticky-nav'
+        className={
+          'flex justify-center top-0 shadow-none fixed bg-none dark:bg-hexo-black-gray text-gray-200 w-full z-30 transform transition-all duration-200'
+        }>
+        <div className='w-full max-w-6xl flex justify-between items-center px-4 py-2'>
+          {/* 左侧功能 */}
+          <div className='justify-start items-center block lg:hidden '>
+            <div
+              onClick={toggleMenuOpen}
+              className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
+              {isOpen ? (
+                <i className='fas fa-times' />
+              ) : (
+                <i className='fas fa-bars' />
+              )}
+            </div>
+          </div>
+
+          <div className='flex'>
+            <Logo {...props} />
+          </div>
+
+          {/* 右侧功能 */}
+          <div className='mr-1 justify-end items-center flex'>
+            <div className='hidden lg:flex'>
+              {' '}
+              <MenuListTop {...props} />
+            </div>
+            {showSearchButton && <SearchButton />}
+          </div>
+        </div>
+      </div>
+
+      <SideBarDrawer isOpen={isOpen} onClose={toggleMenuClose}>
+        <SideBar {...props} />
+      </SideBarDrawer>
+    </div>
+  )
+}
+
+export default Header

themes/matery/components/Hero.js

@@ -9,7 +9,8 @@ import CONFIG from '../config'
 let wrapperTop = 0
 
 /**
- *
+ * 首页英雄区
+ * 是一张大图，带个居中按钮
  * @returns 头图
  */
 const Hero = props => {
@@ -17,7 +18,6 @@ const Hero = props => {
   const { siteInfo } = props
   const { locale } = useGlobal()
   const GREETING_WORDS = siteConfig('GREETING_WORDS').split(',')
-
   useEffect(() => {
     updateHeaderHeight()
     if (!typed && window && document.getElementById('typed')) {
@@ -61,7 +61,7 @@ const Hero = props => {
       <div className='text-white absolute flex flex-col h-full items-center justify-center w-full '>
         {/* 站点标题 */}
         <div className='text-4xl md:text-5xl shadow-text'>
-          {siteConfig('TITLE')}
+          {siteInfo?.title || siteConfig('TITLE')}
         </div>
         {/* 站点欢迎语 */}
         <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
@@ -72,7 +72,7 @@ const Hero = props => {
           onClick={() => {
             window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
           }}
-          className='mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl z-40'>
+          className='glassmorphism mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl z-40'>
           <i className='animate-bounce fas fa-angle-double-down' />{' '}
           <span>
             {siteConfig('MATERY_SHOW_START_READING', null, CONFIG) &&

themes/matery/components/Logo.js

@@ -1,11 +1,20 @@
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
-
+/**
+ * 站点logo
+ * 这里默认只支持纯文字
+ * @param {*} props
+ * @returns
+ */
 const Logo = props => {
+  const { siteInfo } = props
   return (
     <Link href='/' passHref legacyBehavior>
       <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
-        <div className=' text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'> {siteConfig('TITLE') }</div>
+        <div className=' text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'>
+          {' '}
+          {siteInfo?.title || siteConfig('TITLE')}
+        </div>
       </div>
     </Link>
   )

themes/matery/components/MenuItemCollapse.js

@@ -72,7 +72,7 @@ export const MenuItemCollapse = ({ link }) => {
             return (
               <div
                 key={index}
-                className='cursor-pointer whitespace-nowrap dark:text-gray-200  w-full font-extralight dark:bg-black text-left px-5 justify-start bg-gray-100  hover:bg-indigo-700 hover:text-white dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
+                className='cursor-pointer whitespace-nowrap dark:text-gray-200  w-full font-extralight dark:bg-black text-left px-5 justify-start bg-gray-100  hover:bg-indigo-500 dark:hover:bg-indigo-500 hover:text-white tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
                 <Link href={sLink.to} target={link?.target}>
                   <span className='text-sm'>
                     <i className={`${sLink.icon} w-4 mr-3 text-center`} />

themes/matery/components/MenuItemDrop.js

@@ -1,6 +1,9 @@
 import Link from 'next/link'
 import { useState } from 'react'
-
+/**
+ * 菜单
+ * 支持二级展开的菜单
+ */
 export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -42,7 +45,7 @@ export const MenuItemDrop = ({ link }) => {
             return (
               <li
                 key={index}
-                className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
+                className='cursor-pointer hover:bg-indigo-500 text-gray-900 hover:text-white tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
                 <Link href={sLink.to} target={link?.target}>
                   <span className='text-sm text-nowrap font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}

themes/matery/components/MenuListTop.js

@@ -1,17 +1,42 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { MenuItemDrop } from './MenuItemDrop'
-import { siteConfig } from '@/lib/config'
-
-export const MenuListTop = (props) => {
+/**
+ * 菜单列表
+ * 顶部导航栏用
+ * @param {*} props
+ * @returns
+ */
+export const MenuListTop = props => {
   const { customNav, customMenu } = props
   const { locale } = useGlobal()
 
   let links = [
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG) },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MATERY_MENU_TAG', null, CONFIG) }
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      to: '/archive',
+      show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      to: '/search',
+      show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-folder',
+      name: locale.COMMON.CATEGORY,
+      to: '/category',
+      show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      to: '/tag',
+      show: siteConfig('MATERY_MENU_TAG', null, CONFIG)
+    }
   ]
 
   if (customNav) {
@@ -29,7 +54,9 @@ export const MenuListTop = (props) => {
 
   return (
     <nav id='nav' className='leading-8 flex justify-center  font-light w-full'>
-      {links?.map((link, index) => <MenuItemDrop key={index} link={link}/>)}
+      {links?.map((link, index) => (
+        <MenuItemDrop key={index} link={link} />
+      ))}
     </nav>
   )
 }

themes/matery/components/PostHeader.js

@@ -1,19 +0,0 @@
-import LazyImage from '@/components/LazyImage'
-import NotionIcon from '@/components/NotionIcon'
-
-/**
- * 文章背景图
- */
-export default function PostHeader({ post, siteInfo }) {
-  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">
-                <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>
-  )
-}

themes/matery/components/PostHero.js

@@ -0,0 +1,32 @@
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 文章背景图
+ */
+export default function PostHero({ post, siteInfo }) {
+  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
+        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/components/SearchButton.js

@@ -0,0 +1,34 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import { useMateryGlobal } from '..'
+
+/**
+ * 搜索按钮
+ * @returns
+ */
+export default function SearchButton(props) {
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const { searchModal } = useMateryGlobal()
+
+  function handleSearch() {
+    if (siteConfig('ALGOLIA_APP_ID')) {
+      searchModal.current.openSearch()
+    } else {
+      router.push('/search')
+    }
+  }
+
+  return (
+    <>
+      <div
+        onClick={handleSearch}
+        title={locale.NAV.SEARCH}
+        alt={locale.NAV.SEARCH}
+        className='cursor-pointer dark:text-white hover:bg-black hover:bg-opacity-10 rounded-full w-10 h-10 flex justify-center items-center duration-200 transition-all'>
+        <i title={locale.NAV.SEARCH} className='fa-solid fa-magnifying-glass' />
+      </div>
+    </>
+  )
+}

themes/matery/components/TopNav.js

@@ -1,164 +0,0 @@
-import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import CategoryGroup from './CategoryGroup'
-import Logo from './Logo'
-import SearchDrawer from './SearchDrawer'
-import TagGroups from './TagGroups'
-import { MenuListTop } from './MenuListTop'
-import SideBarDrawer from '@/components/SideBarDrawer'
-import SideBar from './SideBar'
-import throttle from 'lodash.throttle'
-
-let windowTop = 0
-
-/**
- * 顶部导航
- * @param {*} param0
- * @returns
- */
-const TopNav = props => {
-  const { tags, currentTag, categories, currentCategory } = props
-  const { locale } = useGlobal()
-  const searchDrawer = useRef()
-  const { isDarkMode } = useGlobal()
-  const throttleMs = 200
-  const scrollTrigger = useCallback(throttle(() => {
-    requestAnimationFrame(() => {
-      const scrollS = window.scrollY
-      const nav = document.querySelector('#sticky-nav')
-      const header = document.querySelector('#header')
-      const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight * 2)// 非首页无大图时影藏顶部 滚动条置顶时隐藏// 非首页无大图时影藏顶部 滚动条置顶时隐藏
-      // 是否将导航栏透明
-      const navTransparent = header && scrollS < 300 // 透明导航条的条件
-
-      if (navTransparent) {
-        nav && nav.classList.replace('bg-indigo-700', 'bg-none')
-        nav && nav.classList.replace('text-black', 'text-white')
-        nav && nav.classList.replace('shadow-xl', 'shadow-none')
-        nav && nav.classList.replace('dark:bg-hexo-black-gray', 'transparent')
-      } else {
-        nav && nav.classList.replace('bg-none', 'bg-indigo-700')
-        nav && nav.classList.replace('text-white', 'text-black')
-        nav && nav.classList.replace('shadow-none', 'shadow-xl')
-        nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
-      }
-
-      if (!showNav) {
-        nav && nav.classList.replace('top-0', '-top-20')
-        windowTop = scrollS
-      } else {
-        nav && nav.classList.replace('-top-20', 'top-0')
-        windowTop = scrollS
-      }
-      navDarkMode()
-    })
-  }, throttleMs))
-
-  const navDarkMode = () => {
-    const nav = document.getElementById('sticky-nav')
-    const header = document.querySelector('#header')
-    if (!isDarkMode && nav && header) {
-      if (window.scrollY < header.clientHeight) {
-        nav?.classList?.add('dark')
-      } else {
-        nav?.classList?.remove('dark')
-      }
-    }
-  }
-
-  // 监听滚动
-  useEffect(() => {
-    scrollTrigger()
-
-    window.addEventListener('scroll', scrollTrigger)
-    return () => {
-      window.removeEventListener('scroll', scrollTrigger)
-    }
-  }, [])
-
-  const [isOpen, changeShow] = useState(false)
-
-  const toggleMenuOpen = () => {
-    changeShow(!isOpen)
-  }
-
-  const toggleMenuClose = () => {
-    changeShow(false)
-  }
-
-  const searchDrawerSlot = <>
-        {categories && (
-            <section className='mt-8'>
-                <div className='text-sm flex flex-nowrap justify-between font-light px-2'>
-                    <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
-                    <Link
-                        href={'/category'}
-                        passHref
-                        className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
-
-                        {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
-
-                    </Link>
-                </div>
-                <CategoryGroup currentCategory={currentCategory} categories={categories} />
-            </section>
-        )}
-
-        {tags && (
-            <section className='mt-4'>
-                <div className='text-sm py-2 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200'>
-                    <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-tag' />{locale.COMMON.TAGS}</div>
-                    <Link
-                        href={'/tag'}
-                        passHref
-                        className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
-
-                        {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
-
-                    </Link>
-                </div>
-                <div className='p-2'>
-                    <TagGroups tags={tags} currentTag={currentTag} />
-                </div>
-            </section>
-        )}
-    </>
-
-  return (
-      <div id='top-nav'>
-            <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />
-            {/* 导航栏 */}
-            <div id='sticky-nav' className={'flex justify-center top-0 shadow-none fixed bg-none dark:bg-hexo-black-gray text-gray-200 w-full z-30 transform transition-all duration-200'}>
-                <div className='w-full max-w-6xl flex justify-between items-center px-4 py-2'>
-                    {/* 左侧功能 */}
-                    <div className='justify-start items-center block lg:hidden '>
-                        <div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
-                            {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
-                        </div>
-                    </div>
-
-                    <div className='flex'>
-                        <Logo {...props} />
-                    </div>
-
-                    {/* 右侧功能 */}
-                    <div className='mr-1 justify-end items-center '>
-                        <div className='hidden lg:flex'> <MenuListTop {...props} /></div>
-                        <div className='block lg:hidden'><Link href={'/search'} passHref>
-                            <i className='fas fa-search' />
-                        </Link></div>
-                    </div>
-                </div>
-
-            </div>
-
-            <SideBarDrawer isOpen={isOpen} onClose={toggleMenuClose}>
-                <SideBar {...props} />
-            </SideBarDrawer>
-
-        </div>
-  )
-}
-
-export default TopNav

themes/matery/index.js

@@ -1,36 +1,48 @@
-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 dynamic from 'next/dynamic'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { createContext, useContext, useEffect, useRef } 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 Header from './components/Header'
+import Hero from './components/Hero'
+import JumpToCommentButton from './components/JumpToCommentButton'
+import PostHero from './components/PostHero'
+import RightFloatButtons from './components/RightFloatButtons'
+import SearchNave from './components/SearchNav'
+import TagItemMiddle from './components/TagItemMiddle'
+import CONFIG from './config'
 import { Style } from './style'
-import replaceSearchResult from '@/components/Mark'
-import { siteConfig } from '@/lib/config'
-import { isBrowser } from '@/lib/utils'
+
+const AlgoliaSearchModal = dynamic(
+  () => import('@/components/AlgoliaSearchModal'),
+  { ssr: false }
+)
+
+// 主题全局状态
+const ThemeGlobalMatery = createContext()
+export const useMateryGlobal = () => useContext(ThemeGlobalMatery)
 
 /**
  * 基础布局
@@ -41,74 +53,76 @@ 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 ? (
+      <PostHero {...props} />
+    ) : null
 
   const floatRightBottom = post ? <JumpToCommentButton /> : null
 
+  // Algolia搜索框
+  const searchModal = useRef(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`}>
+    <ThemeGlobalMatery.Provider value={{ searchModal }}>
+      <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/>
+        {/* 顶部导航栏 */}
+        <Header {...props} />
 
-            {/* 顶部导航栏 */}
-            <TopNav {...props} />
+        {/* 顶部嵌入 */}
+        {headerSlot}
 
-            {/* 顶部嵌入 */}
-            <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}
-            >
-                {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>
 
-            <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`}>
+            {children}
+          </div>
+        </main>
 
-                <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 className='bottom-4 -left-14 fixed justify-end z-40'>
+          <Live2D />
         </div>
+
+        {/* 右下角悬浮 */}
+        <RightFloatButtons {...props} floatRightBottom={floatRightBottom} />
+
+        {/* 全文搜索 */}
+        <AlgoliaSearchModal cRef={searchModal} {...props} />
+
+        {/* 页脚 */}
+        <Footer title={siteConfig('TITLE')} />
+      </div>
+    </ThemeGlobalMatery.Provider>
   )
 }
 
@@ -118,8 +132,8 @@ const LayoutBase = props => {
  * @param {*} props
  * @returns
  */
-const LayoutIndex = (props) => {
-  return <LayoutPostList {...props}/>
+const LayoutIndex = props => {
+  return <LayoutPostList {...props} />
 }
 
 /**
@@ -127,11 +141,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 +176,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 +197,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 +228,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 +320,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 +331,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 +355,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 +388,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
 }

themes/matery/style.js

@@ -5,27 +5,54 @@
  * @returns
  */
 const Style = () => {
-  return <style jsx global>{`
-    // 底色
-    body{
-        background-color: #f5f5f5
-    }
-    .dark body{
+  return (
+    <style jsx global>{`
+      // 底色
+      body {
+        background-color: #f5f5f5;
+      }
+      .dark body {
         background-color: black;
-    }
+      }
 
-    /* 设置了从上到下的渐变黑色 */
-    #theme-matery .header-cover::before {
-        content: "";
+      /* 设置了从上到下的渐变黑色 */
+      #theme-matery .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%);
-    }
-    
-  `}</style>
+        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%
+        );
+      }
+
+      // 自定义滚动条
+      ::-webkit-scrollbar {
+        width: 5px;
+        height: 5px;
+      }
+
+      ::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background-color: #4338ca;
+      }
+
+      * {
+        scrollbar-width: thin;
+        scrollbar-color: #4338ca transparent;
+      }
+    `}</style>
+  )
 }
 
 export { Style }

themes/medium/components/ArticleInfo.js

@@ -13,7 +13,7 @@ export default function ArticleInfo(props) {
 
   return (<>
         {/* title */}
-        <h1 className="text-3xl pt-12  dark:text-gray-300"><NotionIcon icon={post?.pageIcon} />{post?.title}</h1>
+        <h1 className="text-3xl pt-12  dark:text-gray-300">{siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post?.title}</h1>
 
         {/* meta */}
         <section className="py-2 items-center text-sm  px-1">

themes/medium/components/BlogPostCard.js

@@ -35,7 +35,7 @@ const BlogPostCard = ({ post, showSummary }) => {
                         {siteConfig('MEDIUM_POST_LIST_COVER', null, CONFIG) && <div className='w-full max-h-96 object-cover overflow-hidden mb-2'>
                             <LazyImage src={post.pageCoverThumbnail} style={post.pageCoverThumbnail ? {} : { height: '0px' }} className='w-full max-h-96 object-cover hover:scale-125 duration-150' />
                         </div>}
-                        <NotionIcon icon={post.pageIcon} />{post.title}
+                        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
                     </h2>
 
                 </Link>

themes/medium/components/BottomMenuBar.js

@@ -4,7 +4,7 @@ import JumpToTopButton from './JumpToTopButton'
 
 export default function BottomMenuBar ({ post, className }) {
   const { tocVisible, changeTocVisible } = useMediumGlobal()
-  const showTocBotton = post?.toc?.length > 0
+  const showTocButton = post?.toc?.length > 0
 
   const toggleToc = () => {
     changeTocVisible(!tocVisible)
@@ -18,13 +18,13 @@ export default function BottomMenuBar ({ post, className }) {
             <i className='fas fa-search'/>
           </div>
         </Link>
-        <div className='flex w-full items-center justify-center cursor-pointer'>
+        <div className='flex w-full items-center justify-center cursor-pointer z-20'>
           <JumpToTopButton/>
         </div>
-        {showTocBotton && <div onClick={toggleToc} className='flex w-full items-center justify-center cursor-pointer'>
+        {showTocButton && <div onClick={toggleToc} className='flex w-full items-center justify-center cursor-pointer z-30'>
           <i className='fas fa-list-ol ' />
         </div>}
-        { !showTocBotton && <Link href='/' passHref legacyBehavior>
+        { !showTocButton && <Link href='/' passHref legacyBehavior>
           <div className='flex w-full items-center justify-center cursor-pointer'>
             <i className='fas fa-home' />
           </div>

themes/medium/components/Catalog.js

@@ -76,7 +76,7 @@ const Catalog = ({ toc }) => {
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-green-500 underline'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-green-500 underline' : ''}`}
               >
                 {tocItem.text}
               </span>

themes/medium/index.js

@@ -46,11 +46,24 @@ export const useMediumGlobal = () => useContext(ThemeGlobalMedium)
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, showInfoCard = true, slotRight, notice } = props
+  const { children, showInfoCard = true, post, notice } = props
   const { locale } = useGlobal()
   const router = useRouter()
   const [tocVisible, changeTocVisible] = useState(false)
   const { onLoading, fullWidth } = useGlobal()
+  const [slotRight, setSlotRight] = useState(null);
+
+  useEffect(()=> {
+    if (post?.toc?.length > 0) {
+      setSlotRight(
+        <div key={locale.COMMON.TABLE_OF_CONTENTS}>
+          <Catalog toc={post?.toc} />
+        </div>
+      );
+    } else {
+      setSlotRight(null);
+    }
+  },[post])
 
   const slotTop = <BlogPostBar {...props} />
 
@@ -97,7 +110,7 @@ const LayoutBase = props => {
                     {/* 桌面端右侧 */}
                     {fullWidth
                       ? null
-                      : <div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${siteConfig('MEDIUM_RIGHT_PANEL_DARK', null, CONFIG) ? 'bg-hexo-black-gray dark' : ''}`}>
+                      : <div className={`hidden xl:block border-l dark:border-transparent w-80 flex-shrink-0 relative z-10 ${siteConfig('MEDIUM_RIGHT_PANEL_DARK', null, CONFIG) ? 'bg-hexo-black-gray dark' : ''}`}>
                             <div className='py-14 px-6 sticky top-0'>
                                 <Tabs>
                                     {slotRight}
@@ -173,7 +186,7 @@ const LayoutSlug = props => {
   }, [post])
 
   return (
-        <div showInfoCard={true} slotRight={slotRight} {...props} >
+        <div {...props} >
             {/* 文章锁 */}
             {lock && <ArticleLock validPassword={validPassword} />}
 

themes/movie/components/BlogPostCard.js

@@ -40,7 +40,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
           </div>
           {/* 阴影遮罩 */}
           <h2 className='absolute bottom-10 px-6 transition-all duration-200 text-white text-2xl font-semibold break-words shadow-text z-20'>
-            <NotionIcon icon={post.pageIcon} />
+            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}
             {post.title}
           </h2>
 

themes/movie/components/Title.js

@@ -12,7 +12,7 @@ export const Title = (props) => {
   const description = post?.description || siteConfig('AUTHOR')
 
   return <div className="text-center px-6 py-12 mb-6 bg-gray-100 dark:bg-hexo-black-gray dark:border-hexo-black-gray border-b">
-        <h1 className="text-xl md:text-4xl pb-4"><NotionIcon icon={post?.pageIcon} />{title}</h1>
+        <h1 className="text-xl md:text-4xl pb-4">{siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{title}</h1>
         <p className="leading-loose text-gray-dark">
             {description}
         </p>

themes/nav/components/BlogPostCard.js

@@ -14,7 +14,7 @@ const BlogPostCard = ({ post, className }) => {
     <Link href={`${url}`} target={(checkContainHttp(post.slug) ? '_blank' : '_self')} passHref>
         <div key={post.id} className={`${className} h-full rounded-2xl p-4 dark:bg-neutral-800 cursor-pointer bg-white hover:bg-white dark:hover:bg-gray-800 ${currentSelected ? 'bg-green-50 text-green-500' : ''}`}>
                 <div className="stack-entry w-full flex space-x-3 select-none dark:text-neutral-200">
-                    <NotionIcon icon={pageIcon} size='10' className='text-6xl w-11 h-11 mx-1 my-0 flex-none' />
+                    {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={pageIcon} size='10' className='text-6xl w-11 h-11 mx-1 my-0 flex-none' />}
                     <div className="stack-comment flex-auto">
                         <p className="title font-bold">{post.title}</p>
                         <p className="description font-normal">{post.summary ? post.summary : '暂无简介'}</p>

themes/nav/components/Catalog.js

@@ -74,7 +74,7 @@ const Catalog = ({ post }) => {
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-gray-500 underline'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-gray-500 underline' : ''}`}
               >
                 {tocItem.text}
               </span>

themes/nav/index.js

@@ -240,7 +240,7 @@ const LayoutSlug = (props) => {
               {!lock && <div id='container'>
 
                   {/* title */}
-                  <h1 className="text-3xl pt-4 md:pt-12  dark:text-gray-300"><NotionIcon icon={post?.pageIcon} />{post?.title}</h1>
+                  <h1 className="text-3xl pt-4 md:pt-12  dark:text-gray-300">{siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post?.title}</h1>
 
                   {/* Notion文章主体 */}
                   {post && (<section id="article-wrapper" className="px-1">

themes/next/components/ArticleDetail.js

@@ -51,7 +51,7 @@ export default function ArticleDetail(props) {
 
                     {/* title */}
                     <div className=" text-center font-bold text-3xl text-black dark:text-white font-serif pt-6">
-                        <NotionIcon icon={post.pageIcon} />{post.title}
+                        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
                     </div>
 
                     {/* meta */}

themes/next/components/BlogPostCard.js

@@ -40,7 +40,7 @@ const BlogPostCard = ({ post, index, showSummary }) => {
             passHref
             className={`cursor-pointer text-3xl ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
 
-            <NotionIcon icon={post.pageIcon} /> <span className='menu-link'>{post.title}</span>
+            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />} <span className='menu-link'>{post.title}</span>
 
           </Link>
 

themes/next/components/Toc.js

@@ -74,7 +74,7 @@ const Toc = ({ toc }) => {
               className={`notion-table-of-contents-item duration-300 transform font-light
               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-400 underline'}`}>
+              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }} className={`truncate ${activeSection === id ? ' font-bold text-red-400 underline' : ''}`}>
                 {tocItem.text}
               </span>
             </a>

themes/nobelium/components/ArticleInfo.js

@@ -14,7 +14,7 @@ export const ArticleInfo = (props) => {
         <div>
 
             <h1 className="font-bold text-3xl text-black dark:text-white">
-                <NotionIcon icon={post?.pageIcon} />{post?.title}
+                {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post?.title}
             </h1>
 
             {post?.type !== 'Page' && <>