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

排版微调

Browse Source
This commit is contained in:
tangly
2021-12-04 13:35:30 +08:00
parent e0cae32d7d
commit 0742e95a7d
11 changed files with 73 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/BlogPostArchive.js
View File

@@ -18,9 +18,9 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
{/* 文章列表 */}
<ul className='flex flex-wrap space-y-1'>
{posts.map(post => (
<Link key={post.id} href={`${BLOG.path}/article/${post.slug}`}>
<Link key={post.id} href={`${BLOG.path}/article/${post.slug}`} passHref>
<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>
<span className='text-gray-400'>{post.date.start_date}</span> &nbsp; <span className='dark:text-blue-400 text-blue-600'>{post.title}</span>
</li>
</Link>
))}

4
components/BlogPostCard.js
View File

@@ -24,7 +24,9 @@ const BlogPostCard = ({ post, tags }) => {
</span>
</Link>
<span className='mx-1 dark:text-gray-400'>|</span>
<span className='mt-2 mx-2 text-gray-400 dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
<Link href='/archive' passHref>
<span className='mt-2 mx-2 text-gray-400 hover:text-blue-400 hover:underline cursor-pointer dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
</Link>
</div>
<Link href={`${BLOG.path}/article/${post.slug}`} passHref>

21
components/CategoryGroup.js
View File

@@ -5,16 +5,19 @@ import React from 'react'
const CategoryGroup = ({ currentCategory, categories }) => {
return <div>
<div id='category-list' className='dark:border-gray-600 dark:bg-gray-900'>
{Object.keys(categories).map(category => {
const selected = currentCategory === category
return <Link key={category} href={`/category/${category}`} passHref>
<div className={(selected ? 'bg-gray-200 dark:bg-black dark:text-white text-black ' : 'dark:text-gray-400 text-gray-500 ') + ' hover:text-black dark:hover:text-white dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
<FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-black dark:text-white' : 'text-gray-400'} mr-2 `}/>{category}({categories[category]})</div>
</Link>
})}
</div>
<div id='category-list' className='dark:border-gray-600 dark:bg-gray-900'>
{Object.keys(categories).map(category => {
const selected = currentCategory === category
return <Link key={category} href={`/category/${category}`} passHref>
<div className={(selected
? 'bg-gray-200 dark:bg-black text-black dark:text-white'
: 'dark:text-gray-400 text-gray-500') +
' duration-300 hover:text-black dark:hover:text-white hover:underline px-5 cursor-pointer py-2'}>
<FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-black dark:text-white' : 'text-gray-400'} mr-2 `} />{category}({categories[category]})</div>
</Link>
})}
</div>
</div>
}
export default CategoryGroup

2
components/CategoryList.js
View File

@@ -17,7 +17,7 @@ const CategoryList = ({ currentCategory, categories }) => {
className={`cursor-pointer border rounded-xl duration-200 mr-1 my-1 px-2 py-1 font-medium font-light text-sm whitespace-nowrap dark:text-gray-300
${selected
? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800'
: 'bg-gray-100 text-gray-600 hover:bg-gray-300 dark:bg-gray-600 dark:border-gray-600'
: 'bg-gray-100 text-gray-600 hover:bg-gray-300 dark:hover:bg-gray-700 dark:bg-gray-600 dark:border-gray-600'
}`}
>
<a>

5
components/LatestPostsGroup.js
View File

@@ -9,7 +9,7 @@ import { useRouter } from 'next/router'
* @param sliceCount 截取展示的数量 默认6
* @constructor
*/
const LatestPostsGroup = ({ posts, sliceCount = 6 }) => {
const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
// 深拷贝
let postsSortByDate = Object.create(posts)
@@ -31,8 +31,7 @@ const LatestPostsGroup = ({ posts, sliceCount = 6 }) => {
const selected = currentPath === `${BLOG.path}/article/${post.slug}`
return (
<Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
<div
className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' leading-5 py-1.5 px-5 flex'}>
<div className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' leading-5 py-1 px-5 flex'}>
<div className='mr-2 text-gray-500 text-xs leading-5'>
{formatDateFmt(post.lastEditedTime, 'MM/dd')}
</div>

9
components/MenuButtonGroup.js
View File

@@ -3,14 +3,15 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { useGlobal } from '@/lib/global'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHome, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
import { faArchive, faHome, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
const MenuButtonGroup = ({ allowCollapse = false }) => {
const { locale } = useGlobal()
const router = useRouter()
const links = [
{ id: 0, icon: faHome, name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ id: 1, icon: faInfoCircle, name: locale.NAV.ABOUT, to: '/article/about', show: true }
{ id: 1, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', show: true },
{ id: 2, icon: faInfoCircle, name: locale.NAV.ABOUT, to: '/article/about', show: true }
// { id: 7, icon: 'faGithub', name: 'Github', to: 'https://github.com/tangly1024', show: true },
// { id: 5, icon: 'faWeibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true },
// { id: 4, icon: 'faEnvelope', name: locale.NAV.MAIL, to: 'mailto:tlyong1992@hotmail.com', show: true }
@@ -26,8 +27,8 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
if (link.show) {
const selected = router.asPath === link.to
return <Link key={link.id + link.icon} title={link.to} href={link.to} >
<a className={'py-2 px-5 hover:text-black dark:hover:text-white hover:bg-gray-100 cursor-pointer dark:hover:bg-gray-600 duration-100 flex flex-nowrap align-middle' +
(selected ? 'bg-gray-200 dark:bg-black dark:text-white text-black ' : '')} >
<a className={'py-2 px-5 hover:text-black dark:hover:text-white hover:bg-gray-100 cursor-pointer dark:hover:bg-gray-600 duration-100 flex flex-nowrap align-middle ' +
(selected ? 'font-bold bg-gray-200 dark:bg-black dark:text-white text-black ' : '')} >
<div className='my-auto w-5 justify-center flex'>
<FontAwesomeIcon icon={link.icon} />
</div>

14
components/SideBar.js
View File

@@ -43,14 +43,9 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{/* 最新文章 */}
{posts && (
<section className='mt-12'>
<section className='mt-4'>
<div className='text-sm py-2 px-5 flex flex-nowrap justify-between'>
<div className='font-bold text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-4' />{locale.COMMON.LATEST_POSTS}</div>
<Link href='/archive' passHref>
<div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
</div>
</Link>
</div>
<LatestPostsGroup posts={posts} />
</section>
@@ -58,7 +53,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{/* 分类 */}
{categories && (
<section className='mt-12'>
<section className='mt-8'>
<div className='text-sm py-2 px-5 flex flex-nowrap justify-between'>
<div className='font-bold text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}</div>
<Link href='/category' passHref>
@@ -73,7 +68,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{/* 标签云 */}
{tags && (
<section className='mt-12'>
<section className='mt-8'>
<div className='text-sm py-2 px-5 flex flex-nowrap justify-between'>
<div className='text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-4' />{locale.COMMON.TAGS}</div>
<Link href='/tag' passHref>
@@ -96,10 +91,11 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{locale.COMMON.TABLE_OF_CONTENTS}
</div>
<Toc toc={post.toc} />
</section>
)}
<section id='blank' className='bg-white dark:bg-gray-800 py-20' />
<section id='blank' className='bg-white dark:bg-gray-900 py-20' />
</aside>
}

2
components/TagGroups.js
View File

@@ -10,7 +10,7 @@ import TagItemMini from '@/components/TagItemMini'
const TagGroups = ({ tags, currentTag }) => {
if (!tags) return <></>
return (
<div id='tags-group' className='dark:border-gray-600 dark:bg-gray-800 w-66'>
<div id='tags-group' className='dark:border-gray-600 w-66'>
{
tags.map(tag => {
const selected = tag.name === currentTag

2
components/Toc.js
View File

@@ -50,7 +50,7 @@ const Toc = ({ toc }) => {
setActiveSection(currentSectionId)
}, throttleMs))
return <div className='dark:bg-gray-800 bg-white'>
return <div className='dark:bg-gray-900 bg-white'>
<nav className='text-gray-500 dark:text-gray-400 overflow-y-auto scroll-hidden p-2'>
{toc.map((tocItem) => {
const id = uuidToId(tocItem.id)

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

@@ -62,7 +62,31 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
<div className='animate__fadeIn animate__animated subpixel-antialiased w-screen md:w-full lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
{/* 文章Title */}
<h1 className='font-bold text-4xl pt-5 text-black dark:text-white italic'> {post.title}</h1>
<h1 className='font-bold text-3xl pt-5 text-black dark:text-white italic'> {post.title}</h1>
<hr className='mt-4' />
<div className='flex-nowrap flex mt-1 dark:text-white'>
<Link href={`/category/${post.category}`} passHref>
<div className='cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white'>
<FontAwesomeIcon icon={faFolderOpen} className='mr-1' />{post.category}
</div>
</Link>
{post.type[0] !== 'Page' && (
<Link href='/archive' passHref>
<div className='pl-1 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 text-gray-400 dark:text-gray-400 leading-10'>
{formatDate(
post?.date?.start_date || post.createdTime,
BLOG.lang
)}
</div>
</Link>
)}
{/* 不蒜子 */}
<div id='busuanzi_container_page_pv' className='hidden'>
<FontAwesomeIcon icon={faEye} className='text-gray-500 dark:text-gray-400 mt-3 ml-2' />
&nbsp;<span id='busuanzi_value_page_pv' className='text-gray-500 dark:text-gray-400 leading-6'></span>
</div>
</div>
{/* Notion文章主体 */}
{blockMap && (
@@ -76,18 +100,18 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
/>
)}
{/* 推荐文章 */}
<RecommendPosts currentPost={post} totalPosts={allPosts} />
{/* 版权声明 */}
<section className='text-sm overflow-auto dark:bg-gray-800 dark:text-gray-300 bg-gray-100 p-5 leading-8 border-l-4 border-red-500'>
<ul>
<li>本文作者: {BLOG.author}</li>
<li>本文链接: <a href={url}>{url}</a></li>
<li>本文作者: <Link href='/article/about'><a className='hover:underline'>{BLOG.author}</a></Link></li>
<li>本文链接: <a className='hover:underline' href={url}>{url}</a></li>
<li>版权声明: 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！</li>
</ul>
</section>
{/* 推荐文章 */}
<RecommendPosts currentPost={post} totalPosts={allPosts} />
{/* 标签列表 */}
<section className='md:flex md:justify-between'>
{post.tagItems && (
@@ -103,28 +127,6 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
</div>
</section>
<div className='flex-nowrap flex mt-1 dark:text-white'>
<Link href={`/category/${post.category}`} passHref>
<div className='cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white'>
<FontAwesomeIcon icon={faFolderOpen} className='mr-1' />{post.category}
</div>
</Link>
{post.type[0] !== 'Page' && (
<div className='pl-1 text-gray-400 dark:text-gray-300 leading-10'>
{formatDate(
post?.date?.start_date || post.createdTime,
BLOG.lang
)}
</div>
)}
{/* 不蒜子 */}
<div id='busuanzi_container_page_pv' className='hidden'>
<FontAwesomeIcon icon={faEye} className='text-gray-500 dark:text-gray-400 mt-3 ml-2' />
&nbsp;<span id='busuanzi_value_page_pv' className='text-gray-500 dark:text-gray-400 leading-6'></span>
</div>
</div>
</div>
<div className='w-screen md:w-full px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>

21
pages/category/index.js
View File

@@ -17,16 +17,17 @@ export default function Category ({ tags, allPosts, categories }) {
}
return <BaseLayout meta={meta} totalPosts={allPosts} tags={tags}>
<div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-2 lg:px-14'>
<div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
<div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faThList} className='mr-4'/>{locale.COMMON.CATEGORY}:</div>
<div id='category-list' className='duration-200 flex flex-wrap'>
{Object.keys(categories).map(category => {
return <Link key={category} href={`/category/${category}`} passHref>
<div className={'hover:text-black dark:hover:text-white dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
<FontAwesomeIcon icon={faFolder} className='mr-4'/>{category}({categories[category]})</div>
</Link>
})} </div>
</div>
<div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
<div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}:</div>
<div id='category-list' className='duration-200 flex flex-wrap'>
{Object.keys(categories).map(category => {
return <Link key={category} href={`/category/${category}`} passHref>
<div className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
<FontAwesomeIcon icon={faFolder} className='mr-4' />{category}({categories[category]})</div>
</Link>
})}
</div>
</div>
</div>
</BaseLayout>
}