mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-16 15:09:28 +00:00
matery/medium refactor
This commit is contained in:
tangly1024
@@ -1,34 +0,0 @@
|
||||
import LayoutBase from './LayoutBase'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useEffect } from 'react'
|
||||
|
||||
export const Layout404 = props => {
|
||||
const router = useRouter()
|
||||
useEffect(() => {
|
||||
// 延时3秒如果加载失败就返回首页
|
||||
setTimeout(() => {
|
||||
const article = typeof document !== 'undefined' && document.getElementById('notion-article')
|
||||
if (!article) {
|
||||
router.push('/').then(() => {
|
||||
// console.log('找不到页面', router.asPath)
|
||||
})
|
||||
}
|
||||
}, 3000)
|
||||
})
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div className="text-black w-full h-screen text-center justify-center content-center items-center flex flex-col">
|
||||
<div className="dark:text-gray-200">
|
||||
<h2 className="inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top">
|
||||
404
|
||||
</h2>
|
||||
<div className="inline-block text-left h-32 leading-10 items-center">
|
||||
<h2 className="m-0 p-0">页面未找到</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default Layout404
|
||||
@@ -1,36 +0,0 @@
|
||||
import { useEffect } from 'react'
|
||||
import BlogPostArchive from './components/BlogPostArchive'
|
||||
import Card from './components/Card'
|
||||
import HeaderArticle from './components/HeaderArticle'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutArchive = (props) => {
|
||||
const { archivePosts } = props
|
||||
|
||||
useEffect(() => {
|
||||
const anchor = window.location.hash
|
||||
if (anchor) {
|
||||
setTimeout(() => {
|
||||
const anchorElement = document.getElementById(anchor.substring(1))
|
||||
if (anchorElement) {
|
||||
anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' })
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
}, [])
|
||||
return <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
|
||||
<Card className='w-full -mt-32'>
|
||||
<div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
|
||||
{Object.keys(archivePosts).map(archiveTitle => (
|
||||
<BlogPostArchive
|
||||
key={archiveTitle}
|
||||
posts={archivePosts[archiveTitle]}
|
||||
archiveTitle={archiveTitle}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
export default LayoutArchive
|
||||
@@ -1,86 +0,0 @@
|
||||
import CommonHead from '@/components/CommonHead'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
|
||||
import Footer from './components/Footer'
|
||||
import JumpToTopButton from './components/JumpToTopButton'
|
||||
import TopNav from './components/TopNav'
|
||||
import Live2D from '@/components/Live2D'
|
||||
import LoadingCover from './components/LoadingCover'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import BLOG from '@/blog.config'
|
||||
import FloatDarkModeButton from './components/FloatDarkModeButton'
|
||||
import throttle from 'lodash.throttle'
|
||||
import { isBrowser, loadExternalResource } from '@/lib/utils'
|
||||
import SocialButton from './components/SocialButton'
|
||||
import CONFIG_MATERY from './config_matery'
|
||||
|
||||
/**
|
||||
* 基础布局 采用左右两侧布局，移动端使用顶部导航栏
|
||||
* @param props
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const LayoutBase = props => {
|
||||
const { children, headerSlot, meta, siteInfo } = props
|
||||
const [show, switchShow] = useState(false)
|
||||
const { onLoading } = useGlobal()
|
||||
|
||||
const throttleMs = 200
|
||||
const scrollListener = useCallback(throttle(() => {
|
||||
const scrollY = window.pageYOffset
|
||||
const shouldShow = scrollY > 300
|
||||
if (shouldShow !== show) {
|
||||
switchShow(shouldShow)
|
||||
}
|
||||
}, throttleMs))
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('scroll', scrollListener)
|
||||
return () => document.removeEventListener('scroll', scrollListener)
|
||||
}, [])
|
||||
|
||||
if (isBrowser()) {
|
||||
loadExternalResource('/css/theme-matery.css', 'css')
|
||||
}
|
||||
|
||||
return (
|
||||
<div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
|
||||
|
||||
<CommonHead meta={meta} siteInfo={siteInfo} />
|
||||
|
||||
<TopNav {...props} />
|
||||
|
||||
{headerSlot}
|
||||
|
||||
<main id="wrapper" className={`${CONFIG_MATERY.HOME_BANNER_ENABLE ? '' : 'pt-16'} flex-1 w-full py-8 md:px-8 lg:px-24 relative`}>
|
||||
{/* 嵌入区域 */}
|
||||
<div id="container-slot" className={`w-full max-w-6xl ${props?.post && ' lg:max-w-3xl 2xl:max-w-4xl '} mt-6 px-3 mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
|
||||
{props.containerSlot}
|
||||
</div>
|
||||
|
||||
<div id="container-inner" className="w-full max-w-6xl mx-auto lg:flex lg:space-x-4 justify-center relative z-10">
|
||||
{onLoading ? <LoadingCover /> : children}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
{/* 左下角悬浮 */}
|
||||
<div className="bottom-4 -left-14 fixed justify-end z-40">
|
||||
<Live2D />
|
||||
</div>
|
||||
|
||||
{/* 右下角悬浮 */}
|
||||
<div className="bottom-40 right-2 fixed justify-end space-y-2 z-20">
|
||||
<FloatDarkModeButton />
|
||||
<JumpToTopButton />
|
||||
<SocialButton/>
|
||||
{/* 可扩展的右下角悬浮 */}
|
||||
{props.floatRightBottom}
|
||||
</div>
|
||||
|
||||
<Footer title={siteInfo?.title || BLOG.TITLE} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutBase
|
||||
@@ -1,40 +0,0 @@
|
||||
import BlogPostListScroll from './components/BlogPostListScroll'
|
||||
import BlogPostListPage from './components/BlogPostListPage'
|
||||
import LayoutBase from './LayoutBase'
|
||||
import BLOG from '@/blog.config'
|
||||
import Link from 'next/link'
|
||||
import HeaderArticle from './components/HeaderArticle'
|
||||
|
||||
export const LayoutCategory = props => {
|
||||
const { category, categoryOptions } = props
|
||||
return (
|
||||
<LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
|
||||
|
||||
<div id='inner-wrapper' className='w-full'>
|
||||
|
||||
<div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
|
||||
|
||||
<div className='flex justify-center flex-wrap'>
|
||||
{categoryOptions?.map(e => {
|
||||
const selected = e.name === category
|
||||
return (
|
||||
<Link key={e.name} href={`/category/${e.name}`} passHref legacyBehavior>
|
||||
<div className='duration-300 text-md whitespace-nowrap dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400' >
|
||||
<i className={`mr-4 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`}/>
|
||||
{e.name}({e.count})
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
|
||||
|
||||
</div>
|
||||
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutCategory
|
||||
@@ -1,34 +0,0 @@
|
||||
import Link from 'next/link'
|
||||
import HeaderArticle from './components/HeaderArticle'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutCategoryIndex = props => {
|
||||
const { categoryOptions } = props
|
||||
|
||||
return (
|
||||
<LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
|
||||
|
||||
<div id='inner-wrapper' className='w-full'>
|
||||
|
||||
<div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black dark:text-gray-300">
|
||||
|
||||
<div className='flex justify-center flex-wrap'>
|
||||
{categoryOptions.map(e => {
|
||||
return (
|
||||
<Link key={e.name} href={`/category/${e.name}`} passHref legacyBehavior>
|
||||
<div className='duration-300 text-md whitespace-nowrap dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400' >
|
||||
<i className={'mr-4 fas fa-folder'} />
|
||||
{e.name}({e.count})
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutCategoryIndex
|
||||
@@ -1,16 +0,0 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import BlogPostListPage from './components/BlogPostListPage'
|
||||
import BlogPostListScroll from './components/BlogPostListScroll'
|
||||
import Header from './components/Header'
|
||||
import CONFIG_MATERY from './config_matery'
|
||||
import LayoutBase from './LayoutBase'
|
||||
import React from 'react'
|
||||
import Announcement from './components/Announcement'
|
||||
|
||||
export const LayoutIndex = (props) => {
|
||||
return <LayoutBase {...props} containerSlot={ <Announcement {...props}/>} headerSlot={CONFIG_MATERY.HOME_BANNER_ENABLE && <Header {...props} />}>
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
export default LayoutIndex
|
||||
@@ -1,101 +0,0 @@
|
||||
import { useRouter } from 'next/router'
|
||||
import { useEffect, useRef } from 'react'
|
||||
import BLOG from '@/blog.config'
|
||||
import BlogPostListScroll from './components/BlogPostListScroll'
|
||||
import BlogPostListPage from './components/BlogPostListPage'
|
||||
import LayoutBase from './LayoutBase'
|
||||
import SearchInput from './components/SearchInput'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import Mark from 'mark.js'
|
||||
import TagItemMini from './components/TagItemMini'
|
||||
import Card from './components/Card'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const LayoutSearch = props => {
|
||||
const { keyword, tagOptions, categoryOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
const router = useRouter()
|
||||
const currentSearch = keyword || router?.query?.s
|
||||
const cRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
// 自动聚焦到搜索框
|
||||
cRef?.current?.focus()
|
||||
if (currentSearch) {
|
||||
const targets = document.getElementsByClassName('replace')
|
||||
for (const container of targets) {
|
||||
if (container && container.innerHTML) {
|
||||
const re = new RegExp(currentSearch, 'gim')
|
||||
const instance = new Mark(container)
|
||||
instance.markRegExp(re, {
|
||||
element: 'span',
|
||||
className: 'text-red-500 border-b border-dashed'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 100)
|
||||
})
|
||||
return (
|
||||
<LayoutBase {...props} currentSearch={currentSearch}>
|
||||
{!currentSearch && <>
|
||||
<div className="my-6 px-2 mt-12 w-full">
|
||||
<SearchInput cRef={cRef} {...props} />
|
||||
{/* 分类 */}
|
||||
<Card className="w-full mt-4">
|
||||
<div className="dark:text-gray-200 mb-5 mx-3">
|
||||
<i className="mr-4 fas fa-th" />
|
||||
{locale.COMMON.CATEGORY}:
|
||||
</div>
|
||||
<div id="category-list" className="duration-200 flex flex-wrap mx-8">
|
||||
{categoryOptions?.map(category => {
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
href={`/category/${category.name}`}
|
||||
passHref
|
||||
legacyBehavior>
|
||||
<div
|
||||
className={
|
||||
' duration-300 dark:hover:text-white rounded-lg px-5 cursor-pointer py-2 hover:bg-indigo-400 hover:text-white'
|
||||
}
|
||||
>
|
||||
<i className="mr-4 fas fa-folder" />
|
||||
{category.name}({category.count})
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
{/* 标签 */}
|
||||
<Card className="w-full mt-4">
|
||||
<div className="dark:text-gray-200 mb-5 ml-4">
|
||||
<i className="mr-4 fas fa-tag" />
|
||||
{locale.COMMON.TAGS}:
|
||||
</div>
|
||||
<div id="tags-list" className="duration-200 flex flex-wrap ml-8">
|
||||
{tagOptions?.map(tag => {
|
||||
return (
|
||||
<div key={tag.name} className="p-2">
|
||||
<TagItemMini key={tag.name} tag={tag} />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</>}
|
||||
|
||||
{currentSearch && <>
|
||||
<div id="posts-wrapper">
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
|
||||
</div>
|
||||
</>}
|
||||
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutSearch
|
||||
@@ -1,122 +0,0 @@
|
||||
import React, { useCallback, useEffect } from 'react'
|
||||
import { ArticleLock } from './components/ArticleLock'
|
||||
import HeaderArticle from './components/HeaderArticle'
|
||||
import LayoutBase from './LayoutBase'
|
||||
import Comment from '@/components/Comment'
|
||||
import NotionPage from '@/components/NotionPage'
|
||||
import ArticleAdjacent from './components/ArticleAdjacent'
|
||||
import ArticleCopyright from './components/ArticleCopyright'
|
||||
import { ArticleInfo } from './components/ArticleInfo'
|
||||
import Catalog from './components/Catalog'
|
||||
import JumpToCommentButton from './components/JumpToCommentButton'
|
||||
import throttle from 'lodash.throttle'
|
||||
import ShareBar from '@/components/ShareBar'
|
||||
import Announcement from './components/Announcement'
|
||||
|
||||
export const LayoutSlug = props => {
|
||||
const { post, lock, validPassword } = props
|
||||
|
||||
const [show, switchShow] = React.useState(false)
|
||||
const throttleMs = 200
|
||||
|
||||
const scrollListener = useCallback(throttle(() => {
|
||||
const scrollY = window.pageYOffset
|
||||
const shouldShow = scrollY > 220 && post?.toc?.length > 0
|
||||
if (shouldShow !== show) {
|
||||
switchShow(shouldShow)
|
||||
}
|
||||
}, throttleMs))
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('scroll', scrollListener)
|
||||
return () => document.removeEventListener('scroll', scrollListener)
|
||||
}, [])
|
||||
|
||||
if (!post) {
|
||||
return <LayoutBase
|
||||
headerSlot={<HeaderArticle {...props} />}
|
||||
{...props}
|
||||
showCategory={false}
|
||||
showTag={false}
|
||||
></LayoutBase>
|
||||
}
|
||||
|
||||
return (<LayoutBase
|
||||
headerSlot={<HeaderArticle {...props} />}
|
||||
{...props}
|
||||
showCategory={false}
|
||||
showTag={false}
|
||||
floatRightBottom={<JumpToCommentButton />}
|
||||
>
|
||||
|
||||
<div id='inner-wrapper' className={'w-full lg:max-w-3xl 2xl:max-w-4xl'} >
|
||||
{/* 文章主体卡片 */}
|
||||
<div className="-mt-32 transition-all duration-300 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
|
||||
{lock && <ArticleLock validPassword={validPassword} />}
|
||||
|
||||
{!lock && <div id="article-wrapper" className="overflow-x-auto md:w-full px-3 ">
|
||||
{post?.type && post?.type === 'Post' && <>
|
||||
<div
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="100"
|
||||
data-aos-once="false"
|
||||
data-aos-anchor-placement="top-center"
|
||||
className='px-10'>
|
||||
<ArticleInfo post={post} />
|
||||
</div>
|
||||
<hr />
|
||||
</>}
|
||||
|
||||
<div className='lg:px-10 subpixel-antialiased'>
|
||||
<article itemScope >
|
||||
{/* Notion文章主体 */}
|
||||
<section className='justify-center mx-auto max-w-2xl lg:max-w-full'>
|
||||
{post && <NotionPage post={post} />}
|
||||
</section>
|
||||
|
||||
{/* 分享 */}
|
||||
<ShareBar post={post} />
|
||||
{/* 文章版权说明 */}
|
||||
{post.type === 'Post' && <ArticleCopyright {...props} />}
|
||||
|
||||
</article>
|
||||
|
||||
<hr className='border-dashed' />
|
||||
|
||||
{/* 评论互动 */}
|
||||
<div className="overflow-x-auto dark:bg-hexo-black-gray px-3">
|
||||
<Comment frontMatter={post} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
{/* 底部文章推荐 */}
|
||||
{post.type === 'Post' && <ArticleAdjacent {...props} />}
|
||||
|
||||
<Announcement {...props}/>
|
||||
|
||||
{/* 右侧文章目录 */}
|
||||
{post?.toc?.length > 0 && <div id='toc-wrapper' style={{ zIndex: '-1' }} className='absolute top-0 w-full h-full xl:block hidden lg:max-w-3xl 2xl:max-w-4xl' >
|
||||
<div data-aos-delay="200"
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="200"
|
||||
data-aos-once="true"
|
||||
data-aos-anchor-placement="top-center"
|
||||
className='relative h-full'>
|
||||
<div className='float-right xl:-mr-72 xl:w-72 w-56 -mr-56 h-full mt-40'>
|
||||
<div className='sticky top-24'>
|
||||
<Catalog toc={post.toc} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
</div>
|
||||
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutSlug
|
||||
@@ -1,44 +0,0 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import BlogPostListScroll from './components/BlogPostListScroll'
|
||||
import BlogPostListPage from './components/BlogPostListPage'
|
||||
import LayoutBase from './LayoutBase'
|
||||
import React from 'react'
|
||||
import HeaderArticle from './components/HeaderArticle'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import TagItemMiddle from './components/TagItemMiddle'
|
||||
|
||||
export const LayoutTag = (props) => {
|
||||
const { tagOptions, tag } = props
|
||||
|
||||
const { locale } = useGlobal()
|
||||
|
||||
return <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
|
||||
|
||||
<div className='inner-wrapper'>
|
||||
|
||||
<div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
|
||||
|
||||
<div className="dark:text-gray-200 py-5 text-center text-2xl">
|
||||
<i className="fas fa-tags" /> {locale.COMMON.TAGS}
|
||||
</div>
|
||||
|
||||
<div id="tags-list" className="duration-200 flex flex-wrap justify-center pb-12">
|
||||
{tagOptions?.map(e => {
|
||||
const selected = tag === e.name
|
||||
return (
|
||||
<div key={e.id} className="p-2">
|
||||
<TagItemMiddle key={e.id} tag={e} selected={selected} />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
|
||||
|
||||
</div>
|
||||
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
export default LayoutTag
|
||||
@@ -1,34 +0,0 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import HeaderArticle from './components/HeaderArticle'
|
||||
import TagItemMiddle from './components/TagItemMiddle'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutTagIndex = props => {
|
||||
const { tagOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
|
||||
<div id='inner-wrapper' className='w-full drop-shadow-xl'>
|
||||
|
||||
<div className="-mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
|
||||
|
||||
<div className="dark:text-gray-200 py-5 text-center text-2xl">
|
||||
<i className="fas fa-tags" /> {locale.COMMON.TAGS}
|
||||
</div>
|
||||
|
||||
<div id="tags-list" className="duration-200 flex flex-wrap justify-center pb-12">
|
||||
{tagOptions.map(tag => {
|
||||
return (
|
||||
<div key={tag.name} className="p-2">
|
||||
<TagItemMiddle key={tag.name} tag={tag} />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutTagIndex
|
||||
50
themes/matery/components/BlogListBar.js
Normal file
50
themes/matery/components/BlogListBar.js
Normal file
@@ -0,0 +1,50 @@
|
||||
import Link from 'next/link'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import TagItemMiddle from './components/TagItemMiddle'
|
||||
|
||||
export default function BlogListBar(props) {
|
||||
const { category, categoryOptions, tag, tagOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
|
||||
if (category) {
|
||||
return (
|
||||
<div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
|
||||
|
||||
<div className='flex justify-center flex-wrap'>
|
||||
{categoryOptions?.map(e => {
|
||||
const selected = e.name === category
|
||||
return (
|
||||
<Link key={e.name} href={`/category/${e.name}`} passHref legacyBehavior>
|
||||
<div className='duration-300 text-md whitespace-nowrap dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400' >
|
||||
<i className={`mr-4 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />
|
||||
{e.name}({e.count})
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
} else if (tag) {
|
||||
return <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
|
||||
|
||||
<div className="dark:text-gray-200 py-5 text-center text-2xl">
|
||||
<i className="fas fa-tags" /> {locale.COMMON.TAGS}
|
||||
</div>
|
||||
|
||||
<div id="tags-list" className="duration-200 flex flex-wrap justify-center pb-12">
|
||||
{tagOptions?.map(e => {
|
||||
const selected = tag === e.name
|
||||
return (
|
||||
<div key={e.id} className="p-2">
|
||||
<TagItemMiddle key={e.id} tag={e} selected={selected} />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
} else {
|
||||
return <></>
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useRef } from 'react'
|
||||
import { useEffect, useRef } from 'react'
|
||||
import throttle from 'lodash.throttle'
|
||||
import { uuidToId } from 'notion-utils'
|
||||
import Progress from './Progress'
|
||||
@@ -13,7 +13,7 @@ import { useGlobal } from '@/lib/global'
|
||||
const Catalog = ({ toc }) => {
|
||||
const { locale } = useGlobal()
|
||||
// 监听滚动事件
|
||||
React.useEffect(() => {
|
||||
useEffect(() => {
|
||||
window.addEventListener('scroll', actionSectionScrollSpy)
|
||||
actionSectionScrollSpy()
|
||||
return () => {
|
||||
|
||||
27
themes/matery/components/CatalogWrapper.js
Normal file
27
themes/matery/components/CatalogWrapper.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import Catalog from './Catalog'
|
||||
|
||||
/**
|
||||
* 目录
|
||||
* @param {*} param0
|
||||
* @returns
|
||||
*/
|
||||
export default function CatalogWrapper({ post }) {
|
||||
if (post?.toc?.length > 0) {
|
||||
return <div id='toc-wrapper' style={{ zIndex: '-1' }} className='absolute top-0 w-full h-full xl:block hidden lg:max-w-3xl 2xl:max-w-4xl' >
|
||||
<div data-aos-delay="200"
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="200"
|
||||
data-aos-once="true"
|
||||
data-aos-anchor-placement="top-center"
|
||||
className='relative h-full'>
|
||||
<div className='float-right xl:-mr-72 xl:w-72 w-56 -mr-56 h-full mt-40'>
|
||||
<div className='sticky top-24'>
|
||||
<Catalog toc={post.toc} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
} else {
|
||||
return <></>
|
||||
}
|
||||
}
|
||||
@@ -11,7 +11,7 @@ let wrapperTop = 0
|
||||
*
|
||||
* @returns 头图
|
||||
*/
|
||||
const Header = props => {
|
||||
const Hero = props => {
|
||||
const [typed, changeType] = useState()
|
||||
const { siteInfo } = props
|
||||
const { locale } = useGlobal()
|
||||
@@ -71,4 +71,4 @@ const Header = props => {
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
export default Hero
|
||||
19
themes/matery/components/RightFloatButtons.js
Normal file
19
themes/matery/components/RightFloatButtons.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import JumpToTopButton from './components/JumpToTopButton'
|
||||
import FloatDarkModeButton from './components/FloatDarkModeButton'
|
||||
import SocialButton from './components/SocialButton'
|
||||
|
||||
/**
|
||||
* 右下角悬浮按钮
|
||||
* @param {*} param0
|
||||
* @returns
|
||||
*/
|
||||
export default function RightFloatButtons({ props }) {
|
||||
const { floatRightBottom } = props
|
||||
return <div className="bottom-40 right-2 fixed justify-end space-y-2 z-20">
|
||||
<FloatDarkModeButton />
|
||||
<JumpToTopButton />
|
||||
<SocialButton />
|
||||
{/* 可扩展的右下角悬浮 */}
|
||||
{floatRightBottom}
|
||||
</div>
|
||||
}
|
||||
63
themes/matery/components/SearchNav.js
Normal file
63
themes/matery/components/SearchNav.js
Normal file
@@ -0,0 +1,63 @@
|
||||
|
||||
import SearchInput from './components/SearchInput'
|
||||
import TagItemMini from './components/TagItemMini'
|
||||
import Card from './components/Card'
|
||||
import Link from 'next/link'
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
|
||||
/**
|
||||
* 搜索页面的导航条
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
export default function SearchNave(props) {
|
||||
const cRef = useRef(null)
|
||||
const { locale } = useGlobal()
|
||||
const { tagOptions, categoryOptions } = props
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
// 自动聚焦到搜索框
|
||||
cRef?.current?.focus()
|
||||
}, 100)
|
||||
})
|
||||
return <>
|
||||
<div className="my-6 px-2 mt-12 w-full">
|
||||
<SearchInput cRef={cRef} {...props} />
|
||||
{/* 分类 */}
|
||||
<Card className="w-full mt-4">
|
||||
<div className="dark:text-gray-200 mb-5 mx-3">
|
||||
<i className="mr-4 fas fa-th" />
|
||||
{locale.COMMON.CATEGORY}:
|
||||
</div>
|
||||
<div id="category-list" className="duration-200 flex flex-wrap mx-8">
|
||||
{categoryOptions?.map(category => {
|
||||
return (
|
||||
<Link key={category.name} href={`/category/${category.name}`} passHref legacyBehavior>
|
||||
<div className={' duration-300 dark:hover:text-white rounded-lg px-5 cursor-pointer py-2 hover:bg-indigo-400 hover:text-white'}>
|
||||
<i className="mr-4 fas fa-folder" /> {category.name}({category.count})
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
{/* 标签 */}
|
||||
<Card className="w-full mt-4">
|
||||
<div className="dark:text-gray-200 mb-5 ml-4">
|
||||
<i className="mr-4 fas fa-tag" /> {locale.COMMON.TAGS}:
|
||||
</div>
|
||||
<div id="tags-list" className="duration-200 flex flex-wrap ml-8">
|
||||
{tagOptions?.map(tag => {
|
||||
return (
|
||||
<div key={tag.name} className="p-2">
|
||||
<TagItemMini key={tag.name} tag={tag} />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
@@ -1,25 +1,353 @@
|
||||
import CONFIG_MATERY from './config_matery'
|
||||
import LayoutIndex from './LayoutIndex'
|
||||
import LayoutSearch from './LayoutSearch'
|
||||
import LayoutArchive from './LayoutArchive'
|
||||
import LayoutSlug from './LayoutSlug'
|
||||
import Layout404 from './Layout404'
|
||||
import LayoutCategory from './LayoutCategory'
|
||||
import LayoutCategoryIndex from './LayoutCategoryIndex'
|
||||
import LayoutPage from './LayoutPage'
|
||||
import LayoutTag from './LayoutTag'
|
||||
import LayoutTagIndex from './LayoutTagIndex'
|
||||
import CommonHead from '@/components/CommonHead'
|
||||
import TopNav from './components/TopNav'
|
||||
import Live2D from '@/components/Live2D'
|
||||
import LoadingCover from './components/LoadingCover'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import BLOG from '@/blog.config'
|
||||
import { isBrowser, loadExternalResource } from '@/lib/utils'
|
||||
import Footer from './components/Footer'
|
||||
import { useEffect } from 'react'
|
||||
import RightFloatButtons from './components/RightFloatButtons'
|
||||
import { useRouter } from 'next/router'
|
||||
import Mark from 'mark.js'
|
||||
import SearchNave from './components/SearchNav'
|
||||
import BlogPostListPage from './components/BlogPostListPage'
|
||||
import BlogPostListScroll from './components/BlogPostListScroll'
|
||||
import Hero from './components/Hero'
|
||||
import Announcement from './components/Announcement'
|
||||
import CatalogWrapper from './components/CatalogWrapper'
|
||||
import TagItemMiddle from './components/TagItemMiddle'
|
||||
import HeaderArticle from './components/HeaderArticle'
|
||||
import Link from 'next/link'
|
||||
import ArticleAdjacent from './components/ArticleAdjacent'
|
||||
import Comment from '@/components/Comment'
|
||||
import ArticleCopyright from './components/ArticleCopyright'
|
||||
import ShareBar from '@/components/ShareBar'
|
||||
import NotionPage from '@/components/NotionPage'
|
||||
import { ArticleInfo } from './components/ArticleInfo'
|
||||
import { ArticleLock } from './components/ArticleLock'
|
||||
import BlogPostArchive from './components/BlogPostArchive'
|
||||
import Card from './components/Card'
|
||||
import JumpToCommentButton from './components/JumpToCommentButton'
|
||||
import BlogListBar from './components/BlogListBar'
|
||||
|
||||
/**
|
||||
* 基础布局
|
||||
* 采用左右两侧布局，移动端使用顶部导航栏
|
||||
* @param props
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const LayoutBase = props => {
|
||||
const { children, headerSlot, meta, siteInfo, containerSlot, post } = props
|
||||
const { onLoading } = useGlobal()
|
||||
|
||||
if (isBrowser()) {
|
||||
loadExternalResource('/css/theme-matery.css', 'css')
|
||||
}
|
||||
|
||||
return (
|
||||
<div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
|
||||
{/* SEO相关 */}
|
||||
<CommonHead meta={meta} siteInfo={siteInfo} />
|
||||
|
||||
{/* 顶部导航栏 */}
|
||||
<TopNav {...props} />
|
||||
|
||||
{/* 顶部嵌入 */}
|
||||
{headerSlot}
|
||||
|
||||
<main id="wrapper" className={`${CONFIG_MATERY.HOME_BANNER_ENABLE ? '' : 'pt-16'} flex-1 w-full py-8 md:px-8 lg:px-24 relative`}>
|
||||
{/* 嵌入区域 */}
|
||||
<div id="container-slot" className={`w-full max-w-6xl ${post && ' lg:max-w-3xl 2xl:max-w-4xl '} mt-6 px-3 mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
|
||||
{containerSlot}
|
||||
</div>
|
||||
|
||||
<div id="container-inner" className="w-full max-w-6xl mx-auto lg:flex lg:space-x-4 justify-center relative z-10">
|
||||
{onLoading ? <LoadingCover /> : children}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
{/* 左下角悬浮 */}
|
||||
<div className="bottom-4 -left-14 fixed justify-end z-40">
|
||||
<Live2D />
|
||||
</div>
|
||||
|
||||
{/* 右下角悬浮 */}
|
||||
<RightFloatButtons {...props} />
|
||||
|
||||
{/* 页脚 */}
|
||||
<Footer title={siteInfo?.title || BLOG.TITLE} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 首页
|
||||
* 首页就是一个文章列表，但是嵌入了Hero大图和公告
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutIndex = (props) => {
|
||||
return <LayoutPostList {...props} containerSlot={<Announcement {...props} />} headerSlot={CONFIG_MATERY.HOME_BANNER_ENABLE && <Hero {...props} />} />
|
||||
}
|
||||
|
||||
/**
|
||||
* 博客列表
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutPostList = (props) => {
|
||||
return (
|
||||
<LayoutBase {...props} >
|
||||
<BlogListBar {...props} />
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜搜
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutSearch = props => {
|
||||
const { keyword } = props
|
||||
const router = useRouter()
|
||||
const currentSearch = keyword || router?.query?.s
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
if (currentSearch) {
|
||||
const targets = document.getElementsByClassName('replace')
|
||||
for (const container of targets) {
|
||||
if (container && container.innerHTML) {
|
||||
const re = new RegExp(currentSearch, 'gim')
|
||||
const instance = new Mark(container)
|
||||
instance.markRegExp(re, {
|
||||
element: 'span',
|
||||
className: 'text-red-500 border-b border-dashed'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 100)
|
||||
})
|
||||
return (
|
||||
<LayoutBase {...props} currentSearch={currentSearch}>
|
||||
{!currentSearch
|
||||
? <SearchNave {...props} />
|
||||
: <div id="posts-wrapper">
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
|
||||
</div>}
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 归档
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutArchive = (props) => {
|
||||
const { archivePosts } = props
|
||||
return <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
|
||||
<Card className='w-full -mt-32'>
|
||||
<div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
|
||||
{Object.keys(archivePosts).map(archiveTitle => (
|
||||
<BlogPostArchive
|
||||
key={archiveTitle}
|
||||
posts={archivePosts[archiveTitle]}
|
||||
archiveTitle={archiveTitle}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
/**
|
||||
* 文章详情页
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutSlug = props => {
|
||||
const { post, lock, validPassword } = props
|
||||
|
||||
return (<LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} showCategory={false} showTag={false} floatRightBottom={<JumpToCommentButton />}>
|
||||
|
||||
<div id='inner-wrapper' className={'w-full lg:max-w-3xl 2xl:max-w-4xl'} >
|
||||
|
||||
{/* 文章主体卡片 */}
|
||||
<div className="-mt-32 transition-all duration-300 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
|
||||
|
||||
{lock && <ArticleLock validPassword={validPassword} />}
|
||||
|
||||
{!lock && <div id="article-wrapper" className="overflow-x-auto md:w-full px-3 ">
|
||||
|
||||
{/* 文章信息 */}
|
||||
{post?.type && post?.type === 'Post' && <>
|
||||
<div
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="100"
|
||||
data-aos-once="false"
|
||||
data-aos-anchor-placement="top-center"
|
||||
className='px-10'>
|
||||
<ArticleInfo post={post} />
|
||||
</div>
|
||||
<hr />
|
||||
</>}
|
||||
|
||||
<div className='lg:px-10 subpixel-antialiased'>
|
||||
|
||||
<article itemScope >
|
||||
|
||||
{/* Notion文章主体 */}
|
||||
<section className='justify-center mx-auto max-w-2xl lg:max-w-full'>
|
||||
{post && <NotionPage post={post} />}
|
||||
</section>
|
||||
|
||||
{/* 分享 */}
|
||||
<ShareBar post={post} />
|
||||
|
||||
{/* 版权说明 */}
|
||||
{post.type === 'Post' && <ArticleCopyright {...props} />}
|
||||
|
||||
</article>
|
||||
|
||||
<hr className='border-dashed' />
|
||||
|
||||
{/* 评论互动 */}
|
||||
<div className="overflow-x-auto dark:bg-hexo-black-gray px-3">
|
||||
<Comment frontMatter={post} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
{/* 底部文章推荐 */}
|
||||
{post.type === 'Post' && <ArticleAdjacent {...props} />}
|
||||
|
||||
{/* 底部公告 */}
|
||||
<Announcement {...props} />
|
||||
|
||||
{/* 右侧文章目录 */}
|
||||
<CatalogWrapper post={post} />
|
||||
|
||||
</div>
|
||||
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 404
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const Layout404 = props => {
|
||||
const router = useRouter()
|
||||
useEffect(() => {
|
||||
// 延时3秒如果加载失败就返回首页
|
||||
setTimeout(() => {
|
||||
const article = typeof document !== 'undefined' && document.getElementById('notion-article')
|
||||
if (!article) {
|
||||
router.push('/').then(() => {
|
||||
// console.log('找不到页面', router.asPath)
|
||||
})
|
||||
}
|
||||
}, 3000)
|
||||
})
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div className="text-black w-full h-screen text-center justify-center content-center items-center flex flex-col">
|
||||
<div className="dark:text-gray-200">
|
||||
<h2 className="inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top">
|
||||
404
|
||||
</h2>
|
||||
<div className="inline-block text-left h-32 leading-10 items-center">
|
||||
<h2 className="m-0 p-0">页面未找到</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 分类列表
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutCategoryIndex = props => {
|
||||
const { categoryOptions } = props
|
||||
|
||||
return (
|
||||
<LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
|
||||
|
||||
<div id='inner-wrapper' className='w-full'>
|
||||
<div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black dark:text-gray-300">
|
||||
<div className='flex justify-center flex-wrap'>
|
||||
{categoryOptions.map(e => {
|
||||
return (
|
||||
<Link key={e.name} href={`/category/${e.name}`} passHref legacyBehavior>
|
||||
<div className='duration-300 text-md whitespace-nowrap dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400' >
|
||||
<i className={'mr-4 fas fa-folder'} /> {e.name}({e.count})
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 标签列表
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutTagIndex = props => {
|
||||
const { tagOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
|
||||
<div id='inner-wrapper' className='w-full drop-shadow-xl'>
|
||||
|
||||
<div className="-mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
|
||||
|
||||
<div className="dark:text-gray-200 py-5 text-center text-2xl">
|
||||
<i className="fas fa-tags" /> {locale.COMMON.TAGS}
|
||||
</div>
|
||||
|
||||
<div id="tags-list" className="duration-200 flex flex-wrap justify-center pb-12">
|
||||
{tagOptions.map(tag => {
|
||||
return (
|
||||
<div key={tag.name} className="p-2">
|
||||
<TagItemMiddle key={tag.name} tag={tag} />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
CONFIG_MATERY as THEME_CONFIG,
|
||||
LayoutIndex,
|
||||
LayoutPostList,
|
||||
LayoutSearch,
|
||||
LayoutArchive,
|
||||
LayoutSlug,
|
||||
Layout404,
|
||||
LayoutCategory,
|
||||
LayoutCategoryIndex,
|
||||
LayoutPage,
|
||||
LayoutTag,
|
||||
LayoutTagIndex
|
||||
}
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const Layout404 = props => {
|
||||
return <LayoutBase {...props}>
|
||||
<div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
export default Layout404
|
||||
@@ -1,49 +0,0 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import Link from 'next/link'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutArchive = props => {
|
||||
const { archivePosts } = props
|
||||
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div className="mb-10 pb-20 md:py-12 py-3 min-h-full">
|
||||
{Object.keys(archivePosts)?.map(archiveTitle => (
|
||||
<div key={archiveTitle}>
|
||||
<div
|
||||
className="pt-16 pb-4 text-3xl dark:text-gray-300"
|
||||
id={archiveTitle}
|
||||
>
|
||||
{archiveTitle}
|
||||
</div>
|
||||
<ul>
|
||||
{archivePosts[archiveTitle]?.map(post => (
|
||||
<li
|
||||
key={post.id}
|
||||
className="border-l-2 p-1 text-xs md:text-base items-center hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
|
||||
>
|
||||
<div id={post?.publishTime}>
|
||||
<span className="text-gray-400">
|
||||
{post.date?.start_date}
|
||||
</span>{' '}
|
||||
|
||||
<Link
|
||||
href={`${BLOG.SUB_PATH}/${post.slug}`}
|
||||
passHref
|
||||
className="dark:text-gray-400 dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
|
||||
|
||||
{post.title}
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutArchive
|
||||
@@ -1,89 +0,0 @@
|
||||
import CommonHead from '@/components/CommonHead'
|
||||
import { useState, createContext, useContext } from 'react'
|
||||
import Footer from './components/Footer'
|
||||
import InfoCard from './components/InfoCard'
|
||||
import RevolverMaps from './components/RevolverMaps'
|
||||
import CONFIG_MEDIUM from './config_medium'
|
||||
import Tabs from '@/components/Tabs'
|
||||
import TopNavBar from './components/TopNavBar'
|
||||
import SearchInput from './components/SearchInput'
|
||||
import BottomMenuBar from './components/BottomMenuBar'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import { useRouter } from 'next/router'
|
||||
import Live2D from '@/components/Live2D'
|
||||
import BLOG from '@/blog.config'
|
||||
import Announcement from './components/Announcement'
|
||||
import JumpToTopButton from './components/JumpToTopButton'
|
||||
const ThemeGlobalMedium = createContext()
|
||||
|
||||
/**
|
||||
* 基础布局 采用左右两侧布局，移动端使用顶部导航栏
|
||||
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const LayoutBase = props => {
|
||||
const { children, meta, showInfoCard = true, slotRight, slotTop, siteInfo, notice } = props
|
||||
const { locale } = useGlobal()
|
||||
const router = useRouter()
|
||||
const [tocVisible, changeTocVisible] = useState(false)
|
||||
const { onLoading } = useGlobal()
|
||||
|
||||
const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
|
||||
<div className='w-full h-screen flex justify-center items-center'>
|
||||
<i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin"> </i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
|
||||
<CommonHead meta={meta} />
|
||||
|
||||
<div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
|
||||
|
||||
<main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
|
||||
{/* 桌面端左侧菜单 */}
|
||||
{/* <LeftMenuBar/> */}
|
||||
|
||||
<div id='container-wrapper' className='w-full relative z-10'>
|
||||
{/* 顶部导航栏 */}
|
||||
<TopNavBar {...props} />
|
||||
|
||||
<div id='container-inner' className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
|
||||
{slotTop}
|
||||
|
||||
{onLoading ? LoadingCover : children}
|
||||
|
||||
<JumpToTopButton />
|
||||
</div>
|
||||
|
||||
{/* 底部 */}
|
||||
<Footer title={siteInfo?.title} />
|
||||
</div>
|
||||
|
||||
{/* 桌面端右侧 */}
|
||||
<div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
|
||||
<div className='py-14 px-6 sticky top-0'>
|
||||
<Tabs>
|
||||
{slotRight}
|
||||
<div key={locale.NAV.ABOUT}>
|
||||
{router.pathname !== '/search' && <SearchInput className='mt-6 mb-12' />}
|
||||
{showInfoCard && <InfoCard {...props} />}
|
||||
{CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
|
||||
</div>
|
||||
</Tabs>
|
||||
<Announcement post={notice} />
|
||||
<Live2D />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* 移动端底部导航栏 */}
|
||||
<BottomMenuBar {...props} className='block md:hidden' />
|
||||
</div>
|
||||
</ThemeGlobalMedium.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutBase
|
||||
export const useMediumGlobal = () => useContext(ThemeGlobalMedium)
|
||||
@@ -1,15 +0,0 @@
|
||||
import LayoutBase from './LayoutBase'
|
||||
import BlogPostListScroll from './components/BlogPostListScroll'
|
||||
import BlogPostListPage from './components/BlogPostListPage'
|
||||
import BLOG from '@/blog.config'
|
||||
|
||||
export const LayoutCategory = props => {
|
||||
const { category } = props
|
||||
const slotTop = <div className='flex items-center py-8'><div className='text-xl'><i className='mr-2 fas fa-th' />分类：</div>{category}</div>
|
||||
|
||||
return <LayoutBase {...props} slotTop={slotTop}>
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
export default LayoutCategory
|
||||
@@ -1,34 +0,0 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import Link from 'next/link'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutCategoryIndex = (props) => {
|
||||
const { categoryOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div className='bg-white dark:bg-gray-700 py-10'>
|
||||
<div className='dark:text-gray-200 mb-5'>
|
||||
<i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
|
||||
</div>
|
||||
<div id='category-list' className='duration-200 flex flex-wrap'>
|
||||
{categoryOptions?.map(category => {
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
href={`/category/${category.name}`}
|
||||
passHref
|
||||
legacyBehavior>
|
||||
<div
|
||||
className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
|
||||
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
export default LayoutCategoryIndex
|
||||
@@ -1,12 +0,0 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import BlogPostListPage from './components/BlogPostListPage'
|
||||
import BlogPostListScroll from './components/BlogPostListScroll'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutIndex = (props) => {
|
||||
return <LayoutBase {...props}>
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
export default LayoutIndex
|
||||
@@ -1,10 +0,0 @@
|
||||
import LayoutBase from './LayoutBase'
|
||||
import BlogPostListPage from './components/BlogPostListPage'
|
||||
|
||||
export const LayoutPage = (props) => {
|
||||
return <LayoutBase {...props}>
|
||||
<BlogPostListPage {...props} />
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
export default LayoutPage
|
||||
@@ -1,53 +0,0 @@
|
||||
import LayoutBase from './LayoutBase'
|
||||
import SearchInput from './components/SearchInput'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import TagGroups from './components/TagGroups'
|
||||
import CategoryGroup from './components/CategoryGroup'
|
||||
import { useEffect } from 'react'
|
||||
import { isBrowser } from '@/lib/utils'
|
||||
import BLOG from '@/blog.config'
|
||||
import Mark from 'mark.js'
|
||||
import BlogPostListScroll from './components/BlogPostListScroll'
|
||||
import BlogPostListPage from './components/BlogPostListPage'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
export const LayoutSearch = (props) => {
|
||||
const { locale } = useGlobal()
|
||||
const { keyword } = props
|
||||
const router = useRouter()
|
||||
const currentSearch = keyword || router?.query?.s
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
const container = isBrowser() && document.getElementById('posts-wrapper')
|
||||
if (container && container.innerHTML) {
|
||||
const re = new RegExp(currentSearch, 'gim')
|
||||
const instance = new Mark(container)
|
||||
instance.markRegExp(re, {
|
||||
element: 'span',
|
||||
className: 'text-red-500 border-b border-dashed'
|
||||
})
|
||||
}
|
||||
},
|
||||
100)
|
||||
})
|
||||
return <LayoutBase {...props}>
|
||||
|
||||
<div className='py-12'>
|
||||
<div className='pb-4 w-full'>{locale.NAV.SEARCH}</div>
|
||||
<SearchInput currentSearch={currentSearch} {...props} />
|
||||
|
||||
{!currentSearch && <>
|
||||
<TagGroups {...props} />
|
||||
<CategoryGroup {...props} />
|
||||
</>}
|
||||
|
||||
</div>
|
||||
|
||||
{currentSearch && <div>
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
|
||||
</div>}
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
export default LayoutSearch
|
||||
@@ -1,96 +0,0 @@
|
||||
import LayoutBase from './LayoutBase'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import React from 'react'
|
||||
import Catalog from './components/Catalog'
|
||||
import { ArticleLock } from './components/ArticleLock'
|
||||
import formatDate from '@/lib/formatDate'
|
||||
import BLOG from '@/blog.config'
|
||||
import Link from 'next/link'
|
||||
import NotionPage from '@/components/NotionPage'
|
||||
import CONFIG_MEDIUM from './config_medium'
|
||||
import Comment from '@/components/Comment'
|
||||
import ArticleAround from './components/ArticleAround'
|
||||
import TocDrawer from './components/TocDrawer'
|
||||
import CategoryItem from './components/CategoryItem'
|
||||
import TagItemMini from './components/TagItemMini'
|
||||
import ShareBar from '@/components/ShareBar'
|
||||
|
||||
export const LayoutSlug = props => {
|
||||
const { post, prev, next, siteInfo, lock, validPassword } = props
|
||||
const { locale } = useGlobal()
|
||||
|
||||
const date = formatDate(
|
||||
post?.publishTime || post?.createdTime,
|
||||
locale.LOCALE
|
||||
)
|
||||
if (!post) {
|
||||
return <LayoutBase {...props} showInfoCard={true} />
|
||||
}
|
||||
|
||||
const slotRight = post?.toc && post?.toc?.length >= 3 && (
|
||||
<div key={locale.COMMON.TABLE_OF_CONTENTS} >
|
||||
<Catalog toc={post.toc} />
|
||||
{/* <JumpToTopButton className='text-gray-400 hover:text-green-500 hover:bg-gray-100 py-1 duration-200' /> */}
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<LayoutBase showInfoCard={true} slotRight={slotRight} {...props} >
|
||||
{/* 文章锁 */}
|
||||
{lock && <ArticleLock validPassword={validPassword} />}
|
||||
|
||||
{!lock && <div id='article-wrapper'>
|
||||
|
||||
{/* title */}
|
||||
<h1 className="text-3xl pt-12 dark:text-gray-300">{post?.title}</h1>
|
||||
|
||||
{/* meta */}
|
||||
<section className="py-2 items-center text-sm px-1">
|
||||
<div className='flex flex-wrap text-gray-500 py-1 dark:text-gray-600'>
|
||||
<span className='whitespace-nowrap'> <i className='far fa-calendar mr-2' />{date}</span>
|
||||
<span className='mx-1'>|</span>
|
||||
<span className='whitespace-nowrap mr-2'><i className='far fa-calendar-check mr-2' />{post.lastEditedTime}</span>
|
||||
<div className="hidden busuanzi_container_page_pv font-light mr-2 whitespace-nowrap">
|
||||
<i className="mr-1 fas fa-eye" /><span className="busuanzi_value_page_pv" />
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/about" passHref legacyBehavior>
|
||||
<div className='flex pt-2'>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={BLOG.AUTHOR} />
|
||||
|
||||
<div className="mr-3 ml-2 my-auto text-green-500 cursor-pointer">
|
||||
{BLOG.AUTHOR}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
{/* Notion文章主体 */}
|
||||
<section className="px-1 max-w-4xl">
|
||||
{post && (<NotionPage post={post} />)}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
{/* 分享 */}
|
||||
<ShareBar post={post} />
|
||||
{/* 文章分类和标签信息 */}
|
||||
<div className='flex justify-between'>
|
||||
{CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category} />}
|
||||
<div>
|
||||
{CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
|
||||
<Comment frontMatter={post} />
|
||||
</section>
|
||||
|
||||
<TocDrawer {...props} />
|
||||
</div>}
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutSlug
|
||||
@@ -1,15 +0,0 @@
|
||||
import LayoutBase from './LayoutBase'
|
||||
import BLOG from '@/blog.config'
|
||||
import BlogPostListScroll from './components/BlogPostListScroll'
|
||||
import BlogPostListPage from './components/BlogPostListPage'
|
||||
|
||||
export const LayoutTag = (props) => {
|
||||
const { tag } = props
|
||||
const slotTop = <div className='flex items-center py-8'><div className='text-xl'><i className='mr-2 fas fa-tag'/>标签：</div>{tag}</div>
|
||||
|
||||
return <LayoutBase {...props} slotTop={slotTop}>
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
export default LayoutTag
|
||||
@@ -1,29 +0,0 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import TagItemMini from './components/TagItemMini'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutTagIndex = props => {
|
||||
const { tagOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div className="bg-white dark:bg-gray-700 py-10">
|
||||
<div className="dark:text-gray-200 mb-5">
|
||||
<i className="mr-4 fas fa-tag" />
|
||||
{locale.COMMON.TAGS}:
|
||||
</div>
|
||||
<div id="tags-list" className="duration-200 flex flex-wrap">
|
||||
{tagOptions?.map(tag => {
|
||||
return (
|
||||
<div key={tag.name} className="p-2">
|
||||
<TagItemMini key={tag.name} tag={tag} />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutTagIndex
|
||||
41
themes/medium/components/ArticleInfo.js
Normal file
41
themes/medium/components/ArticleInfo.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import formatDate from '@/lib/formatDate'
|
||||
import Link from 'next/link'
|
||||
|
||||
/**
|
||||
* 文章详情页介绍
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
export default function ArticleInfo(props) {
|
||||
const { post, siteInfo } = props
|
||||
|
||||
const date = formatDate(post?.publishTime || post?.createdTime)
|
||||
|
||||
return (<>
|
||||
{/* title */}
|
||||
<h1 className="text-3xl pt-12 dark:text-gray-300">{post?.title}</h1>
|
||||
|
||||
{/* meta */}
|
||||
<section className="py-2 items-center text-sm px-1">
|
||||
<div className='flex flex-wrap text-gray-500 py-1 dark:text-gray-600'>
|
||||
<span className='whitespace-nowrap'> <i className='far fa-calendar mr-2' />{date}</span>
|
||||
<span className='mx-1'>|</span>
|
||||
<span className='whitespace-nowrap mr-2'><i className='far fa-calendar-check mr-2' />{post.lastEditedTime}</span>
|
||||
<div className="hidden busuanzi_container_page_pv font-light mr-2 whitespace-nowrap">
|
||||
<i className="mr-1 fas fa-eye" /><span className="busuanzi_value_page_pv" />
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/about" passHref legacyBehavior>
|
||||
<div className='flex pt-2'>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={BLOG.AUTHOR} />
|
||||
|
||||
<div className="mr-3 ml-2 my-auto text-green-500 cursor-pointer">
|
||||
{BLOG.AUTHOR}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</section>
|
||||
</>)
|
||||
}
|
||||
36
themes/medium/components/BlogArchiveItem.js
Normal file
36
themes/medium/components/BlogArchiveItem.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import Link from 'next/link'
|
||||
|
||||
/**
|
||||
* 归档分组
|
||||
* @param {*} param0
|
||||
* @returns
|
||||
*/
|
||||
export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
|
||||
return (
|
||||
<div key={archiveTitle}>
|
||||
<div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
|
||||
{archiveTitle}
|
||||
</div>
|
||||
<ul>
|
||||
{archivePosts[archiveTitle]?.map(post => (
|
||||
<li key={post.id}
|
||||
className="border-l-2 p-1 text-xs md:text-base items-center hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
|
||||
>
|
||||
<div id={post?.publishTime}>
|
||||
<span className="text-gray-400">
|
||||
{post.date?.start_date}
|
||||
</span>{' '}
|
||||
|
||||
|
||||
<Link passHref href={`${BLOG.SUB_PATH}/${post.slug}`}
|
||||
className="dark:text-gray-400 dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
|
||||
{post.title}
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
19
themes/medium/components/BlogPostBar.js
Normal file
19
themes/medium/components/BlogPostBar.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
|
||||
/**
|
||||
* 文章列表上方嵌入
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
export default function BlogPostBar(props) {
|
||||
const { tag, category } = props
|
||||
const { locale } = useGlobal()
|
||||
|
||||
if (tag) {
|
||||
return <div className='flex items-center py-8'><div className='text-xl'><i className='mr-2 fas fa-tag' />{locale.COMMON.TAGS}:</div>{tag}</div>
|
||||
} else if (category) {
|
||||
<div className='flex items-center py-8'><div className='text-xl'><i className='mr-2 fas fa-th' />{locale.COMMON.CATEGORY}:</div>{category}</div>
|
||||
} else {
|
||||
return <></>
|
||||
}
|
||||
}
|
||||
7
themes/medium/components/LoadingCover.js
Normal file
7
themes/medium/components/LoadingCover.js
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function LoadingCover() {
|
||||
return <div id='cover-loading' className={'z-50 opacity-50 pointer-events-none transition-all duration-300'}>
|
||||
<div className='w-full h-screen flex justify-center items-center'>
|
||||
<i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin"> </i>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -1,14 +1,314 @@
|
||||
import CONFIG_MEDIUM from './config_medium'
|
||||
import LayoutIndex from './LayoutIndex'
|
||||
import LayoutSearch from './LayoutSearch'
|
||||
import LayoutArchive from './LayoutArchive'
|
||||
import LayoutSlug from './LayoutSlug'
|
||||
import Layout404 from './Layout404'
|
||||
import LayoutCategory from './LayoutCategory'
|
||||
import LayoutCategoryIndex from './LayoutCategoryIndex'
|
||||
import LayoutPage from './LayoutPage'
|
||||
import LayoutTag from './LayoutTag'
|
||||
import LayoutTagIndex from './LayoutTagIndex'
|
||||
|
||||
import CommonHead from '@/components/CommonHead'
|
||||
import { useState, createContext, useContext, useEffect } from 'react'
|
||||
import Footer from './components/Footer'
|
||||
import InfoCard from './components/InfoCard'
|
||||
import RevolverMaps from './components/RevolverMaps'
|
||||
import Tabs from '@/components/Tabs'
|
||||
import TopNavBar from './components/TopNavBar'
|
||||
import SearchInput from './components/SearchInput'
|
||||
import BottomMenuBar from './components/BottomMenuBar'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import { useRouter } from 'next/router'
|
||||
import Live2D from '@/components/Live2D'
|
||||
import BLOG from '@/blog.config'
|
||||
import Announcement from './components/Announcement'
|
||||
import JumpToTopButton from './components/JumpToTopButton'
|
||||
import LoadingCover from './components/LoadingCover'
|
||||
import BlogPostListPage from './components/BlogPostListPage'
|
||||
import BlogPostListScroll from './components/BlogPostListScroll'
|
||||
import Catalog from './components/Catalog'
|
||||
import { ArticleLock } from './components/ArticleLock'
|
||||
import TagGroups from './components/TagGroups'
|
||||
import CategoryGroup from './components/CategoryGroup'
|
||||
import { isBrowser } from '@/lib/utils'
|
||||
import Mark from 'mark.js'
|
||||
import BlogArchiveItem from './components/BlogArchiveItem'
|
||||
import BlogPostBar from './components/BlogPostBar'
|
||||
import NotionPage from '@/components/NotionPage'
|
||||
import Comment from '@/components/Comment'
|
||||
import ArticleAround from './components/ArticleAround'
|
||||
import TocDrawer from './components/TocDrawer'
|
||||
import CategoryItem from './components/CategoryItem'
|
||||
import TagItemMini from './components/TagItemMini'
|
||||
import ShareBar from '@/components/ShareBar'
|
||||
import Link from 'next/link'
|
||||
|
||||
// 主题全局状态
|
||||
const ThemeGlobalMedium = createContext()
|
||||
export const useMediumGlobal = () => useContext(ThemeGlobalMedium)
|
||||
|
||||
/**
|
||||
* 基础布局
|
||||
* 采用左右两侧布局，移动端使用顶部导航栏
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const LayoutBase = props => {
|
||||
const { children, meta, showInfoCard = true, slotRight, slotTop, siteInfo, notice } = props
|
||||
const { locale } = useGlobal()
|
||||
const router = useRouter()
|
||||
const [tocVisible, changeTocVisible] = useState(false)
|
||||
const { onLoading } = useGlobal()
|
||||
|
||||
return (
|
||||
<ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
|
||||
<CommonHead meta={meta} />
|
||||
|
||||
<div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
|
||||
|
||||
<main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
|
||||
{/* 桌面端左侧菜单 */}
|
||||
{/* <LeftMenuBar/> */}
|
||||
|
||||
{/* 主区 */}
|
||||
<div id='container-wrapper' className='w-full relative z-10'>
|
||||
|
||||
{/* 顶部导航栏 */}
|
||||
<TopNavBar {...props} />
|
||||
|
||||
<div id='container-inner' className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
|
||||
{slotTop}
|
||||
|
||||
{onLoading ? <LoadingCover /> : children}
|
||||
|
||||
<JumpToTopButton />
|
||||
</div>
|
||||
|
||||
{/* 底部 */}
|
||||
<Footer title={siteInfo?.title} />
|
||||
</div>
|
||||
|
||||
{/* 桌面端右侧 */}
|
||||
<div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
|
||||
<div className='py-14 px-6 sticky top-0'>
|
||||
<Tabs>
|
||||
{slotRight}
|
||||
<div key={locale.NAV.ABOUT}>
|
||||
{router.pathname !== '/search' && <SearchInput className='mt-6 mb-12' />}
|
||||
{showInfoCard && <InfoCard {...props} />}
|
||||
{CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
|
||||
</div>
|
||||
</Tabs>
|
||||
<Announcement post={notice} />
|
||||
<Live2D />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* 移动端底部导航栏 */}
|
||||
<BottomMenuBar {...props} className='block md:hidden' />
|
||||
</div>
|
||||
</ThemeGlobalMedium.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 首页
|
||||
* 首页就是一个博客列表
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutIndex = (props) => {
|
||||
return <LayoutPostList {...props} />
|
||||
}
|
||||
|
||||
/**
|
||||
* 博客列表
|
||||
* @returns
|
||||
*/
|
||||
const LayoutPostList = (props) => {
|
||||
const slotTop = <BlogPostBar {...props} />
|
||||
return <LayoutBase {...props} slotTop={slotTop}>
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
/**
|
||||
* 文章详情
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutSlug = props => {
|
||||
const { post, prev, next, lock, validPassword } = props
|
||||
const { locale } = useGlobal()
|
||||
const slotRight = post?.toc && post?.toc?.length >= 3 && (
|
||||
<div key={locale.COMMON.TABLE_OF_CONTENTS} >
|
||||
<Catalog toc={post?.toc} />
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<LayoutBase showInfoCard={true} slotRight={slotRight} {...props} >
|
||||
{/* 文章锁 */}
|
||||
{lock && <ArticleLock validPassword={validPassword} />}
|
||||
|
||||
{!lock && <div id='article-wrapper'>
|
||||
|
||||
{/* Notion文章主体 */}
|
||||
<section className="px-1 max-w-4xl">
|
||||
{post && (<NotionPage post={post} />)}
|
||||
</section>
|
||||
|
||||
{/* 文章底部区域 */}
|
||||
<section>
|
||||
{/* 分享 */}
|
||||
<ShareBar post={post} />
|
||||
{/* 文章分类和标签信息 */}
|
||||
<div className='flex justify-between'>
|
||||
{CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post?.category} />}
|
||||
<div>
|
||||
{CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 上一篇下一篇文章 */}
|
||||
{post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
|
||||
{/* 评论区 */}
|
||||
<Comment frontMatter={post} />
|
||||
</section>
|
||||
|
||||
{/* 移动端目录 */}
|
||||
<TocDrawer {...props} />
|
||||
</div>}
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutSearch = (props) => {
|
||||
const { locale } = useGlobal()
|
||||
const { keyword } = props
|
||||
const router = useRouter()
|
||||
const currentSearch = keyword || router?.query?.s
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
const container = isBrowser() && document.getElementById('posts-wrapper')
|
||||
if (container && container.innerHTML) {
|
||||
const re = new RegExp(currentSearch, 'gim')
|
||||
const instance = new Mark(container)
|
||||
instance.markRegExp(re, {
|
||||
element: 'span',
|
||||
className: 'text-red-500 border-b border-dashed'
|
||||
})
|
||||
}
|
||||
}, 100)
|
||||
})
|
||||
return <LayoutBase {...props}>
|
||||
|
||||
{/* 搜索导航栏 */}
|
||||
<div className='py-12'>
|
||||
<div className='pb-4 w-full'>{locale.NAV.SEARCH}</div>
|
||||
<SearchInput currentSearch={currentSearch} {...props} />
|
||||
{!currentSearch && <>
|
||||
<TagGroups {...props} />
|
||||
<CategoryGroup {...props} />
|
||||
</>}
|
||||
</div>
|
||||
|
||||
{/* 文章列表 */}
|
||||
{currentSearch && <div>
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
|
||||
</div>}
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
/**
|
||||
* 归档
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutArchive = props => {
|
||||
const { archivePosts } = props
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div className="mb-10 pb-20 md:py-12 py-3 min-h-full">
|
||||
{Object.keys(archivePosts)?.map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />
|
||||
)}
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 404
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const Layout404 = props => {
|
||||
return <LayoutBase {...props}>
|
||||
<div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
/**
|
||||
* 分类列表
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutCategoryIndex = (props) => {
|
||||
const { categoryOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div className='bg-white dark:bg-gray-700 py-10'>
|
||||
<div className='dark:text-gray-200 mb-5'>
|
||||
<i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
|
||||
</div>
|
||||
<div id='category-list' className='duration-200 flex flex-wrap'>
|
||||
{categoryOptions?.map(category => {
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
href={`/category/${category.name}`}
|
||||
passHref
|
||||
legacyBehavior>
|
||||
<div
|
||||
className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
|
||||
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 标签列表
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutTagIndex = props => {
|
||||
const { tagOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div className="bg-white dark:bg-gray-700 py-10">
|
||||
<div className="dark:text-gray-200 mb-5">
|
||||
<i className="mr-4 fas fa-tag" />
|
||||
{locale.COMMON.TAGS}:
|
||||
</div>
|
||||
<div id="tags-list" className="duration-200 flex flex-wrap">
|
||||
{tagOptions?.map(tag => {
|
||||
return (
|
||||
<div key={tag.name} className="p-2">
|
||||
<TagItemMini key={tag.name} tag={tag} />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
CONFIG_MEDIUM as THEME_CONFIG,
|
||||
@@ -17,9 +317,6 @@ export {
|
||||
LayoutArchive,
|
||||
LayoutSlug,
|
||||
Layout404,
|
||||
LayoutCategory,
|
||||
LayoutCategoryIndex,
|
||||
LayoutPage,
|
||||
LayoutTag,
|
||||
LayoutTagIndex
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user