d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-03 15:10:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

主题适配twikoo评论数

Browse Source
This commit is contained in:
tangly1024
2023-05-07 19:01:34 +08:00
parent eecac656e1
commit baa6fa753f
8 changed files with 196 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components/TwikooCommentCounter.js
View File

@@ -1,4 +1,5 @@
import BLOG from '@/blog.config' import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import { loadExternalResource } from '@/lib/utils' import { loadExternalResource } from '@/lib/utils'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useEffect } from 'react' import { useEffect } from 'react'
@@ -10,7 +11,10 @@ import { useEffect } from 'react'
*/ */
const TwikooCommentCounter = (props) => { const TwikooCommentCounter = (props) => {
const loadTwikoo = async (posts) => { let commentsData = []
const { theme } = useGlobal()
const fetchTwikooData = async (posts) => {
posts.forEach(post => { posts.forEach(post => {
post.slug = post.slug.startsWith('/') ? post.slug : `/${post.slug}` post.slug = post.slug.startsWith('/') ? post.slug : `/${post.slug}`
}) })
@@ -23,22 +27,9 @@ const TwikooCommentCounter = (props) => {
urls: posts.map(post => post.slug), // 不包含协议、域名、参数的文章路径列表，必传参数 urls: posts.map(post => post.slug), // 不包含协议、域名、参数的文章路径列表，必传参数
includeReply: true // 评论数是否包括回复，默认：false includeReply: true // 评论数是否包括回复，默认：false
}).then(function (res) { }).then(function (res) {
console.log(res) console.log('查询', res)
posts.forEach(post => { commentsData = res
const matchingRes = res.find(r => r.url === post.slug) updateCommentCount()
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')
})
}
})
}).catch(function (err) { }).catch(function (err) {
// 发生错误 // 发生错误
console.error(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() const router = useRouter()
useEffect(() => { useEffect(() => {
console.log('路由触发评论计数')
if (props?.posts && props?.posts?.length > 0) { 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 return null
} }

43
themes/example/components/BlogListPage.js
View File

@@ -4,6 +4,7 @@ import { useGlobal } from '@/lib/global'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import Link from 'next/link' import Link from 'next/link'
import CONFIG_EXAMPLE from '../config_example' import CONFIG_EXAMPLE from '../config_example'
import BlogPostCard from './BlogPostCard'
export const BlogListPage = props => { export const BlogListPage = props => {
const { page = 1, posts, postCount } = props const { page = 1, posts, postCount } = props
@@ -22,46 +23,8 @@ export const BlogListPage = props => {
<div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`}> <div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`}>
<div id="container"> <div id="container">
{posts?.map(p => ( {posts?.map(post => (
<article key={p.id} className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}> <BlogPostCard key={post.id} post = {post}/>
<div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
<h2 className="mb-4">
<Link
href={`/${p.slug}`}
className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
{p.title}
</Link>
</h2>
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
<span className="font-bold mx-1"> | </span>
<a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
{/* <span className="font-bold mx-1"> | </span> */}
{/* <a href="#" className="text-gray-700">2 Comments</a> */}
</div>
<p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
{p.summary}
</p>
{/* 搜索结果 */}
{p.results && (
<p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{p.results.map(r => (
<span key={r}>{r}</span>
))}
</p>
)}
</div>
{/* 图片封面 */}
{showPageCover && (
<div className="md:w-5/12 w-full overflow-hidden p-1">
<Link href={`${BLOG.SUB_PATH}/${p.slug}`} passHref legacyBehavior>
<div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${p?.page_cover}')` }} />
</Link>
</div>
)}
</article>
))} ))}
</div> </div>

69
themes/example/components/BlogListScroll.js
View File

@@ -1,8 +1,8 @@
import BLOG from '@/blog.config' import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global' import { useGlobal } from '@/lib/global'
import Link from 'next/link' import React, { useEffect } from 'react'
import React from 'react'
import throttle from 'lodash.throttle' import throttle from 'lodash.throttle'
import BlogPostCard from './BlogPostCard'
import CONFIG_EXAMPLE from '../config_example' import CONFIG_EXAMPLE from '../config_example'
export const BlogListScroll = props => { export const BlogListScroll = props => {
@@ -35,8 +35,9 @@ export const BlogListScroll = props => {
handleGetMore() handleGetMore()
} }
}, 500)) }, 500))
const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
React.useEffect(() => { useEffect(() => {
window.addEventListener('scroll', scrollTrigger) window.addEventListener('scroll', scrollTrigger)
return () => { return () => {
@@ -44,60 +45,22 @@ export const BlogListScroll = props => {
} }
}) })
const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
return ( return (
<div id="container" className="w-full md:pr-12 mb-12" ref={targetRef}>
{postsToShow.map(p => (
<article key={p.id} className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
<div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
<h2 className="mb-4">
<Link
href={`/${p.slug}`}
className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
{p.title}
</Link>
</h2>
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300"> <div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`} ref={targetRef}>
by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
<span className="font-bold mx-1"> | </span>
<a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
{/* <span className="font-bold mx-1"> | </span> */}
{/* <a href="#" className="text-gray-700">2 Comments</a> */}
</div>
<p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines"> {postsToShow?.map(post => (
{p.summary} <BlogPostCard key={post.id} post={post} />
</p> ))}
{/* 搜索结果 */}
{p.results && (
<p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{p.results.map(r => (
<span key={r}>{r}</span>
))}
</p>
)}
</div>
{/* 图片封面 */}
{showPageCover && (
<div className="md:w-5/12 w-full overflow-hidden p-1">
<Link href={`${BLOG.SUB_PATH}/${p.slug}`} passHref legacyBehavior>
<div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${p?.page_cover}')` }} />
</Link>
</div>
)}
</article>
))}
<div <div
onClick={handleGetMore} onClick={handleGetMore}
className="w-full my-4 py-4 text-center cursor-pointer " className="w-full my-4 py-4 text-center cursor-pointer "
> >
{' '} {' '}
{hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
</div> </div>
</div> </div>
) )
} }

