Skip to content

Commit baa6fa7

Browse files
tangly1024tangly1024
committed
主题适配twikoo评论数
1 parent eecac65 commit baa6fa7

File tree

8 files changed

+196
-200
lines changed

8 files changed

+196
-200
lines changed

‎components/TwikooCommentCounter.js

+38-19
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import BLOG from '@/blog.config'
2+
import { useGlobal } from '@/lib/global'
23
import { loadExternalResource } from '@/lib/utils'
34
import { useRouter } from 'next/router'
45
import { useEffect } from 'react'
@@ -10,7 +11,10 @@ import { useEffect } from 'react'
1011
*/
1112

1213
const TwikooCommentCounter = (props) => {
13-
const loadTwikoo = async (posts) => {
14+
let commentsData = []
15+
const { theme } = useGlobal()
16+
17+
const fetchTwikooData = async (posts) => {
1418
posts.forEach(post => {
1519
post.slug = post.slug.startsWith('/') ? post.slug : `/${post.slug}`
1620
})
@@ -23,22 +27,9 @@ const TwikooCommentCounter = (props) => {
2327
urls: posts.map(post => post.slug), // 不包含协议、域名、参数的文章路径列表，必传参数
2428
includeReply: true // 评论数是否包括回复，默认：false
2529
}).then(function (res) {
26-
console.log(res)
27-
posts.forEach(post => {
28-
const matchingRes = res.find(r => r.url === post.slug)
29-
if (matchingRes) {
30-
// 修改评论数量div
31-
const textElements = document.querySelectorAll(`.comment-count-text-${post.id}`)
32-
textElements.forEach(element => {
33-
element.innerHTML = matchingRes.count
34-
})
35-
// 取消隐藏
36-
const wrapperElements = document.querySelectorAll(`.comment-count-wrapper-${post.id}`)
37-
wrapperElements.forEach(element => {
38-
element.classList.remove('hidden')
39-
})
40-
}
41-
})
30+
console.log('查询', res)
31+
commentsData = res
32+
updateCommentCount()
4233
}).catch(function (err) {
4334
// 发生错误
4435
console.error(err)
@@ -48,13 +39,41 @@ const TwikooCommentCounter = (props) => {
4839
}
4940
}
5041

42+
const updateCommentCount = () => {
43+
if (commentsData.length === 0) {
44+
return
45+
}
46+
props.posts.forEach(post => {
47+
const matchingRes = commentsData.find(r => r.url === post.slug)
48+
if (matchingRes) {
49+
// 修改评论数量div
50+
const textElements = document.querySelectorAll(`.comment-count-text-${post.id}`)
51+
textElements.forEach(element => {
52+
element.innerHTML = matchingRes.count
53+
})
54+
// 取消隐藏
55+
const wrapperElements = document.querySelectorAll(`.comment-count-wrapper-${post.id}`)
56+
wrapperElements.forEach(element => {
57+
element.classList.remove('hidden')
58+
})
59+
}
60+
})
61+
}
5162
const router = useRouter()
5263

5364
useEffect(() => {
65+
console.log('路由触发评论计数')
5466
if (props?.posts && props?.posts?.length > 0) {
55-
loadTwikoo(props.posts)
67+
fetchTwikooData(props.posts)
5668
}
57-
}, [router.events])
69+
// }, [router.events])
70+
})
71+
72+
// 监控主题变化时的的评论数
73+
useEffect(() => {
74+
console.log('主题触发评论计数', commentsData)
75+
updateCommentCount()
76+
}, [theme])
5877
return null
5978
}
6079

‎themes/example/components/BlogListPage.js

+3-40
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useGlobal } from '@/lib/global'
44
import { useRouter } from 'next/router'
55
import Link from 'next/link'
66
import CONFIG_EXAMPLE from '../config_example'
7+
import BlogPostCard from './BlogPostCard'
78

89
export const BlogListPage = props => {
910
const { page = 1, posts, postCount } = props
@@ -22,46 +23,8 @@ export const BlogListPage = props => {
2223
<div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`}>
2324

2425
<div id="container">
25-
{posts?.map(p => (
26-
<article key={p.id} className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
27-
<div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
28-
<h2 className="mb-4">
29-
<Link
30-
href={`/${p.slug}`}
31-
className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
32-
{p.title}
33-
</Link>
34-
</h2>
35-
36-
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
37-
by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
38-
<span className="font-bold mx-1"> | </span>
39-
<a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
40-
{/* <span className="font-bold mx-1"> | </span> */}
41-
{/* <a href="#" className="text-gray-700">2 Comments</a> */}
42-
</div>
43-
44-
<p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
45-
{p.summary}
46-
</p>
47-
{/* 搜索结果 */}
48-
{p.results && (
49-
<p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
50-
{p.results.map(r => (
51-
<span key={r}>{r}</span>
52-
))}
53-
</p>
54-
)}
55-
</div>
56-
{/* 图片封面 */}
57-
{showPageCover && (
58-
<div className="md:w-5/12 w-full overflow-hidden p-1">
59-
<Link href={`${BLOG.SUB_PATH}/${p.slug}`} passHref legacyBehavior>
60-
<div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${p?.page_cover}')` }} />
61-
</Link>
62-
</div>
63-
)}
64-
</article>
26+
{posts?.map(post => (
27+
<BlogPostCard key={post.id} post = {post}/>
6528
))}
6629
</div>
6730

