Release/4.7.7

.env.local

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

lib/db/getSiteData.js

@@ -65,8 +65,8 @@ export async function getNotionPageData({ pageId, from }) {
   const cacheKey = 'page_block_' + pageId
   let data = await getDataFromCache(cacheKey)
   if (data && data.pageIds?.length > 0) {
-    // console.log('[API<<--缓存]', `from:${from}`, `root-page-id:${pageId}`)
-    // return data
+    console.debug('[API<<--缓存]', `from:${from}`, `root-page-id:${pageId}`)
+    return data
   } else {
     // 从接口读取
     data = await getDataBaseInfoByNotionAPI({ pageId, from })

package.json

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

styles/globals.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  overflow-x: hidden;
+}
+
 .wrapper {
   min-height: 100vh;
   display: flex;

themes/photo/components/Announcement.js

@@ -0,0 +1,23 @@
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+/**
+ * 公告
+ * @param {*} param0
+ * @returns
+ */
+const Announcement = ({ notice, className }) => {
+  if (!notice || Object.keys(notice).length === 0) {
+    return <></>
+  }
+  return (
+    <aside className={className}>
+      {notice && (
+        <div id='announcement-content'>
+          <NotionPage post={notice} className='text-center ' />
+        </div>
+      )}
+    </aside>
+  )
+}
+export default Announcement

themes/photo/components/ArchiveDateList.js

@@ -0,0 +1,38 @@
+import { useGlobal } from '@/lib/global'
+import { formatDateFmt } from '@/lib/utils/formatDate'
+import Link from 'next/link'
+
+export default function ArchiveDateList(props) {
+  const postsSortByDate = Object.create(props.allNavPages)
+  const { locale } = useGlobal()
+
+  postsSortByDate.sort((a, b) => {
+    return b?.publishDate - a?.publishDate
+  })
+
+  let dates = []
+  postsSortByDate.forEach(post => {
+    const date = formatDateFmt(post.publishDate, 'yyyy-MM')
+    if (!dates[date]) {
+      dates.push(date)
+    }
+  })
+  dates = dates.slice(0, 5)
+  return (
+    <div>
+      <div className="text-2xl dark:text-white mb-2">{locale.NAV.ARCHIVE}</div>
+      {dates?.map((date, index) => {
+        return (
+          <div key={index}>
+            <Link
+              href={`/archive#${date}`}
+              className="hover:underline dark:text-green-500"
+            >
+              {date}
+            </Link>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

themes/photo/components/ArticleFooter.js

@@ -0,0 +1,69 @@
+import { useGlobal } from '@/lib/global'
+import { formatDateFmt } from '@/lib/utils/formatDate'
+import Link from 'next/link'
+
+/**
+ * 文章页脚
+ * @param {*} props
+ * @returns
+ */
+export default function ArticleFooter(props) {
+  const { post } = props
+  const { locale } = useGlobal()
+
+  return (
+    <>
+      {/* 分类和标签部分 */}
+      <div className='flex gap-3 font-semibold text-sm items-center justify-center'>
+        {/* 分类标签（如果文章不是“页面”类型） */}
+        {post?.type !== 'Page' && (
+          <>
+            <Link
+              href={`/category/${post?.category}`}
+              passHref
+              className='cursor-pointer text-md mr-2 text-green-500'>
+              {post?.category}
+            </Link>
+          </>
+        )}
+
+        {/* 标签部分（若文章有标签） */}
+        <div className='flex py-1 space-x-3'>
+          {post?.tags?.length > 0 && (
+            <>
+              {locale.COMMON.TAGS} <span>:</span>
+            </>
+          )}
+          {/* 显示所有标签 */}
+          {post?.tags?.map(tag => {
+            return (
+              <Link
+                href={`/tag/${tag}`}
+                key={tag}
+                className='text-yellow-500 mr-2'>
+                {tag}
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* 发布日期信息 */}
+      {/* 将发布日期移至文章底部并设置样式 */}
+      <div
+        className='text-center mt-6'
+        style={{
+          fontSize: '12px', // 设置字体大小为 12px
+          fontWeight: '300', // 设置字体粗细为细体
+          color: 'gray' // 设置文字颜色为灰色
+        }}>
+        <Link
+          href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
+          passHref
+          className='pl-1 cursor-pointer'>
+          {post?.publishDay}
+        </Link>
+      </div>
+    </>
+  )
+}

themes/photo/components/ArticleInfo.js

@@ -0,0 +1,23 @@
+/**
+ * 文章页头
+ * @param {*} props
+ * @returns
+ */
+export const ArticleHeader = props => {
+  const { post } = props
+
+  return (
+    <section className='w-full mx-auto mb-4'>
+      {/* 标题部分 */}
+      {/* 将标题字体大小设置为 16px，并将字体粗细设置为细体 */}
+      <h2
+        className='py-10 dark:text-white text-center'
+        style={{
+          fontSize: '16px', // 设置字体大小为 16px
+          fontWeight: '300' // 设置字体粗细为细体
+        }}>
+        {post?.title}
+      </h2>
+    </section>
+  )
+}

themes/photo/components/ArticleLock.js

@@ -0,0 +1,52 @@
+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/photo/components/BlogListGroupByDate.js

@@ -0,0 +1,36 @@
+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 => {
+          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={post?.href}
+                  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/photo/components/BlogListPage.js

@@ -0,0 +1,31 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+import BlogPostCard from './BlogPostCard'
+import PaginationNumber from './PaginationNumber'
+
+export const BlogListPage = props => {
+  const { page = 1, posts, postCount } = props
+  const { NOTION_CONFIG } = useGlobal()
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
+  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
+
+  const showPageCover = siteConfig('MOVIE_POST_LIST_COVER', null, CONFIG)
+  if (!posts || posts.length === 0) {
+    return null
+  }
+
+  return (
+    <div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'} py-6`}>
+      <div
+        id='posts-wrapper'
+        className='grid md:grid-cols-2 md:gap-12 lg:grid-cols-3 lg:gap-20 xl:gap-24 2xl:grid-cols-4'>
+        {posts?.map(post => (
+          <BlogPostCard key={post.id} post={post} />
+        ))}
+      </div>
+
+      <PaginationNumber page={page} totalPage={totalPage} />
+    </div>
+  )
+}

themes/photo/components/BlogListScroll.js

@@ -0,0 +1,76 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import throttle from 'lodash.throttle'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import CONFIG from '../config'
+import BlogPostCard from './BlogPostCard'
+
+export const BlogListScroll = props => {
+  const { posts } = props
+  const { locale } = useGlobal()
+
+  const [page, updatePage] = useState(1)
+
+  let hasMore = false
+  const postsToShow = posts
+    ? Object.assign(posts).slice(
+        0,
+        parseInt(siteConfig('POSTS_PER_PAGE', 12, props?.NOTION_CONFIG)) * page
+      )
+    : []
+
+  if (posts) {
+    const totalCount = posts.length
+    hasMore =
+      page * parseInt(siteConfig('POSTS_PER_PAGE', 12, props?.NOTION_CONFIG)) <
+      totalCount
+  }
+  const handleGetMore = () => {
+    if (!hasMore) return
+    updatePage(page + 1)
+  }
+
+  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 showPageCover = siteConfig('MOVIE_POST_LIST_COVER', null, CONFIG)
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrollTrigger)
+
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  })
+
+  return (
+    <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>
+  )
+}