From 517a96764064ef0f412fabf918d6e3a2c4abbb3b Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 15 May 2024 14:55:14 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86NOTION=5FCO?= =?UTF-8?q?NFIG=E8=AF=BB=E5=8F=96=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/config.js | 43 ++++++- lib/db/getSiteData.js | 13 ++- lib/notion/getPageProperties.js | 2 +- lib/robots.txt.js | 6 +- lib/rss.js | 39 ++++--- pages/category/[category]/index.js | 5 +- pages/category/[category]/page/[page].js | 13 ++- pages/index.js | 23 ++-- pages/page/[page].js | 25 ++-- pages/search/[keyword]/index.js | 15 ++- pages/search/[keyword]/page/[page].js | 5 +- pages/tag/[tag]/index.js | 5 +- pages/tag/[tag]/page/[page].js | 11 +- .../commerce/components/BlogPostListPage.js | 26 +++-- .../commerce/components/BlogPostListScroll.js | 64 ++++++---- themes/example/components/BlogListPage.js | 4 +- themes/example/components/BlogListScroll.js | 11 +- themes/fukasawa/components/BlogListPage.js | 29 +++-- themes/fukasawa/components/BlogListScroll.js | 51 +++++--- themes/game/components/BlogListPage.js | 7 +- themes/game/components/BlogListScroll.js | 8 +- themes/game/components/BlogPost.js | 5 +- themes/heo/components/BlogPostListPage.js | 38 +++--- themes/heo/components/BlogPostListScroll.js | 67 +++++++---- themes/hexo/components/BlogPostListPage.js | 26 +++-- themes/hexo/components/BlogPostListScroll.js | 63 ++++++---- themes/matery/components/BlogPostListPage.js | 9 +- .../matery/components/BlogPostListScroll.js | 82 ++++++++----- themes/medium/components/BlogPostListPage.js | 15 ++- .../medium/components/BlogPostListScroll.js | 76 ++++++------ themes/movie/components/BlogListPage.js | 5 +- themes/movie/components/BlogListScroll.js | 26 ++++- themes/nav/components/BlogPostListPage.js | 13 ++- themes/nav/config.js | 6 +- themes/next/components/BlogPostListPage.js | 15 ++- themes/next/components/BlogPostListScroll.js | 84 +++++++------ themes/nobelium/components/BlogListPage.js | 72 +++++++----- themes/nobelium/components/BlogListScroll.js | 109 +++++++++-------- themes/nobelium/components/BlogPost.js | 5 +- themes/plog/components/BlogListPage.js | 110 +++++++++++------- themes/plog/components/BlogListScroll.js | 99 +++++++++------- themes/simple/components/BlogItem.js | 5 +- themes/simple/components/BlogListPage.js | 80 ++++++++----- themes/simple/components/BlogListScroll.js | 61 +++++----- 44 files changed, 911 insertions(+), 565 deletions(-) diff --git a/lib/config.js b/lib/config.js index 8002e046..8b27c7f1 100644 --- a/lib/config.js +++ b/lib/config.js @@ -14,15 +14,38 @@ import { deepClone } from './utils' * @param {*} extendConfig ; 参考配置对象{key:val}，如果notion中找不到优先尝试在这里面查找 * @returns */ -export const siteConfig = (key, defaultVal = null, extendConfig = null) => { - let global = null +export const siteConfig = (key, defaultVal = null, extendConfig = {}) => { + if (!key) { + return null + } + + // 特殊配置处理；某些配置只在服务端生效；而Global的NOTION_CONFIG仅限前端组件使用，因此需要从extendConfig中读取 + switch (key) { + case 'NEXT_REVALIDATE_SECOND': + case 'POST_RECOMMEND_COUNT': + case 'IMAGE_COMPRESS_WIDTH': + case 'PSEUDO_STATIC': + case 'POSTS_SORT_BY': + case 'POSTS_PER_PAGE': + case 'POST_PREVIEW_LINES': + case 'POST_URL_PREFIX': + case 'POST_LIST_STYLE': + case 'POST_LIST_PREVIEW': + case 'POST_URL_PREFIX_MAPPING_CATEGORY': + return convertVal(extendConfig[key] || defaultVal || BLOG[key]) + default: + } + + let global = {} try { - const isClient = typeof window !== 'undefined' + // const isClient = typeof window !== 'undefined' // eslint-disable-next-line react-hooks/rules-of-hooks - global = isClient ? useGlobal() : {} + global = useGlobal() // eslint-disable-next-line react-hooks/rules-of-hooks // global = useGlobal() - } catch (error) {} + } catch (error) { + console.warn('SiteConfig警告', key, error) + } // 首先 配置最优先读取NOTION中的表格配置 let val = null @@ -66,6 +89,16 @@ export const siteConfig = (key, defaultVal = null, extendConfig = null) => { } // 从Notion_CONFIG读取的配置通常都是字符串，适当转义 + return convertVal(val) +} + +/** + * 配置默认都是string类型； + * 识别配置的值是否数字、布尔、[]数组，若是则转成对应类型 + * @param {*} val + * @returns + */ +export const convertVal = val => { if (typeof val === 'string') { // 解析布尔 if (val === 'true' || val === 'false') { diff --git a/lib/db/getSiteData.js b/lib/db/getSiteData.js index f814a905..2b9f6838 100755 --- a/lib/db/getSiteData.js +++ b/lib/db/getSiteData.js @@ -236,12 +236,13 @@ function getCategoryOptions(schema) { * @param from * @returns {Promise<{title,description,pageCover,icon}>} */ -function getSiteInfo({ collection, block, NOTION_CONFIG, pageId }) { - const defaultTitle = siteConfig('TITLE', '', NOTION_CONFIG) - const defaultDescription = siteConfig('DESCRIPTION', '', NOTION_CONFIG) - const defaultPageCover = siteConfig('HOME_BANNER_IMAGE', '', NOTION_CONFIG) - const defaultIcon = siteConfig('AVATAR', '', NOTION_CONFIG) - const defaultLink = siteConfig('LINK', '', NOTION_CONFIG) +function getSiteInfo({ collection, block, NOTION_CONFIG }) { + const defaultTitle = NOTION_CONFIG?.TITLE || BLOG.TITLE + const defaultDescription = NOTION_CONFIG?.DESCRIPTION || BLOG.DESCRIPTION + const defaultPageCover = + NOTION_CONFIG?.HOME_BANNER_IMAGE || BLOG.HOME_BANNER_IMAGE + const defaultIcon = NOTION_CONFIG?.AVATAR || BLOG.AVATAR + const defaultLink = NOTION_CONFIG?.LINK || BLOG.LINK if (!collection && !block) { return { title: defaultTitle, diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js index 39ebb97d..38eede18 100644 --- a/lib/notion/getPageProperties.js +++ b/lib/notion/getPageProperties.js @@ -186,7 +186,7 @@ export function adjustPageProperties(properties, NOTION_CONFIG) { } // 开启伪静态路径 - if (siteConfig('PSEUDO_STATIC', false, NOTION_CONFIG)) { + if (JSON.parse(NOTION_CONFIG?.PSEUDO_STATIC || BLOG.PSEUDO_STATIC)) { if ( !properties?.href?.endsWith('.html') && !properties?.href?.startsWith('http') diff --git a/lib/robots.txt.js b/lib/robots.txt.js index 4dbc61c2..45e11606 100644 --- a/lib/robots.txt.js +++ b/lib/robots.txt.js @@ -1,8 +1,8 @@ import fs from 'fs' -import { siteConfig } from './config' -export async function generateRobotsTxt(NOTION_CONFIG) { - const LINK = siteConfig('LINK', '', NOTION_CONFIG) +export async function generateRobotsTxt(props) { + const { siteInfo } = props + const LINK = siteInfo?.link const content = ` # * User-agent: * diff --git a/lib/rss.js b/lib/rss.js index 8b09bdce..fd183b6d 100644 --- a/lib/rss.js +++ b/lib/rss.js @@ -1,9 +1,9 @@ +import BLOG from '@/blog.config' import NotionPage from '@/components/NotionPage' import { getPostBlocks } from '@/lib/db/getSiteData' import { Feed } from 'feed' import fs from 'fs' import ReactDOMServer from 'react-dom/server' -import { siteConfig } from './config' /** * 生成RSS内容 @@ -25,30 +25,33 @@ const createFeedContent = async post => { } } -export async function generateRss(NOTION_CONFIG, posts) { - const link = siteConfig('LINK', '', NOTION_CONFIG) - const author = siteConfig('AUTHOR', '', NOTION_CONFIG) - const lang = siteConfig('LANG', '', NOTION_CONFIG) - const subPath = siteConfig('SUB_PATH', '', NOTION_CONFIG) - +export async function generateRss(props) { + const { NOTION_CONFIG, siteInfo, latestPosts } = props + const TITLE = siteInfo?.title + const DESCRIPTION = siteInfo?.description + const LINK = siteInfo?.link + const AUTHOR = NOTION_CONFIG?.AUTHOR || BLOG.AUTHOR + const LANG = NOTION_CONFIG?.LANG || BLOG.LANG + const SUB_PATH = NOTION_CONFIG?.SUB_PATH || BLOG.SUB_PATH + const CONTACT_EMAIL = NOTION_CONFIG?.CONTACT_EMAIL || BLOG.CONTACT_EMAIL const year = new Date().getFullYear() const feed = new Feed({ - title: siteConfig('TITLE', '', NOTION_CONFIG), - description: siteConfig('DESCRIPTION', '', NOTION_CONFIG), - link: `${link}/${subPath}`, - language: lang, - favicon: `${link}/favicon.png`, - copyright: `All rights reserved ${year}, ${author}`, + title: TITLE, + description: DESCRIPTION, + link: `${LINK}/${SUB_PATH}`, + language: LANG, + favicon: `${LINK}/favicon.png`, + copyright: `All rights reserved ${year}, ${AUTHOR}`, author: { - name: author, - email: siteConfig('CONTACT_EMAIL', '', NOTION_CONFIG), - link: link + name: AUTHOR, + email: CONTACT_EMAIL, + link: LINK } }) - for (const post of posts) { + for (const post of latestPosts) { feed.addItem({ title: post.title, - link: `${link}/${post.slug}`, + link: `${LINK}/${post.slug}`, description: post.summary, content: await createFeedContent(post), date: new Date(post?.publishDay) diff --git a/pages/category/[category]/index.js b/pages/category/[category]/index.js index 7542b2bb..879dc642 100644 --- a/pages/category/[category]/index.js +++ b/pages/category/[category]/index.js @@ -37,7 +37,10 @@ export async function getStaticProps({ params: { category }, locale }) { if (siteConfig('POST_LIST_STYLE') === 'scroll') { // 滚动列表 给前端返回所有数据 } else if (siteConfig('POST_LIST_STYLE') === 'page') { - props.posts = props.posts?.slice(0, siteConfig('POSTS_PER_PAGE')) + props.posts = props.posts?.slice( + 0, + siteConfig('POSTS_PER_PAGE', 12, props?.NOTION_CONFIG) + ) } delete props.allPages diff --git a/pages/category/[category]/page/[page].js b/pages/category/[category]/page/[page].js index fbe1e7e2..39ce44df 100644 --- a/pages/category/[category]/page/[page].js +++ b/pages/category/[category]/page/[page].js @@ -30,10 +30,11 @@ export async function getStaticProps({ params: { category, page } }) { .filter(post => post && post.category && post.category.includes(category)) // 处理文章页数 props.postCount = props.posts.length + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, props?.NOTION_CONFIG) // 处理分页 props.posts = props.posts.slice( - siteConfig('POSTS_PER_PAGE') * (page - 1), - siteConfig('POSTS_PER_PAGE') * page + POSTS_PER_PAGE * (page - 1), + POSTS_PER_PAGE * page ) delete props.allPages @@ -53,7 +54,9 @@ export async function getStaticProps({ params: { category, page } }) { export async function getStaticPaths() { const from = 'category-paths' - const { categoryOptions, allPages } = await getGlobalData({ from }) + const { categoryOptions, allPages, NOTION_CONFIG } = await getGlobalData({ + from + }) const paths = [] categoryOptions?.forEach(category => { @@ -65,7 +68,9 @@ export async function getStaticPaths() { ) // 处理文章页数 const postCount = categoryPosts.length - const totalPages = Math.ceil(postCount / siteConfig('POSTS_PER_PAGE')) + const totalPages = Math.ceil( + postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + ) if (totalPages > 1) { for (let i = 1; i <= totalPages; i++) { paths.push({ params: { category: category.name, page: '' + i } }) diff --git a/pages/index.js b/pages/index.js index eb0a2bd4..f5bade7f 100644 --- a/pages/index.js +++ b/pages/index.js @@ -28,7 +28,11 @@ export async function getStaticProps(req) { const { locale } = req const from = 'index' const props = await getGlobalData({ from, locale }) - + const POST_PREVIEW_LINES = siteConfig( + 'POST_PREVIEW_LINES', + 12, + props?.NOTION_CONFIG + ) props.posts = props.allPages?.filter( page => page.type === 'Post' && page.status === 'Published' ) @@ -37,29 +41,28 @@ export async function getStaticProps(req) { if (siteConfig('POST_LIST_STYLE') === 'scroll') { // 滚动列表默认给前端返回所有数据 } else if (siteConfig('POST_LIST_STYLE') === 'page') { - props.posts = props.posts?.slice(0, siteConfig('POSTS_PER_PAGE')) + props.posts = props.posts?.slice( + 0, + siteConfig('POSTS_PER_PAGE', 12, props?.NOTION_CONFIG) + ) } // 预览文章内容 - if (siteConfig('POST_LIST_PREVIEW')) { + if (siteConfig('POST_LIST_PREVIEW', false, props?.NOTION_CONFIG)) { for (const i in props.posts) { const post = props.posts[i] if (post.password && post.password !== '') { continue } - post.blockMap = await getPostBlocks( - post.id, - 'slug', - siteConfig('POST_PREVIEW_LINES') - ) + post.blockMap = await getPostBlocks(post.id, 'slug', POST_PREVIEW_LINES) } } // 生成robotTxt - generateRobotsTxt(props?.NOTION_CONFIG) + generateRobotsTxt(props) // 生成Feed订阅 if (JSON.parse(BLOG.ENABLE_RSS)) { - generateRss(props?.NOTION_CONFIG, props?.latestPosts || []) + generateRss(props) } // 生成全文索引 - 仅在 yarn build 时执行 && process.env.npm_lifecycle_event === 'build' diff --git a/pages/page/[page].js b/pages/page/[page].js index 7d0334ed..236c93ef 100644 --- a/pages/page/[page].js +++ b/pages/page/[page].js @@ -21,8 +21,10 @@ const Page = props => { export async function getStaticPaths({ locale }) { const from = 'page-paths' - const { postCount } = await getGlobalData({ from, locale }) - const totalPages = Math.ceil(postCount / siteConfig('POSTS_PER_PAGE')) + const { postCount, NOTION_CONFIG } = await getGlobalData({ from, locale }) + const totalPages = Math.ceil( + postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + ) return { // remove first page, we 're not gonna handle that. paths: Array.from({ length: totalPages - 1 }, (_, i) => ({ @@ -36,28 +38,31 @@ export async function getStaticProps({ params: { page } }) { const from = `page-${page}` const props = await getGlobalData({ from }) const { allPages } = props + const POST_PREVIEW_LINES = siteConfig( + 'POST_PREVIEW_LINES', + 12, + props?.NOTION_CONFIG + ) + const allPosts = allPages?.filter( page => page.type === 'Post' && page.status === 'Published' ) + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, props?.NOTION_CONFIG) // 处理分页 props.posts = allPosts.slice( - siteConfig('POSTS_PER_PAGE') * (page - 1), - siteConfig('POSTS_PER_PAGE') * page + POSTS_PER_PAGE * (page - 1), + POSTS_PER_PAGE * page ) props.page = page // 处理预览 - if (siteConfig('POST_LIST_PREVIEW')) { + if (siteConfig('POST_LIST_PREVIEW', false, props?.NOTION_CONFIG)) { for (const i in props.posts) { const post = props.posts[i] if (post.password && post.password !== '') { continue } - post.blockMap = await getPostBlocks( - post.id, - 'slug', - siteConfig('POST_PREVIEW_LINES') - ) + post.blockMap = await getPostBlocks(post.id, 'slug', POST_PREVIEW_LINES) } } diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js index 106c3c32..6d753578 100644 --- a/pages/search/[keyword]/index.js +++ b/pages/search/[keyword]/index.js @@ -31,11 +31,18 @@ export async function getStaticProps({ params: { keyword }, locale }) { ) props.posts = await filterByMemCache(allPosts, keyword) props.postCount = props.posts.length + const POST_LIST_STYLE = siteConfig( + 'POST_LIST_STYLE', + 'Page', + props?.NOTION_CONFIG + ) + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, props?.NOTION_CONFIG) + // 处理分页 - if (siteConfig('POST_LIST_STYLE') === 'scroll') { - // 滚动列表 给前端返回所有数据 - } else if (siteConfig('POST_LIST_STYLE') === 'page') { - props.posts = props.posts?.slice(0, siteConfig('POSTS_PER_PAGE')) + if (POST_LIST_STYLE === 'scroll') { + // 滚动列表默认给前端返回所有数据 + } else if (POST_LIST_STYLE) { + props.posts = props.posts?.slice(0, POSTS_PER_PAGE) } props.keyword = keyword return { diff --git a/pages/search/[keyword]/page/[page].js b/pages/search/[keyword]/page/[page].js index 4b88a6a2..6e497b7c 100644 --- a/pages/search/[keyword]/page/[page].js +++ b/pages/search/[keyword]/page/[page].js @@ -34,10 +34,11 @@ export async function getStaticProps({ params: { keyword, page }, locale }) { ) props.posts = await filterByMemCache(allPosts, keyword) props.postCount = props.posts.length + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, props?.NOTION_CONFIG) // 处理分页 props.posts = props.posts.slice( - siteConfig('POSTS_PER_PAGE') * (page - 1), - siteConfig('POSTS_PER_PAGE') * page + POSTS_PER_PAGE * (page - 1), + POSTS_PER_PAGE * page ) props.keyword = keyword props.page = page diff --git a/pages/tag/[tag]/index.js b/pages/tag/[tag]/index.js index 0643281f..2860f91c 100644 --- a/pages/tag/[tag]/index.js +++ b/pages/tag/[tag]/index.js @@ -35,7 +35,10 @@ export async function getStaticProps({ params: { tag }, locale }) { if (siteConfig('POST_LIST_STYLE') === 'scroll') { // 滚动列表 给前端返回所有数据 } else if (siteConfig('POST_LIST_STYLE') === 'page') { - props.posts = props.posts?.slice(0, siteConfig('POSTS_PER_PAGE')) + props.posts = props.posts?.slice( + 0, + siteConfig('POSTS_PER_PAGE', 12, props?.NOTION_CONFIG) + ) } props.tag = tag diff --git a/pages/tag/[tag]/page/[page].js b/pages/tag/[tag]/page/[page].js index 6f891675..f8e70c3c 100644 --- a/pages/tag/[tag]/page/[page].js +++ b/pages/tag/[tag]/page/[page].js @@ -22,10 +22,11 @@ export async function getStaticProps({ params: { tag, page }, locale }) { .filter(post => post && post?.tags && post?.tags.includes(tag)) // 处理文章数 props.postCount = props.posts.length + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, props?.NOTION_CONFIG) // 处理分页 props.posts = props.posts.slice( - siteConfig('POSTS_PER_PAGE') * (page - 1), - siteConfig('POSTS_PER_PAGE') * page + POSTS_PER_PAGE * (page - 1), + POSTS_PER_PAGE * page ) props.tag = tag @@ -43,7 +44,7 @@ export async function getStaticProps({ params: { tag, page }, locale }) { export async function getStaticPaths() { const from = 'tag-page-static-path' - const { tagOptions, allPages } = await getGlobalData({ from }) + const { tagOptions, allPages, NOTION_CONFIG } = await getGlobalData({ from }) const paths = [] tagOptions?.forEach(tag => { // 过滤状态类型 @@ -52,7 +53,9 @@ export async function getStaticPaths() { .filter(post => post && post?.tags && post?.tags.includes(tag.name)) // 处理文章页数 const postCount = tagPosts.length - const totalPages = Math.ceil(postCount / siteConfig('POSTS_PER_PAGE')) + const totalPages = Math.ceil( + postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + ) if (totalPages > 1) { for (let i = 1; i <= totalPages; i++) { paths.push({ params: { tag: tag.name, page: '' + i } }) diff --git a/themes/commerce/components/BlogPostListPage.js b/themes/commerce/components/BlogPostListPage.js index 17ca53bb..d762e083 100644 --- a/themes/commerce/components/BlogPostListPage.js +++ b/themes/commerce/components/BlogPostListPage.js @@ -1,7 +1,8 @@ -import ProductCard from './ProductCard' -import PaginationNumber from './PaginationNumber' import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' import BlogPostListEmpty from './BlogPostListEmpty' +import PaginationNumber from './PaginationNumber' +import ProductCard from './ProductCard' /** * 文章列表分页表格 @@ -12,20 +13,29 @@ import BlogPostListEmpty from './BlogPostListEmpty' * @constructor */ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => { - const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE'))) - const showPagination = postCount >= parseInt(siteConfig('POSTS_PER_PAGE')) + const { NOTION_CONFIG } = useGlobal() + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + const totalPage = Math.ceil(postCount / POSTS_PER_PAGE) + const showPagination = postCount >= POSTS_PER_PAGE if (!posts || posts.length === 0 || page > totalPage) { return } else { return ( -
+
{/* 文章列表 */} -
+
{posts?.map(post => ( - + ))}
- {showPagination && } + {showPagination && ( + + )}
) } diff --git a/themes/commerce/components/BlogPostListScroll.js b/themes/commerce/components/BlogPostListScroll.js index 91beb929..004e2b5e 100644 --- a/themes/commerce/components/BlogPostListScroll.js +++ b/themes/commerce/components/BlogPostListScroll.js @@ -1,10 +1,10 @@ import { siteConfig } from '@/lib/config' -import ProductCard from './ProductCard' -import BlogPostListEmpty from './BlogPostListEmpty' import { useGlobal } from '@/lib/global' -import CONFIG from '../config' import { getListByPage } from '@/lib/utils' import { useEffect, useRef, useState } from 'react' +import CONFIG from '../config' +import BlogPostListEmpty from './BlogPostListEmpty' +import ProductCard from './ProductCard' /** * 博客列表滚动分页 @@ -13,15 +13,22 @@ import { useEffect, useRef, useState } from 'react' * @returns {JSX.Element} * @constructor */ -const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.POST_LIST_SUMMARY, siteInfo }) => { - const postsPerPage = parseInt(siteConfig('POSTS_PER_PAGE')) +const BlogPostListScroll = ({ + posts = [], + currentSearch, + showSummary = CONFIG.POST_LIST_SUMMARY, + siteInfo +}) => { + const { NOTION_CONFIG } = useGlobal() + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + const [page, updatePage] = useState(1) - const postsToShow = getListByPage(posts, page, postsPerPage) + const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE) let hasMore = false if (posts) { const totalCount = posts.length - hasMore = page * postsPerPage < totalCount + hasMore = page * POSTS_PER_PAGE < totalCount } const handleGetMore = () => { @@ -33,7 +40,11 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.PO const scrollTrigger = () => { requestAnimationFrame(() => { const scrollS = window.scrollY + window.outerHeight - const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0 + const clientHeight = targetRef + ? targetRef.current + ? targetRef.current.clientHeight + : 0 + : 0 if (scrollS > clientHeight + 100) { handleGetMore() } @@ -54,21 +65,32 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.PO if (!postsToShow || postsToShow.length === 0) { return } else { - return
+ return ( +
+ {/* 文章列表 */} +
+ {postsToShow.map(post => ( + + ))} +
- {/* 文章列表 */} -
- {postsToShow.map(post => ( - - ))} +
+
{ + handleGetMore() + }} + className='w-full my-4 py-4 text-center cursor-pointer rounded-xl dark:text-gray-200'> + {' '} + {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE}`}{' '} +
+
- -
-
{ handleGetMore() }} - className='w-full my-4 py-4 text-center cursor-pointer rounded-xl dark:text-gray-200' - > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE}`}
-
-
+ ) } } diff --git a/themes/example/components/BlogListPage.js b/themes/example/components/BlogListPage.js index d1068ffd..f9ae29a4 100644 --- a/themes/example/components/BlogListPage.js +++ b/themes/example/components/BlogListPage.js @@ -11,10 +11,10 @@ import BlogItem from './BlogItem' */ export const BlogListPage = props => { const { page = 1, posts, postCount } = props - const { locale } = useGlobal() + const { locale, NOTION_CONFIG } = useGlobal() const router = useRouter() const totalPage = Math.ceil( - postCount / parseInt(siteConfig('POSTS_PER_PAGE')) + postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) ) const currentPage = +page diff --git a/themes/example/components/BlogListScroll.js b/themes/example/components/BlogListScroll.js index ea883975..3ddc340a 100644 --- a/themes/example/components/BlogListScroll.js +++ b/themes/example/components/BlogListScroll.js @@ -11,21 +11,18 @@ import BlogItem from './BlogItem' */ export const BlogListScroll = props => { const { posts } = props - const { locale } = useGlobal() - + const { locale, NOTION_CONFIG } = useGlobal() const [page, updatePage] = useState(1) + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) let hasMore = false const postsToShow = posts - ? Object.assign(posts).slice( - 0, - parseInt(siteConfig('POSTS_PER_PAGE')) * page - ) + ? Object.assign(posts).slice(0, POSTS_PER_PAGE * page) : [] if (posts) { const totalCount = posts.length - hasMore = page * parseInt(siteConfig('POSTS_PER_PAGE')) < totalCount + hasMore = page * POSTS_PER_PAGE < totalCount } const handleGetMore = () => { if (!hasMore) return diff --git a/themes/fukasawa/components/BlogListPage.js b/themes/fukasawa/components/BlogListPage.js index 0cd2dc94..e15c58fa 100644 --- a/themes/fukasawa/components/BlogListPage.js +++ b/themes/fukasawa/components/BlogListPage.js @@ -1,11 +1,12 @@ +import { AdSlot } from '@/components/GoogleAdsense' import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' import { deepClone, isBrowser } from '@/lib/utils' +import { debounce } from 'lodash' +import { useEffect, useState } from 'react' import BlogCard from './BlogCard' import BlogPostListEmpty from './BlogListEmpty' import PaginationSimple from './PaginationSimple' -import { useEffect, useState } from 'react' -import { debounce } from 'lodash' -import { AdSlot } from '@/components/GoogleAdsense' /** * 文章列表分页表格 * @param page 当前页 @@ -15,7 +16,10 @@ import { AdSlot } from '@/components/GoogleAdsense' * @constructor */ const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => { - const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE'))) + const { NOTION_CONFIG } = useGlobal() + const totalPage = Math.ceil( + postCount / parseInt(siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)) + ) const showNext = page < totalPage const [columns, setColumns] = useState(calculateColumns()) @@ -53,18 +57,25 @@ const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => { return (
{/* 文章列表 */} -
+
{filterPosts?.map((post, index) => ( -
- +
+
))} {siteConfig('ADSENSE_GOOGLE_ID') && (
- +
)} -
diff --git a/themes/fukasawa/components/BlogListScroll.js b/themes/fukasawa/components/BlogListScroll.js index b3fdef35..22b21751 100644 --- a/themes/fukasawa/components/BlogListScroll.js +++ b/themes/fukasawa/components/BlogListScroll.js @@ -1,8 +1,8 @@ import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' import { useEffect, useRef, useState } from 'react' import BlogCard from './BlogCard' import BlogPostListEmpty from './BlogListEmpty' -import { useGlobal } from '@/lib/global' /** * 文章列表分页表格 @@ -14,19 +14,19 @@ import { useGlobal } from '@/lib/global' */ const BlogListScroll = props => { const { posts = [], siteInfo } = props - const { locale } = useGlobal() + const { locale, NOTION_CONFIG } = useGlobal() const targetRef = useRef(null) - const [page, updatePage] = useState(1) + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) let hasMore = false const postsToShow = posts - ? Object.assign(posts).slice(0, parseInt(siteConfig('POSTS_PER_PAGE')) * page) + ? Object.assign(posts).slice(0, POSTS_PER_PAGE * page) : [] if (posts) { const totalCount = posts.length - hasMore = page * parseInt(siteConfig('POSTS_PER_PAGE')) < totalCount + hasMore = page * POSTS_PER_PAGE < totalCount } const handleGetMore = () => { if (!hasMore) return @@ -37,7 +37,11 @@ const BlogListScroll = props => { const scrollTrigger = () => { requestAnimationFrame(() => { const scrollS = window.scrollY + window.outerHeight - const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0 + const clientHeight = targetRef + ? targetRef.current + ? targetRef.current.clientHeight + : 0 + : 0 if (scrollS > clientHeight + 100) { handleGetMore() } @@ -55,20 +59,29 @@ const BlogListScroll = props => { return } else { return ( -
- {/* 文章列表 */} - {postsToShow?.map(post => ( -
- -
- ))} +
+ {/* 文章列表 */} + {postsToShow?.map(post => ( +
+ +
+ ))} -
- {' '} - {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} -
-
+
+ {' '} + {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} +
+
) } } diff --git a/themes/game/components/BlogListPage.js b/themes/game/components/BlogListPage.js index 8d821bd1..139eb783 100644 --- a/themes/game/components/BlogListPage.js +++ b/themes/game/components/BlogListPage.js @@ -1,4 +1,4 @@ -import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' import { GameListIndexCombine } from './GameListIndexCombine' import PaginationSimple from './PaginationSimple' /** @@ -8,9 +8,8 @@ import PaginationSimple from './PaginationSimple' */ export const BlogListPage = props => { const { page = 1, postCount } = props - const totalPage = Math.ceil( - postCount / parseInt(siteConfig('POSTS_PER_PAGE')) - ) + const { NOTION_CONFIG } = useGlobal() + const totalPage = Math.ceil(postCount / NOTION_CONFIG) const showNext = page < totalPage return ( diff --git a/themes/game/components/BlogListScroll.js b/themes/game/components/BlogListScroll.js index cc42438d..6fa04049 100644 --- a/themes/game/components/BlogListScroll.js +++ b/themes/game/components/BlogListScroll.js @@ -7,19 +7,19 @@ import { GameListIndexCombine } from './GameListIndexCombine' export const BlogListScroll = props => { const { posts } = props - const { locale } = useGlobal() - + const { locale, NOTION_CONFIG } = useGlobal() const [page, updatePage] = useState(1) + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) let hasMore = false const postsToShow = posts && Array.isArray(posts) - ? deepClone(posts).slice(0, parseInt(siteConfig('POSTS_PER_PAGE')) * page) + ? deepClone(posts).slice(0, POSTS_PER_PAGE * page) : [] if (posts) { const totalCount = posts.length - hasMore = page * parseInt(siteConfig('POSTS_PER_PAGE')) < totalCount + hasMore = page * POSTS_PER_PAGE < totalCount } const handleGetMore = () => { if (!hasMore) return diff --git a/themes/game/components/BlogPost.js b/themes/game/components/BlogPost.js index 0131dc62..51354bd8 100644 --- a/themes/game/components/BlogPost.js +++ b/themes/game/components/BlogPost.js @@ -1,10 +1,13 @@ import NotionIcon from '@/components/NotionIcon' import NotionPage from '@/components/NotionPage' import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' import Link from 'next/link' const BlogPost = ({ post }) => { - const showPreview = siteConfig('POST_LIST_PREVIEW') && post.blockMap + const { NOTION_CONFIG } = useGlobal() + const showPreview = + siteConfig('POST_LIST_PREVIEW', false, NOTION_CONFIG) && post?.blockMap return ( diff --git a/themes/heo/components/BlogPostListPage.js b/themes/heo/components/BlogPostListPage.js index dcb6afa3..4239e233 100644 --- a/themes/heo/components/BlogPostListPage.js +++ b/themes/heo/components/BlogPostListPage.js @@ -1,7 +1,8 @@ -import BlogPostCard from './BlogPostCard' -import PaginationNumber from './PaginationNumber' -import BlogPostListEmpty from './BlogPostListEmpty' import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' +import BlogPostCard from './BlogPostCard' +import BlogPostListEmpty from './BlogPostListEmpty' +import PaginationNumber from './PaginationNumber' /** * 文章列表分页表格 @@ -12,22 +13,31 @@ import { siteConfig } from '@/lib/config' * @constructor */ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => { - const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE'))) - const showPagination = postCount >= parseInt(siteConfig('POSTS_PER_PAGE')) + const { NOTION_CONFIG } = useGlobal() + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + const totalPage = Math.ceil(postCount / POSTS_PER_PAGE) + const showPagination = postCount >= POSTS_PER_PAGE if (!posts || posts.length === 0 || page > totalPage) { return } else { return ( -
- {/* 文章列表 */} -
- {posts?.map(post => ( - - ))} -
+
+ {/* 文章列表 */} +
+ {posts?.map(post => ( + + ))} +
- {showPagination && } -
+ {showPagination && ( + + )} +
) } } diff --git a/themes/heo/components/BlogPostListScroll.js b/themes/heo/components/BlogPostListScroll.js index 95063b16..9fa7e736 100644 --- a/themes/heo/components/BlogPostListScroll.js +++ b/themes/heo/components/BlogPostListScroll.js @@ -1,10 +1,10 @@ -import BlogPostCard from './BlogPostCard' -import BlogPostListEmpty from './BlogPostListEmpty' +import { siteConfig } from '@/lib/config' import { useGlobal } from '@/lib/global' +import { getListByPage } from '@/lib/utils' import { useEffect, useRef, useState } from 'react' import CONFIG from '../config' -import { getListByPage } from '@/lib/utils' -import { siteConfig } from '@/lib/config' +import BlogPostCard from './BlogPostCard' +import BlogPostListEmpty from './BlogPostListEmpty' /** * 博客列表滚动分页 @@ -13,15 +13,21 @@ import { siteConfig } from '@/lib/config' * @returns {JSX.Element} * @constructor */ -const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfig('HEO_POST_LIST_SUMMARY', null, CONFIG), siteInfo }) => { - const postsPerPage = parseInt(siteConfig('POSTS_PER_PAGE')) +const BlogPostListScroll = ({ + posts = [], + currentSearch, + showSummary = siteConfig('HEO_POST_LIST_SUMMARY', null, CONFIG), + siteInfo +}) => { + const { NOTION_CONFIG } = useGlobal() const [page, updatePage] = useState(1) - const postsToShow = getListByPage(posts, page, postsPerPage) + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE) let hasMore = false if (posts) { const totalCount = posts.length - hasMore = page * postsPerPage < totalCount + hasMore = page * POSTS_PER_PAGE < totalCount } const handleGetMore = () => { @@ -33,7 +39,11 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfi const scrollTrigger = () => { requestAnimationFrame(() => { const scrollS = window.scrollY + window.outerHeight - const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0 + const clientHeight = targetRef + ? targetRef.current + ? targetRef.current.clientHeight + : 0 + : 0 if (scrollS > clientHeight + 100) { handleGetMore() } @@ -54,22 +64,33 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfi if (!postsToShow || postsToShow.length === 0) { return } else { - return
+ return ( +
+ {/* 文章列表 */} +
+ {postsToShow.map(post => ( + + ))} +
- {/* 文章列表 */} -
- {postsToShow.map(post => ( - - ))} + {/* 更多按钮 */} +
+
{ + handleGetMore() + }} + className='w-full my-4 py-4 text-center cursor-pointer rounded-xl dark:text-gray-200'> + {' '} + {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE}`}{' '} +
+
- - {/* 更多按钮 */} -
-
{ handleGetMore() }} - className='w-full my-4 py-4 text-center cursor-pointer rounded-xl dark:text-gray-200' - > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE}`}
-
-
+ ) } } diff --git a/themes/hexo/components/BlogPostListPage.js b/themes/hexo/components/BlogPostListPage.js index d5c3d84c..c96b9cdd 100644 --- a/themes/hexo/components/BlogPostListPage.js +++ b/themes/hexo/components/BlogPostListPage.js @@ -1,7 +1,8 @@ -import BlogPostCard from './BlogPostCard' -import PaginationNumber from './PaginationNumber' import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' +import BlogPostCard from './BlogPostCard' import BlogPostListEmpty from './BlogPostListEmpty' +import PaginationNumber from './PaginationNumber' /** * 文章列表分页表格 @@ -12,20 +13,29 @@ import BlogPostListEmpty from './BlogPostListEmpty' * @constructor */ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => { - const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE'))) - const showPagination = postCount >= parseInt(siteConfig('POSTS_PER_PAGE')) + const { NOTION_CONFIG } = useGlobal() + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + const totalPage = Math.ceil(postCount / POSTS_PER_PAGE) + const showPagination = postCount >= POSTS_PER_PAGE if (!posts || posts.length === 0 || page > totalPage) { return } else { return ( -
+
{/* 文章列表 */} -
+
{posts?.map(post => ( - + ))}
- {showPagination && } + {showPagination && ( + + )}
) } diff --git a/themes/hexo/components/BlogPostListScroll.js b/themes/hexo/components/BlogPostListScroll.js index c92c0b55..b3f19036 100644 --- a/themes/hexo/components/BlogPostListScroll.js +++ b/themes/hexo/components/BlogPostListScroll.js @@ -1,10 +1,10 @@ import { siteConfig } from '@/lib/config' -import BlogPostCard from './BlogPostCard' -import BlogPostListEmpty from './BlogPostListEmpty' import { useGlobal } from '@/lib/global' +import { getListByPage } from '@/lib/utils' import { useEffect, useRef, useState } from 'react' import CONFIG from '../config' -import { getListByPage } from '@/lib/utils' +import BlogPostCard from './BlogPostCard' +import BlogPostListEmpty from './BlogPostListEmpty' /** * 博客列表滚动分页 @@ -13,15 +13,21 @@ import { getListByPage } from '@/lib/utils' * @returns {JSX.Element} * @constructor */ -const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfig('HEXO_POST_LIST_SUMMARY', null, CONFIG), siteInfo }) => { - const postsPerPage = parseInt(siteConfig('POSTS_PER_PAGE')) +const BlogPostListScroll = ({ + posts = [], + currentSearch, + showSummary = siteConfig('HEXO_POST_LIST_SUMMARY', null, CONFIG), + siteInfo +}) => { + const { NOTION_CONFIG } = useGlobal() const [page, updatePage] = useState(1) - const postsToShow = getListByPage(posts, page, postsPerPage) + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE) let hasMore = false if (posts) { const totalCount = posts.length - hasMore = page * postsPerPage < totalCount + hasMore = page * POSTS_PER_PAGE < totalCount } const handleGetMore = () => { @@ -33,7 +39,11 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfi const scrollTrigger = () => { requestAnimationFrame(() => { const scrollS = window.scrollY + window.outerHeight - const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0 + const clientHeight = targetRef + ? targetRef.current + ? targetRef.current.clientHeight + : 0 + : 0 if (scrollS > clientHeight + 100) { handleGetMore() } @@ -54,21 +64,32 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfi if (!postsToShow || postsToShow.length === 0) { return } else { - return
+ return ( +
+ {/* 文章列表 */} +
+ {postsToShow.map(post => ( + + ))} +
- {/* 文章列表 */} -
- {postsToShow.map(post => ( - - ))} +
+
{ + handleGetMore() + }} + className='w-full my-4 py-4 text-center cursor-pointer rounded-xl dark:text-gray-200'> + {' '} + {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE}`}{' '} +
+
- -
-
{ handleGetMore() }} - className='w-full my-4 py-4 text-center cursor-pointer rounded-xl dark:text-gray-200' - > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE}`}
-
-
+ ) } } diff --git a/themes/matery/components/BlogPostListPage.js b/themes/matery/components/BlogPostListPage.js index 05478669..8558d5e7 100644 --- a/themes/matery/components/BlogPostListPage.js +++ b/themes/matery/components/BlogPostListPage.js @@ -1,4 +1,5 @@ import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' import BlogPostCard from './BlogPostCard' import BlogPostListEmpty from './BlogPostListEmpty' import PaginationSimple from './PaginationSimple' @@ -12,10 +13,10 @@ import PaginationSimple from './PaginationSimple' * @constructor */ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => { - const totalPage = Math.ceil( - postCount / parseInt(siteConfig('POSTS_PER_PAGE')) - ) - const showPagination = postCount >= parseInt(siteConfig('POSTS_PER_PAGE')) + const { NOTION_CONFIG } = useGlobal() + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + const totalPage = Math.ceil(postCount / POSTS_PER_PAGE) + const showPagination = postCount >= POSTS_PER_PAGE if (!posts || posts.length === 0 || page > totalPage) { return } else { diff --git a/themes/matery/components/BlogPostListScroll.js b/themes/matery/components/BlogPostListScroll.js index d7ce5ae4..8a91bf07 100644 --- a/themes/matery/components/BlogPostListScroll.js +++ b/themes/matery/components/BlogPostListScroll.js @@ -1,11 +1,11 @@ import { siteConfig } from '@/lib/config' -import BlogPostCard from './BlogPostCard' -import BlogPostListEmpty from './BlogPostListEmpty' import { useGlobal } from '@/lib/global' -import { useCallback, useEffect, useRef, useState } from 'react' -import CONFIG from '../config' import { getListByPage } from '@/lib/utils' import throttle from 'lodash.throttle' +import { useCallback, useEffect, useRef, useState } from 'react' +import CONFIG from '../config' +import BlogPostCard from './BlogPostCard' +import BlogPostListEmpty from './BlogPostListEmpty' /** * 博客列表滚动分页 @@ -14,10 +14,16 @@ import throttle from 'lodash.throttle' * @returns {JSX.Element} * @constructor */ -const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfig('MATERY_POST_LIST_SUMMARY', null, CONFIG), siteInfo }) => { - const postsPerPage = parseInt(siteConfig('POSTS_PER_PAGE')) +const BlogPostListScroll = ({ + posts = [], + currentSearch, + showSummary = siteConfig('MATERY_POST_LIST_SUMMARY', null, CONFIG), + siteInfo +}) => { + const { NOTION_CONFIG } = useGlobal() + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) const [page, updatePage] = useState(1) - const postsToShow = getListByPage(posts, page, postsPerPage) + const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE) // 监听滚动 useEffect(() => { window.addEventListener('scroll', scrollTrigger) @@ -31,7 +37,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfi let hasMore = false if (posts) { const totalCount = posts.length - hasMore = page * postsPerPage < totalCount + hasMore = page * POSTS_PER_PAGE < totalCount } const handleGetMore = () => { @@ -40,36 +46,52 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfi } const throttleMs = 200 - const scrollTrigger = useCallback(throttle(() => { - requestAnimationFrame(() => { - const scrollS = window.scrollY + window.outerHeight - const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0 - if (scrollS > clientHeight + 100) { - handleGetMore() - } - }) - }, throttleMs)) + const scrollTrigger = useCallback( + throttle(() => { + requestAnimationFrame(() => { + const scrollS = window.scrollY + window.outerHeight + const clientHeight = targetRef + ? targetRef.current + ? targetRef.current.clientHeight + : 0 + : 0 + if (scrollS > clientHeight + 100) { + handleGetMore() + } + }) + }, throttleMs) + ) if (!postsToShow || postsToShow.length === 0) { return } else { - return
- - {/* 文章列表 */} -
- {postsToShow.map(post => ( + return ( +
+ {/* 文章列表 */} +
+ {postsToShow.map(post => (
- +
- ))} -
+ ))} +
-
-
{ handleGetMore() }} - className='w-full my-4 py-4 text-center cursor-pointer rounded-xl dark:text-gray-200' - > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE}`}
+
+
{ + handleGetMore() + }} + className='w-full my-4 py-4 text-center cursor-pointer rounded-xl dark:text-gray-200'> + {' '} + {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE}`}{' '} +
+
-
+ ) } } diff --git a/themes/medium/components/BlogPostListPage.js b/themes/medium/components/BlogPostListPage.js index 9b47bfb7..c8171c4b 100644 --- a/themes/medium/components/BlogPostListPage.js +++ b/themes/medium/components/BlogPostListPage.js @@ -1,5 +1,6 @@ -import BlogPostCard from './BlogPostCard' import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' +import BlogPostCard from './BlogPostCard' import BlogPostListEmpty from './BlogPostListEmpty' import PaginationSimple from './PaginationSimple' @@ -12,22 +13,24 @@ import PaginationSimple from './PaginationSimple' * @constructor */ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => { - const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE'))) + const { NOTION_CONFIG } = useGlobal() + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + const totalPage = Math.ceil(postCount / POSTS_PER_PAGE) if (!posts || posts.length === 0) { return } return ( -
-
+
+
{/* 文章列表 */} {posts?.map(post => ( ))} -
-
+ +
) } diff --git a/themes/medium/components/BlogPostListScroll.js b/themes/medium/components/BlogPostListScroll.js index 5f554a0c..cf06a093 100644 --- a/themes/medium/components/BlogPostListScroll.js +++ b/themes/medium/components/BlogPostListScroll.js @@ -1,10 +1,10 @@ import { siteConfig } from '@/lib/config' -import BlogPostCard from './BlogPostCard' -import BlogPostListEmpty from './BlogPostListEmpty' import { useGlobal } from '@/lib/global' import throttle from 'lodash.throttle' -import { useCallback, useEffect, useRef, useState } from 'react' import { useRouter } from 'next/router' +import { useCallback, useEffect, useRef, useState } from 'react' +import BlogPostCard from './BlogPostCard' +import BlogPostListEmpty from './BlogPostListEmpty' /** * 博客列表滚动分页 @@ -14,7 +14,8 @@ import { useRouter } from 'next/router' * @constructor */ const BlogPostListScroll = ({ posts = [], currentSearch }) => { - const postsPerPage = parseInt(siteConfig('POSTS_PER_PAGE')) + const { NOTION_CONFIG } = useGlobal() + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) const [page, updatePage] = useState(1) const router = useRouter() let filteredPosts = Object.assign(posts) @@ -26,12 +27,12 @@ const BlogPostListScroll = ({ posts = [], currentSearch }) => { return searchContent.toLowerCase().includes(searchKey.toLowerCase()) }) } - const postsToShow = getPostByPage(page, filteredPosts, postsPerPage) + const postsToShow = getPostByPage(page, filteredPosts, POSTS_PER_PAGE) let hasMore = false if (filteredPosts) { const totalCount = filteredPosts.length - hasMore = page * postsPerPage < totalCount + hasMore = page * POSTS_PER_PAGE < totalCount } const handleGetMore = () => { @@ -40,13 +41,19 @@ const BlogPostListScroll = ({ posts = [], currentSearch }) => { } // 监听滚动自动分页加载 - 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) + ) // 监听滚动 useEffect(() => { @@ -62,23 +69,27 @@ const BlogPostListScroll = ({ posts = [], currentSearch }) => { if (!postsToShow || postsToShow.length === 0) { return } else { - return
+ return ( +
+ {/* 文章列表 */} +
+ {postsToShow?.map(post => ( + + ))} +
- {/* 文章列表 */} -
- {postsToShow?.map(post => ( - - ))} +
+
{ + handleGetMore() + }} + className='w-full my-4 py-4 text-center cursor-pointer dark:text-gray-200'> + {' '} + {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} +
+
- -
-
{ - handleGetMore() - }} - className='w-full my-4 py-4 text-center cursor-pointer dark:text-gray-200' - > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}
-
-
+ ) } } @@ -86,14 +97,11 @@ const BlogPostListScroll = ({ posts = [], currentSearch }) => { * 获取从第1页到指定页码的文章 * @param page 第几页 * @param totalPosts 所有文章 - * @param postsPerPage 每页文章数量 + * @param POSTS_PER_PAGE 每页文章数量 * @returns {*} */ -const getPostByPage = function (page, totalPosts, postsPerPage) { - return totalPosts.slice( - 0, - postsPerPage * page - ) +const getPostByPage = function (page, totalPosts, POSTS_PER_PAGE) { + return totalPosts.slice(0, POSTS_PER_PAGE * page) } export default BlogPostListScroll diff --git a/themes/movie/components/BlogListPage.js b/themes/movie/components/BlogListPage.js index 648f2ee2..9ba62844 100644 --- a/themes/movie/components/BlogListPage.js +++ b/themes/movie/components/BlogListPage.js @@ -1,11 +1,14 @@ 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 totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE'))) + const { NOTION_CONFIG } = useGlobal() + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + const totalPage = Math.ceil(postCount / POSTS_PER_PAGE) const showPageCover = siteConfig('MOVIE_POST_LIST_COVER', null, CONFIG) diff --git a/themes/movie/components/BlogListScroll.js b/themes/movie/components/BlogListScroll.js index 597ba7dc..aa1538c7 100644 --- a/themes/movie/components/BlogListScroll.js +++ b/themes/movie/components/BlogListScroll.js @@ -12,11 +12,18 @@ export const BlogListScroll = props => { const [page, updatePage] = useState(1) let hasMore = false - const postsToShow = posts ? Object.assign(posts).slice(0, parseInt(siteConfig('POSTS_PER_PAGE')) * page) : [] + 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')) < totalCount + hasMore = + page * parseInt(siteConfig('POSTS_PER_PAGE', 12, props?.NOTION_CONFIG)) < + totalCount } const handleGetMore = () => { if (!hasMore) return @@ -29,7 +36,11 @@ export const BlogListScroll = props => { const scrollTrigger = useCallback( throttle(() => { const scrollS = window.scrollY + window.outerHeight - const clientHeight = targetRef ? (targetRef.current ? targetRef.current.clientHeight : 0) : 0 + const clientHeight = targetRef + ? targetRef.current + ? targetRef.current.clientHeight + : 0 + : 0 if (scrollS > clientHeight + 100) { handleGetMore() } @@ -46,12 +57,17 @@ export const BlogListScroll = props => { }) return ( -
+
{postsToShow?.map(post => ( ))} -
+
{' '} {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
diff --git a/themes/nav/components/BlogPostListPage.js b/themes/nav/components/BlogPostListPage.js index 50936015..4594f3b8 100755 --- a/themes/nav/components/BlogPostListPage.js +++ b/themes/nav/components/BlogPostListPage.js @@ -1,3 +1,4 @@ +import { siteConfig } from '@/lib/config' import BlogPostCard from './BlogPostCard' import NavPostListEmpty from './NavPostListEmpty' import PaginationSimple from './PaginationSimple' @@ -11,22 +12,24 @@ import PaginationSimple from './PaginationSimple' * @constructor */ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => { - const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE'))) + const totalPage = Math.ceil( + postCount / parseInt(siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)) + ) if (!posts || posts.length === 0) { return } return ( -
-
+
+
{/* 文章列表 */} {posts?.map(post => ( ))} -
-
+ +
) } diff --git a/themes/nav/config.js b/themes/nav/config.js index 910a59ac..7e8a6d72 100755 --- a/themes/nav/config.js +++ b/themes/nav/config.js @@ -1,8 +1,7 @@ const CONFIG = { - NAV_INDEX_PAGE: 'about', // 文档首页显示的文章，请确此路径包含在您的notion数据库中 - NAV_AUTO_SORT: process.env.NEXT_PUBLIC_GITBOOK_AUTO_SORT || true, // 是否自动按分类名 归组排序文章；自动归组可能会打乱您Notion中的文章顺序 + NAV_AUTO_SORT: process.env.NEXT_PUBLIC_NAV_AUTO_SORT || true, // 是否自动按分类名 归组排序文章；自动归组可能会打乱您Notion中的文章顺序 NAV_SHOW_TITLE_TEXT: false, // 标题栏显示文本 NAV_USE_CUSTOM_MENU: true, // 使用自定义菜单（可支持子菜单，支持自定义分类图标），若为true则显示所有的category分类 @@ -14,7 +13,8 @@ const CONFIG = { NAV_MENU_SEARCH: true, // 显示搜索 // Widget - NAV_WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件 + NAV_WIDGET_REVOLVER_MAPS: + process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件 NAV_WIDGET_TO_TOP: true // 跳回顶部 } export default CONFIG diff --git a/themes/next/components/BlogPostListPage.js b/themes/next/components/BlogPostListPage.js index 5da3f160..c74fbbb2 100644 --- a/themes/next/components/BlogPostListPage.js +++ b/themes/next/components/BlogPostListPage.js @@ -1,7 +1,8 @@ -import BlogPostCard from './BlogPostCard' -import PaginationNumber from './PaginationNumber' -import BlogPostListEmpty from './BlogPostListEmpty' import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' +import BlogPostCard from './BlogPostCard' +import BlogPostListEmpty from './BlogPostListEmpty' +import PaginationNumber from './PaginationNumber' /** * 文章列表分页表格 @@ -12,7 +13,9 @@ import { siteConfig } from '@/lib/config' * @constructor */ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => { - const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE'))) + const { NOTION_CONFIG } = useGlobal() + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + const totalPage = Math.ceil(postCount / POSTS_PER_PAGE) if (!posts || posts.length === 0) { return @@ -20,7 +23,9 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => { return (
{/* 文章列表 */} -
+
{posts?.map((post, index) => ( ))} diff --git a/themes/next/components/BlogPostListScroll.js b/themes/next/components/BlogPostListScroll.js index 64f42d0e..1003d2b0 100644 --- a/themes/next/components/BlogPostListScroll.js +++ b/themes/next/components/BlogPostListScroll.js @@ -1,10 +1,10 @@ -import BlogPostCard from './BlogPostCard' -import BlogPostListEmpty from './BlogPostListEmpty' +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 { siteConfig } from '@/lib/config' +import BlogPostCard from './BlogPostCard' +import BlogPostListEmpty from './BlogPostListEmpty' /** * 博客列表滚动分页 @@ -13,15 +13,20 @@ import { siteConfig } from '@/lib/config' * @returns {JSX.Element} * @constructor */ -const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfig('NEXT_POST_LIST_SUMMARY', null, CONFIG) }) => { - const postsPerPage = parseInt(siteConfig('POSTS_PER_PAGE')) +const BlogPostListScroll = ({ + posts = [], + currentSearch, + showSummary = siteConfig('NEXT_POST_LIST_SUMMARY', null, CONFIG) +}) => { + const { NOTION_CONFIG } = useGlobal() + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) const [page, updatePage] = useState(1) - const postsToShow = getPostByPage(page, posts, postsPerPage) + const postsToShow = getPostByPage(page, posts, POSTS_PER_PAGE) let hasMore = false if (posts) { const totalCount = posts.length - hasMore = page * postsPerPage < totalCount + hasMore = page * POSTS_PER_PAGE < totalCount } const handleGetMore = () => { @@ -30,13 +35,19 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfi } // 监听滚动自动分页加载 - 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) + ) // 监听滚动 useEffect(() => { @@ -52,23 +63,29 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfi if (!postsToShow || postsToShow.length === 0) { return } else { - return
+ return ( +
+ {/* 文章列表 */} +
+ {postsToShow.map(post => ( + + ))} +
- {/* 文章列表 */} -
- {postsToShow.map(post => ( - - ))} +
+
{ + handleGetMore() + }} + className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow hover:shadow-xl duration-200 dark:text-gray-200'> + {' '} + {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} +
+
- -
-
{ - handleGetMore() - }} - className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow hover:shadow-xl duration-200 dark:text-gray-200' - > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}
-
-
+ ) } } @@ -76,13 +93,10 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfi * 获取从第1页到指定页码的文章 * @param page 第几页 * @param totalPosts 所有文章 - * @param postsPerPage 每页文章数量 + * @param POSTS_PER_PAGE 每页文章数量 * @returns {*} */ -const getPostByPage = function (page, totalPosts, postsPerPage) { - return totalPosts.slice( - 0, - postsPerPage * page - ) +const getPostByPage = function (page, totalPosts, POSTS_PER_PAGE) { + return totalPosts.slice(0, POSTS_PER_PAGE * page) } export default BlogPostListScroll diff --git a/themes/nobelium/components/BlogListPage.js b/themes/nobelium/components/BlogListPage.js index 46db49fa..0c313ba4 100644 --- a/themes/nobelium/components/BlogListPage.js +++ b/themes/nobelium/components/BlogListPage.js @@ -1,50 +1,58 @@ - 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 BlogPost from './BlogPost' 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 { NOTION_CONFIG } = useGlobal() + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + const totalPage = Math.ceil(postCount / POSTS_PER_PAGE) const currentPage = +page const showPrev = currentPage > 1 const showNext = currentPage < totalPage && posts?.length > 0 - const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '') + const pagePrefix = router.asPath + .split('?')[0] + .replace(/\/page\/[1-9]\d*/, '') + .replace(/\/$/, '') return ( -
+
+
+ {posts?.map(post => ( + + ))} +
-
- {posts?.map(post => ( - - ))} -
- -
- - - - - - - - - - -
-
+
+ + + + + + +
+
) } diff --git a/themes/nobelium/components/BlogListScroll.js b/themes/nobelium/components/BlogListScroll.js index 42a1f440..73bdaba6 100644 --- a/themes/nobelium/components/BlogListScroll.js +++ b/themes/nobelium/components/BlogListScroll.js @@ -1,8 +1,8 @@ -import { useGlobal } from '@/lib/global' -import Link from 'next/link' -import throttle from 'lodash.throttle' -import { deepClone } from '@/lib/utils' import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' +import { deepClone } from '@/lib/utils' +import throttle from 'lodash.throttle' +import Link from 'next/link' import { useCallback, useEffect, useRef, useState } from 'react' export const BlogListScroll = props => { @@ -12,13 +12,20 @@ export const BlogListScroll = props => { const [page, updatePage] = useState(1) let hasMore = false - const postsToShow = posts && Array.isArray(posts) - ? deepClone(posts).slice(0, parseInt(siteConfig('POSTS_PER_PAGE')) * page) - : [] + const postsToShow = + posts && Array.isArray(posts) + ? deepClone(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')) < totalCount + hasMore = + page * parseInt(siteConfig('POSTS_PER_PAGE', 12, props?.NOTION_CONFIG)) < + totalCount } const handleGetMore = () => { if (!hasMore) return @@ -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) + ) useEffect(() => { window.addEventListener('scroll', scrollTrigger) @@ -45,39 +58,41 @@ export const BlogListScroll = props => { }) return ( -
- {postsToShow.map(p => ( - - ))} - -
- {' '} - {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} -
+
+ {postsToShow.map(p => ( + + ))} + +
+ {' '} + {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} +
+
) } diff --git a/themes/nobelium/components/BlogPost.js b/themes/nobelium/components/BlogPost.js index 0131dc62..51354bd8 100644 --- a/themes/nobelium/components/BlogPost.js +++ b/themes/nobelium/components/BlogPost.js @@ -1,10 +1,13 @@ import NotionIcon from '@/components/NotionIcon' import NotionPage from '@/components/NotionPage' import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' import Link from 'next/link' const BlogPost = ({ post }) => { - const showPreview = siteConfig('POST_LIST_PREVIEW') && post.blockMap + const { NOTION_CONFIG } = useGlobal() + const showPreview = + siteConfig('POST_LIST_PREVIEW', false, NOTION_CONFIG) && post?.blockMap return ( diff --git a/themes/plog/components/BlogListPage.js b/themes/plog/components/BlogListPage.js index 488fd188..68790295 100644 --- a/themes/plog/components/BlogListPage.js +++ b/themes/plog/components/BlogListPage.js @@ -1,34 +1,41 @@ - -import { useGlobal } from '@/lib/global' -import { useRouter } from 'next/router' -import Link from 'next/link' -import BlogPost from './BlogPost' -import { useEffect, useRef } from 'react' import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' +import Link from 'next/link' +import { useRouter } from 'next/router' +import { useEffect, useRef } from 'react' +import BlogPost from './BlogPost' 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 { NOTION_CONFIG } = useGlobal() + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) + const totalPage = Math.ceil(postCount / 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 blogPostRefs = useRef([]) useEffect(() => { - const observer = new IntersectionObserver(entries => { - entries.forEach(entry => { - if (entry.isIntersecting) { - entry.target.classList.toggle('visible') - } - }) - }, { - threshold: 0.1 // 调整阈值以达到最佳效果 - }) + const observer = new IntersectionObserver( + entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.toggle('visible') + } + }) + }, + { + threshold: 0.1 // 调整阈值以达到最佳效果 + } + ) blogPostRefs.current.forEach(ref => { observer.observe(ref) @@ -39,34 +46,47 @@ export const BlogListPage = props => { } }, []) return ( -
+
+
+ {posts?.map((post, index) => ( + blogPostRefs.current.push(el)} + /> + ))} +
-
- {posts?.map((post, index) => ( - blogPostRefs.current.push(el)}/> - ))} -
- -
- - - - - - - - - - -
-
+
+ + + + + + +
+
) } diff --git a/themes/plog/components/BlogListScroll.js b/themes/plog/components/BlogListScroll.js index 8e71d14a..6410338d 100644 --- a/themes/plog/components/BlogListScroll.js +++ b/themes/plog/components/BlogListScroll.js @@ -1,8 +1,8 @@ +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 throttle from 'lodash.throttle' -import { siteConfig } from '@/lib/config' export const BlogListScroll = props => { const { posts } = props @@ -12,12 +12,17 @@ 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', 12, props?.NOTION_CONFIG)) * page + ) : [] if (posts) { const totalCount = posts.length - hasMore = page * parseInt(siteConfig('POSTS_PER_PAGE')) < totalCount + hasMore = + page * parseInt(siteConfig('POSTS_PER_PAGE', 12, props?.NOTION_CONFIG)) < + totalCount } const handleGetMore = () => { if (!hasMore) return @@ -27,13 +32,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) + ) useEffect(() => { window.addEventListener('scroll', scrollTrigger) @@ -44,39 +55,41 @@ export const BlogListScroll = props => { }) return ( -
- {postsToShow.map(p => ( - - ))} - -
- {' '} - {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} -
+
+ {postsToShow.map(p => ( + + ))} + +
+ {' '} + {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} +
+
) } diff --git a/themes/simple/components/BlogItem.js b/themes/simple/components/BlogItem.js index fe24c21a..b5b897d8 100644 --- a/themes/simple/components/BlogItem.js +++ b/themes/simple/components/BlogItem.js @@ -3,14 +3,17 @@ import NotionIcon from '@/components/NotionIcon' import NotionPage from '@/components/NotionPage' import TwikooCommentCount from '@/components/TwikooCommentCount' import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' import { formatDateFmt } from '@/lib/utils/formatDate' import Link from 'next/link' import CONFIG from '../config' export const BlogItem = props => { const { post } = props + const { NOTION_CONFIG } = useGlobal() const showPageCover = siteConfig('SIMPLE_POST_COVER_ENABLE', false, CONFIG) - const showPreview = siteConfig('POST_LIST_PREVIEW') && post.blockMap + const showPreview = + siteConfig('POST_LIST_PREVIEW', false, NOTION_CONFIG) && post.blockMap return (
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(/\/$/, '') return ( -
+
+
+ {posts?.map((p, index) => ( +
+ {SIMPLE_POST_AD_ENABLE && (index + 1) % 3 === 0 && ( + + )} + {SIMPLE_POST_AD_ENABLE && index + 1 === 4 && } + +
+ ))} +
-
- {posts?.map((p, index) => (
- {SIMPLE_POST_AD_ENABLE && (index + 1) % 3 === 0 && } - {SIMPLE_POST_AD_ENABLE && (index + 1) === 4 && } - -
))} - -
- -
- - NEWER POSTS - - - OLDER POSTS - -
-
+
+ + NEWER POSTS + + + OLDER POSTS + +
+
) } diff --git a/themes/simple/components/BlogListScroll.js b/themes/simple/components/BlogListScroll.js index d68745f3..a1af6c77 100644 --- a/themes/simple/components/BlogListScroll.js +++ b/themes/simple/components/BlogListScroll.js @@ -1,28 +1,27 @@ -import { useGlobal } from '@/lib/global' -import { useCallback, useEffect, useRef, useState } from 'react' -import throttle from 'lodash.throttle' -import { BlogItem } from './BlogItem' import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' +import throttle from 'lodash.throttle' +import { useCallback, useEffect, useRef, useState } from 'react' +import { BlogItem } from './BlogItem' /** * 滚动博客列表 * @param {*} props * @returns */ -export default function BlogListScroll (props) { +export default function BlogListScroll(props) { const { posts } = props - const { locale } = useGlobal() - + const { locale, NOTION_CONFIG } = useGlobal() const [page, updatePage] = useState(1) - + const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) let hasMore = false const postsToShow = posts - ? Object.assign(posts).slice(0, parseInt(siteConfig('POSTS_PER_PAGE')) * page) + ? Object.assign(posts).slice(0, POSTS_PER_PAGE * page) : [] if (posts) { const totalCount = posts.length - hasMore = page * parseInt(siteConfig('POSTS_PER_PAGE')) < totalCount + hasMore = page * POSTS_PER_PAGE < totalCount } const handleGetMore = () => { if (!hasMore) return @@ -32,13 +31,19 @@ export default function 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) + ) useEffect(() => { window.addEventListener('scroll', scrollTrigger) @@ -49,17 +54,17 @@ export default function BlogListScroll (props) { }) return ( -
- {postsToShow.map(p => ( - - ))} +
+ {postsToShow.map(p => ( + + ))} -
- {' '} - {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} -
- -
+
+ {' '} + {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} +
+
) }