Merge branch 'main' of https://github.com/tangly1024/NotionNext

actions-user · actions-user · commit f1e303d08106 · 2024-05-10T00:32:08.000Z
diff --git a/components/GlobalHead.js b/components/GlobalHead.js
@@ -6,18 +6,18 @@ import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 
 /**
- * 页面的Head头，通常有用于SEO
+ * 页面的Head头，有用于SEO
  * @param {*} param0
  * @returns
  */
 const GlobalHead = props => {
-  const { children, siteInfo, post } = props
+  const { children, siteInfo, post, NOTION_CONFIG } = props
   let url = siteConfig('PATH')?.length
     ? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}`
     : siteConfig('LINK')
   let image
   const router = useRouter()
-  const meta = getSEOMeta(props, router, useGlobal())
+  const meta = getSEOMeta(props, router, useGlobal()?.locale)
   if (meta) {
     url = `${url}/${meta.slug}`
     image = meta.image || '/bg_image.jpg'
@@ -29,7 +29,45 @@ const GlobalHead = props => {
   const category = meta?.category || siteConfig('KEYWORDS') // section 主要是像是 category 這樣的分類，Facebook 用這個來抓連結的分類
   const favicon = siteConfig('BLOG_FAVICON')
   const webFontUrl = siteConfig('FONT_URL')
+  const BACKGROUND_DARK = siteConfig('BACKGROUND_DARK', '', NOTION_CONFIG)
 
+  const SEO_BAIDU_SITE_VERIFICATION = siteConfig(
+    'SEO_BAIDU_SITE_VERIFICATION',
+    null,
+    NOTION_CONFIG
+  )
+
+  const SEO_GOOGLE_SITE_VERIFICATION = siteConfig(
+    'SEO_GOOGLE_SITE_VERIFICATION',
+    null,
+    NOTION_CONFIG
+  )
+
+  const BLOG_FAVICON = siteConfig('BLOG_FAVICON', null, NOTION_CONFIG)
+
+  const COMMENT_WEBMENTION_ENABLE = siteConfig(
+    'COMMENT_WEBMENTION_ENABLE',
+    null,
+    NOTION_CONFIG
+  )
+
+  const COMMENT_WEBMENTION_HOSTNAME = siteConfig(
+    'COMMENT_WEBMENTION_HOSTNAME',
+    null,
+    NOTION_CONFIG
+  )
+  const COMMENT_WEBMENTION_AUTH = siteConfig(
+    'COMMENT_WEBMENTION_AUTH',
+    null,
+    NOTION_CONFIG
+  )
+  const ANALYTICS_BUSUANZI_ENABLE = siteConfig(
+    'ANALYTICS_BUSUANZI_ENABLE',
+    null,
+    NOTION_CONFIG
+  )
+
+  const FACEBOOK_PAGE = siteConfig('FACEBOOK_PAGE', null, NOTION_CONFIG)
   // SEO关键词
   let keywords = meta?.tags || siteConfig('KEYWORDS')
   if (post?.tags && post?.tags?.length > 0) {
@@ -59,24 +97,23 @@ const GlobalHead = props => {
     <Head>
       <link rel='icon' href={favicon} />
       <title>{title}</title>
-      <meta name='theme-color' content={siteConfig('BACKGROUND_DARK')} />
-
+      <meta name='theme-color' content={BACKGROUND_DARK} />
       <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') && (
+      {SEO_GOOGLE_SITE_VERIFICATION && (
         <meta
           name='google-site-verification'
-          content={siteConfig('SEO_GOOGLE_SITE_VERIFICATION')}
+          content={SEO_GOOGLE_SITE_VERIFICATION}
         />
       )}
-      {siteConfig('SEO_BAIDU_SITE_VERIFICATION') && (
+      {SEO_BAIDU_SITE_VERIFICATION && (
         <meta
           name='baidu-site-verification'
-          content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')}
+          content={SEO_BAIDU_SITE_VERIFICATION}
         />
       )}
       <meta name='keywords' content={keywords} />
@@ -86,44 +123,39 @@ const GlobalHead = props => {
       <meta property='og:description' content={description} />
       <meta property='og:url' content={url} />
       <meta property='og:image' content={image} />
-      <meta property='og:site_name' content={siteConfig('TITLE')} />
+      <meta property='og:site_name' content={title} />
       <meta property='og:type' content={type} />
       <meta name='twitter:card' content='summary_large_image' />
       <meta name='twitter:description' content={description} />
       <meta name='twitter:title' content={title} />
 
-      <link rel='icon' href={`${siteConfig('BLOG_FAVICON')}`} />
+      <link rel='icon' href={BLOG_FAVICON} />
 
-      {siteConfig('COMMENT_WEBMENTION_ENABLE') && (
+      {COMMENT_WEBMENTION_ENABLE && (
         <>
           <link
             rel='webmention'
-            href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/webmention`}
+            href={`https://webmention.io/${COMMENT_WEBMENTION_HOSTNAME}/webmention`}
           />
           <link
             rel='pingback'
