File size: 1,704 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
/**
* 最新文章列表
* @param posts 所有文章数据
* @param sliceCount 截取展示的数量 默认6
* @constructor
*/
const LatestPostsGroup = ({ latestPosts }) => {
// 获取当前路径
const currentPath = useRouter().asPath
const { locale } = useGlobal()
if (!latestPosts) {
return <></>
}
return <>
<div className="text-sm pb-1 px-2 flex flex-nowrap justify-between">
<div className="font-light text-gray-600 dark:text-gray-200">
<i className="mr-2 fas fa-history" />
{locale.COMMON.LATEST_POSTS}
</div>
</div>
{latestPosts.map(post => {
const selected = currentPath === `${siteConfig('SUB_PATH', '')}/${post.slug}`
const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
return (
(<Link
key={post.id}
title={post.title}
href={url}
passHref
className={'my-1 flex font-light'}>
<div
className={
(selected
? 'text-white bg-gray-600 '
: 'text-gray-500 dark:text-gray-400 ') +
' text-xs py-1.5 flex hover:bg-gray-500 px-2 duration-200 w-full ' +
'hover:text-white dark:hover:text-white cursor-pointer'
}
>
<li className="line-clamp-2">{post.title}</li>
</div>
</Link>)
)
})}
</>
}
export default LatestPostsGroup
|