标题处理、标签页分页处理

This commit is contained in:
tangly1024
2021-10-16 15:26:09 +08:00
parent bca507029c
commit 3d70843441
12 changed files with 205 additions and 209 deletions

View File

@@ -34,6 +34,7 @@ const ArticleLayout = ({
}) => {
const meta = {
title: post.title,
description: post.summary,
type: 'article'
}
const targetRef = useRef(null)

View File

@@ -7,35 +7,23 @@ import Container from '@/components/Container'
import JumpToTop from '@/components/JumpToTop'
import SideBar from '@/components/SideBar'
import TopNav from '@/components/TopNav'
import BlogPostListScrollPagination from '@/components/BlogPostListScrollPagination '
const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
const meta = {
title: `${BLOG.title} | 首页`,
type: 'website',
...customMeta
}
import BlogPostListScrollPagination from '@/components/BlogPostListScrollPagination'
const IndexLayout = ({ tags, posts, page, currentTag, meta, ...customMeta }) => {
const targetRef = useRef(null)
return (
<Container id='wrapper' meta={meta} tags={tags}>
<TopNav tags={tags} />
{/* middle */}
<div ref={targetRef} className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
{/* 侧边菜单 */}
<SideBar />
<div className='flex-grow'>
<main className='flex-grow'>
<TagsBar tags={tags} currentTag={currentTag} />
<BlogPostListScrollPagination posts={posts} tags={tags} targetRef={targetRef}/>
</div>
</div>
{/* 下方菜单组 */}
<div className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
<div className='flex-wrap'>
<BlogPostListScrollPagination posts={posts} tags={tags} targetRef={targetRef} />
<JumpToTop targetRef={targetRef} showPercent={false} />
</div>
</main>
</div>
<Footer />

View File

@@ -9,45 +9,31 @@ import SideBar from '@/components/SideBar'
import TopNav from '@/components/TopNav'
import BlogPostList from '@/components/BlogPostList'
const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
const meta = {
title: BLOG.title,
type: 'website',
...customMeta
}
const PageLayout = ({ tags, posts, page, currentTag, meta, ...customMeta }) => {
const targetRef = useRef(null)
return (
<Container id='wrapper' meta={meta} tags={tags}>
<TopNav tags={tags} />
{/* middle */}
<div ref={targetRef} className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
{/* 侧边菜单 */}
<SideBar />
<div className='flex-grow'>
<main className='flex-grow'>
<TagsBar tags={tags} currentTag={currentTag} />
<BlogPostList posts={posts} tags={tags} page={page}/>
</div>
</div>
{/* 下方菜单组 */}
<div
className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
<div className='flex-wrap'>
<JumpToTop targetRef={targetRef} showPercent={false} />
</div>
<BlogPostList posts={posts} tags={tags} page={page} />
</main>
<JumpToTop targetRef={targetRef} showPercent={false} />
</div>
<Footer />
</Container>
)
}
IndexLayout.propTypes = {
PageLayout.propTypes = {
posts: PropTypes.array.isRequired,
tags: PropTypes.object.isRequired,
currentTag: PropTypes.string
}
export default IndexLayout
export default PageLayout