mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-06-03 23:16:52 +00:00
Code🤣
This commit is contained in:
tangly1024
180
layouts/ArticleLayout.js
Normal file
180
layouts/ArticleLayout.js
Normal file
@@ -0,0 +1,180 @@
|
||||
import TagItem from '@/components/TagItem'
|
||||
import { NotionRenderer, Equation, Code, CollectionRow, Collection } 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 CommonHead from '@/components/CommonHead'
|
||||
import TopNav from '@/components/TopNav'
|
||||
import Progress from '@/components/Progress'
|
||||
import { useRef } from 'react'
|
||||
import Image from 'next/image'
|
||||
import Footer from '@/components/Footer'
|
||||
import RightAside from '@/components/RightAside'
|
||||
import RewardButton from '@/components/RewardButton'
|
||||
import RightWidget from '@/components/RightWidget'
|
||||
import { useTheme } from '@/lib/theme'
|
||||
import LeftAside from '@/components/LeftAside'
|
||||
import BlogPostMini from '@/components/BlogPostMini'
|
||||
|
||||
const mapPageUrl = id => {
|
||||
return 'https://www.notion.so/' + id.replace(/-/g, '')
|
||||
}
|
||||
|
||||
const ArticleLayout = ({
|
||||
children,
|
||||
blockMap,
|
||||
frontMatter,
|
||||
emailHash,
|
||||
fullWidth = true,
|
||||
tags,
|
||||
prev,
|
||||
next
|
||||
}) => {
|
||||
const meta = {
|
||||
title: frontMatter.title,
|
||||
type: 'article'
|
||||
}
|
||||
const targetRef = useRef(null)
|
||||
const { theme } = useTheme()
|
||||
return (
|
||||
<div className={`${BLOG.font} ${theme}`}>
|
||||
<CommonHead meta={meta} />
|
||||
{/* live2d 看板娘 */}
|
||||
<script async src='https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js' />
|
||||
|
||||
<Progress targetRef={targetRef} />
|
||||
|
||||
<TopNav tags={tags} />
|
||||
|
||||
<div className='flex justify-between'>
|
||||
|
||||
<LeftAside tags={tags} />
|
||||
|
||||
{/* 主体区块 */}
|
||||
<main className='bg-gray-100 dark:bg-black w-full'>
|
||||
{/* 卡牌水平边距wrapper */}
|
||||
{/* 文章卡牌 */}
|
||||
<div className='bg-white dark:border-gray-700 dark:bg-gray-700 duration-200'>
|
||||
|
||||
<header className='md:flex-shrink-0 overflow-y-hidden shadow-sm animate__fadeIn animate__animated'>
|
||||
{/* 封面图 */}
|
||||
{frontMatter.page_cover && frontMatter.page_cover.length > 1 && (
|
||||
<img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }}
|
||||
src={frontMatter.page_cover} alt={frontMatter.title} />
|
||||
)}
|
||||
</header>
|
||||
|
||||
<article
|
||||
ref={targetRef}
|
||||
className='overflow-x-auto px-10 py-10 max-w-3xl 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'>
|
||||
{frontMatter.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'>
|
||||
|
||||
{frontMatter.tags && (
|
||||
<div className='flex flex-nowrap leading-8 p-1'>
|
||||
{frontMatter.tags.map(tag => (
|
||||
<TagItem key={tag} tag={tag} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{frontMatter.slug !== 'about' && (<>
|
||||
<a className='flex-nowrap flex hover:bg-blue-500 hover:text-white duration-200 px-1 mx-1'
|
||||
href='/article/about'>
|
||||
<Image href='https://www.baidu.com' alt={BLOG.author} width={20} height={20} src='/avatar.svg'
|
||||
className='rounded-full' />
|
||||
<div className='mx-2 leading-6 my-1 md:block'>{BLOG.author}</div>
|
||||
</a>
|
||||
</>)}
|
||||
|
||||
{frontMatter.type[0] !== 'Page' && (
|
||||
<div className='flex items-start text-gray-500 dark:text-gray-400 text-sm leading-8 pr-3'>
|
||||
<div>
|
||||
{formatDate(
|
||||
frontMatter?.date?.start_date || frontMatter.createdTime,
|
||||
BLOG.lang
|
||||
)}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div>{children}</div>
|
||||
|
||||
{/* Notion文章主体 */}
|
||||
{blockMap && (
|
||||
<div>
|
||||
<NotionRenderer
|
||||
recordMap={blockMap}
|
||||
components={{
|
||||
equation: Equation,
|
||||
code: Code,
|
||||
collectionRow: CollectionRow,
|
||||
collection: Collection
|
||||
}}
|
||||
mapPageUrl={mapPageUrl}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='flex justify-center py-10'>
|
||||
<RewardButton />
|
||||
</div>
|
||||
|
||||
<div className='text-gray-800 my-5 dark:text-gray-300'>
|
||||
<div className='mt-4 my-2 font-bold'>继续阅读</div>
|
||||
<div className='flex flex-wrap justify-between py-2'>
|
||||
{/* <Link href={prev.slug}> */}
|
||||
{/* <div>上一篇:<a className='py-1 underline cursor-pointer ml-1'>{prev.title}</a></div> */}
|
||||
{/* </Link> */}
|
||||
<BlogPostMini post={prev} />
|
||||
<BlogPostMini post={next} />
|
||||
{/* <Link href={next.slug}> */}
|
||||
{/* <div>下一篇:<a className='py-1 underline cursor-pointer ml-1'>{next.title}</a></div> */}
|
||||
{/* </Link> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 分享 */}
|
||||
{/* <ShareBar post={frontMatter} /> */}
|
||||
{/* <Share url={shareUrl} title={frontMatter.title}/> */}
|
||||
|
||||
{/* 评论互动 */}
|
||||
<Comment frontMatter={frontMatter} />
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
<RightWidget post={frontMatter} />
|
||||
{/* <ShareButton post={frontMatter}/> */}
|
||||
{/* <TopJumper /> */}
|
||||
|
||||
</main>
|
||||
|
||||
{/* 右侧内容 */}
|
||||
<RightAside toc={frontMatter.toc} />
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArticleLayout
|
||||
119
layouts/DefaultLayout.js
Normal file
119
layouts/DefaultLayout.js
Normal file
@@ -0,0 +1,119 @@
|
||||
import BlogPost from '@/components/BlogPost'
|
||||
import PropTypes from 'prop-types'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import BLOG from '@/blog.config'
|
||||
import CommonHead from '@/components/CommonHead'
|
||||
import { useRouter } from 'next/router'
|
||||
import TopNav from '@/components/TopNav'
|
||||
import Footer from '@/components/Footer'
|
||||
import localStorage from 'localStorage'
|
||||
import { useTheme } from '@/lib/theme'
|
||||
import { useEffect } from 'react'
|
||||
import LeftAside from '@/components/LeftAside'
|
||||
|
||||
const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
|
||||
const meta = {
|
||||
title: BLOG.title,
|
||||
type: 'website',
|
||||
...customMeta
|
||||
}
|
||||
page = page ?? 1
|
||||
let postsToShow = []
|
||||
let filteredBlogPosts = posts ?? []
|
||||
let currentSearch = ''
|
||||
if (posts) {
|
||||
const router = useRouter()
|
||||
if (router.query && router.query.s) {
|
||||
currentSearch = router.query.s
|
||||
filteredBlogPosts = posts.filter(post => {
|
||||
const tagContent = post.tags ? post.tags.join(' ') : ''
|
||||
const searchContent = post.title + post.summary + tagContent + post.slug
|
||||
return searchContent.toLowerCase().includes(currentSearch.toLowerCase())
|
||||
})
|
||||
}
|
||||
}
|
||||
const totalPages = Math.ceil(filteredBlogPosts.length / BLOG.postsPerPage)
|
||||
|
||||
if (posts) {
|
||||
postsToShow = filteredBlogPosts.slice(
|
||||
BLOG.postsPerPage * (page - 1),
|
||||
BLOG.postsPerPage * page
|
||||
)
|
||||
}
|
||||
let showNext = false
|
||||
if (filteredBlogPosts) {
|
||||
const totalPosts = filteredBlogPosts.length
|
||||
showNext = page * BLOG.postsPerPage < totalPosts
|
||||
}
|
||||
|
||||
// 首页隐藏看板娘
|
||||
useEffect(() => {
|
||||
const ref = document.getElementById('waifu')
|
||||
if (ref) {
|
||||
ref.remove()
|
||||
}
|
||||
})
|
||||
|
||||
const { theme } = useTheme()
|
||||
|
||||
return (
|
||||
<div className={theme}>
|
||||
<CommonHead meta={meta} />
|
||||
<TopNav tags={tags} currentTag={currentTag} />
|
||||
<div className={`${BLOG.font} flex justify-between`}>
|
||||
|
||||
<LeftAside tags={tags} currentTag={currentTag} />
|
||||
|
||||
<main className='md:pb-10 md:px-24 p-5 bg-gray-100 dark:bg-gray-900 w-full'>
|
||||
{(!page || page === 1) && (
|
||||
<div className='py-5'></div>
|
||||
)
|
||||
}
|
||||
{/* 标签 */}
|
||||
{currentTag && (
|
||||
<div className='pb-5 dark:text-gray-200'>
|
||||
<div className='py-1'>标签: {currentTag}</div>
|
||||
<hr />
|
||||
</div>
|
||||
)}
|
||||
{/* 当前搜索 */}
|
||||
{(currentSearch || (page && page !== 1)) && (
|
||||
<div className='pb-5'>
|
||||
<div className='dark:text-gray-200 flex justify-between py-1'>
|
||||
{currentSearch && (
|
||||
<span>搜索关键词: {currentSearch}</span>
|
||||
)}
|
||||
{page && page !== 1 && (
|
||||
<span>页 {page} / {totalPages}</span>
|
||||
)}
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 文章列表 */}
|
||||
<div className='mx-auto animate__animated animate__fadeIn'>
|
||||
<div className='grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-6'>
|
||||
{!postsToShow.length && (
|
||||
<p className='text-gray-500 dark:text-gray-300 textc'>No posts found.</p>
|
||||
)}
|
||||
{postsToShow.map(post => (
|
||||
<BlogPost key={post.id} post={post} tags={tags} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Pagination page={page} showNext={showNext} />
|
||||
|
||||
</main>
|
||||
</div>
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
DefaultLayout.propTypes = {
|
||||
posts: PropTypes.array.isRequired,
|
||||
tags: PropTypes.object.isRequired,
|
||||
currentTag: PropTypes.string
|
||||
}
|
||||
export default DefaultLayout
|
||||
Reference in New Issue
Block a user