Merge pull request #108 from tangly1024/preview

文章加锁优化

lib/notion/getPostBlocks.js

@@ -12,9 +12,9 @@ export async function getPostBlocks (id, from, slice, retryCount = 3) {
   const authToken = BLOG.NOTION_ACCESS_TOKEN || null
   const api = new NotionAPI({ authToken })
   try {
-    console.log('[请求API]:', `from:${from}`, `id:${id}`)
+    console.warn('[请求API]:', `from:${from}`, `id:${id}`)
     pageBlock = await api.getPage(id)
-    console.log('[请求成功]', `from:${from}`, `id:${id}`)
+    console.warn('[请求成功]', `from:${from}`, `id:${id}`)
   } catch (error) {
     console.error('[请求失败]', `from:${from}`, `id:${id}`, `error:${error}`)
     if (retryCount && retryCount > 0) { // 重试

package.json

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

pages/[slug].js

@@ -3,6 +3,7 @@ import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'
+import { useEffect, useState } from 'react'
 
 /**
  * 根据notion的slug访问页面，针对类型为Page的页面
@@ -12,9 +13,33 @@ import * as ThemeMap from '@/themes'
 const Slug = (props) => {
   const { theme } = useGlobal()
   const ThemeComponents = ThemeMap[theme]
-  if (!props.post) {
+  const { post } = props
+  if (!post) {
     return <ThemeComponents.Layout404 {...props}/>
   }
+
+  // 文章锁🔐
+  const [lock, setLock] = useState(true)
+  useEffect(() => {
+    if (post && post.password && post.password !== '') {
+      setLock(true)
+    } else {
+      setLock(false)
+    }
+  }, [post])
+
+  /**
+   * 验证文章密码
+   * @param {*} result
+   */
+  const validPassword = result => {
+    if (result) {
+      setLock(false)
+    }
+  }
+
+  props = { ...props, lock, setLock, validPassword }
+
   return <ThemeComponents.LayoutSlug {...props} showArticleInfo={false}/>
 }
 

pages/article/[slug].js

@@ -3,6 +3,7 @@ import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'
+import { useEffect, useState } from 'react'
 
 /**
  * 根据notion的slug访问页面
@@ -12,9 +13,33 @@ import * as ThemeMap from '@/themes'
 const Slug = (props) => {
   const { theme } = useGlobal()
   const ThemeComponents = ThemeMap[theme]
-  if (!props.post) {
+  const { post } = props
+  if (!post) {
     return <ThemeComponents.Layout404 {...props}/>
   }
+
+  // 文章锁🔐
+  const [lock, setLock] = useState(true)
+  useEffect(() => {
+    if (post && post.password && post.password !== '') {
+      setLock(true)
+    } else {
+      setLock(false)
+    }
+  }, [post])
+
+  /**
+   * 验证文章密码
+   * @param {*} result
+   */
+  const validPassword = result => {
+    if (result) {
+      setLock(false)
+    }
+  }
+
+  props = { ...props, lock, setLock, validPassword }
+
   return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true}/>
 }
 

themes/empty/LayoutBase.js

