+
-
- {post.type && !post.type.includes('Page') && post?.page_cover && (
-
-
-
- {/*
*/} - -
-
- {/* Notion文章主体 */}
-
- {post.blockMap && (
-
+ {post.type && !post.type.includes('Page') && post?.page_cover && (
+
- {/* 文章内嵌广告 */}
-
-
-
- {/* 版权声明 */}
-
- {post.tagItems && (
-
-
-
-
- {/* 评论互动 */}
-
+
+
+ {/*
*/} + + + + {/* Notion文章主体 */} +
+ {post.blockMap && (
+
+
+
+ {/* 文章内嵌广告 */}
+
+
+
+ {/* 版权声明 */}
+
+ {post.tagItems && (
+
+
+
)
}
const mapPageUrl = id => {
diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index 6811ff93..82a1b5ff 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -1,27 +1,28 @@
import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import { faAngleRight, faFolder } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
-import Image from 'next/image'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faAngleDoubleRight, faFolder } from '@fortawesome/free-solid-svg-icons'
-import TagItemMini from './TagItemMini'
import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
-import { useGlobal } from '@/lib/global'
+import TagItemMini from './TagItemMini'
const BlogPostCard = ({ post, showSummary }) => {
const { locale } = useGlobal()
+ const showPreview = BLOG.home?.showPreview && post.blockMap
return (
- {/* eslint-disable-next-line @next/next/no-img-element */}
- 
- {/*
- )}
-
- {/* 文章Title */}
-
-
*/}
-
- {post.title}
-
-
-
-
-
-
-
-
-
-
-
- */} - -
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+ {/*
+ )}
-
+
*/}
+
-
- )}
-
- {locale.COMMON.TAGS}：
-
- {post.tagItems.map(tag => (
-
-
-
-
- {/* 悬浮目录按钮 */}
-
+ {post.title}
-
- { drawerRight.current.handleSwitchVisible() }} />
-
+
+
+
+
+
+
+
+
+
+ */} + + + + {/* Notion文章主体 */} +
+
+ )}
+
+ {locale.COMMON.TAGS}：
+
+ {post.tagItems.map(tag => (
+
+
+
+
+
-
+
-
+
{post.title}
-
+
- {showSummary &&
+ {(!showPreview || showSummary) &&
{post.summary}
} - {BLOG.home?.showPreview && post?.blockMap &&
+ {showPreview && post?.blockMap &&
{BLOG.home?.showPostCover && post?.page_cover && (
diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js
index 07fd9be1..1c378bfa 100644
--- a/components/BlogPostListScroll.js
+++ b/components/BlogPostListScroll.js
@@ -55,7 +55,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = BLOG.home
return
{/* 文章列表 */}
-
+
diff --git a/components/Collapse.js b/components/Collapse.js
new file mode 100644
index 00000000..baca44cc
--- /dev/null
+++ b/components/Collapse.js
@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from 'react'
+
+const Collapse = props => {
+ const collapseRef = useRef(null)
+ const collapseSection = element => {
+ const sectionHeight = element.scrollHeight
+ requestAnimationFrame(function () {
+ element.style.height = sectionHeight + 'px'
+ requestAnimationFrame(function () {
+ element.style.height = 0 + 'px'
+ })
+ })
+ }
+ const expandSection = element => {
+ const sectionHeight = element.scrollHeight
+ element.style.height = sectionHeight + 'px'
+ const clearTime = setTimeout(() => {
+ element.style.height = 'auto'
+ }, 400)
+ clearTimeout(clearTime)
+ }
+ useEffect(() => {
+ const element = collapseRef.current
+ if (props.isOpen) {
+ expandSection(element)
+ } else {
+ collapseSection(element)
+ }
+ }, [props.isOpen])
+ return (
+
{postsToShow.map(post => (
))}
@@ -65,7 +65,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = BLOG.home
{
handleGetMore()
}}
- className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow-xl rounded-xl dark:text-gray-200'
+ className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow-xl rounded-xl dark:text-gray-200'
> {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}
+ {props.children}
+
+ )
+}
+Collapse.defaultProps = { isOpen: false }
+
+export default Collapse
diff --git a/components/FloatDarkModeButton.js b/components/FloatDarkModeButton.js
index 63ae157e..bf01f26b 100644
--- a/components/FloatDarkModeButton.js
+++ b/components/FloatDarkModeButton.js
@@ -1,26 +1,13 @@
-import { useEffect, useState } from 'react'
-import { loadUserThemeFromCookies, saveTheme, useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme'
import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import BLOG from '@/blog.config'
export default function FloatDarkModeButton () {
if (!BLOG.widget?.showDarkMode) {
return <>
}
- const [show, switchShow] = useState(false)
- const scrollListener = () => {
- const scrollY = window.pageYOffset
- const shouldShow = scrollY > 100
- if (shouldShow !== show) {
- switchShow(shouldShow)
- }
- }
- useEffect(() => {
- scrollListener()
- document.addEventListener('scroll', scrollListener)
- return () => document.removeEventListener('scroll', scrollListener)
- }, [show])
const { changeTheme } = useGlobal()
const userTheme = loadUserThemeFromCookies()
@@ -36,12 +23,8 @@ export default function FloatDarkModeButton () {
return (