d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 15:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

matery

Browse Source
This commit is contained in:
tangly1024
2022-12-24 23:15:46 +08:00
parent b9d4efe29c
commit d53785caa2
7 changed files with 32 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
themes/matery/LayoutBase.js
View File

@@ -42,7 +42,7 @@ const LayoutBase = props => {
}, [show])
return (
<div className="bg-hexo-background-gray dark:bg-black w-full overflow-hidden">
<div id="outer-wrapper" className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full overflow-hidden">
<CommonHead meta={meta} siteInfo={siteInfo}/>
@@ -50,15 +50,9 @@ const LayoutBase = props => {
{headerSlot}
<main id="wrapper" className="w-full py-8 md:px-8 lg:px-24 min-h-screen">
<div
id="container-inner"
className="pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center"
>
<div className="w-full max-w-4xl overflow-x-hidden">
<main id="wrapper" className="flex-1 w-full py-8 md:px-8 lg:px-24">
<div id="container-inner" className="w-full mx-auto lg:flex lg:space-x-4 justify-center">
{onLoading ? <LoadingCover /> : children}
</div>
{/* <SideRight {...props} slot={rightAreaSlot} /> */}
</div>
</main>

13
themes/matery/LayoutSlug.js
View File

@@ -9,7 +9,6 @@ import Comment from '@/components/Comment'
import NotionPage from '@/components/NotionPage'
import ArticleAdjacent from './components/ArticleAdjacent'
import ArticleCopyright from './components/ArticleCopyright'
import ArticleRecommend from './components/ArticleRecommend'
import { isBrowser } from '@/lib/utils'
export const LayoutSlug = props => {
@@ -46,10 +45,10 @@ export const LayoutSlug = props => {
showTag={false}
floatSlot={floatSlot}
>
<div className="w-full lg:shadow-sm lg:hover:shadow lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
<div className="-mt-32 rounded-md mx-3 lg:shadow-sm lg:hover:shadow lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && <div id="container" className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 ">
{!lock && <div id="container" className="overflow-x-auto flex-grow md:w-full ">
<article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased" >
{/* Notion文章主体 */}
@@ -69,20 +68,22 @@ export const LayoutSlug = props => {
</section>
{post.type === 'Post' && <ArticleCopyright {...props} /> }
{post.type === 'Post' && <ArticleRecommend {...props} /> }
{post.type === 'Post' && <ArticleAdjacent {...props} /> }
</article>
<hr className='border-dashed' />
{/* 评论互动 */}
<div className="duration-200 overflow-x-auto bg-white dark:bg-hexo-black-gray px-3">
<div className="duration-200 overflow-x-auto dark:bg-hexo-black-gray px-3">
<Comment frontMatter={post} />
</div>
</div>}
</div>
<div className='px-3'>
{post.type === 'Post' && <ArticleAdjacent {...props} /> }
</div>
<div className='block lg:hidden'>
<TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
</div>

22
themes/matery/components/ArticleAdjacent.js
View File

@@ -1,5 +1,5 @@
import Link from 'next/link'
import CONFIG_MATERY from '../config_matery'
import BlogPostCard from './BlogPostCard'
/**
* 上一篇，下一篇文章
@@ -10,16 +10,14 @@ export default function ArticleAdjacent ({ prev, next }) {
if (!prev || !next || !CONFIG_MATERY.ARTICLE_ADJACENT) {
return <></>
}
return <section className='text-gray-800 items-center text-xs md:text-sm flex justify-between m-1 '>
<Link href={`/${prev.slug}`} passHref>
<a className='py-1 cursor-pointer hover:underline justify-start items-center dark:text-white flex w-full h-full duration-200'>
<i className='mr-1 fas fa-angle-left' />{prev.title}
</a>
</Link>
<Link href={`/${next.slug}`} passHref>
<a className='py-1 cursor-pointer hover:underline justify-end items-center dark:text-white flex w-full h-full duration-200'>{next.title}
<i className='ml-1 my-1 fas fa-angle-right' />
</a>
</Link>
return <section className='flex-col space-y-3 text-gray-800 items-center text-xs md:text-sm justify-between m-1 '>
<div>
<BlogPostCard post={prev}/>
</div>
<div>
<BlogPostCard post={next}/>
</div>
</section>
}

4
themes/matery/components/ArticleRecommend.js
View File

@@ -9,6 +9,8 @@ import { useGlobal } from '@/lib/global'
* @returns
*/
export default function ArticleRecommend({ recommendPosts, siteInfo }) {
const { locale } = useGlobal()
if (
!CONFIG_MATERY.ARTICLE_RECOMMEND ||
!recommendPosts ||
@@ -16,7 +18,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
) {
return <></>
}
const { locale } = useGlobal()
return (
<div className="p-2">
<div className=" mb-2 px-1 flex flex-nowrap justify-between">

2
themes/matery/components/BlogPostListPage.js
View File

@@ -1,5 +1,4 @@
import BlogPostCard from './BlogPostCard'
import PaginationNumber from './PaginationNumber'
import BLOG from '@/blog.config'
import BlogPostListEmpty from './BlogPostListEmpty'
import PaginationSimple from './PaginationSimple'
@@ -20,6 +19,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
} else {
return (
<div id="container" className='w-full'>
<div className='pt-6'></div>
{/* 文章列表 */}
<div className="space-y-6 px-4 pt-4">
{posts.map(post => (

61
themes/matery/components/HeaderArticle.js
View File

@@ -1,69 +1,20 @@
import Link from 'next/link'
import { useGlobal } from '@/lib/global'
import formatDate from '@/lib/formatDate'
import BLOG from '@/blog.config'
export default function HeaderArticle({ post, siteInfo }) {
const { locale } = useGlobal()
if (!post) {
return <></>
}
const headerImage = post?.page_cover ? `url("${post.page_cover}")` : `url("${siteInfo?.pageCover}")`
const date = formatDate(
post?.date?.start_date || post?.createdTime,
locale.LOCALE
)
return (
<div
id="header"
className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn"
className="w-full h-80 md:flex-shrink-0 bg-cover bg-center bg-no-repeat"
style={{ backgroundImage: headerImage }}
>
<header className="animate__slideInDown animate__animated bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
<div className='mt-24'>
{/* 文章Title */}
<div className="font-bold text-xl shadow-text flex justify-center text-center text-white dark:text-white ">
{post.title}
</div>
<section className="flex-wrap shadow-text flex text-sm justify-center mt-2 text-white dark:text-gray-400 font-light leading-8">
<div className='dark:text-gray-200'>
{post.category && <>
<Link href={`/category/${post.category}`} passHref>
<div className="cursor-pointer mr-2 dark:hover:text-white hover:underline">
<i className="mr-1 fas fa-folder-open" />
{post.category}
</div>
</Link>
</>}
<div className="flex flex-col h-80 justify-center ">
{/* 文章Title */}
<div className="font-bold text-xl shadow-text flex justify-center text-center text-white dark:text-white ">
{post.title}
</div>
<div className='flex justify-center'>
{post?.type !== 'Page' && (
<>
<Link
href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
passHref
>
<a className="pl-1 mr-2 cursor-pointer hover:underline">
{locale.COMMON.POST_TIME}: {date}
</a>
</Link>
</>
)}
<div className="pl-1 mr-2">
{locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
</div>
</div>
{BLOG.ANALYTICS_BUSUANZI_ENABLE && <div className="busuanzi_container_page_pv font-light mr-2">
<span className="mr-2 busuanzi_value_page_pv" />
{locale.COMMON.VIEWS}
</div>}
</section>
</div>
</header>
</div>
</div>
)
}

4
themes/matery/components/PaginationSimple.js
View File

@@ -29,8 +29,8 @@ const PaginationSimple = ({ page, totalPage }) => {
<button
rel="prev"
className={`${
currentPage === 1 ? ' bg-gray-300 text-gray-500 pointer-events-none ' : 'block bg-indigo-700'
} duration-200 px-4 py-2 hover:border-black rounded-full`} >
currentPage === 1 ? ' bg-gray-300 text-gray-500 pointer-events-none ' : 'block text-white bg-indigo-700'
} duration-200 px-3.5 py-2 hover:border-black rounded-full`} >
<i className='fas fa-angle-left text-2xl'/>
</button>
</Link>