forked from tangly1024/NotionNext
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request tangly1024#2336 from tangly1024/release/4.4.5
Release/4.4.5
- Loading branch information
Showing
2 changed files
with
65 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,80 +1,81 @@ | ||
/* eslint-disable @next/next/no-img-element */ | ||
import { siteConfig } from '@/lib/config' | ||
import CONFIG from '../config' | ||
import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' | ||
import Link from 'next/link' | ||
import CONFIG from '../config' | ||
|
||
/** | ||
* 博文列表 | ||
* @param {*} param0 | ||
* @returns | ||
*/ | ||
export const Blog = ({ posts }) => { | ||
return <> | ||
{/* <!-- ====== Blog Section Start --> */} | ||
<section className="bg-white pb-10 pt-20 dark:bg-dark lg:pb-20 lg:pt-[120px]"> | ||
<div className="container mx-auto"> | ||
{/* 区块标题文字 */} | ||
<div className="-mx-4 flex flex-wrap justify-center"> | ||
<div className="w-full px-4"> | ||
<div className="mx-auto mb-[60px] max-w-[485px] text-center"> | ||
<span className="mb-2 block text-lg font-semibold text-primary"> | ||
{siteConfig('STARTER_BLOG_TITLE', null, CONFIG)} | ||
</span> | ||
<h2 | ||
className="mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]" | ||
> | ||
{siteConfig('STARTER_BLOG_TEXT_1', null, CONFIG)} | ||
</h2> | ||
<p dangerouslySetInnerHTML={ | ||
{ __html: siteConfig('STARTER_BLOG_TEXT_2', null, CONFIG) } | ||
} className="text-base text-body-color dark:text-dark-6"> | ||
|
||
</p> | ||
</div> | ||
</div> | ||
return ( | ||
<> | ||
{/* <!-- ====== Blog Section Start --> */} | ||
<section className='bg-white pb-10 pt-20 dark:bg-dark lg:pb-20 lg:pt-[120px]'> | ||
<div className='container mx-auto'> | ||
{/* 区块标题文字 */} | ||
<div className='-mx-4 flex flex-wrap justify-center'> | ||
<div className='w-full px-4'> | ||
<div className='mx-auto mb-[60px] max-w-[485px] text-center'> | ||
<span className='mb-2 block text-lg font-semibold text-primary'> | ||
{siteConfig('STARTER_BLOG_TITLE', null, CONFIG)} | ||
</span> | ||
<h2 className='mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'> | ||
{siteConfig('STARTER_BLOG_TEXT_1', null, CONFIG)} | ||
</h2> | ||
<p | ||
dangerouslySetInnerHTML={{ | ||
__html: siteConfig('STARTER_BLOG_TEXT_2', null, CONFIG) | ||
}} | ||
className='text-base text-body-color dark:text-dark-6'></p> | ||
</div> | ||
</div> | ||
{/* 博客列表 此处优先展示3片文章 */} | ||
<div className="-mx-4 flex flex-wrap"> | ||
{posts?.map((item, index) => { | ||
const url = checkContainHttp(item.slug) ? sliceUrlFromHttp(item.slug) : `${siteConfig('SUB_PATH', '')}/${item.slug}` | ||
return <div key={index} className="w-full px-4 md:w-1/2 lg:w-1/3"> | ||
<div className="wow fadeInUp group mb-10" data-wow-delay=".1s"> | ||
<div className="mb-8 overflow-hidden rounded-[5px]"> | ||
<Link href={url} className="block"> | ||
</div> | ||
{/* 博客列表 此处优先展示3片文章 */} | ||
<div className='-mx-4 flex flex-wrap'> | ||
{posts?.map((item, index) => { | ||
const url = checkContainHttp(item.slug) | ||
? sliceUrlFromHttp(item.slug) | ||
: `${siteConfig('SUB_PATH', '')}/${item.slug}` | ||
return ( | ||
<div key={index} className='w-full px-4 md:w-1/2 lg:w-1/3'> | ||
<div | ||
className='wow fadeInUp group mb-10' | ||
data-wow-delay='.1s'> | ||
<div className='mb-8 overflow-hidden rounded-[5px]'> | ||
<Link href={url} className='block'> | ||
<img | ||
src={item.pageCoverThumbnail} | ||
alt={item.title} | ||
className="w-full transition group-hover:rotate-6 group-hover:scale-125" | ||
src={item.pageCoverThumbnail} | ||
alt={item.title} | ||
className='w-full transition group-hover:rotate-6 group-hover:scale-125' | ||
/> | ||
</Link> | ||
</Link> | ||
</div> | ||
<div> | ||
<span | ||
className="mb-6 inline-block rounded-[5px] bg-primary px-4 py-0.5 text-center text-xs font-medium leading-loose text-white" | ||
> | ||
<span className='mb-6 inline-block rounded-[5px] bg-primary px-4 py-0.5 text-center text-xs font-medium leading-loose text-white'> | ||
{item.publishDay} | ||
</span> | ||
<h3> | ||
<a | ||
|
||
className="mb-4 inline-block text-xl font-semibold text-dark hover:text-primary dark:text-white dark:hover:text-primary sm:text-2xl lg:text-xl xl:text-2xl" | ||
> | ||
{item.title} | ||
</a> | ||
</h3> | ||
<p | ||
className="max-w-[370px] text-base text-body-color dark:text-dark-6" | ||
> | ||
{item.summary} | ||
</p> | ||
</div> | ||
</span> | ||
<h3> | ||
<Link | ||
href={url} | ||
className='mb-4 inline-block text-xl font-semibold text-dark hover:text-primary dark:text-white dark:hover:text-primary sm:text-2xl lg:text-xl xl:text-2xl'> | ||
{item.title} | ||
</Link> | ||
</h3> | ||
<p className='max-w-[370px] text-base text-body-color dark:text-dark-6'> | ||
{item.summary} | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
}) } | ||
</div> | ||
) | ||
})} | ||
</div> | ||
</div> | ||
</section> | ||
{/* <!-- ====== Blog Section End --> */} | ||
</section> | ||
{/* <!-- ====== Blog Section End --> */} | ||
</> | ||
) | ||
} |