mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-06-08 15:10:37 +00:00
封装Layout组件
This commit is contained in:
tangly1024
@@ -1,194 +0,0 @@
|
||||
import TagItem from '@/components/TagItem'
|
||||
import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
|
||||
import BLOG from '@/blog.config'
|
||||
import formatDate from '@/lib/formatDate'
|
||||
import 'gitalk/dist/gitalk.css'
|
||||
import Comment from '@/components/Comment'
|
||||
import Progress from '@/components/Progress'
|
||||
import React, { useRef } from 'react'
|
||||
import Image from 'next/image'
|
||||
import RewardButton from '@/components/RewardButton'
|
||||
import BlogPostMini from '@/components/BlogPostMini'
|
||||
import { useRouter } from 'next/router'
|
||||
import JumpToTop from '@/components/JumpToTop'
|
||||
import SideBar from '@/components/SideBar'
|
||||
import Footer from '@/components/Footer'
|
||||
import Container from '@/components/Container'
|
||||
import TocBar from '@/components/TocBar'
|
||||
import TopNav from '@/components/TopNav'
|
||||
import ShareBar from '@/components/ShareBar'
|
||||
|
||||
const mapPageUrl = id => {
|
||||
return 'https://www.notion.so/' + id.replace(/-/g, '')
|
||||
}
|
||||
|
||||
const ArticleLayout = ({
|
||||
children,
|
||||
blockMap,
|
||||
post,
|
||||
emailHash,
|
||||
fullWidth = true,
|
||||
tags,
|
||||
prev,
|
||||
next
|
||||
}) => {
|
||||
const meta = {
|
||||
title: post.title,
|
||||
description: post.summary,
|
||||
type: 'article'
|
||||
}
|
||||
const targetRef = useRef(null)
|
||||
const url = BLOG.link + useRouter().asPath
|
||||
|
||||
return (
|
||||
<Container meta={meta} tags={tags}>
|
||||
|
||||
{/* live2d 看板娘 */}
|
||||
{/* <script async src='https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js' /> */}
|
||||
|
||||
<Progress targetRef={targetRef} />
|
||||
|
||||
<TopNav tags={tags} post={post} />
|
||||
|
||||
{/* Wrapper */}
|
||||
<div className='flex justify-between bg-gray-100'>
|
||||
|
||||
<SideBar tags={tags} post={post} />
|
||||
|
||||
{/* 主体区块 */}
|
||||
<main className='bg-gray-100 w-full dark:bg-gray-800' ref={targetRef}>
|
||||
{/* 中央区域 wrapper */}
|
||||
<header
|
||||
className='hover:scale-105 hover:shadow-2xl duration-200 transform mx-auto max-w-5xl mt-16 lg:mt-20 md:flex-shrink-0 animate__fadeIn animate__animated'>
|
||||
{/* 封面图 */}
|
||||
{post.page_cover && post.page_cover.length > 1 && (
|
||||
<img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }}
|
||||
src={post.page_cover} alt={post.title} />
|
||||
)}
|
||||
</header>
|
||||
|
||||
<article
|
||||
className='overflow-x-auto md:px-10 px-5 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
|
||||
{/* 文章标题 */}
|
||||
<h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
|
||||
{post.title}
|
||||
</h1>
|
||||
|
||||
{/* 文章信息 */}
|
||||
<div className='justify-between flex flex-wrap bg-gray-50 p-2 dark:bg-gray-700 dark:text-white'>
|
||||
<div className='flex-nowrap flex'>
|
||||
|
||||
{post.slug !== 'about' && (<>
|
||||
<a
|
||||
className='hidden md:block duration-200 px-1' href='/article/about'
|
||||
>
|
||||
<Image alt={BLOG.author} width={33} height={33} src='/avatar.svg'
|
||||
className='rounded-full cursor-pointer transform hover:scale-125 duration-200' />
|
||||
</a>
|
||||
</>)}
|
||||
{post.tags && (
|
||||
<div className='flex flex-nowrap leading-8 p-1'>
|
||||
{post.tags.map(tag => (
|
||||
<TagItem key={tag} tag={tag} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{post.type[0] !== 'Page' && (
|
||||
<div className='flex items-start text-gray-500 dark:text-gray-400 leading-10'>
|
||||
{formatDate(
|
||||
post?.date?.start_date || post.createdTime,
|
||||
BLOG.lang
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 不蒜子 */}
|
||||
<div id='busuanzi_container_page_pv' className='hidden'>
|
||||
<a href='https://analytics.google.com/analytics/web/#/p273013569/reports/reportinghub'
|
||||
className='fa fa-eye text-gray-500 text-sm leading-none py-1 px-2'>
|
||||
<span id='busuanzi_value_page_pv' className='leading-6'></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notion文章主体 */}
|
||||
{blockMap && (
|
||||
<NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
|
||||
components={{
|
||||
equation: Equation,
|
||||
code: Code,
|
||||
collectionRow: CollectionRow,
|
||||
collection: Collection
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className='flex justify-center pt-5'>
|
||||
<RewardButton />
|
||||
</div>
|
||||
<p className='flex justify-center py-5 dark:text-gray-200'>
|
||||
- 💖 本 文 结 束 😚 感 谢 您 的 阅 读 💖 -
|
||||
</p>
|
||||
|
||||
{/* 版权声明 */}
|
||||
<section
|
||||
className='overflow-auto dark:bg-gray-700 dark:text-gray-300 bg-gray-100 p-5 leading-8 border-l-4 border-red-500'>
|
||||
<ul>
|
||||
<li><strong>本文作者：</strong>{BLOG.author}</li>
|
||||
<li><strong>本文链接：</strong> <a href={url}>{url}</a> 《{post.title}》</li>
|
||||
<li><strong>版权声明：</strong> 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className='flex'>
|
||||
<div className='text-gray-800 my-5 dark:text-gray-300 font-bold my-5 mr-2'>分享本文 </div>
|
||||
<ShareBar post={post} />
|
||||
</section>
|
||||
|
||||
<div className='text-gray-800 my-5 dark:text-gray-300'>
|
||||
<div className='mt-4 font-bold'>继续阅读</div>
|
||||
<div className='flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
|
||||
<BlogPostMini post={prev} />
|
||||
<BlogPostMini post={next} />
|
||||
</div>
|
||||
</div>
|
||||
{/* 评论互动 */}
|
||||
<Comment frontMatter={post} />
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
{/* 右侧目录 */}
|
||||
<aside className='dark:bg-gray-800 bg-white'>
|
||||
<section className='h-full xl:static xl:block hidden top-0 right-0 fixed h-full w-52 dark:bg-gray-800 duration-500'>
|
||||
<div id='right-toc' className='sticky top-16 duration-500'>
|
||||
<div
|
||||
className='border-t dark:border-gray-600 border-b text-2xl bg-white font-bold text-black dark:bg-gray-900 dark:text-white py-6 px-6'>
|
||||
文章目录
|
||||
</div>
|
||||
<TocBar toc={post.toc} />
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
{/* 下方菜单组 */}
|
||||
<div
|
||||
className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
|
||||
<div className='flex-wrap'>
|
||||
{/* 分享按钮 */}
|
||||
{/* <ShareButton post={post} /> */}
|
||||
{/* 跳回顶部 */}
|
||||
<JumpToTop targetRef={targetRef} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArticleLayout
|
||||
69
layouts/BaseLayout.js
Normal file
69
layouts/BaseLayout.js
Normal file
@@ -0,0 +1,69 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import React, { useCallback, useEffect, useRef } from 'react'
|
||||
import CommonHead from '@/components/CommonHead'
|
||||
import throttle from 'lodash.throttle'
|
||||
import BLOG from '@/blog.config'
|
||||
import { useTheme } from '@/lib/theme'
|
||||
import TopNav from '@/components/TopNav'
|
||||
import Footer from '@/components/Footer'
|
||||
import SideBar from '@/components/SideBar'
|
||||
import JumpToTop from '@/components/JumpToTop'
|
||||
|
||||
const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMeta }) => {
|
||||
let windowTop = 0
|
||||
const scrollTrigger = useCallback(throttle(() => {
|
||||
const scrollS = window.scrollY
|
||||
const nav = document.querySelector('#sticky-nav')
|
||||
const sidebar = document.querySelector('#sidebar')
|
||||
const tagsBar = document.querySelector('#tags-bar')
|
||||
const rightToc = document.querySelector('#right-toc')
|
||||
if (scrollS >= windowTop && scrollS > 10) {
|
||||
nav && nav.classList.replace('top-0', '-top-16')
|
||||
tagsBar && tagsBar.classList.replace('top-16', 'top-0')
|
||||
sidebar && sidebar.classList.replace('top-20', 'top-2')
|
||||
rightToc && rightToc.classList.replace('top-16', 'top-0')
|
||||
windowTop = scrollS
|
||||
} else {
|
||||
nav && nav.classList.replace('-top-16', 'top-0')
|
||||
tagsBar && tagsBar.classList.replace('top-0', 'top-16')
|
||||
sidebar && sidebar.classList.replace('top-2', 'top-20')
|
||||
rightToc && rightToc.classList.replace('top-0', 'top-16')
|
||||
windowTop = scrollS
|
||||
}
|
||||
}, 200))
|
||||
|
||||
// 监听滚动
|
||||
useEffect(() => {
|
||||
window.addEventListener('scroll', scrollTrigger)
|
||||
return () => {
|
||||
window.removeEventListener('scroll', scrollTrigger)
|
||||
}
|
||||
})
|
||||
const { theme } = useTheme()
|
||||
const targetRef = useRef(null)
|
||||
|
||||
return (
|
||||
<div id='wrapper' className={[BLOG.font, theme].join(' ')}>
|
||||
<CommonHead meta={meta} />
|
||||
|
||||
<TopNav tags={tags} post={post} />
|
||||
{/* Middle Wrapper */}
|
||||
<main className='flex bg-gray-100'>
|
||||
<SideBar tags={tags} post={post} />
|
||||
<div className='flex flex-grow' ref={targetRef} >
|
||||
{children}
|
||||
</div>
|
||||
<JumpToTop targetRef={targetRef} showPercent={false} />
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
BaseLayout.propTypes = {
|
||||
children: PropTypes.node
|
||||
}
|
||||
|
||||
export default BaseLayout
|
||||
@@ -1,38 +0,0 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import BLOG from '@/blog.config'
|
||||
import TagsBar from '@/components/TagsBar'
|
||||
import Footer from '@/components/Footer'
|
||||
import React, { useRef } from 'react'
|
||||
import Container from '@/components/Container'
|
||||
import JumpToTop from '@/components/JumpToTop'
|
||||
import SideBar from '@/components/SideBar'
|
||||
import TopNav from '@/components/TopNav'
|
||||
import BlogPostListScrollPagination from '@/components/BlogPostListScrollPagination'
|
||||
|
||||
const IndexLayout = ({ tags, posts, page, currentTag, meta, ...customMeta }) => {
|
||||
const targetRef = useRef(null)
|
||||
|
||||
return (
|
||||
<Container id='wrapper' meta={meta} tags={tags}>
|
||||
<TopNav tags={tags} />
|
||||
|
||||
{/* middle */}
|
||||
<div ref={targetRef} className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
|
||||
<SideBar />
|
||||
<main className='flex-grow'>
|
||||
<TagsBar tags={tags} currentTag={currentTag} />
|
||||
<BlogPostListScrollPagination posts={posts} tags={tags} targetRef={targetRef} />
|
||||
<JumpToTop targetRef={targetRef} showPercent={false} />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
IndexLayout.propTypes = {
|
||||
posts: PropTypes.array.isRequired,
|
||||
tags: PropTypes.object.isRequired,
|
||||
currentTag: PropTypes.string
|
||||
}
|
||||
export default IndexLayout
|
||||
@@ -1,39 +0,0 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import BLOG from '@/blog.config'
|
||||
import TagsBar from '@/components/TagsBar'
|
||||
import Footer from '@/components/Footer'
|
||||
import React, { useRef } from 'react'
|
||||
import Container from '@/components/Container'
|
||||
import JumpToTop from '@/components/JumpToTop'
|
||||
import SideBar from '@/components/SideBar'
|
||||
import TopNav from '@/components/TopNav'
|
||||
import BlogPostList from '@/components/BlogPostList'
|
||||
|
||||
const PageLayout = ({ tags, posts, page, currentTag, meta, ...customMeta }) => {
|
||||
const targetRef = useRef(null)
|
||||
|
||||
return (
|
||||
<Container id='wrapper' meta={meta} tags={tags}>
|
||||
<TopNav tags={tags} />
|
||||
|
||||
{/* middle */}
|
||||
<div ref={targetRef} className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
|
||||
<SideBar />
|
||||
|
||||
<main className='flex-grow'>
|
||||
<TagsBar tags={tags} currentTag={currentTag} />
|
||||
<BlogPostList posts={posts} tags={tags} page={page} />
|
||||
</main>
|
||||
<JumpToTop targetRef={targetRef} showPercent={false} />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
PageLayout.propTypes = {
|
||||
posts: PropTypes.array.isRequired,
|
||||
tags: PropTypes.object.isRequired,
|
||||
currentTag: PropTypes.string
|
||||
}
|
||||
export default PageLayout
|
||||
Reference in New Issue
Block a user