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

feature:

Browse Source 
版面微调
This commit is contained in:
tangly
2021-12-08 20:04:04 +08:00
parent 0a9d2596d6
commit ea024762d1
4 changed files with 20 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/BlogPostArchive.js
View File

@@ -15,30 +15,19 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
} else { } else {
return <div ref={targetRef}> return <div ref={targetRef}>
<div className='pt-16 pb-4 text-3xl dark:text-white' id={archiveTitle}>{archiveTitle}</div> <div className='pt-16 pb-4 text-3xl dark:text-white' id={archiveTitle}>{archiveTitle}</div>
<ul className='flex flex-wrap space-y-1'> <ul>
{posts.map(post => ( {posts.map(post => (
<Link key={post.id} href={`${BLOG.path}/article/${post.slug}`} passHref> <li key={post.id} className='border-l-2 p-1 hover:scale-x-105 hover:border-blue-500 transform duration-500'>
<li className='w-full border-l pl-2 hover:underline cursor-pointer hover:scale-105 transform duration-500'> <div name={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> &nbsp;
<div name={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> &nbsp; <span className='dark:text-blue-400 text-blue-600'>{post.title}</span></div> <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
</li> <span className='dark:text-blue-400 hover:underline cursor-pointer text-blue-600'>{post.title}</span>
</Link> </Link>
</div>
</li>
))} ))}
</ul> </ul>
</div> </div>
} }
} }
/**
* 获取从第1页到指定页码的文章
* @param page 第几页
* @param totalPosts 所有文章
* @param postsPerPage 每页文章数量
* @returns {*}
*/
const getPostByPage = function (page, totalPosts, postsPerPage) {
return totalPosts.slice(
0,
postsPerPage * page
)
}
export default BlogPostArchive export default BlogPostArchive

2
components/BlogPostCard.js
View File

@@ -11,7 +11,7 @@ const BlogPostCard = ({ post, tags }) => {
<div key={post.id} className='hover:shadow-2xl shadow-md mb-14 duration-300 md:grid md:grid-cols-5 rounded-xl dark:border-gray-600 animate__animated animate__fadeIn animate__faster <div key={post.id} className='hover:shadow-2xl shadow-md mb-14 duration-300 md:grid md:grid-cols-5 rounded-xl dark:border-gray-600 animate__animated animate__fadeIn animate__faster
w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700'> w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
<Link href={`${BLOG.path}/article/${post.slug}`} passHref> <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
<div className='w-full h-60 duration-200 cursor-pointer transform col-span-2 overflow-hidden rounded-l-2xl'> <div className='w-full h-60 rounded-t-xl md:rounded-t-none md:rounded-l-xl md:h-full duration-200 cursor-pointer transform col-span-2 overflow-hidden'>
<Image className='hover:scale-105 transform duration-500' src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> <Image className='hover:scale-105 transform duration-500' src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
</div> </div>
</Link> </Link>

4
components/LatestPostsGroup.js
View File

@@ -32,13 +32,13 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
return ( return (
<Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref> <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
<div className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' my-1 px-5 flex justify-between'}> <div className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' my-1 px-5 flex justify-between'}>
<div className={ ' text-xs py-1 flex w-44 overflow-x-hidden whitespace-nowrap overflow-hidden pt-1 ' + <div className={ 'text-xs py-1 flex w-40 overflow-x-hidden whitespace-nowrap overflow-hidden ' +
'hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline' + 'hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline' +
(selected ? 'dark:text-white text-black ' : 'text-gray-500 dark:text-gray-300') (selected ? 'dark:text-white text-black ' : 'text-gray-500 dark:text-gray-300')
}> }>
{post.title} {post.title}
</div> </div>
<div className='mr-2 text-gray-500 text-xs py-1'> <div className='text-gray-500 text-xs py-1'>
{formatDateFmt(post.lastEditedTime, 'yyyy/MM/dd')} {formatDateFmt(post.lastEditedTime, 'yyyy/MM/dd')}
</div> </div>
</div> </div>

18
pages/article/[slug].js
View File

@@ -53,16 +53,16 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
<div id='article-wrapper' ref={targetRef} className='flex-grow'> <div id='article-wrapper' ref={targetRef} className='flex-grow'>
<div className='max-w-5xl mx-auto mt-16 xl:mt-32 w-screen md:w-full hover:shadow-2xl'> <div className='max-w-5xl mx-auto mt-16 xl:mt-32 w-screen md:w-full duration-300'>
{post.type && !post.type.includes('Page') && (<>
<header className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 rounded-t-2xl overflow-hidden'>
<Image src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} loading='eager' objectFit='cover' layout='fill' alt={post.title} />
</header>
</>)}
<article itemScope itemType="https://schema.org/Movie" className='animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'> <article itemScope itemType="https://schema.org/Movie" className='hover:shadow-2xl pt-10 animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
{post.type && !post.type.includes('Page') && (<>
<header className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 overflow-hidden'>
<Image src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} loading='eager' objectFit='cover' layout='fill' alt={post.title} />
</header>
</>)}
{/* 文章Title */} {/* 文章Title */}
<h2 className='font-bold text-3xl text-black dark:text-white font-serif'> {post.title}</h2> <h2 className='font-bold text-3xl text-black dark:text-white font-serif pt-10'> {post.title}</h2>
<hr className='mt-4' /> <hr className='mt-4' />
<section className='flex-nowrap flex mt-1 dark:text-white font-light'> <section className='flex-nowrap flex mt-1 dark:text-white font-light'>
<Link href={`/category/${post.category}`} passHref> <Link href={`/category/${post.category}`} passHref>
@@ -126,7 +126,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
</article> </article>
<div className='text-gray-800 dark:text-gray-300 dark:bg-gray-900 bg-gray-50 px-5 '> <div className='text-gray-800 dark:text-gray-300 dark:bg-gray-900 bg-gray-100 px-5 '>
<div className='flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'> <div className='flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
<Link href={`/article/${prev.slug}`} passHref> <Link href={`/article/${prev.slug}`} passHref>
<div className='py-3 text-blue-500 text-lg hover:underline cursor-pointer'> <div className='py-3 text-blue-500 text-lg hover:underline cursor-pointer'>