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

Author: actions-user

.env.local

@@ -1,5 +1,5 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.4.6
+NEXT_PUBLIC_VERSION=4.5.0
 
 
 # 可在此添加环境变量，去掉最左边的（# ）注释即可

components/NotionPage.js

@@ -26,9 +26,12 @@ const Equation = dynamic(
   { ssr: false }
 )
 
-const Pdf = dynamic(() => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf), {
-  ssr: false
-})
+const Pdf = dynamic(
+  () => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf),
+  {
+    ssr: false
+  }
+)
 
 // https://github.com/txs
 // import PrismMac from '@/components/PrismMac'
@@ -46,13 +49,25 @@ const TweetEmbed = dynamic(() => import('react-tweet-embed'), {
 /**
  * 文内google广告
  */
-const AdEmbed = dynamic(() => import('@/components/GoogleAdsense').then(m => m.AdEmbed), { ssr: true })
+const AdEmbed = dynamic(
+  () => import('@/components/GoogleAdsense').then(m => m.AdEmbed),
+  { ssr: true }
+)
 
-const Collection = dynamic(() => import('react-notion-x/build/third-party/collection').then(m => m.Collection), {
-  ssr: true
-})
+const Collection = dynamic(
+  () =>
+    import('react-notion-x/build/third-party/collection').then(
+      m => m.Collection
+    ),
+  {
+    ssr: true
+  }
+)
 
-const Modal = dynamic(() => import('react-notion-x/build/third-party/modal').then(m => m.Modal), { ssr: false })
+const Modal = dynamic(
+  () => import('react-notion-x/build/third-party/modal').then(m => m.Modal),
+  { ssr: false }
+)
 
 const Tweet = ({ id }) => {
   return <TweetEmbed tweetId={id} />
@@ -83,19 +98,22 @@ const NotionPage = ({ post, className }) => {
     // 将相册gallery下的图片加入放大功能
     if (siteConfig('POST_DISABLE_GALLERY_CLICK')) {
       setTimeout(() => {
-        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 imgList = document?.querySelectorAll(
+          '.notion-asset-wrapper-image img'
+        )
+
+        console.log('放大', imgList)
 
-          const cards = document.getElementsByClassName('notion-collection-card')
-          for (const e of cards) {
-            e.removeAttribute('href')
+        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')
+        }
       }, 800)
     }
 
@@ -108,10 +126,16 @@ const NotionPage = ({ post, className }) => {
       const allAnchorTags = document.getElementsByTagName('a') // 或者使用 document.querySelectorAll('a') 获取 NodeList
       for (const anchorTag of allAnchorTags) {
         if (anchorTag?.target === '_blank') {
-          const hrefWithoutQueryHash = anchorTag.href.split('?')[0].split('#')[0]
-          const hrefWithRelativeHash = currentURL.split('#')[0] + anchorTag.href.split('#')[1]
-
-          if (currentURL === hrefWithoutQueryHash || currentURL === hrefWithRelativeHash) {
+          const hrefWithoutQueryHash = anchorTag.href
+            .split('?')[0]
+            .split('#')[0]
+          const hrefWithRelativeHash =
+            currentURL.split('#')[0] + anchorTag.href.split('#')[1]
+
+          if (
+            currentURL === hrefWithoutQueryHash ||
+            currentURL === hrefWithRelativeHash
+          ) {
             anchorTag.target = '_self'
           }
         }
@@ -121,36 +145,44 @@ const NotionPage = ({ post, className }) => {
     // 放大图片：调整图片质量
     const observer = new MutationObserver((mutationsList, observer) => {
       mutationsList.forEach(mutation => {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'class'
+        ) {
           if (mutation.target.classList.contains('medium-zoom-image--opened')) {
             // 等待动画完成后替换为更高清的图像
             setTimeout(() => {
               // 获取该元素的 src 属性
               const src = mutation?.target?.getAttribute('src')
               //   替换为更高清的图像
-              mutation?.target?.setAttribute('src', compressImage(src, siteConfig('IMAGE_ZOOM_IN_WIDTH', 1200)))
+              mutation?.target?.setAttribute(
+                'src',
+                compressImage(src, siteConfig('IMAGE_ZOOM_IN_WIDTH', 1200))
+              )
             }, 800)
           }
         }
       })
     })
 
     // 监视整个文档中的元素和属性的变化
-    observer.observe(document.body, { attributes: true, subtree: true, attributeFilter: ['class'] })
+    observer.observe(document.body, {
+      attributes: true,
+      subtree: true,
+      attributeFilter: ['class']
+    })
 
     return () => {
       observer.disconnect()
     }
-  }, [])
-
-  if (!post || !post.blockMap) {
-    return <>{post?.summary || ''}</>
-  }
+  }, [post])
 
   return (
-    <div id='notion-article' className={`mx-auto overflow-hidden ${className || ''}`}>
+    <div
+      id='notion-article'
+      className={`mx-auto overflow-hidden ${className || ''}`}>
       <NotionRenderer
-        recordMap={post.blockMap}
+        recordMap={post?.blockMap}
         mapPageUrl={mapPageUrl}
         mapImageUrl={mapImgUrl}
         components={{

lib/db/getSiteData.js

@@ -156,19 +156,11 @@ function getCustomNav({ allPages }) {
   if (allPages && allPages.length > 0) {
     allPages.forEach(p => {
       p.to = p.slug
-      if (p?.slug?.indexOf('http') === 0) {
-        p.target = '_blank'
-      } else {
-        p.target = '_self'
-        if (p?.slug?.indexOf('/') !== 0) {
-          p.to = '/' + p.slug
-        }
-      }
       customNav.push({
         icon: p.icon || null,
         name: p.title,
-        to: p.slug,
-        target: '_blank',
+        href: p.href,
+        target: p.target,
         show: true
       })
     })
@@ -192,15 +184,6 @@ function getCustomMenu({ collectionData, NOTION_CONFIG }) {
   if (menuPages && menuPages.length > 0) {
     menuPages.forEach(e => {
       e.show = true
-      if (e?.slug?.indexOf('http') === 0) {
-        e.target = '_blank'
-        e.to = e.slug
-      } else {
-        e.target = '_self'
-        if (e?.slug?.indexOf('http') !== 0 && e?.slug?.indexOf('/') !== 0) {
-          e.to = '/' + e.slug
-        }
-      }
       if (e.type === BLOG.NOTION_PROPERTY_NAME.type_menu) {
         menus.push(e)
       } else if (e.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu) {
@@ -312,6 +295,7 @@ export function getNavPages({ allPages }) {
     tags: item.tags || null,
     summary: item.summary || null,
     slug: item.slug,
+    href: item.href,
     pageIcon: item.pageIcon || '',
     lastEditedDate: item.lastEditedDate,
     publishDate: item.publishDate,

lib/notion/getPageProperties.js

@@ -4,6 +4,7 @@ import { getDateValue, getTextContent } from 'notion-utils'
 import formatDate from '../utils/formatDate'
 // import { createHash } from 'crypto'
 import md5 from 'js-md5'
+import { checkContainHttp, sliceUrlFromHttp } from '../utils'
 import { mapImgUrl } from './mapImage'
 
 /**
@@ -106,7 +107,7 @@ export default async function getPageProperties(
   properties.pageCover = mapImgUrl(value?.format?.page_cover, value) ?? ''
   properties.pageCoverThumbnail =
     mapImgUrl(value?.format?.page_cover, value, 'block') ?? ''
-  properties.ext = converToJSON(properties?.ext)
+  properties.ext = convertToJSON(properties?.ext)
   properties.content = value.content ?? []
   properties.tagItems =
     properties?.tags?.map(tag => {
@@ -118,27 +119,43 @@ export default async function getPageProperties(
   delete properties.content
 
   // 处理URL
+  // 1.按照用户配置的URL_PREFIX 转换一下slug
+  // 2.为文章添加一个href字段，存储最终调整的路径
   if (properties.type === 'Post') {
-    properties.slug = BLOG.POST_URL_PREFIX
-      ? generateCustomizeUrl(properties)
-      : properties.slug ?? properties.id
+    if (BLOG.POST_URL_PREFIX) {
+      properties.slug = generateCustomizeSlug(properties)
+    }
+    properties.href = properties.slug ?? properties.id
   } else if (properties.type === 'Page') {
-    properties.slug = properties.slug ?? properties.id
+    properties.href = properties.slug ?? properties.id
   } else if (properties.type === 'Menu' || properties.type === 'SubMenu') {
     // 菜单路径为空、作为可展开菜单使用
-    properties.to = properties.slug ?? '#'
+    properties.href = properties.slug ?? '#'
     properties.name = properties.title ?? ''
   }
 
   // 开启伪静态路径
   if (JSON.parse(BLOG.PSEUDO_STATIC)) {
     if (
-      !properties?.slug?.endsWith('.html') &&
-      !properties?.slug?.startsWith('http')
+      !properties?.href?.endsWith('.html') &&
+      !properties?.href?.startsWith('http')
     ) {
-      properties.slug += '.html'
+      properties.href += '.html'
     }
   }
+
+  // 最终检查超链接
+  properties.href = checkContainHttp(properties?.href)
+    ? sliceUrlFromHttp(properties?.href)
+    : `/${properties.href}`
+
+  // 设置链接在页内或新页面打开
+  if (properties.href?.indexOf('http') === 0) {
+    properties.target = '_blank'
+  } else {
+    properties.target = '_self'
+  }
+
   // 密码字段md5
   properties.password = properties.password
     ? md5(properties.slug + properties.password)
@@ -151,7 +168,7 @@ export default async function getPageProperties(
  * @param {*} str
  * @returns
  */
-function converToJSON(str) {
+function convertToJSON(str) {
   if (!str) {
     return {}
   }
@@ -188,11 +205,11 @@ function mapProperties(properties) {
 /**
  * 获取自定义URL
  * 可以根据变量生成URL
- * 支持：%year%/%month%/%day%/%slug%
+ * 支持：%category%/%year%/%month%/%day%/%slug%
  * @param {*} postProperties
  * @returns
  */
-function generateCustomizeUrl(postProperties) {
+function generateCustomizeSlug(postProperties) {
   let fullPrefix = ''
   const allSlugPatterns = BLOG.POST_URL_PREFIX.split('/')
   allSlugPatterns.forEach((pattern, idx) => {
@@ -210,6 +227,8 @@ function generateCustomizeUrl(postProperties) {
       fullPrefix += String(formatPostCreatedDate.getUTCDate()).padStart(2, 0)
     } else if (pattern === '%slug%') {
       fullPrefix += postProperties.slug ?? postProperties.id
+    } else if (pattern === '%category%' && postProperties?.category) {
+      fullPrefix += postProperties.category
     } else if (!pattern.includes('%')) {
       fullPrefix += pattern
     } else {