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

首页排班

Browse Source
This commit is contained in:
tangly1024
2022-12-25 14:03:26 +08:00
parent b81976edc1
commit 3a45457ddb
5 changed files with 62 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -25,6 +25,7 @@
"@popperjs/core": "^2.9.3",
"animate.css": "^4.1.1",
"animejs": "^3.2.1",
"aos": "^3.0.0-beta.6",
"axios": ">=0.21.1",
"copy-to-clipboard": "^3.3.1",
"eslint-plugin-react-hooks": "^4.6.0",

4
themes/matery/LayoutBase.js
View File

@@ -9,6 +9,8 @@ import Live2D from '@/components/Live2D'
import LoadingCover from './components/LoadingCover'
import { useGlobal } from '@/lib/global'
import BLOG from '@/blog.config'
import AOS from 'aos'
import 'aos/dist/aos.css' // You can also use <link> for styles
/**
* 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -41,6 +43,8 @@ const LayoutBase = props => {
return () => document.removeEventListener('scroll', scrollListener)
}, [show])
AOS.init()
return (
<div id="outer-wrapper" className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full overflow-hidden">

110
themes/matery/components/BlogPostCard.js
View File

@@ -3,87 +3,85 @@ import Link from 'next/link'
import React from 'react'
import TagItemMini from './TagItemMini'
import CONFIG_MATERY from '../config_matery'
import NotionPage from '@/components/NotionPage'
const BlogPostCard = ({ post, showSummary }) => {
const showPreview = CONFIG_MATERY.POST_LIST_PREVIEW && post.blockMap
return (
<div className="w-full drop-shadow-md hover:shadow border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-500 hover:scale-105">
<div key={post.id} className="flex flex-col justify-between ">
<div
data-aos="fade-up"
data-aos-offset="10"
data-aos-delay="50"
data-aos-duration="600"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center"
className="w-full mb-4 drop-shadow-md hover:shadow border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-500 hover:scale-105">
{/* 固定高度72 ，没有描述用图片填充 */}
<div key={post.id} className="flex flex-col justify-between h-96">
{/* 头部图片 填充卡片 */}
{CONFIG_MATERY.POST_LIST_COVER && !showPreview && post?.page_cover && !post.results && (
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref>
<div className="flex w-full relative duration-200 bg-black rounded-t-md cursor-pointer transform overflow-hidden">
<div className="flex flex-grow w-full relative duration-200 bg-black rounded-t-md cursor-pointer transform overflow-hidden">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={post?.page_cover}
alt={post.title}
className="opacity-50 max-h-52 lg:max-h-72 w-full hover:scale-125 rounded-t-md transform object-cover duration-500"
className="opacity-50 h-full w-full hover:scale-125 rounded-t-md transform object-cover duration-500"
/>
<span className='absolute bottom-0 left-0 text-white p-6 text-2xl' > {post.title}</span>
</div>
</Link>
)}
{/* 描述 */}
<div className="lg:p-8 p-4 flex flex-col w-full">
<div>
{/* 描述 */}
<div className="px-4 flex flex-col w-full">
{(!showPreview || showSummary) && !post.results && post.summary && (
<p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '4', WebkitBoxOrient: 'vertical' }}
className="replace h-full max-h-32 my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.summary}
</p>
)}
{(!showPreview || showSummary) && !post.results && post.summary && (
<p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '4', WebkitBoxOrient: 'vertical' }}
className="replace my-2 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.summary}
</p>
)}
{/* 搜索结果 */}
{post.results && (
<p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.results.map(r => (
<span key={r}>{r}</span>
))}
</p>
)}
{showPreview && (
<div className="overflow-ellipsis truncate">
<NotionPage post={post} />
<div className='text-gray-800 justify-between flex my-2'>
<Link
href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
passHref
>
<a className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
<i className="far fa-clock mr-1" />
{post.date?.start_date || post.lastEditedTime}
</a>
</Link>
<Link href={`/category/${post.category}`} passHref>
<a className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
<i className="mr-1 far fa-folder" />
{post.category}
</a>
</Link>
</div>
)}
<div className='text-gray-800 justify-between flex'>
<Link
href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
passHref
>
<a className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
<i className="far fa-clock mr-1" />
{post.date?.start_date || post.lastEditedTime}
</a>
</Link>
<Link href={`/category/${post.category}`} passHref>
<a className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
<i className="mr-1 far fa-folder" />
{post.category}
</a>
</Link>
</div>
</div>
{post?.tagItems && post?.tagItems.length > 0 && (<>
<hr />
<div className="text-gray-400 justify-between flex px-5 py-3">
<div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
<div>
{' '}
{post.tagItems.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
{post?.tagItems && post?.tagItems.length > 0 && (<>
<hr />
<div className="text-gray-400 justify-between flex px-5 py-3">
<div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
<div>
{' '}
{post.tagItems.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
</div>
</div>
</div>
</div>
</>)}
</>)}
</div>
</div>
</div>
)
}

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

@@ -21,7 +21,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
<div id="container" className='w-full'>
<div className='pt-6'></div>
{/* 文章列表 */}
<div className="space-y-6 px-4 pt-4 md:grid-cols-3 md:grid">
<div className="px-4 pt-4 xl:columns-3 md:columns-2 pb-12" >
{posts.map(post => (
<BlogPostCard key={post.id} post={post} />
))}

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

@@ -31,8 +31,8 @@ const SideBar = (props) => {
<div className='mx-5 pt-6'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
<div className='text-white text-xl my-1'>{siteInfo.title}</div>
<div className='text-xs my-1 text-gray-300'>{siteInfo.description}</div>
<div className='text-white text-xl my-1'>{siteInfo?.title}</div>
<div className='text-xs my-1 text-gray-300'>{siteInfo?.description}</div>
</div>
</div>
<nav>