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

example page-样式

Browse Source
This commit is contained in:
tangly1024
2022-04-27 17:02:00 +08:00
parent 16091f401e
commit 2320e30160
3 changed files with 7 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
themes/example/LayoutBase.js
View File

@@ -28,9 +28,9 @@ const LayoutBase = props => {
<Title {...props} />
<div className="container max-w-4xl mx-auto md:flex items-start py-8">
<div className="container max-w-4xl mx-auto md:flex items-start py-8 px-2">
<div className='px-2 w-full flex-grow'>{children}</div>
<div className='w-full flex-grow'>{children}</div>
<SideBar {...props} />

65
themes/example/LayoutPage.js
View File

@@ -1,71 +1,10 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { BlogList } from './components/BlogList'
import LayoutBase from './LayoutBase'
export const LayoutPage = props => {
const { page } = props
const { posts, postCount } = props
const { locale } = useGlobal()
const router = useRouter()
const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
const showNext =
page < totalPage &&
posts.length === BLOG.POSTS_PER_PAGE &&
posts.length < postCount
const currentPage = +page
return (
<LayoutBase {...props}>
{posts.map(p => (
<div key={p.id} className="border my-12">
<Link href={`/article/${p.slug}`}>
<a className="underline cursor-pointer">{p.title}</a>
</Link>
<div>{p.summary}</div>
</div>
))}
<div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
<Link
href={{
pathname:
currentPage === 2
? `${BLOG.SUB_PATH || '/'}`
: `/page/${currentPage - 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
<a
rel="prev"
className={`${
currentPage === 1 ? 'invisible' : 'visible'
} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
>
← {locale.PAGINATION.PREV}
</a>
</Link>
<Link
href={{
pathname: `/page/${currentPage + 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
<a
rel="next"
className={`${
showNext ? 'visible' : 'invisible'
} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
>
{locale.PAGINATION.NEXT} →
</a>
</Link>
</div>
<BlogList {...props} />
</LayoutBase>
)
}

7
themes/example/components/BlogList.js
View File

@@ -5,13 +5,12 @@ import { useRouter } from 'next/router'
import Link from 'next/link'
export const BlogList = (props) => {
const { posts, postCount } = props
const { page, posts, postCount } = props
const { locale } = useGlobal()
const router = useRouter()
const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
const page = 1
const showNext =
page < totalPage &&
posts.length === BLOG.POSTS_PER_PAGE &&
@@ -33,7 +32,7 @@ export const BlogList = (props) => {
by <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
<span className="font-bold mx-1"> | </span>
<a href="#" className="text-gray-700">{p.category}</a>
<span className="font-bold mx-1"> | </span>
{/* <span className="font-bold mx-1"> | </span> */}
{/* <a href="#" className="text-gray-700">2 Comments</a> */}
</div>
@@ -44,7 +43,7 @@ export const BlogList = (props) => {
))}
<div className="flex justify-between text-xs">
<Link href="/">
<Link href={{ pathname: currentPage - 1 === 1 ? `${BLOG.SUB_PATH || '/'}` : `/page/${currentPage - 1}`, query: router.query.s ? { s: router.query.s } : {} }}>
<a className={`${currentPage > 1 ? 'bg-black ' : 'bg-gray '} text-white no-underline py-2 px-3 rounded`}>{locale.PAGINATION.PREV}</a>
</Link>
<Link href={{ pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} }}>