112 lines
3.3 KiB
JavaScript
112 lines
3.3 KiB
JavaScript
'use client'
|
|
|
|
import Comment from '@/components/Comment'
|
|
import NotionIcon from '@/components/NotionIcon'
|
|
import NotionPage from '@/components/NotionPage'
|
|
import ShareBar from '@/components/ShareBar'
|
|
import { siteConfig } from '@/lib/config'
|
|
import { isBrowser } from '@/lib/utils'
|
|
import Head from 'next/head'
|
|
import { useEffect } from 'react'
|
|
import { useRouter } from 'next/router'
|
|
import CategoryItem from '../components/CategoryItem'
|
|
import { ArticleLock } from '../components/ArticleLock'
|
|
import ArticleAround from '../components/ArticleAround'
|
|
import CatalogDrawerWrapper from '../components/CatalogDrawerWrapper'
|
|
import TagItemMini from '../components/TagItemMini'
|
|
import CONFIG from '../config'
|
|
|
|
/**
|
|
* 文章詳情頁
|
|
*/
|
|
const LayoutSlug = props => {
|
|
const { post, prev, next, siteInfo, lock, validPassword } = props
|
|
const router = useRouter()
|
|
// 若為文件首頁文章則更新瀏覽器標題
|
|
const index = siteConfig('GITBOOK_INDEX_PAGE', 'about', CONFIG)
|
|
const basePath = router.asPath.split('?')[0]
|
|
const title =
|
|
basePath?.indexOf(index) > 0
|
|
? `${post?.title} | ${siteInfo?.description}`
|
|
: `${post?.title} | ${siteInfo?.title}`
|
|
|
|
const waiting404 = siteConfig('POST_WAITING_TIME_FOR_404') * 1000
|
|
useEffect(() => {
|
|
// 404 處理
|
|
if (!post) {
|
|
setTimeout(() => {
|
|
if (isBrowser) {
|
|
const article = document.querySelector(
|
|
'#article-wrapper #notion-article'
|
|
)
|
|
if (!article) {
|
|
router.push('/404').then(() => {
|
|
console.warn('找不到頁面', router.asPath)
|
|
})
|
|
}
|
|
}
|
|
}, waiting404)
|
|
}
|
|
}, [post, router, waiting404])
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{title}</title>
|
|
</Head>
|
|
|
|
{/* 文章加鎖 */}
|
|
{lock && <ArticleLock validPassword={validPassword} />}
|
|
|
|
{!lock && (
|
|
<div id='container'>
|
|
{/* 標題 */}
|
|
<h1 className='text-3xl pt-12 dark:text-gray-300'>
|
|
{siteConfig('POST_TITLE_ICON') && (
|
|
<NotionIcon icon={post?.pageIcon} />
|
|
)}
|
|
{post?.title}
|
|
</h1>
|
|
|
|
{/* Notion 文章主體 */}
|
|
{post && (
|
|
<section className='px-1'>
|
|
<div id='article-wrapper'>
|
|
<NotionPage post={post} />
|
|
</div>
|
|
|
|
{/* 分享 */}
|
|
<ShareBar post={post} />
|
|
{/* 文章分類與標籤資訊 */}
|
|
<div className='flex justify-between'>
|
|
{siteConfig('POST_DETAIL_CATEGORY') && post?.category && (
|
|
<CategoryItem category={post.category} />
|
|
)}
|
|
<div>
|
|
{siteConfig('POST_DETAIL_TAG') &&
|
|
post?.tagItems?.map(tag => (
|
|
<TagItemMini key={tag.name} tag={tag} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{post?.type === 'Post' && (
|
|
<ArticleAround prev={prev} next={next} />
|
|
)}
|
|
|
|
{/* <AdSlot />
|
|
<WWAds className='w-full' orientation='horizontal' /> */}
|
|
|
|
<Comment frontMatter={post} />
|
|
</section>
|
|
)}
|
|
|
|
{/* 文章目錄 */}
|
|
<CatalogDrawerWrapper {...props} />
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export { LayoutSlug }
|