empty主题完善

This commit is contained in:
tangly1024
2022-03-22 12:51:02 +08:00
parent 758e6436e7
commit 88d1f98116
3 changed files with 103 additions and 13 deletions

View File

@@ -1,7 +1,8 @@
import CommonHead from '@/components/CommonHead'
import Live2D from '@/components/Live2D'
import Link from 'next/link'
import React from 'react'
import BLOG from '@/blog.config'
/**
* 基础布局 采用左右两侧布局,移动端使用顶部导航栏
@@ -10,6 +11,9 @@ import Link from 'next/link'
*/
const LayoutBase = props => {
const { children, meta } = props
const d = new Date()
const currentYear = d.getFullYear()
const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-'
return (
<div>
<CommonHead meta={meta} />
@@ -19,12 +23,6 @@ const LayoutBase = props => {
<Link href="/">
<a>首页</a>
</Link>
<Link href="/category">
<a>分类</a>
</Link>
<Link href="/tag">
<a>标签</a>
</Link>
</nav>
</div>
{/* 内容主体 */}
@@ -32,9 +30,23 @@ const LayoutBase = props => {
<div className="max-w-4xl px-3">{children}</div>
<div><Live2D/></div>
</main>
<footer>
<footer
className='font-sans dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6'
>
<i className='fas fa-copyright' /> {`${startYear}${currentYear}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
<br/>
</footer>
<span>Powered by <a href='https://notion.so' className='underline font-bold dark:text-gray-300'>Notion</a> & <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</span></span>
{BLOG.BEI_AN && <><br /><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
<br/>
<span className='hidden busuanzi_container_site_pv'>
<i className='fas fa-eye'/><span className='px-1 busuanzi_value_site_pv'> </span> </span>
<span className='pl-2 hidden busuanzi_container_site_uv'>
<i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
<br/>
<h1>{meta?.title || BLOG.TITLE}</h1>
</footer>
</div>
)
}

View File

@@ -1,8 +1,20 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import { useRouter } from 'next/router'
import LayoutBase from './LayoutBase'
export const LayoutIndex = props => {
const { posts } = props
const { 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 && posts.length < postCount
const currentPage = +page
return (
<LayoutBase {...props}>
{posts.map(p => (
@@ -13,6 +25,28 @@ export const LayoutIndex = props => {
<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.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>
</LayoutBase>
)
}

View File

@@ -1,8 +1,52 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import { useRouter } from 'next/router'
import LayoutBase from './LayoutBase'
export const LayoutPage = (props) => {
const { page } = props
return <LayoutBase {...props}>
Page - {page}
</LayoutBase>
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.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>
</LayoutBase>
)
}