d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-18 23:16:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature:

Browse Source 
文章分类功能
This commit is contained in:
tangly1024
2021-11-04 17:58:25 +08:00
parent 40db3aae2b
commit 979fa7777e
18 changed files with 202 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/BlogPost.js → components/BlogPostCard.js
View File

@@ -1,8 +1,9 @@
import BLOG from '@/blog.config'
import TagItemMini from '@/components/TagItemMini'
import Link from 'next/link'
import React from 'react'
const BlogPost = ({ post }) => {
const BlogPostCard = ({ post }) => {
return (
<div key={post.id} className='animate__animated animate__slideInUp animate__faster shadow-card inline-block border dark:border-gray-600 my-2 w-full 2xl:max-w-2xl bg-white bg-opacity-80 dark:bg-gray-800 dark:hover:bg-gray-700 overflow-hidden'>
{/* 封面图 */}
@@ -17,6 +18,9 @@ const BlogPost = ({ post }) => {
<div className='cursor-pointer my-3 text-2xl leading-tight font-bold text-black dark:text-gray-100 hover:underline'>{post.title}</div>
</Link>
<div className='flex flex-nowrap'>
<Link href={`/category/${post.category}`}>
<div className='cursor-pointer text-sm py-1.5 mr-2 hover:underline'><i className='fa fa-folder-open-o mr-1'/>{post.category}</div>
</Link>
{post.tags.map(tag => (<TagItemMini key={tag} tag={tag} />))}
<span className='mt-2 mx-2 text-gray-500 dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
</div>
@@ -26,4 +30,4 @@ const BlogPost = ({ post }) => {
)
}
export default BlogPost
export default BlogPostCard

4
components/BlogPostMini.js → components/BlogPostCardMini.js
View File

@@ -1,7 +1,7 @@
import BLOG from '@/blog.config'
import Link from 'next/link'
const BlogPostMini = ({ post }) => {
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'>
@@ -22,4 +22,4 @@ const BlogPostMini = ({ post }) => {
)
}
export default BlogPostMini
export default BlogPostCardMini

4
components/BlogPostListPage.js
View File

@@ -1,4 +1,4 @@
import BlogPost from '@/components/BlogPost'
import BlogPostCard from '@/components/BlogPostCard'
import Pagination from '@/components/Pagination'
import BLOG from '@/blog.config'
@@ -58,7 +58,7 @@ const BlogPostListPage = ({ page = 1, posts = [], tags }) => {
{/* 文章列表 */}
<div className='grid 3xl:grid-cols-4 2xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5'>
{postsToShow.map(post => (
<BlogPost key={post.id} post={post} tags={tags} />
<BlogPostCard key={post.id} post={post} tags={tags} />
))}
</div>

29
components/BlogPostListScroll.js
View File

@@ -1,7 +1,7 @@
import BlogPost from '@/components/BlogPost'
import BlogPostCard from '@/components/BlogPostCard'
import BLOG from '@/blog.config'
import { useCallback, useEffect, useRef, useState } from 'react'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import throttle from 'lodash.throttle'
import BlogPostListEmpty from '@/components/BlogPostListEmpty'
@@ -13,7 +13,7 @@ import BlogPostListEmpty from '@/components/BlogPostListEmpty'
* @returns {JSX.Element}
* @constructor
*/
const BlogPostListScroll = ({ posts = [], tags, currentSearch }) => {
const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory, currentTag }) => {
const postsPerPage = BLOG.postsPerPage
const [page, updatePage] = useState(1)
const postsToShow = getPostByPage(page, posts, postsPerPage)
@@ -52,10 +52,29 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch }) => {
return <BlogPostListEmpty />
} else {
return <div id='post-list-wrapper' className='mt-28 md:mt-32 mx-2 md:mx-20' ref={targetRef}>
{/* 文章列表 */}
{currentCategory && (
<div className='w-full p-1 bg-gray-100 dark:bg-gray-700'>
<div className='cursor-pointer py-1.5 mr-2 dark:text-gray-300 hover:underline'><i className='fa fa-folder-open-o mr-1'/>{currentCategory}</div>
</div>
)}
{currentSearch && (
<div className='w-full p-1 bg-gray-100 dark:bg-gray-700'>
<div className='cursor-pointer py-1.5 mr-2 dark:text-gray-300 hover:underline'><i className='fa fa-search mr-1'/>关键字：{currentSearch}</div>
</div>
)}
{currentTag && (
<div className='w-full p-1 bg-gray-100 dark:bg-gray-700 flex'>
<div className='cursor-pointer py-1.5 mr-2 hover:underline bg-gray-200 dark:bg-gray-400 px-2 rounded'># {currentTag}</div>
</div>
)}
{/* 文章列表 */}
<div className='grid 3xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5'>
{postsToShow.map(post => (
<BlogPost key={post.id} post={post} tags={tags} />
<BlogPostCard key={post.id} post={post} tags={tags} />
))}
</div>

10
components/Drawer.js
View File

@@ -20,16 +20,16 @@ const Drawer = ({ post, currentTag, cRef, tags, posts }) => {
handleMenuClick: () => handleMenuClick()
}
})
const [showDrawer, switchShowDrawer] = useState(false)
const [isHidden, changeHiddenStatus] = useState(true)
// 点击按钮更改侧边抽屉状态
const handleMenuClick = () => {
switchShowDrawer(!showDrawer)
changeHiddenStatus(!isHidden)
}
return <>
<div className='fixed top-0 left-0 z-50 h-screen shadow-2xl bg-white dark:bg-gray-800'>
{/* LOGO */}
<div
className={(showDrawer ? '' : '-ml-72') + ' duration-200 w-72 border-r dark:border-gray-600'}>
className={(isHidden ? '-ml-72' : '') + ' duration-200 w-72 border-r dark:border-gray-600'}>
<div className='w-72 flex space-x-4 px-5 py-1 dark:border-gray-500 '>
<div
className='z-10 py-2 duration-200 mr-2 text-gray-600 text-xl cursor-pointer dark:text-gray-300'>
@@ -41,7 +41,7 @@ const Drawer = ({ post, currentTag, cRef, tags, posts }) => {
{/* 侧边菜单 */}
<div
className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' overflow-y-scroll h-screen w-72 duration-200 overflow-y-auto'}>
className={(isHidden ? '-ml-72' : 'shadow-2xl') + ' overflow-y-scroll h-screen w-72 duration-200 overflow-y-auto'}>
<div className='pb-56'>
{/* 搜索框 */}
<div className='px-5 my-3 block md:hidden'>
@@ -79,7 +79,7 @@ const Drawer = ({ post, currentTag, cRef, tags, posts }) => {
</div>
</div>
{/* 背景蒙版 */}
<div id='drawer-background' className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-30'}
<div id='drawer-background' className={(isHidden ? 'hidden' : 'block') + ' fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-30'}
onClick={handleMenuClick} />
</>
}

2
components/MenuButtonGroup.js
View File

@@ -24,7 +24,7 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
link =>
link.show && (
<Link key={link.id + link.icon} title={link.to} href={link.to} >
<a className={(router.asPath === link.to ? 'bg-gray-200 dark:bg-black' : '') + ' py-2 px-5 hover:bg-gray-100 cursor-pointer dark:hover:bg-black duration-100 flex flex-nowrap align-middle'} >
<a className={(router.asPath === link.to ? 'bg-gray-200 dark:bg-black' : '') + ' py-2 px-5 hover:bg-gray-100 cursor-pointer dark:hover:bg-gray-600 duration-100 flex flex-nowrap align-middle'} >
<div className='my-auto w-5 text-2xl justify-center flex'>
<i className={'fa ' + link.icon} />
</div>

22
components/PostsCategories.js Normal file
View File

@@ -0,0 +1,22 @@
import Link from 'next/link'
import React from 'react'
const PostsCategories = ({ currentCategory, categories }) => {
return <>
<section
className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
<div className='w-32'>文章分类</div>
</section>
<div>
<div id='category-list' className='duration-500 dark:border-gray-600 dark:bg-gray-800 w-66'>
{Object.keys(categories).map(category => {
return <Link key={category} href={`/category/${category}`}>
<div className={(currentCategory === category ? 'bg-gray-200 dark:bg-black' : '') + ' dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}><i className='fa fa-folder-open-o mr-4'/>{category} {categories[category]}</div>
</Link>
})}
</div>
</div>
</>
}
export default PostsCategories

10
components/SideBar.js
View File

@@ -3,8 +3,9 @@ import MenuButtonGroup from '@/components/MenuButtonGroup'
import InfoCard from '@/components/InfoCard'
import TagList from '@/components/TagList'
import LatestPosts from '@/components/LatestPosts'
import PostsCategories from '@/components/PostsCategories'
const SideBar = ({ tags, currentTag, post, posts }) => {
const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory }) => {
// 按时间排序
if (posts) {
posts = posts.sort((a, b) => {
@@ -26,6 +27,13 @@ const SideBar = ({ tags, currentTag, post, posts }) => {
<hr className='dark:border-gray-700 my-2' />
{/* 分类 */}
{categories && (
<div className='mt-2'>
<PostsCategories currentCategory={currentCategory} categories={categories}/>
</div>
)}
{/* 最新文章 */}
{posts && (
<div className='mt-2'>

2
components/TagItemMini.js
View File

@@ -3,7 +3,7 @@ import Link from 'next/link'
const TagItemMini = ({ tag, selected = false, count }) => (
<Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag)}`}>
<span
className={`cursor-pointer inline-block border hover:bg-gray-300 duration-200 mr-1 my-1 p-1 font-medium font-light text-xs whitespace-nowrap
className={`cursor-pointer inline-block border rounded hover:bg-gray-300 duration-200 mr-1 my-1 p-1 font-medium font-light text-xs whitespace-nowrap
dark:text-gray-300 dark:hover:bg-gray-800 ${selected ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800' : 'bg-gray-200 text-gray-600 dark:bg-gray-600 dark:border-gray-600'
}`}
>