d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

hexo 推荐卡牌微调，凸显文字

Browse Source
This commit is contained in:
tangly1024.com
2024-03-15 18:50:55 +08:00
parent b1e162e612
commit 69b4cc5c6f
1 changed files with 45 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
themes/hexo/components/ArticleRecommend.js
View File

@@ -1,9 +1,9 @@
import Link from 'next/link'
import CONFIG from '../config'
import LazyImage from '@/components/LazyImage'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import LazyImage from '@/components/LazyImage'
import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
import Link from 'next/link'
import CONFIG from '../config'
/**
* 关联推荐文章
@@ -13,50 +13,52 @@ import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
export default function ArticleRecommend({ recommendPosts, siteInfo }) {
const { locale } = useGlobal()
if (
!siteConfig('HEXO_ARTICLE_RECOMMEND', null, CONFIG) ||
!recommendPosts ||
recommendPosts.length === 0
) {
if (!siteConfig('HEXO_ARTICLE_RECOMMEND', null, CONFIG) || !recommendPosts || recommendPosts.length === 0) {
return <></>
}
return (
<div className="pt-8">
<div className=" mb-2 px-1 flex flex-nowrap justify-between">
<div className='dark:text-gray-300'>
<i className="mr-2 fas fa-thumbs-up" />
{locale.COMMON.RELATE_POSTS}
</div>
</div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
{recommendPosts.map(post => {
const headerImage = post?.pageCoverThumbnail
? post.pageCoverThumbnail
: siteInfo?.pageCover
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="flex h-40 cursor-pointer overflow-hidden">
<div className="h-full w-full relative group">
<div className="flex items-center justify-center w-full h-full duration-300 ">
<div className="z-10 text-lg px-4 font-bold text-white text-center shadow-text select-none">
{post.title}
</div>
</div>
<LazyImage src={headerImage} className='absolute top-0 w-full h-full object-cover object-center group-hover:scale-110 group-hover:brightness-50 transform duration-200' />
</div>
</Link>)
)
})}
</div>
<div className='pt-8'>
<div className=' mb-2 px-1 flex flex-nowrap justify-between'>
<div className='dark:text-gray-300'>
<i className='mr-2 fas fa-thumbs-up' />
{locale.COMMON.RELATE_POSTS}
</div>
</div>
<div className='grid grid-cols-2 md:grid-cols-3 gap-4'>
{recommendPosts.map(post => {
const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
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='flex h-40 cursor-pointer overflow-hidden'>
<div className='h-full w-full relative group'>
<div className='flex items-center justify-center w-full h-full duration-300 '>
<div className='z-10 text-lg px-4 font-bold text-white text-center shadow-text select-none'>
{post.title}
</div>
</div>
<LazyImage
src={headerImage}
className='absolute top-0 w-full h-full object-cover object-center group-hover:scale-110 group-hover:brightness-50 transform duration-200'
/>
{/* 卡片的阴影遮罩，为了凸显图片上的文字 */}
<div className='h-3/4 w-full absolute left-0 bottom-0'>
<div className='h-full w-full absolute opacity-80 group-hover:opacity-100 transition-all duration-1000 bg-gradient-to-b from-transparent to-black'></div>
</div>
</div>
</Link>
)
})}
</div>
</div>
)
}