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 17:43:18 +08:00
parent 2c7c37fe0e
commit 88d1e0742a
12 changed files with 65 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
blog.config.js
View File

@@ -9,7 +9,7 @@ const BLOG = {
notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
defaultImgCover: 'https://avatars.githubusercontent.com/u/15920488', // default image cover
appearance: 'auto', // ['light', 'dark', 'auto'],
font: 'font-serif', // ['font-sans', 'font-serif', 'font-mono']
font: 'font-sans', // ['font-sans', 'font-serif', 'font-mono']
lightBackground: '#ffffff', // use hex value, don't forget '#' e.g #fffefc
darkBackground: '#111827', // use hex value, don't forget '#'
path: '', // leave this empty unless you want to deploy in a folder

2
components/BlogPostArchive.js
View File

@@ -14,7 +14,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
return <></>
} else {
return <div className='py-2' ref={targetRef}>
<div className='py-2 text-xl dark:text-white'>{archiveTitle}</div>
<div className='py-2 text-3xl dark:text-white'>{archiveTitle}</div>
{/* 文章列表 */}
<ul className='flex flex-wrap space-y-1'>
{posts.map(post => (

36
components/BlogPostCard.js
View File

@@ -6,8 +6,8 @@ import React from 'react'
const BlogPostCard = ({ post, tags }) => {
return (
<div key={post.id}
className='animate__animated animate__fadeIn animate__faster xl:flex shadow-card border dark:border-gray-600 mb-6 w-full bg-white bg-opacity-80 dark:bg-gray-800 dark:hover:bg-gray-700 overflow-hidden'>
{/* 封面图 */}
className='animate__animated animate__fadeIn animate__faster xl:flex shadow-card border dark:border-gray-600 mb-6 w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700 overflow-hidden'>
{post.page_cover && post.page_cover.length > 1 && (
<Link href={`${BLOG.path}/article/${post.slug}`}>
<img className='w-full max-h-72 xl:w-80 object-cover cursor-pointer transform hover:scale-110 duration-500'
@@ -15,24 +15,28 @@ const BlogPostCard = ({ post, tags }) => {
</Link>
)}
<div className='px-8 py-6 w-full'>
<div className='px-4 py-4 w-full'>
<div>
<Link href={`/category/${post.category}`}>
<span className='cursor-pointer dark:text-gray-200 text-gray-400 text-sm py-1.5 mr-1 hover:underline hover:text-blue-500 transform'>
<i className='fa fa-folder-open-o mr-1' />{post.category}
</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>
</div>
<Link href={`${BLOG.path}/article/${post.slug}`}>
<div
className='cursor-pointer my-3 text-xl leading-tight font-bold text-black dark:text-gray-100 hover:underline'>{post.title}</div>
<div className='cursor-pointer my-3 text-lg leading-tight font-bold text-black dark:text-gray-100 hover:underline'>
{post.title}
</div>
</Link>
<p className='mt-2 text-gray-500 dark:text-gray-400 text-sm'>{post.summary}</p>
<p className='mt-2 text-gray-400 dark:text-gray-400 text-sm'>{post.summary}</p>
<div className='flex md:flex-nowrap flex-wrap md:justify-start justify-between pt-5'>
<div className='flex whitespace-nowrap'>
<Link href={`/category/${post.category}`}>
<div
className='cursor-pointer dark:text-gray-200 text-gray-500 text-sm py-1.5 mr-1 hover:underline hover:scale-105 transform duration-200'>
<i
className='fa fa-folder-open-o mr-1' />{post.category}</div>
</Link>
<span className='mt-2 mx-2 text-gray-500 dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
</div>
<div className='flex ml-1'> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
<div> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
</div>
</div>
</div>

3
components/MenuButtonGroup.js
View File

@@ -24,7 +24,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={(selected ? 'bg-gray-200 dark:bg-black dark:text-white text-black ' : '') + ' py-2 px-5 hover:text-black hover:bg-gray-100 cursor-pointer dark:hover:bg-gray-600 duration-100 flex flex-nowrap align-middle'} >
<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 ' : '') } >
<div className='my-auto w-5 text-2xl justify-center flex'>
<i className={'fa ' + link.icon} />
</div>

5
components/RecommendPosts.js
View File

@@ -1,5 +1,6 @@
import React from 'react'
import Link from 'next/link'
import { useGlobal } from '@/lib/global'
/**
* 洗牌乱序：从数组的最后位置开始，从前面随机一个位置，对两个数进行交换，直到循环完毕
@@ -34,8 +35,10 @@ const RecommendPosts = ({ currentPost, totalPosts }) => {
filteredPosts = filteredPosts.slice(0, 5)
}
const { locale } = useGlobal()
return <div className='dark:text-gray-300 dark:bg-gray-800 bg-gray-100 p-2 mb-2 border-l-4 border-yellow-500'>
<h2 className='ml-2 mb-2 font-bold'>相关推荐</h2>
<h2 className='mb-2 font-bold text-xl'>{locale.COMMON.RELATE_POSTS}</h2>
<ul className='list-disc px-5'>
{filteredPosts.map(post => (
<li className='py-1' key={post.id} ><Link href={`/article/${post.slug}`}><a className='cursor-pointer hover:underline'>{post.title}</a></Link></li>

36
components/SideBar.js
View File

@@ -4,10 +4,10 @@ import InfoCard from '@/components/InfoCard'
import TagGroups from '@/components/TagGroups'
import LatestPostsGroup from '@/components/LatestPostsGroup'
import CategoryGroup from '@/components/CategoryGroup'
import Toc from '@/components/Toc'
import SearchInput from '@/components/SearchInput'
import Link from 'next/link'
import { useGlobal } from '@/lib/global'
import Toc from '@/components/Toc'
/**
* 侧边栏
@@ -41,21 +41,6 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
<hr className='dark:border-gray-700 my-2' />
</section>
{/* 分类 */}
{categories && (
<section className='mt-2'>
<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-th-list mr-4'/>{locale.COMMON.CATEGORY}</div>
<Link href='/category'>
<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>
</Link>
</div>
<CategoryGroup currentCategory={currentCategory} categories={categories} />
</section>
)}
{/* 最新文章 */}
{posts && (
<section className='mt-3'>
@@ -71,6 +56,21 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
</section>
)}
{/* 分类 */}
{categories && (
<section className='mt-2'>
<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-th-list mr-4'/>{locale.COMMON.CATEGORY}</div>
<Link href='/category'>
<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>
</Link>
</div>
<CategoryGroup currentCategory={currentCategory} categories={categories} />
</section>
)}
{/* 标签云 */}
{tags && (
<section className='mt-3'>
@@ -92,14 +92,14 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{post && (
<section id='left-toc' className='sticky top-0 bg-white dark:bg-gray-800'>
<div
className='border-b text-2xl bg-white font-bold text-black dark:bg-gray-700 dark:text-white py-6 px-6'>
className='border-b text-2xl bg-white font-bold text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
{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-800 py-20'/>
</aside>
}

7
components/Toc.js
View File

@@ -51,19 +51,18 @@ const Toc = ({ toc }) => {
}, throttleMs))
return <div className='dark:bg-gray-800 bg-white'>
<nav className='text-gray-500 dark:text-gray-400 underline overflow-y-auto scroll-hidden p-2'>
<nav className='text-gray-500 dark:text-gray-400 overflow-y-auto scroll-hidden p-2'>
{toc.map((tocItem) => {
const id = uuidToId(tocItem.id)
return (
<a
key={id}
href={`#${id}`}
className={`notion-table-of-contents-item px-5
className={`notion-table-of-contents-item px-5 duration-300 transform
notion-table-of-contents-item-indent-level-${tocItem.indentLevel}
${activeSection === id && ' font-bold text-black dark:text-white animate-pulse'}`}
${activeSection === id && ' font-bold text-blue-400 dark:text-white'}`}
>
<span
className='notion-table-of-contents-item-body'
style={{
display: 'inline-block',
marginLeft: tocItem.indentLevel * 16

7
components/TocDrawer.js
View File

@@ -25,10 +25,11 @@ const TocDrawer = ({ post, cRef }) => {
<div className='fixed top-0 right-0 z-40'>
{/* 侧边菜单 */}
<div
className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') + ' border dark:border-gray-800 bg-white dark:bg-gray-700 shadow-xl animate__animated animate__faster max-h-96 w-72 duration-200 fixed right-4 top-16 rounded-xl overflow-y-auto'}>
className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') + ' border ' +
' dark:border-gray-800 bg-white dark:bg-gray-700 shadow-xl animate__animated animate__faster max-h-96 ' +
' w-60 duration-200 fixed right-4 top-16 rounded-xl overflow-y-auto'}>
{post && <>
<div
className='border-b text-xl font-bold text-black dark:text-white py-3 px-6'>
<div className='border-b text-xl font-bold text-black dark:text-white py-3 px-6'>
{locale.COMMON.TABLE_OF_CONTENTS}
</div>
<Toc toc={post.toc}/>

9
components/TocDrawerButton.js
View File

@@ -1,4 +1,5 @@
import React from 'react'
import { useGlobal } from '@/lib/global'
/**
* 点击召唤目录抽屉
@@ -8,14 +9,16 @@ import React from 'react'
* @constructor
*/
const TocDrawerButton = (props) => {
const { locale } = useGlobal()
return (
<div id='toc-drawer-button' className='right-0 fixed flex top-24 mr-4 duration-500 z-40 hidden' onClick={props.onClick}>
<div id='toc-drawer-button' className='right-0 fixed flex top-40 mr-4 duration-500 z-40 hidden' onClick={props.onClick}>
<div className='transform hover:scale-105 duration-200 '>
<div style={{ borderRadius: '28px' }}
className={'animate__fadeInUp bg-white dark:bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-xl'}>
<div className='text-center dark:text-gray-100'>
<div className='w-10 text-xl' title='目录' ><i className='fa fa-book'/> </div>
<div className='text-xs'>目录</div>
<div className='w-10 text-xl' title={locale.COMMON.TABLE_OF_CONTENTS} ><i className='fa fa-book'/> </div>
<div className='text-xs'>{locale.COMMON.TABLE_OF_CONTENTS}</div>
</div>
</div>
</div>

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

@@ -15,7 +15,8 @@ export default {
SHARE: 'Share',
SCAN_QR_CODE: 'Scan QRCode',
URL_COPIED: 'URL has copied!',
TABLE_OF_CONTENTS: 'Table of Contents'
TABLE_OF_CONTENTS: 'Table of Contents',
RELATE_POSTS: 'Relate Posts'
},
PAGINATION: {
PREV: 'Prev',

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

@@ -16,7 +16,8 @@ export default {
SHARE: '分享',
SCAN_QR_CODE: '扫一扫二维码',
URL_COPIED: '链接已复制！',
TABLE_OF_CONTENTS: '目录'
TABLE_OF_CONTENTS: '目录',
RELATE_POSTS: '相关文章'
},
PAGINATION: {
PREV: '上一页',

3
pages/404.js
View File

@@ -28,7 +28,8 @@ export default function Custom404 () {
<div>
<h1 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'><i className='fa fa-spinner mr-2 animate-spin'/>404</h1>
<div className='inline-block text-left h-32 leading-10 align-middle'>
<h2 className='m-0 p-0'>页面找不到了，3秒后返回首页</h2></div>
<h2 className='m-0 p-0'>页面无法加载，即将返回首页</h2>
</div>
</div>
</div>
</BaseLayout>