51
themes/example/components/BlogPostCard.js Normal file
View File

@@ -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 <article className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
<div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
<h2 className="mb-4">
<Link
href={`/${post.slug}`}
className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
{post.title}
</Link>
</h2>
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {post.date?.start_date || post.createdTime}
<TwikooCommentCount post={post} className='pl-1'/>
<span className="font-bold mx-1"> | </span>
<a href={`/category${post.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{post.category}</a>
{/* <span className="font-bold mx-1"> | </span> */}
{/* <a href="#" className="text-gray-700">2 Comments</a> */}
</div>
<p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
{post.summary}
</p>
{/* 搜索结果 */}
{post.results && (
<p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.results.map(r => (
<span key={r}>{r}</span>
))}
</p>
)}
</div>
{/* 图片封面 */}
{showPageCover && (
<div className="md:w-5/12 w-full overflow-hidden p-1">
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}')` }} />
</Link>
</div>
)}
</article>
}
export default BlogPostCard

138
themes/matery/components/BlogPostCard.js
View File

@@ -3,6 +3,7 @@ import Link from 'next/link'
import React from 'react' import React from 'react'
import TagItemMini from './TagItemMini' import TagItemMini from './TagItemMini'
import CONFIG_MATERY from '../config_matery' import CONFIG_MATERY from '../config_matery'
import TwikooCommentCount from '@/components/TwikooCommenCount'
// import Image from 'next/image' // import Image from 'next/image'
const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { 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 showPageCover = CONFIG_MATERY.POST_LIST_COVER && post?.page_cover
const delay = (index % 3) * 300 const delay = (index % 3) * 300
return ( return (
<div <div
data-aos="zoom-in" data-aos="zoom-in"
data-aos-duration="500" data-aos-duration="500"
data-aos-delay={delay} data-aos-delay={delay}
data-aos-once="true" data-aos-once="true"
data-aos-anchor-placement="top-bottom" data-aos-anchor-placement="top-bottom"
className="w-full mb-4 overflow-auto shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray"> className="w-full mb-4 overflow-auto shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray">
{/* 固定高度 ，空白用图片拉升填充 */} {/* 固定高度 ，空白用图片拉升填充 */}
<div className="flex flex-col h-80 justify-between"> <div className="flex flex-col h-80 justify-between">
{/* 头部图片 填充卡片 */} {/* 头部图片 填充卡片 */}
{showPageCover && ( {showPageCover && (
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior> <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div <div
className="flex flex-grow w-full relative duration-200 bg-black rounded-t-md cursor-pointer transform overflow-hidden"> className="flex flex-grow w-full relative duration-200 bg-black rounded-t-md cursor-pointer transform overflow-hidden">
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img <img
src={post?.page_cover} src={post?.page_cover}
alt={post.title} alt={post.title}
className="opacity-50 h-full w-full hover:scale-125 rounded-t-md transform object-cover duration-500" className="opacity-50 h-full w-full hover:scale-125 rounded-t-md transform object-cover duration-500"
/> />
<span className='absolute bottom-0 left-0 text-white p-6 text-2xl replace break-words w-full' > {post.title}</span> <span className='absolute bottom-0 left-0 text-white p-6 text-2xl replace break-words w-full' > {post.title}</span>
</div> </div>
</Link> </Link>
)} )}
{/* 文字描述 */} {/* 文字描述 */}
<div > <div >
{/* 描述 */} {/* 描述 */}
<div className="px-4 flex flex-col w-full text-gray-700 dark:text-gray-300"> <div className="px-4 flex flex-col w-full text-gray-700 dark:text-gray-300">
{(!showPreview || showSummary) && post.summary && ( {(!showPreview || showSummary) && post.summary && (
<p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '4', WebkitBoxOrient: 'vertical' }} <p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '4', WebkitBoxOrient: 'vertical' }}
className="replace my-2 text-sm font-light leading-7"> className="replace my-2 text-sm font-light leading-7">
{post.summary} {post.summary}
</p> </p>
)} )}
<div className='text-gray-800 justify-between flex my-2 dark:text-gray-300'> <div className='text-gray-800 justify-between flex my-2 dark:text-gray-300'>
<Link <div>
href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} <Link
passHref href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3"> passHref
className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
<i className="far fa-clock mr-1" /> <i className="far fa-clock mr-1" />
{post.date?.start_date || post.lastEditedTime} {post.date?.start_date || post.lastEditedTime}
</Link> </Link>
<Link <TwikooCommentCount post={post} className='hover:underline cursor-pointer text-sm'/>
href={`/category/${post.category}`} </div>
passHref <Link
className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform"> href={`/category/${post.category}`}
passHref
className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
<i className="mr-1 far fa-folder" /> <i className="mr-1 far fa-folder" />
{post.category} {post.category}
</Link> </Link>
</div> </div>
</div> </div>
{post?.tagItems && post?.tagItems.length > 0 && (<> {post?.tagItems && post?.tagItems.length > 0 && (<>
<hr /> <hr />
<div className="text-gray-400 justify-between flex px-5 py-3"> <div className="text-gray-400 justify-between flex px-5 py-3">
<div className="md:flex-nowrap flex-wrap md:justify-start inline-block"> <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
<div> <div>
{' '} {' '}
{post.tagItems.map(tag => ( {post.tagItems.map(tag => (
<TagItemMini key={tag.name} tag={tag} /> <TagItemMini key={tag.name} tag={tag} />
))} ))}
</div> </div>
</div> </div>
</div> </div>
</>)} </>)}
</div> </div>
</div> </div>
</div> </div>
) )
} }