‎themes/example/components/BlogListScroll.js

+16-53
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import BLOG from '@/blog.config'
22
import { useGlobal } from '@/lib/global'
3-
import Link from 'next/link'
4-
import React from 'react'
3+
import React, { useEffect } from 'react'
54
import throttle from 'lodash.throttle'
5+
import BlogPostCard from './BlogPostCard'
66
import CONFIG_EXAMPLE from '../config_example'
77

88
export const BlogListScroll = props => {
@@ -35,69 +35,32 @@ export const BlogListScroll = props => {
3535
handleGetMore()
3636
}
3737
}, 500))
38+
const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
3839

39-
React.useEffect(() => {
40+
useEffect(() => {
4041
window.addEventListener('scroll', scrollTrigger)
4142

4243
return () => {
4344
window.removeEventListener('scroll', scrollTrigger)
4445
}
4546
})
4647

47-
const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
48-
4948
return (
50-
<div id="container" className="w-full md:pr-12 mb-12" ref={targetRef}>
51-
{postsToShow.map(p => (
52-
<article key={p.id} className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
53-
<div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
54-
<h2 className="mb-4">
55-
<Link
56-
href={`/${p.slug}`}
57-
className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
58-
{p.title}
59-
</Link>
60-
</h2>
6149

62-
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
63-
by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
64-
<span className="font-bold mx-1"> | </span>
65-
<a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
66-
{/* <span className="font-bold mx-1"> | </span> */}
67-
{/* <a href="#" className="text-gray-700">2 Comments</a> */}
68-
</div>
50+
<div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`} ref={targetRef}>
6951

70-
<p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
71-
{p.summary}
72-
</p>
73-
{/* 搜索结果 */}
74-
{p.results && (
75-
<p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
76-
{p.results.map(r => (
77-
<span key={r}>{r}</span>
78-
))}
79-
</p>
80-
)}
81-
</div>
82-
{/* 图片封面 */}
83-
{showPageCover && (
84-
<div className="md:w-5/12 w-full overflow-hidden p-1">
85-
<Link href={`${BLOG.SUB_PATH}/${p.slug}`} passHref legacyBehavior>
86-
<div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${p?.page_cover}')` }} />
87-
</Link>
88-
</div>
89-
)}
90-
</article>
91-
))}
52+
{postsToShow?.map(post => (
53+
<BlogPostCard key={post.id} post={post} />
54+
))}
9255

93-
<div
94-
onClick={handleGetMore}
95-
className="w-full my-4 py-4 text-center cursor-pointer "
96-
>
97-
{' '}
98-
{hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
99-
</div>
56+
<div
57+
onClick={handleGetMore}
58+
className="w-full my-4 py-4 text-center cursor-pointer "
59+
>
60+
{' '}
61+
{hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
62+
</div>
10063

101-
</div>
64+
</div>
10265
)
10366
}

‎themes/example/components/BlogPostCard.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import BLOG from '@/blog.config'
2+
import CONFIG_EXAMPLE from '../config_example'
3+
import Link from 'next/link'
4+
import TwikooCommentCount from '@/components/TwikooCommenCount'
5+
6+
const BlogPostCard = ({ post }) => {
7+
const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
8+
9+
return <article className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
10+
<div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
11+
<h2 className="mb-4">
12+
<Link
13+
href={`/${post.slug}`}
14+
className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
15+
{post.title}
16+
</Link>
17+
</h2>
18+
19+
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
20+
by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {post.date?.start_date || post.createdTime}
21+
<TwikooCommentCount post={post} className='pl-1'/>
22+
<span className="font-bold mx-1"> | </span>
23+
<a href={`/category${post.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{post.category}</a>
24+
{/* <span className="font-bold mx-1"> | </span> */}
25+
{/* <a href="#" className="text-gray-700">2 Comments</a> */}
26+
</div>
27+
28+
<p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
29+
{post.summary}
30+
</p>
31+
{/* 搜索结果 */}
32+
{post.results && (
33+
<p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
34+
{post.results.map(r => (
35+
<span key={r}>{r}</span>
36+
))}
37+
</p>
38+
)}
39+
</div>
40+
{/* 图片封面 */}
41+
{showPageCover && (
42+
<div className="md:w-5/12 w-full overflow-hidden p-1">
43+
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
44+
<div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}')` }} />
45+
</Link>
46+
</div>
47+
)}
48+
</article>
49+
}
50+
51+
export default BlogPostCard

0 commit comments

Comments
 (0)