From baa6fa753f6e7ccb9c08f36e5c847cabbf2c013b Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sun, 7 May 2023 19:01:34 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=80=82=E9=85=8Dtwikoo?= =?UTF-8?q?=E8=AF=84=E8=AE=BA=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/TwikooCommentCounter.js | 57 +++++--- themes/example/components/BlogListPage.js | 43 +----- themes/example/components/BlogListScroll.js | 69 +++------- themes/example/components/BlogPostCard.js | 51 ++++++++ themes/matery/components/BlogPostCard.js | 138 ++++++++++---------- themes/medium/components/BlogPostCard.js | 11 +- themes/next/components/BlogPostCard.js | 25 ++-- themes/simple/components/BlogItem.js | 2 + 8 files changed, 196 insertions(+), 200 deletions(-) create mode 100644 themes/example/components/BlogPostCard.js diff --git a/components/TwikooCommentCounter.js b/components/TwikooCommentCounter.js index 1020cb92..4f3f9218 100644 --- a/components/TwikooCommentCounter.js +++ b/components/TwikooCommentCounter.js @@ -1,4 +1,5 @@ import BLOG from '@/blog.config' +import { useGlobal } from '@/lib/global' import { loadExternalResource } from '@/lib/utils' import { useRouter } from 'next/router' import { useEffect } from 'react' @@ -10,7 +11,10 @@ import { useEffect } from 'react' */ const TwikooCommentCounter = (props) => { - const loadTwikoo = async (posts) => { + let commentsData = [] + const { theme } = useGlobal() + + const fetchTwikooData = async (posts) => { posts.forEach(post => { post.slug = post.slug.startsWith('/') ? post.slug : `/${post.slug}` }) @@ -23,22 +27,9 @@ const TwikooCommentCounter = (props) => { urls: posts.map(post => post.slug), // 不包含协议、域名、参数的文章路径列表，必传参数 includeReply: true // 评论数是否包括回复，默认：false }).then(function (res) { - console.log(res) - posts.forEach(post => { - const matchingRes = res.find(r => r.url === post.slug) - if (matchingRes) { - // 修改评论数量div - const textElements = document.querySelectorAll(`.comment-count-text-${post.id}`) - textElements.forEach(element => { - element.innerHTML = matchingRes.count - }) - // 取消隐藏 - const wrapperElements = document.querySelectorAll(`.comment-count-wrapper-${post.id}`) - wrapperElements.forEach(element => { - element.classList.remove('hidden') - }) - } - }) + console.log('查询', res) + commentsData = res + updateCommentCount() }).catch(function (err) { // 发生错误 console.error(err) @@ -48,13 +39,41 @@ const TwikooCommentCounter = (props) => { } } + const updateCommentCount = () => { + if (commentsData.length === 0) { + return + } + props.posts.forEach(post => { + const matchingRes = commentsData.find(r => r.url === post.slug) + if (matchingRes) { + // 修改评论数量div + const textElements = document.querySelectorAll(`.comment-count-text-${post.id}`) + textElements.forEach(element => { + element.innerHTML = matchingRes.count + }) + // 取消隐藏 + const wrapperElements = document.querySelectorAll(`.comment-count-wrapper-${post.id}`) + wrapperElements.forEach(element => { + element.classList.remove('hidden') + }) + } + }) + } const router = useRouter() useEffect(() => { + console.log('路由触发评论计数') if (props?.posts && props?.posts?.length > 0) { - loadTwikoo(props.posts) + fetchTwikooData(props.posts) } - }, [router.events]) + // }, [router.events]) + }) + + // 监控主题变化时的的评论数 + useEffect(() => { + console.log('主题触发评论计数', commentsData) + updateCommentCount() + }, [theme]) return null } diff --git a/themes/example/components/BlogListPage.js b/themes/example/components/BlogListPage.js index c36ebca1..d51bcc5f 100644 --- a/themes/example/components/BlogListPage.js +++ b/themes/example/components/BlogListPage.js @@ -4,6 +4,7 @@ import { useGlobal } from '@/lib/global' import { useRouter } from 'next/router' import Link from 'next/link' import CONFIG_EXAMPLE from '../config_example' +import BlogPostCard from './BlogPostCard' export const BlogListPage = props => { const { page = 1, posts, postCount } = props @@ -22,46 +23,8 @@ export const BlogListPage = props => {
- {posts?.map(p => ( -
-
-

- - {p.title} - -

- -
- by {BLOG.AUTHOR} on {p.date?.start_date || p.createdTime} - | - {p.category} - {/* | */} - {/* 2 Comments */} -
- -

- {p.summary} -

- {/* 搜索结果 */} - {p.results && ( -

- {p.results.map(r => ( - {r} - ))} -

- )} -
- {/* 图片封面 */} - {showPageCover && ( -
- -
- -
- )} -
+ {posts?.map(post => ( + ))}
diff --git a/themes/example/components/BlogListScroll.js b/themes/example/components/BlogListScroll.js index 0949f4da..e1d0c2ae 100644 --- a/themes/example/components/BlogListScroll.js +++ b/themes/example/components/BlogListScroll.js @@ -1,8 +1,8 @@ import BLOG from '@/blog.config' import { useGlobal } from '@/lib/global' -import Link from 'next/link' -import React from 'react' +import React, { useEffect } from 'react' import throttle from 'lodash.throttle' +import BlogPostCard from './BlogPostCard' import CONFIG_EXAMPLE from '../config_example' export const BlogListScroll = props => { @@ -35,8 +35,9 @@ export const BlogListScroll = props => { handleGetMore() } }, 500)) + const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER - React.useEffect(() => { + useEffect(() => { window.addEventListener('scroll', scrollTrigger) return () => { @@ -44,60 +45,22 @@ export const BlogListScroll = props => { } }) - const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER - return ( -
- {postsToShow.map(p => ( -
-
-

- - {p.title} - -

-
- by {BLOG.AUTHOR} on {p.date?.start_date || p.createdTime} - | - {p.category} - {/* | */} - {/* 2 Comments */} -
+
-

- {p.summary} -

- {/* 搜索结果 */} - {p.results && ( -

- {p.results.map(r => ( - {r} - ))} -

- )} -
- {/* 图片封面 */} - {showPageCover && ( -
- -
- -
- )} -
- ))} + {postsToShow?.map(post => ( + + ))} -
- {' '} - {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} -
+
+ {' '} + {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} +
-
+
) } diff --git a/themes/example/components/BlogPostCard.js b/themes/example/components/BlogPostCard.js new file mode 100644 index 00000000..7f4b54ac --- /dev/null +++ b/themes/example/components/BlogPostCard.js @@ -0,0 +1,51 @@ +import BLOG from '@/blog.config' +import CONFIG_EXAMPLE from '../config_example' +import Link from 'next/link' +import TwikooCommentCount from '@/components/TwikooCommenCount' + +const BlogPostCard = ({ post }) => { + const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER + + return
+
+

+ + {post.title} + +

+ +
+ by {BLOG.AUTHOR} on {post.date?.start_date || post.createdTime} + + | + {post.category} + {/* | */} + {/* 2 Comments */} +
+ +

+ {post.summary} +

+ {/* 搜索结果 */} + {post.results && ( +

+ {post.results.map(r => ( + {r} + ))} +

+ )} +
+ {/* 图片封面 */} + {showPageCover && ( +
+ +
+ +
+ )} +
+} + +export default BlogPostCard diff --git a/themes/matery/components/BlogPostCard.js b/themes/matery/components/BlogPostCard.js index 194afe9f..9c1b5bda 100644 --- a/themes/matery/components/BlogPostCard.js +++ b/themes/matery/components/BlogPostCard.js @@ -3,6 +3,7 @@ import Link from 'next/link' import React from 'react' import TagItemMini from './TagItemMini' import CONFIG_MATERY from '../config_matery' +import TwikooCommentCount from '@/components/TwikooCommenCount' // import Image from 'next/image' const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { @@ -14,84 +15,87 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { const showPageCover = CONFIG_MATERY.POST_LIST_COVER && post?.page_cover const delay = (index % 3) * 300 return ( -
+
- {/* 固定高度 ，空白用图片拉升填充 */} -
+ {/* 固定高度 ，空白用图片拉升填充 */} +
- {/* 头部图片 填充卡片 */} - {showPageCover && ( - -
- {/* eslint-disable-next-line @next/next/no-img-element */} - {post.title} - {post.title} -
- - )} + {/* 头部图片 填充卡片 */} + {showPageCover && ( + +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + {post.title} + {post.title} +
+ + )} - {/* 文字描述 */} -
- {/* 描述 */} -
+ {/* 文字描述 */} +
+ {/* 描述 */} +
- {(!showPreview || showSummary) && post.summary && ( -

- {post.summary} -

- )} + {(!showPreview || showSummary) && post.summary && ( +

+ {post.summary} +

+ )} -
- +
+
+ - - {post.date?.start_date || post.lastEditedTime} + + {post.date?.start_date || post.lastEditedTime} - - + + +
+ - - {post.category} + + {post.category} - -
-
+ +
+
- {post?.tagItems && post?.tagItems.length > 0 && (<> -
-
-
-
- {' '} - {post.tagItems.map(tag => ( - - ))} -
-
-
- )} -
-
+ {post?.tagItems && post?.tagItems.length > 0 && (<> +
+
+
+
+ {' '} + {post.tagItems.map(tag => ( + + ))} +
+
+
+ )} +
+
-
+
) } diff --git a/themes/medium/components/BlogPostCard.js b/themes/medium/components/BlogPostCard.js index 6a031b51..df8ccb83 100644 --- a/themes/medium/components/BlogPostCard.js +++ b/themes/medium/components/BlogPostCard.js @@ -6,6 +6,7 @@ import React from 'react' import CONFIG_MEDIUM from '../config_medium' import CategoryItem from './CategoryItem' import TagItemMini from './TagItemMini' +import TwikooCommentCount from '@/components/TwikooCommenCount' const BlogPostCard = ({ post, showSummary }) => { const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap @@ -43,13 +44,9 @@ const BlogPostCard = ({ post, showSummary }) => { } >
{post.date?.start_date}
- {CONFIG_MEDIUM.POST_LIST_CATEGORY && ( - - )} - {CONFIG_MEDIUM.POST_LIST_TAG && - post?.tagItems?.map(tag => ( - - ))} + {CONFIG_MEDIUM.POST_LIST_CATEGORY && } + {CONFIG_MEDIUM.POST_LIST_TAG && post?.tagItems?.map(tag => )} +
diff --git a/themes/next/components/BlogPostCard.js b/themes/next/components/BlogPostCard.js index c10545a3..36d7274b 100644 --- a/themes/next/components/BlogPostCard.js +++ b/themes/next/components/BlogPostCard.js @@ -8,6 +8,7 @@ import TagItemMini from './TagItemMini' import CONFIG_NEXT from '../config_next' import NotionPage from '@/components/NotionPage' import NotionIcon from '@/components/NotionIcon' +import TwikooCommentCount from '@/components/TwikooCommenCount' const BlogPostCard = ({ post, showSummary }) => { const { locale } = useGlobal() @@ -31,7 +32,7 @@ const BlogPostCard = ({ post, showSummary }) => {
{post.category && ( @@ -39,7 +40,7 @@ const BlogPostCard = ({ post, showSummary }) => { + className="hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer font-light text-sm hover:underline transform"> {post.category} @@ -48,22 +49,18 @@ const BlogPostCard = ({ post, showSummary }) => { | )} - - - {post.date?.start_date} - - + + {post.date?.start_date} +
-
-
- {' '} + +
{post.tagItems?.map(tag => ( ))} -
diff --git a/themes/simple/components/BlogItem.js b/themes/simple/components/BlogItem.js index 4aa40845..3c8277cc 100644 --- a/themes/simple/components/BlogItem.js +++ b/themes/simple/components/BlogItem.js @@ -1,6 +1,7 @@ import BLOG from '@/blog.config' import Link from 'next/link' import CONFIG_SIMPLE from '../config_simple' +import TwikooCommentCount from '@/components/TwikooCommenCount' export const BlogItem = props => { const { post } = props @@ -18,6 +19,7 @@ export const BlogItem = props => {
{BLOG.AUTHOR} - {post.date?.start_date || post.createdTime} + - {post.category && - {post.category}} {post.tags && post.tags?.length > 0 && post.tags.map(t => / {t})}