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

目录样式，封装文章关联组件

Browse Source
This commit is contained in:
tangly1024
2021-12-13 12:34:57 +08:00
parent d49697d939
commit 046b11ef2b
3 changed files with 34 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/BlogAround.js Normal file
View File

@@ -0,0 +1,23 @@
import Link from 'next/link'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons'
/**
* 上一篇，下一篇文章
* @param {prev,next} param0
* @returns
*/
export default function BlogAround ({ prev, next }) {
return <section className='text-gray-800 mb-8 lg:mb-32 border-t dark:text-gray-300 px-5 flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
<Link href={`/article/${prev.slug}`} passHref>
<div className='text-sm py-3 text-blue-500 hover:underline cursor-pointer'>
<FontAwesomeIcon icon={faAngleDoubleLeft} className='mr-1' />{prev.title}
</div>
</Link>
<Link href={`/article/${next.slug}`} passHref>
<div className='text-sm flex py-3 text-blue-500 hover:underline cursor-pointer'>{next.title}
<FontAwesomeIcon icon={faAngleDoubleRight} className='ml-1 my-1' />
</div>
</Link>
</section>
}

2
components/TocDrawer.js
View File

@@ -29,7 +29,7 @@ const TocDrawer = ({ post, cRef }) => {
' dark:border-gray-800 bg-white dark:bg-gray-700 shadow-xl animate__animated animate__faster max-h-96 ' +
' w-60 duration-200 fixed right-4 top-16 rounded overflow-y-auto'}>
{post && <>
<div className='text-xl font-bold text-black bg-gray-50 dark:text-white py-3 px-6'>
<div className='text-xl font-bold text-black bg-gray-50 dark:text-white dark:bg-black py-3 px-6'>
{locale.COMMON.TABLE_OF_CONTENTS}
</div>
<Toc toc={post.toc}/>

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

@@ -27,7 +27,8 @@ import TocDrawerButton from '@/components/TocDrawerButton'
import { useGlobal } from '@/lib/global'
import { getNotionPageData } from '@/lib/notion/getNotionData'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleDoubleLeft, faAngleDoubleRight, faEye, faFolderOpen } from '@fortawesome/free-solid-svg-icons'
import { faEye, faFolderOpen } from '@fortawesome/free-solid-svg-icons'
import BlogAround from '@/components/BlogAround'
const mapPageUrl = id => {
return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -53,9 +54,9 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
<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 duration-300'>
<div className='max-w-5xl mx-auto mt-16 xl:mt-32 w-screen md:w-full'>
<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'>
<article itemScope itemType="https://schema.org/Movie" className='duration-300 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} />
@@ -84,6 +85,10 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
</div>
</section>
<section className='px-1 py-2 my-1 text-sm font-light italic bg-gray-50 text-gray-600 dark:bg-gray-700 dark:text-gray-400'>
{post.summary}
</section>
{/* Notion文章主体 */}
{blockMap && (
<NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
@@ -124,21 +129,9 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
</div>
</section>
</article>
<BlogAround prev={prev} next={next}/>
<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'>
<Link href={`/article/${prev.slug}`} passHref>
<div className='py-3 text-blue-500 text-lg hover:underline cursor-pointer'>
<FontAwesomeIcon icon={faAngleDoubleLeft} className='mr-1' />{prev.title}</div>
</Link>
<Link href={`/article/${next.slug}`} passHref>
<div className='flex py-3 text-blue-500 text-lg hover:underline cursor-pointer'>{next.title}
<FontAwesomeIcon icon={faAngleDoubleRight} className='ml-1 my-1' />
</div>
</Link>
</div>
</div>
</article>
{/* 评论互动 */}
<div