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

feature:

Browse Source 
新增归档页面
This commit is contained in:
tangly1024
2021-12-02 11:32:52 +08:00
parent 2a105d71f3
commit 5bebb95bad
6 changed files with 73 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/BlogPostArchive.js Normal file
View File

@@ -0,0 +1,46 @@
import React, { useRef } from 'react'
import Link from 'next/link'
import BLOG from '@/blog.config'
/**
* 博客归档列表
* @param posts 所有文章
* @param archiveTitle 归档标题
* @returns {JSX.Element}
* @constructor
*/
const BlogPostArchive = ({ posts = [], archiveTitle }) => {
const targetRef = useRef(null)
if (!posts || posts.length === 0) {
return <></>
} else {
return <div className='py-2' ref={targetRef}>
<div className='py-2 text-xl dark:text-white'>{archiveTitle}</div>
{/* 文章列表 */}
<ul className='flex flex-wrap space-y-1'>
{posts.map(post => (
<Link key={post.id} href={`${BLOG.path}/article/${post.slug}`}>
<li className='w-full border-l pl-2 hover:underline cursor-pointer hover:scale-105 transform duration-500'>
<span className='text-gray-400'>{post.date.start_date}</span> &nbsp; <span className='dark:text-gray-200 text-blue-600'>{post.title}</span>
</li>
</Link>
))}
</ul>
</div>
}
}
/**
* 获取从第1页到指定页码的文章
* @param page 第几页
* @param totalPosts 所有文章
* @param postsPerPage 每页文章数量
* @returns {*}
*/
const getPostByPage = function (page, totalPosts, postsPerPage) {
return totalPosts.slice(
0,
postsPerPage * page
)
}
export default BlogPostArchive

25
components/BlogPostCardMini.js
View File

@@ -1,25 +0,0 @@
import BLOG from '@/blog.config'
import Link from 'next/link'
const BlogPostCardMini = ({ post }) => {
return (
<Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} >
<div className='sm:flex w-full border dark:border-gray-800 my-2 duration-200 transform hover:scale-105 hover:shadow-2xl bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
{/* 封面图 */}
{post.page_cover && post.page_cover.length > 1 && (
<img className='sm:w-40 w-full object-cover cursor-pointer' src={post.page_cover} alt={post.title} />
)}
<main className='px-2 overflow-x-hidden'>
<div
className='block my-3 leading-tight font-semibold text-black dark:text-gray-200 hover:underline whitespace-nowrap'>
{post.title}
</div>
<p className='mt-2 text-gray-500 dark:text-gray-400 text-xs overflow-x-hidden'>{post.summary}</p>
</main>
</div>
</Link>
)
}
export default BlogPostCardMini

2
components/SideBar.js
View File

@@ -61,7 +61,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
<section className='mt-3'>
<div className='text-sm font-bold py-2 px-5 flex flex-nowrap justify-between'>
<div className='text-black font-bold dark:text-gray-200'><i className='fa fa-newspaper-o mr-4'/>{locale.COMMON.LATEST_POSTS}</div>
<Link href='/blogs'>
<Link href='/archive'>
<div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <i className='fa fa-angle-double-right'/>
</div>

3
lib/lang/en-US.js
View File

@@ -4,7 +4,8 @@ export default {
RSS: 'RSS',
SEARCH: 'Search',
ABOUT: 'About',
MAIL: 'E-Mail'
MAIL: 'E-Mail',
ARCHIVE: 'Archive'
},
COMMON: {
MORE: 'More',

3
lib/lang/zh-CN.js
View File

@@ -5,7 +5,8 @@ export default {
SEARCH: '搜索',
ABOUT: '关于',
NAVIGATOR: '导航',
MAIL: '邮箱'
MAIL: '邮箱',
ARCHIVE: '归档'
},
COMMON: {
MORE: '更多',

28
pages/blogs/index.js → pages/archive/index.js
View File

@@ -6,6 +6,7 @@ import { getNotionPageData } from '@/lib/notion/getNotionData'
import StickyBar from '@/components/StickyBar'
import React from 'react'
import { useGlobal } from '@/lib/global'
import BlogPostArchive from '@/components/BlogPostArchive'
export async function getStaticProps () {
const from = 'index'
@@ -31,24 +32,39 @@ const Index = ({ allPosts, tags, categories }) => {
// 时间排序
postsSortByDate.sort((a, b) => {
const dateA = new Date(a?.lastEditedTime || a.createdTime)
const dateB = new Date(b?.lastEditedTime || b.createdTime)
const dateA = new Date(a?.date.start_date || a.createdTime)
const dateB = new Date(b?.date.start_date || b.createdTime)
return dateB - dateA
})
const meta = {
title: `${BLOG.title} | ${locale.COMMON.LATEST_POSTS} `,
title: `${BLOG.title} | ${locale.NAV.ARCHIVE} `,
description: BLOG.description,
type: 'website'
}
const archivePosts = { }
postsSortByDate.forEach(post => {
const date = post.date.start_date.slice(0, 7)
if (archivePosts[date]) {
archivePosts[date].push(post)
} else {
archivePosts[date] = [post]
}
})
return (
<BaseLayout meta={meta} tags={tags} categories={categories}>
<div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16'>
<div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16 '>
<StickyBar>
<div className='py-4 text-lg lg:mx-14'><i className='fa fa-newspaper-o mr-4'/>{locale.COMMON.LATEST_POSTS}</div>
<div className='py-4 text-lg lg:mx-14 dark:text-gray-200'><i className='fa fa-newspaper-o mr-4'/>{locale.NAV.ARCHIVE}</div>
</StickyBar>
<BlogPostListScroll posts={postsSortByDate} tags={tags} />
<div className='mt-20 mx-2 lg:mx-20 bg-white p-12 dark:bg-gray-800'>
{Object.keys(archivePosts).map(archiveTitle => (
<BlogPostArchive key={archiveTitle} posts={archivePosts[archiveTitle]} archiveTitle={archiveTitle}/>
))}
</div>
</div>
</BaseLayout>
)