@@ -68,7 +68,7 @@ const LayoutBase = props => {
       {/* 内容主体 */}
       <main id="wrapper" className="flex justify-center flex-1 pb-12">
         <div className="max-w-4xl w-full px-3">{children}</div>
-        <div>
+        <div className='hidden md:block'>
           <div className="sticky top-0 z-40">
             <Live2D />
           </div>

themes/empty/LayoutSlug.js

@@ -14,7 +14,7 @@ import {
   NotionRenderer
 } from 'react-notion-x'
 import LayoutBase from './LayoutBase'
-import { useState, useRef, useEffect } from 'react'
+import { useRef, useEffect } from 'react'
 import { ArticleLock } from './components/ArticleLock'
 import mediumZoom from 'medium-zoom'
 
@@ -23,21 +23,13 @@ const mapPageUrl = id => {
 }
 
 export const LayoutSlug = props => {
-  const { post } = props
+  const { post, lock, validPassword } = props
   const meta = {
     title: `${post.title} | ${BLOG.TITLE}`,
     description: post.summary,
     type: 'article',
     tags: post.tags
   }
-  // 文章加锁
-  const articleLock = post.password && post.password !== ''
-  const [lock, setLock] = useState(articleLock)
-  const validPassword = result => {
-    if (result) {
-      setLock(false)
-    }
-  }
 
   if (!lock && post?.blockMap?.block) {
     post.content = Object.keys(post.blockMap.block)

themes/fukasawa/LayoutSlug.js

@@ -8,11 +8,10 @@ import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-typescript'
 import ArticleDetail from './components/ArticleDetail'
 import LayoutBase from './LayoutBase'
-import { useState } from 'react'
 import { ArticleLock } from './components/ArticleLock'
 
 export const LayoutSlug = (props) => {
-  const { post } = props
+  const { post, lock, validPassword } = props
   const meta = {
     title: `${post.title} | ${BLOG.TITLE}`,
     description: post.summary,
@@ -20,16 +19,7 @@ export const LayoutSlug = (props) => {
     tags: post.tags
   }
 
-  // 文章加锁
-  const articleLock = post.password && post.password !== ''
-  const [lock, setLock] = useState(articleLock)
-  const validPassword = result => {
-    if (result) {
-      setLock(false)
-    }
-  }
-
-  if (post?.blockMap?.block) {
+  if (!lock && post?.blockMap?.block) {
     post.content = Object.keys(post.blockMap.block)
     post.toc = getPageTableOfContents(post, post.blockMap)
   }

themes/hexo/LayoutSlug.js

@@ -7,7 +7,7 @@ import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-markup'
 import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-typescript'
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
 import ArticleDetail from './components/ArticleDetail'
 import { ArticleLock } from './components/ArticleLock'
 import HeaderArticle from './components/HeaderArticle'
@@ -17,7 +17,7 @@ import TocDrawerButton from './components/TocDrawerButton'
 import LayoutBase from './LayoutBase'
 
 export const LayoutSlug = props => {
-  const { post } = props
+  const { post, lock, validPassword } = props
   const meta = {
     title: `${post.title} | ${BLOG.TITLE}`,
     description: post.summary,
@@ -25,15 +25,6 @@ export const LayoutSlug = props => {
     tags: post.tags
   }
 
-  // 文章加锁
-  const articleLock = post.password && post.password !== ''
-  const [lock, setLock] = useState(articleLock)
-  const validPassword = result => {
-    if (result) {
-      setLock(false)
-    }
-  }
-
   if (!lock && post?.blockMap?.block) {
     post.content = Object.keys(post.blockMap.block)
     post.toc = getPageTableOfContents(post, post.blockMap)

themes/hexo/components/InfoCard.js

@@ -23,7 +23,8 @@ export function InfoCard (props) {
         className='rounded-full'
       />
     </div>
-    <div className='text-center font-sans text-xl pb-4 dark:text-gray-300'>{BLOG.TITLE}</div>
+    <div className='text-center font-sans text-xl pb-4 dark:text-gray-300'>{BLOG.AUTHOR}</div>
+    <div className='text-sm text-center'>{BLOG.BIO}</div>
     <MenuGroupCard {...props}/>
     <SocialButton />
   </Card>

themes/hexo/components/SideRight.js

@@ -33,7 +33,7 @@ export default function SideRight (props) {
           <TagGroups tags={tags} currentTag={currentTag} />
         </Card>
       )}
-      {CONFIG_HEXO.WIDGET_LATEST_POSTS && latestPosts && <Card>
+      {CONFIG_HEXO.WIDGET_LATEST_POSTS && latestPosts && latestPosts.length > 0 && <Card>
         <LatestPostsGroup posts={latestPosts} />
       </Card>}
 

themes/medium/LayoutSlug.js

@@ -4,13 +4,13 @@ import { getPageTableOfContents } from 'notion-utils'
 import LayoutBase from './LayoutBase'
 import { useGlobal } from '@/lib/global'
 import mediumZoom from 'medium-zoom'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import Catalog from './components/Catalog'
 import { ArticleDetail } from './components/ArticleDetail'
 import { ArticleLock } from './components/ArticleLock'
 
 export const LayoutSlug = props => {
-  const { post } = props
+  const { post, lock, validPassword } = props
   const meta = {
     title: `${post.title} | ${BLOG.TITLE}`,
     description: post.summary,
@@ -18,15 +18,6 @@ export const LayoutSlug = props => {
     tags: post.tags
   }
 
-  // 文章加锁
-  const articleLock = post.password && post.password !== ''
-  const [lock, setLock] = useState(articleLock)
-  const validPassword = result => {
-    if (result) {
-      setLock(false)
-    }
-  }
-
   if (!lock && post?.blockMap?.block) {
     post.content = Object.keys(post.blockMap.block)
     post.toc = getPageTableOfContents(post, post.blockMap)

themes/next/LayoutSlug.js

@@ -6,12 +6,12 @@ import Card from './components/Card'
 import LatestPostsGroup from './components/LatestPostsGroup'
 import ArticleDetail from './components/ArticleDetail'
 import TocDrawer from './components/TocDrawer'
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
 import CONFIG_NEXT from './config_next'
 import { ArticleLock } from './components/ArticleLock'
 
 export const LayoutSlug = (props) => {
-  const { post, latestPosts } = props
+  const { post, latestPosts, lock, validPassword } = props
   const meta = {
     title: `${post.title} | ${BLOG.TITLE}`,
     description: post.summary,
@@ -19,15 +19,6 @@ export const LayoutSlug = (props) => {
     tags: post.tags
   }
 
-  // 文章加锁
-  const articleLock = post.password && post.password !== ''
-  const [lock, setLock] = useState(articleLock)
-  const validPassword = result => {
-    if (result) {
-      setLock(false)
-    }
-  }
-
   if (!lock && post?.blockMap?.block) {
     post.content = Object.keys(post.blockMap.block)
     post.toc = getPageTableOfContents(post, post.blockMap)