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-11-03 15:48:37 +08:00
parent 58109ee4cd
commit 3fcbb8a420
6 changed files with 60 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/MenuButtonGroup.js
View File

@@ -1,17 +1,19 @@
import React from 'react'
import { useLocale } from '@/lib/locale'
import Link from 'next/link'
import { useRouter } from 'next/router'
const MenuButtonGroup = ({ allowCollapse = false }) => {
const locale = useLocale()
const router = useRouter()
const links = [
{ id: 0, icon: 'fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ id: 1, icon: 'fa-info-circle', name: locale.NAV.ABOUT, to: '/article/about', show: true },
{ id: 7, icon: 'fa-github', name: 'Github', to: 'https://github.com/tangly1024', show: true },
{ id: 5, icon: 'fa-weibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true },
{ id: 4, icon: 'fa-envelope', name: locale.NAV.MAIL, to: 'mailto:tlyong1992@hotmail.com', show: true },
{ id: 2, icon: 'fa-rss-square', name: locale.NAV.RSS, to: '/feed', show: true },
{ id: 3, icon: 'fa-compass', name: '发现', to: 'https://search.tangly1024.com/', show: true }
{ id: 1, icon: 'fa-info-circle', name: locale.NAV.ABOUT, to: '/article/about', show: true }
// { id: 7, icon: 'fa-github', name: 'Github', to: 'https://github.com/tangly1024', show: true },
// { id: 5, icon: 'fa-weibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true },
// { id: 4, icon: 'fa-envelope', name: locale.NAV.MAIL, to: 'mailto:tlyong1992@hotmail.com', show: true }
// { id: 2, icon: 'fa-rss-square', name: locale.NAV.RSS, to: '/feed', show: true },
// { id: 3, icon: 'fa-compass', name: '发现', to: 'https://search.tangly1024.com/', show: true }
// { id: 6, icon: 'fa-map-marker', name: 'Fuzhou', to: '#', show: true },
// { id: 8, icon: 'fa-twitter', name: 'Twitter', to: 'https://twitter.com/troy1024_1', show: true },
// { id: 9, icon: 'fa-telegram', name: 'Telegram', to: 'https://t.me/tangly_1024', show: true }
@@ -22,7 +24,7 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
link =>
link.show && (
<Link key={link.id + link.icon} title={link.to} href={link.to} >
<a className='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-gray-900' : '') + ' py-2 px-5 hover:bg-gray-100 cursor-pointer dark:hover:bg-black duration-100 flex flex-nowrap align-middle'} >
<div className='my-auto w-5 text-2xl justify-center flex'>
<i className={'fa ' + link.icon} />
</div>

56
components/SideBar.js
View File

@@ -2,28 +2,60 @@ import React from 'react'
import MenuButtonGroup from '@/components/MenuButtonGroup'
import InfoCard from '@/components/InfoCard'
import TagList from '@/components/TagList'
import BLOG from '@/blog.config'
import Link from 'next/link'
const SideBar = ({ tags, currentTag, post, posts }) => {
// 按时间排序
if (posts) {
posts = posts.sort((a, b) => {
const dateA = new Date(a?.date?.start_date || a.createdTime)
const dateB = new Date(b?.date?.start_date || b.createdTime)
return dateB - dateA
}).slice(0, 5)
}
const SideBar = ({ tags, currentTag, post }) => {
return <aside className='z-10 dark:border-gray-500 border-gray-200 bg-white hidden xl:block'>
<div
className='dark:bg-gray-800 border-r dark:border-gray-700 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
className='w-72 dark:bg-gray-800 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
<div id='sidebar' className='hidden md:block sticky top-20 duration-500'>
<div >
<>
<InfoCard />
<hr className='dark:border-gray-700' />
<MenuButtonGroup allowCollapse={true} />
</div>
</>
{tags && (
<div>
{/* 标签云 */}
{/* 最新文章 */}
{posts && (
<div className='mt-2'>
<hr className='dark:border-gray-700' />
<section
className='py-3 px-5 text-gray-600 dark:text-gray-400 dark:hover:bg-black duration-100 flex flex-nowrap align-middle'>
<div className='my-auto w-5 text-xl justify-center flex'>
<i className='fa fa-tags' />
</div>
<div className='ml-4 w-32'>标签</div>
className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 dark:hover:bg-black duration-100 flex flex-nowrap align-middle'>
<div className='w-32'>最新文章</div>
</section>
<div>
{posts.map(post => {
return (
<Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} >
<div className='text-sm py-1.5 px-5 cursor-pointer hover:underline hover:bg-gray-100 flex'>
<div className='w-12 overflow-hidden'>
<img className='w-12 w-12 object-cover cursor-pointer transform hover:scale-110 duration-500' src={post.page_cover} alt={post.title} />
</div>
<div className='w-60 ml-2 overflow-hidden whitespace-nowrap'>{post.title}</div>
</div>
</Link>
)
})}
</div>
</div>
)}
{/* 标签云 */}
{tags && (
<div className='mt-2'>
<section
className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 dark:hover:bg-black duration-100 flex flex-nowrap align-middle'>
<div className='w-32'>标签</div>
</section>
<div className='px-5'>
<TagList tags={tags} currentTag={currentTag} />

2
components/TagList.js
View File

@@ -10,7 +10,7 @@ import TagItemMini from '@/components/TagItemMini'
const TagList = ({ tags, currentTag }) => {
if (!tags) return <></>
return (
<div id='tags-list' className='duration-500 dark:border-gray-600 dark:bg-gray-800 w-52 pt-2'>
<div id='tags-list' className='duration-500 dark:border-gray-600 dark:bg-gray-800 w-52'>
{Object.keys(tags).map(tag => {
const selected = tag === currentTag
return (

4
layouts/BaseLayout.js
View File

@@ -9,7 +9,7 @@ import Footer from '@/components/Footer'
import SideBar from '@/components/SideBar'
import JumpToTop from '@/components/JumpToTop'
const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMeta }) => {
const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, posts, ...customMeta }) => {
let windowTop = 0
const scrollTrigger = useCallback(throttle(() => {
const scrollS = window.scrollY
@@ -40,7 +40,7 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMe
<TopNav tags={tags} post={post} />
{/* Middle Wrapper */}
<main className='flex dark:bg-black'>
<SideBar tags={tags} post={post} />
<SideBar tags={tags} post={post} posts={posts} />
<div className='flex flex-grow' ref={targetRef}>
{children}
</div>

6
pages/article/[slug].js
View File

@@ -19,7 +19,7 @@ import Custom404 from '@/pages/404'
const mapPageUrl = id => {
return 'https://www.notion.so/' + id.replace(/-/g, '')
}
const BlogPost = ({ post, blockMap, tags, prev, next }) => {
const BlogPost = ({ post, blockMap, tags, prev, next, posts }) => {
if (!post) {
return <Custom404/>
}
@@ -31,7 +31,7 @@ const BlogPost = ({ post, blockMap, tags, prev, next }) => {
const targetRef = useRef(null)
const url = BLOG.link + useRouter().asPath
return <BaseLayout meta={meta} tags={tags} post={post}>
return <BaseLayout meta={meta} tags={tags} post={post} posts={posts}>
{/* 阅读进度条 */}
<Progress targetRef={targetRef} />
@@ -192,7 +192,7 @@ export async function getStaticProps ({ params: { slug } }) {
const next = posts.slice(index + 1, index + 2)[0] ?? posts[0]
return {
props: { post, blockMap, tags, prev, next },
props: { post, blockMap, tags, prev, next, posts },
revalidate: 1
}
}

2
pages/index.js
View File

@@ -27,7 +27,7 @@ export async function getStaticProps () {
const Index = ({ posts, tags, meta }) => {
return (
<BaseLayout meta={meta} tags={tags}>
<BaseLayout meta={meta} tags={tags} posts={posts}>
<div className='flex-grow'>
<TagsBar tags={tags} />
<BlogPostListScroll posts={posts} tags={tags} />