-            href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/xmlrpc`}
+            href={`https://webmention.io/${COMMENT_WEBMENTION_HOSTNAME}/xmlrpc`}
           />
+          {COMMENT_WEBMENTION_AUTH && (
+            <link href={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')) && (
+      {ANALYTICS_BUSUANZI_ENABLE && (
         <meta name='referrer' content='no-referrer-when-downgrade' />
       )}
       {meta?.type === 'Post' && (
         <>
           <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={FACEBOOK_PAGE} />
         </>
       )}
       {children}
@@ -136,8 +168,7 @@ const GlobalHead = props => {
  * @param {*} props
  * @param {*} router
  */
-const getSEOMeta = (props, router, global) => {
-  const { locale } = global
+const getSEOMeta = (props, router, locale) => {
   const { post, siteInfo, tag, category, page } = props
   const keyword = router?.query?.s
 
diff --git a/components/NotionPage.js b/components/NotionPage.js
@@ -84,35 +84,35 @@ const NotionPage = ({ post, className }) => {
   }, [])
 
   const zoom =
-    typeof window !== 'undefined' &&
+    isBrowser &&
     mediumZoom({
-      container: '.notion-viewport',
+      //   container: '.notion-viewport',
       background: 'rgba(0, 0, 0, 0.2)',
       margin: getMediumZoomMargin()
     })
+
   const zoomRef = useRef(zoom ? zoom.clone() : null)
 
   useEffect(() => {
-    if (!isBrowser) return
-
     // 将相册gallery下的图片加入放大功能
     if (siteConfig('POST_DISABLE_GALLERY_CLICK')) {
       setTimeout(() => {
-        const imgList = document?.querySelectorAll(
-          '.notion-asset-wrapper-image img'
-        )
-
-        console.log('放大', imgList)
-
-        if (imgList && zoomRef.current) {
-          for (let i = 0; i < imgList.length; i++) {
-            zoomRef.current.attach(imgList[i])
+        if (isBrowser) {
+          const imgList = document?.querySelectorAll(
+            '.notion-collection-card-cover img'
+          )
+          if (imgList && zoomRef.current) {
+            for (let i = 0; i < imgList.length; i++) {
+              zoomRef.current.attach(imgList[i])
+            }
           }
-        }
 
-        const cards = document.getElementsByClassName('notion-collection-card')
-        for (const e of cards) {
-          e.removeAttribute('href')
+          const cards = document.getElementsByClassName(
+            'notion-collection-card'
+          )
+          for (const e of cards) {
+            e.removeAttribute('href')
+          }
         }
       }, 800)
     }
diff --git a/pages/[prefix]/[slug]/index.js b/pages/[prefix]/[slug]/index.js
@@ -2,11 +2,7 @@ import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData, getPost, getPostBlocks } from '@/lib/db/getSiteData'
 import { uploadDataToAlgolia } from '@/lib/plugins/algolia'
-import {
-  checkSlugHasNoSlash,
-  checkSlugHasOneSlash,
-  getRecommendPost
-} from '@/lib/utils/post'
+import { checkSlugHasOneSlash, getRecommendPost } from '@/lib/utils/post'
 import { idToUuid } from 'notion-utils'
 import Slug from '..'
 
@@ -42,13 +38,6 @@ export async function getStaticPaths() {
   // 增加一种访问路径 允许通过 [category]/[slug] 访问文章
   // 例如文章slug 是 test ，然后文章的分类category是 production
   // 则除了 [domain]/[slug] 以外，还支持分类名访问: [domain]/[category]/[slug]
-  console.log(
-    allPages
-      ?.filter(row => checkSlugHasNoSlash(row) && row.category)
-      .map(row => ({
-        params: { prefix: row.category, slug: row.slug }
-      }))
-  )
 
   return {
     paths: paths,
diff --git a/themes/gitbook/components/NavPostList.js b/themes/gitbook/components/NavPostList.js
@@ -17,56 +17,30 @@ const NavPostList = props => {
   const { locale, currentSearch } = useGlobal()
   const router = useRouter()
 
+  // 按分类将文章分组成文件夹
+  const categoryFolders = groupArticles(filteredNavPages)
+
   // 存放被展开的分组
   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
-    // 开启自动分组排序
-    if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) {
-      existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
-    } else {
-      existingGroup = groups[groups.length - 1] // 获取最后一个分组
-    }
-
-    // 添加数据
-    if (existingGroup && existingGroup.category === categoryName) {
-      existingGroup.items.push(item)
-    } else {
-      groups.push({ category: categoryName, items: [item] })
-    }
-    return groups
-  }, [])
-
-  // 首次打开页面时，跟踪是否已经选择了一个项
-  categoryFolders?.forEach(group => {
-    let hasExpandFolder = false
-    group.items.forEach(post => {
-      if (router.asPath.split('?')[0] === '/' + post.slug) {
-        hasExpandFolder = true
-      }
-    })
-    group.selected = hasExpandFolder
-  })
-
-  // 如果都没有选中默认打开第一个
+  // 展开文件夹
   useEffect(() => {
     setTimeout(() => {
-      if (expandedGroups.length === 0) {
-        setExpandedGroups([0])
-      }
+      // 默认展开一个
+      const defaultOpenIndex = getDefaultOpenIndexByPath(
+        categoryFolders,
+        router.asPath.split('?')[0]
+      )
+      setExpandedGroups([defaultOpenIndex])
     }, 500)
-  }, [router])
+  }, [router, filteredNavPages])
 
   // 折叠项切换，当折叠或展开数组时会调用
   const toggleItem = index => {
@@ -93,6 +67,8 @@ const NavPostList = props => {
     // 更新展开分组数组
     setExpandedGroups(newExpandedGroups)
   }
+
+  // 空数据返回
   if (!categoryFolders || categoryFolders.length === 0) {
     // 空白内容
     return (
@@ -123,4 +99,56 @@ const NavPostList = props => {
   )
 }
 
+// 按照分类将文章分组成文件夹
+function groupArticles(filteredNavPages) {
+  if (!filteredNavPages) {
+    return []
+  }
+  const groups = []
+
+  for (let i = 0; i < filteredNavPages.length; i++) {
+    const item = filteredNavPages[i]
+    const categoryName = item?.category ? item?.category : '' // 将category转换为字符串
+
+    let existingGroup = null
+    // 开启自动分组排序；将同分类的自动归到同一个文件夹，忽略Notion中的排序
+    if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) {
+      existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
+    } else {
+      existingGroup = groups[groups.length - 1] // 获取最后一个分组
+    }
+
+    // 添加数据
+    if (existingGroup && existingGroup.category === categoryName) {
+      existingGroup.items.push(item)
+    } else {
+      groups.push({ category: categoryName, items: [item] })
+    }
+  }
+  return groups
+}
+
+/**
+ * 查看当前路由需要展开的菜单索引
+ * 路过都没有，则返回0，即默认展开第一个
+ * @param {*} categoryFolders
+ * @param {*} path
+ * @returns {number} 返回需要展开的菜单索引
+ */
+function getDefaultOpenIndexByPath(categoryFolders, path) {
+  // 默认展开第一个索引
+  let defaultIndex = 0
+
+  // 查找满足条件的第一个索引
+  const index = categoryFolders.findIndex(group => {
+    return group.items.some(post => path === '/' + post.slug)
+  })
+
+  // 如果找到满足条件的索引，则设置为该索引
+  if (index !== -1) {
+    defaultIndex = index
+  }
+
+  return defaultIndex
+}
 export default NavPostList
diff --git a/themes/gitbook/components/SearchInput.js b/themes/gitbook/components/SearchInput.js
