用twikoo实现列表评论数

This commit is contained in:
tangly1024
2023-05-07 18:30:56 +08:00
parent 74ace70a7b
commit eecac656e1
9 changed files with 156 additions and 31 deletions

View File

@@ -2,6 +2,7 @@ import BLOG from '@/blog.config'
import NotionPage from '@/components/NotionPage'
import Link from 'next/link'
import TagItemMini from './TagItemMini'
import TwikooCommentCount from '@/components/TwikooCommenCount'
/**
* 博客列表的文字内容
@@ -26,17 +27,19 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
{/* 日期 */}
<div
className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
} flex-wrap dark:text-gray-500 text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-400`}
} flex-wrap dark:text-gray-500 text-gray-400 `}
>
<Link
href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
passHref
className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
className="font-light cursor-pointer text-sm leading-4 mr-3 hover:text-indigo-700 dark:hover:text-indigo-400">
<i className="far fa-calendar-alt mr-1" />
{post.date?.start_date || post.lastEditedTime}
</Link>
<TwikooCommentCount className='text-sm hover:text-indigo-700 dark:hover:text-indigo-400' post={post}/>
</div>
{/* 摘要 */}

View File

@@ -25,21 +25,23 @@ const HexoRecentComments = (props) => {
}, [])
return (
<Card >
<div className=" mb-2 px-1 justify-between">
<i className="mr-2 fas fas fa-comment" />
{locale.COMMON.RECENT_COMMENTS}
</div>
<Card >
<div className=" mb-2 px-1 justify-between">
<i className="mr-2 fas fas fa-comment" />
{locale.COMMON.RECENT_COMMENTS}
</div>
{onLoading && <div>Loading...<i className='ml-2 fas fa-spinner animate-spin' /></div>}
{!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
{!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2 pl-1'>
<div className='dark:text-gray-200 text-sm waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
<div className='dark:text-gray-400 text-gray-400 text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1 pr-2'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
</div>)}
{onLoading && <div>Loading...<i className='ml-2 fas fa-spinner animate-spin' /></div>}
{!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
{!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2 pl-1'>
<div className='dark:text-gray-200 text-sm waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
<div className='dark:text-gray-400 text-gray-400 text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1 pr-2'>
<Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link>
</div>
</div>)}
</Card>
);
</Card>
)
}
export default HexoRecentComments