11
themes/medium/components/BlogPostCard.js
View File

@@ -6,6 +6,7 @@ import React from 'react'
import CONFIG_MEDIUM from '../config_medium' import CONFIG_MEDIUM from '../config_medium'
import CategoryItem from './CategoryItem' import CategoryItem from './CategoryItem'
import TagItemMini from './TagItemMini' import TagItemMini from './TagItemMini'
import TwikooCommentCount from '@/components/TwikooCommenCount'
const BlogPostCard = ({ post, showSummary }) => { const BlogPostCard = ({ post, showSummary }) => {
const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
@@ -43,13 +44,9 @@ const BlogPostCard = ({ post, showSummary }) => {
} }
> >
<div className="text-sm py-1">{post.date?.start_date}</div> <div className="text-sm py-1">{post.date?.start_date}</div>
{CONFIG_MEDIUM.POST_LIST_CATEGORY && ( {CONFIG_MEDIUM.POST_LIST_CATEGORY && <CategoryItem category={post.category} />}
<CategoryItem category={post.category} /> {CONFIG_MEDIUM.POST_LIST_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
)} <TwikooCommentCount post={post} className='hover:underline'/>
{CONFIG_MEDIUM.POST_LIST_TAG &&
post?.tagItems?.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
</div> </div>
<div className="flex"></div> <div className="flex"></div>

25
themes/next/components/BlogPostCard.js
View File

@@ -8,6 +8,7 @@ import TagItemMini from './TagItemMini'
import CONFIG_NEXT from '../config_next' import CONFIG_NEXT from '../config_next'
import NotionPage from '@/components/NotionPage' import NotionPage from '@/components/NotionPage'
import NotionIcon from '@/components/NotionIcon' import NotionIcon from '@/components/NotionIcon'
import TwikooCommentCount from '@/components/TwikooCommenCount'
const BlogPostCard = ({ post, showSummary }) => { const BlogPostCard = ({ post, showSummary }) => {
const { locale } = useGlobal() const { locale } = useGlobal()
@@ -31,7 +32,7 @@ const BlogPostCard = ({ post, showSummary }) => {
<div <div
className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start' className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
} flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 `} } flex-wrap dark:text-gray-500 text-gray-400 `}
> >
<div> <div>
{post.category && ( {post.category && (
@@ -39,7 +40,7 @@ const BlogPostCard = ({ post, showSummary }) => {
<Link <Link
href={`/category/${post.category}`} href={`/category/${post.category}`}
passHref passHref
className="cursor-pointer font-light text-sm hover:underline transform"> className="hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer font-light text-sm hover:underline transform">
<i className="mr-1 fas fa-folder" /> <i className="mr-1 fas fa-folder" />
{post.category} {post.category}
@@ -48,22 +49,18 @@ const BlogPostCard = ({ post, showSummary }) => {
<span className="mx-2">|</span> <span className="mx-2">|</span>
</> </>
)} )}
<Link <Link
href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
passHref passHref
className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3"> className="hover:text-blue-500 dark:hover:text-blue-400 font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
{post.date?.start_date}
{post.date?.start_date} </Link>
</Link>
</div> </div>
<div className="md:flex-nowrap flex-wrap md:justify-start inline-block"> <TwikooCommentCount post={post} className='hover:text-blue-500 dark:hover:text-blue-400 hover:underline text-sm'/>
<div> <div className="hover:text-blue-500 dark:hover:text-blue-400 md:flex-nowrap flex-wrap md:justify-start inline-block">
{' '}
{post.tagItems?.map(tag => ( {post.tagItems?.map(tag => (
<TagItemMini key={tag.name} tag={tag} /> <TagItemMini key={tag.name} tag={tag} />
))} ))}
</div>
</div> </div>
</div> </div>

2
themes/simple/components/BlogItem.js
View File

@@ -1,6 +1,7 @@
import BLOG from '@/blog.config' import BLOG from '@/blog.config'
import Link from 'next/link' import Link from 'next/link'
import CONFIG_SIMPLE from '../config_simple' import CONFIG_SIMPLE from '../config_simple'
import TwikooCommentCount from '@/components/TwikooCommenCount'
export const BlogItem = props => { export const BlogItem = props => {
const { post } = props const { post } = props
@@ -18,6 +19,7 @@ export const BlogItem = props => {
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300"> <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
<span> <i className="fa-regular fa-user"></i> <a href={CONFIG_SIMPLE.AUTHOR_LINK}>{BLOG.AUTHOR}</a></span> <span> <i className="fa-regular fa-user"></i> <a href={CONFIG_SIMPLE.AUTHOR_LINK}>{BLOG.AUTHOR}</a></span>
<span> - <i className="fa-regular fa-clock"></i> {post.date?.start_date || post.createdTime}</span> <span> - <i className="fa-regular fa-clock"></i> {post.date?.start_date || post.createdTime}</span>
<span> - <TwikooCommentCount post={post}/></span>
{post.category && <span> - <i className="fa-regular fa-folder"></i> <a href={`/category/${post.category}`} className="hover:text-red-400 transition-all duration-200">{post.category}</a></span>} {post.category && <span> - <i className="fa-regular fa-folder"></i> <a href={`/category/${post.category}`} className="hover:text-red-400 transition-all duration-200">{post.category}</a></span>}
{post.tags && post.tags?.length > 0 && post.tags.map(t => <span key={t}> / <Link href={`/tag/${t}`}><span className=' hover:text-red-400 transition-all duration-200'>{t}</span></Link></span>)} {post.tags && post.tags?.length > 0 && post.tags.map(t => <span key={t}> / <Link href={`/tag/${t}`}><span className=' hover:text-red-400 transition-all duration-200'>{t}</span></Link></span>)}
</div> </div>