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 
theme-Next新的样式
This commit is contained in:
tangly1024
2021-12-23 17:07:12 +08:00
parent e67ee9fe6c
commit fffd04651f
27 changed files with 118 additions and 1024 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/Analytics.js
View File

@@ -10,13 +10,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
export default function Analytics ({ postCount }) {
const { locale } = useGlobal()
return <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-4 shadow-md'>
return <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-4'>
<div className='px-5 text-sm font-light pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faChartBar} className='mr-2' />{locale.COMMON.ANALYTICS}</div>
<div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
<span className='px-1 '>
<strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
<span className='px-1 busuanzi_container_site_uv hidden'>
| <strong className='pl-1 busuanzi_value_site_uv font-medium'></strong>{locale.COMMON.VISITORS}</span>
<strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
{/* <span className='px-1 busuanzi_container_site_uv hidden'> */}
{/* | <strong className='pl-1 busuanzi_value_site_uv font-medium'></strong>{locale.COMMON.VISITORS}</span> */}
<span className='px-1 busuanzi_container_site_pv hidden'>
| <strong className='pl-1 busuanzi_value_site_pv font-medium'></strong>{locale.COMMON.VIEWS}</span>
</div>

4
components/ArticleDetail.js
View File

@@ -39,7 +39,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
return (<>
<div id="article-wrapper" ref={targetRef} className="flex-grow mt-14 md:mt-0 max-w-5xl mx-auto w-screen md:w-full ">
<article itemScope itemType="https://schema.org/Movie"
className="rounded-xl shadow-md hover:shadow-2xl duration-300 animate__fadeIn animate__animated subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
className="shadow-md hover:shadow-2xl duration-300 animate__fadeIn animate__animated subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
>
<header>
{post.type && !post.type.includes('Page') && post?.page_cover && (
@@ -154,7 +154,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
</article>
{/* 评论互动 */}
<div className="mt-5 lg:px-40 hover:shadow-2xl duration-200 shadow-lg rounded-xl w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700">
<div className="mt-5 lg:px-40 hover:shadow-2xl duration-200 shadow-lg w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700">
<Comment frontMatter={post} />
</div>
</div>

4
components/BlogAround.js
View File

@@ -13,12 +13,12 @@ export default function BlogAround ({ prev, next }) {
}
return <section className='text-gray-800 border-t dark:text-gray-300 flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
<Link href={`/article/${prev.slug}`} passHref>
<a className='text-sm py-3 text-blue-500 hover:underline cursor-pointer'>
<a className='text-sm py-3 text-gray-400 hover:underline cursor-pointer'>
<FontAwesomeIcon icon={faAngleDoubleLeft} className='mr-1' />{prev.title}
</a>
</Link>
<Link href={`/article/${next.slug}`} passHref>
<a className='text-sm flex py-3 text-blue-500 hover:underline cursor-pointer'>{next.title}
<a className='text-sm flex py-3 text-gray-400 hover:underline cursor-pointer'>{next.title}
<FontAwesomeIcon icon={faAngleDoubleRight} className='ml-1 my-1' />
</a>
</Link>

6
components/BlogPostArchive.js
View File

@@ -14,13 +14,13 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
return <></>
} else {
return <div ref={targetRef}>
<div className='pt-16 pb-4 text-3xl dark:text-white' id={archiveTitle}>{archiveTitle}</div>
<div className='pt-16 pb-4 text-3xl dark:text-gray-300' id={archiveTitle}>{archiveTitle}</div>
<ul>
{posts.map(post => (
<li key={post.id} className='border-l-2 p-1 text-xs md:text-base items-center hover:scale-x-105 hover:border-blue-500 transform duration-500'>
<li key={post.id} className='border-l-2 p-1 text-xs md:text-base items-center hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500'>
<div name={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> &nbsp;
<Link href={`${BLOG.path}/article/${post.slug}`} passHref>
<a className='dark:text-blue-400 overflow-x-hidden hover:underline cursor-pointer text-blue-600'>{post.title}</a>
<a className='dark:text-gray-400 dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600'>{post.title}</a>
</Link>
</div>
</li>

8
components/BlogPostCard.js
View File

@@ -8,7 +8,7 @@ import TagItemMini from './TagItemMini'
const BlogPostCard = ({ post, tags }) => {
return (
<div key={post.id} className='flex xl:flex-row flex-col-reverse justify-between md:hover:shadow-2xl md:shadow-md duration-300 md:rounded-xl
<div key={post.id} className='flex xl:flex-row flex-col-reverse justify-between md:hover:shadow-xl duration-300
w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>
<div className='p-8 flex flex-col justify-between w-full'>
@@ -18,7 +18,7 @@ const BlogPostCard = ({ post, tags }) => {
</a>
</Link>
<p className='my-4 text-gray-800 dark:text-gray-300 text-md font-light'>{post.summary}</p>
<p className='my-8 text-gray-700 dark:text-gray-300 text-md font-light leading-7 italic'>{post.summary}</p>
<div className='flex items-center justify-between flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 '>
<div>
@@ -41,8 +41,8 @@ const BlogPostCard = ({ post, tags }) => {
{post?.page_cover && (
<Link href={`${BLOG.path}/article/${post.slug}`} passHref>
<div className='h-60 w-full xl:max-w-xs relative md:rounded-t-xl xl:rounded-t-none xl:rounded-r-xl xl:h-full duration-200 cursor-pointer transform overflow-hidden'>
<Image className='hover:scale-105 transform duration-500 md:rounded-t-xl xl:rounded-t-none xl:rounded-r-xl' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
<div className='h-60 w-full xl:max-w-xs relative xl:h-full duration-200 cursor-pointer transform overflow-hidden'>
<Image className='hover:scale-105 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
</div>
</Link>
)}

6
components/CategoryGroup.js
View File

@@ -10,9 +10,9 @@ const CategoryGroup = ({ currentCategory, categories }) => {
const selected = currentCategory === category
return <Link key={category} href={`/category/${category}`} passHref>
<a className={(selected
? 'hover:text-white dark:hover:text-white bg-blue-600 text-white '
: 'dark:text-gray-400 text-gray-500 hover:text-blue-500 dark:hover:text-blue-400') +
' rounded-xl text-md w-full items-center duration-300 hover:underline px-3 mx-2 cursor-pointer py-2 font-light'}>
? 'hover:text-white dark:hover:text-white bg-gray-600 text-white '
: 'dark:text-gray-400 text-gray-500 hover:text-white hover:bg-gray-500 dark:hover:text-white') +
' text-sm w-full items-center duration-300 px-3 mx-2 cursor-pointer py-1 font-light'}>
<FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-white' : 'text-gray-400'} mr-2`} />{category}({categories[category]})
</a>
</Link>

2
components/CategoryList.js
View File

@@ -19,7 +19,7 @@ const CategoryList = ({ currentCategory, categories }) => {
<li
className={`cursor-pointer border rounded-xl duration-200 mr-1 my-1 px-2 py-1 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'
? 'text-white bg-gray-500 dark:hover:bg-gray-900 dark:bg-gray-500 dark:border-gray-800'
: 'bg-gray-100 text-gray-600 hover:bg-gray-300 dark:hover:bg-gray-700 dark:bg-gray-600 dark:border-gray-600'
}`}
>

4
components/Header.js
View File

@@ -89,7 +89,7 @@ export default function Header () {
return (
<header
id="header"
className="duration-500 w-full bg-cover bg-center md:-mt-14"
className="duration-500 w-full bg-cover bg-center md:-mt-14 bg-black"
style={{
height: 'calc(100vh + 1px)',
backgroundImage:
@@ -97,7 +97,7 @@ export default function Header () {
}}
>
<div className="absolute z-10 flex h-full items-center -mt-14 justify-center w-full text-4xl md:text-7xl text-white">
<div id="typed" className="flex text-center font-serif"></div>
<div id='typed' className='flex text-center font-serif'/>
</div>
<div
onClick={() => {

6
components/InfoCard.js
View File

@@ -6,17 +6,17 @@ import React from 'react'
const InfoCard = ({ postCount }) => {
return <>
<div className='flex flex-col items-center justify-center cursor-pointer' onClick={ () => { Router.push('/') }}>
<div className='hover:rotate-45 hover:scale-125 transform duration-200 mx-auto'>
<div className='hover:rotate-45 hover:scale-125 transform duration-200'>
<Image
alt={BLOG.title}
width={120}
height={120}
loading='lazy'
src='/avatar.svg'
src='/avatar.jpg'
className='rounded-full border-black'
/>
</div>
<div className='text-3xl font-serif dark:text-white mx-auto py-4 hover:scale-105 transform duration-200'>{BLOG.title}</div>
<div className='text-3xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.title}</div>
</div>
</>
}

6
components/LatestPostsGroup.js
View File

@@ -32,9 +32,9 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
const selected = currentPath === `${BLOG.path}/article/${post.slug}`
return (
<Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
<a className={(selected ? 'text-white bg-blue-600 ' : 'text-gray-500 dark:text-gray-300 ') + ' my-1 px-5 flex font-light justify-between'}>
<div className={ 'text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap overflow-hidden ' +
'hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline truncate' }>
<a className={ 'my-1 px-2 flex font-light'}>
<div className={ (selected ? 'text-white bg-gray-600 ' : 'text-gray-500 dark:text-gray-400 ') + 'text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-gray-500 px-3 w-full ' +
'hover:text-white dark:hover:text-white cursor-pointer truncate' }>
<FontAwesomeIcon icon={faFileAlt} className='mr-2'/>
{post.title}
</div>

4
components/MenuButtonGroup.js
View File

@@ -28,8 +28,8 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
if (link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return <Link key={link.id + link.icon} title={link.to} href={link.to} >
<a className={'py-1 my-1 px-5 mx-2 rounded-xl hover:bg-blue-500 hover:text-white hover:shadow-lg cursor-pointer duration-100 font-light flex flex-nowrap items-center ' +
(selected ? 'bg-blue-600 text-white ' : ' ')} >
<a className={'py-1 my-1 px-5 mx-2 duration-300 text-base hover:bg-gray-500 hover:text-white hover:shadow-lg cursor-pointer duration-100 font-light flex flex-nowrap items-center ' +
(selected ? 'bg-gray-600 text-white ' : ' ')} >
<div className='my-auto justify-center flex '>
<FontAwesomeIcon icon={link.icon} />
</div>

2
components/NavBar.js
View File

@@ -89,7 +89,7 @@ const Header = ({ navBarTitle, fullWidth = true }) => {
alt={BLOG.title}
width={28}
height={28}
src='/avatar.svg'
src='/avatar.jpg'
className='rounded-full'
/>
<div

6
components/Progress.js
View File

@@ -23,9 +23,9 @@ const Progress = ({ targetRef }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [percent])
return (<div className='h-4 w-full shadow-2xl bg-blue-400'>
<div className='text-center w-full absolute text-white text-xs'>{percent}%</div>
<div className='h-4 bg-blue-600 duration-200 rounded-r' style={{ width: `${percent}%` }}/>
return (<div className='h-4 w-full shadow-2xl bg-gray-400'>
<div className='h-4 bg-gray-600 duration-200' style={{ width: `${percent}%` }}><div className='text-right text-white text-xs'>{percent}%</div></div>
</div>)
}

2
components/SearchInput.js
View File

@@ -42,7 +42,7 @@ const SearchInput = ({ currentTag, currentSearch }) => {
ref={searchInputRef}
type='text'
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'w-full pl-2 transition focus:shadow-lg font-light leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={currentSearch}

40
components/SideAreaLeft.js
View File

@@ -1,12 +1,8 @@
import CategoryGroup from '@/components/CategoryGroup'
import InfoCard from '@/components/InfoCard'
import MenuButtonGroup from '@/components/MenuButtonGroup'
import SearchInput from '@/components/SearchInput'
import Toc from '@/components/Toc'
import { useGlobal } from '@/lib/global'
import { faAngleDoubleRight, faThList } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import React from 'react'
import Analytics from './Analytics'
@@ -28,13 +24,13 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
const postCount = posts?.length || 0
return <>
<div className={(!post ? 'sticky top-8 ' : ' ') + ' w-72'}>
<section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-8 shadow-md'>
<div className={(!post ? 'sticky top-8 ' : ' ') + ' w-60'}>
<section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-6'>
<InfoCard postCount={postCount} />
</section>
{/* 菜单 */}
<section className='hidden lg:block mb-5 py-5 rounded-xl shadow-md bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<section className='hidden lg:block mb-5 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
<MenuButtonGroup allowCollapse={true} />
<div className='px-5 pt-2'>
<SearchInput currentTag={currentTag} currentSearch={currentSearch} />
@@ -45,24 +41,24 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
<Analytics postCount={postCount}/>
{/* 分类 */}
{!post && categories && (
<section className='rounded-xl shadow-md py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<div className='text-sm px-5 mb-2 flex flex-nowrap justify-between font-light'>
<div className='pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
<Link href='/category' passHref>
<a 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} />
</a>
</Link>
</div>
<CategoryGroup currentCategory={currentCategory} categories={categories} />
</section>
)}
{/* { categories && ( */}
{/* <section className=' py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'> */}
{/* <div className='text-sm px-5 mb-2 flex flex-nowrap justify-between font-light'> */}
{/* <div className='pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div> */}
{/* <Link href='/category' passHref> */}
{/* <a 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} /> */}
{/* </a> */}
{/* </Link> */}
{/* </div> */}
{/* <CategoryGroup currentCategory={currentCategory} categories={categories} /> */}
{/* </section> */}
{/* )} */}
</div>
{showToc && (
<section className='sticky top-8 pb-20 rounded-xl shadow-md bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<div className='border-b text-center text-2xl bg-white text-black rounded-t-xl dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
<section className='sticky top-8 pb-20 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
<div className='border-b text-center text-2xl bg-white 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} targetRef={targetRef} />

77
components/SideAreaRight.js
View File

@@ -1,21 +1,11 @@
import LatestPostsGroup from '@/components/LatestPostsGroup'
import TagGroups from '@/components/TagGroups'
import { useGlobal } from '@/lib/global'
import {
faAngleDoubleRight,
faArchive,
faTags,
faThList
} from '@fortawesome/free-solid-svg-icons'
import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import React from 'react'
import Analytics from './Analytics'
import CategoryGroup from './CategoryGroup'
import InfoCard from './InfoCard'
import MenuButtonGroup from './MenuButtonGroup'
import SearchInput from './SearchInput'
import Toc from './Toc'
import CategoryGroup from '@/components/CategoryGroup'
/**
* 侧边平铺
@@ -41,25 +31,25 @@ const SideAreaRight = ({
targetRef
}) => {
const { locale } = useGlobal()
const postCount = posts?.length || 0
const showToc = post && post.toc && post.toc.length > 1
// const postCount = posts?.length || 0
// const showToc = post && post.toc && post.toc.length > 1
return (
<>
<section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-8 shadow-md'>
{/* <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-8 '>
<InfoCard postCount={postCount} />
</section>
</section> */}
{/* 菜单 */}
<section className='hidden lg:block mb-5 py-5 rounded-xl shadow-md bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
{/* <section className='hidden lg:block mb-5 py-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
<MenuButtonGroup allowCollapse={true} />
<div className='px-5 pt-2'>
<SearchInput currentTag={currentTag} currentSearch={currentSearch} />
</div>
</section>
</section> */}
<section className="rounded-xl shadow-md mb-5 py-4 px-2 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
<section className=" mb-5 py-4 px-2 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
{/* 展示广告 */}
<ins
className="adsbygoogle"
@@ -72,21 +62,36 @@ const SideAreaRight = ({
></ins>
</section>
<Analytics postCount={postCount}/>
{/* <Analytics postCount={postCount}/> */}
<div className="sticky top-8">
{showToc && (
<section className='pb-10 mb-5 rounded-xl shadow-md bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<div className='border-b text-center text-2xl bg-white text-black rounded-t-xl dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
{/* {showToc && (
<section className='pb-10 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
<div className='border-b text-center text-2xl bg-white 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} targetRef={targetRef} />
</section>
)}
)} */}
{/* 分类 */}
{categories && (
<section className=' py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
<div className='text-sm px-5 mb-2 flex flex-nowrap justify-between font-light'>
<div className='pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
<Link href='/category' passHref>
<a 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} />
</a>
</Link>
</div>
<CategoryGroup currentCategory={currentCategory} categories={categories} />
</section>
)}
{/* 最新文章 */}
{posts && (
<section className="rounded-xl shadow-md py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
<section className=" py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
<div className="text-sm pb-2 px-5 flex flex-nowrap justify-between">
<div className="font-light text-gray-600 dark:text-gray-200">
<FontAwesomeIcon icon={faArchive} className="mr-2" />
@@ -98,13 +103,13 @@ const SideAreaRight = ({
</section>
)}
{/* <section className="rounded-xl shadow-md py-4 px-5 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
{/* <section className=" py-4 px-5 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
<SearchInput currentTag={currentTag} currentSearch={currentSearch}/>
</section> */}
{/* 标签云 */}
{tags && (
<section className="rounded-xl shadow-md py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
{tags && (
<section className=" py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
<div className="text-sm pb-1 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200">
<div className="text-gray-600 dark:text-gray-200">
<FontAwesomeIcon icon={faTags} className="mr-2" />
@@ -121,22 +126,8 @@ const SideAreaRight = ({
<TagGroups tags={tags} currentTag={currentTag} />
</div>
</section>
)}
)}
{/* 分类 */}
{categories && (
<section className='rounded-xl shadow-md py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<div className='text-sm px-5 mb-2 flex flex-nowrap justify-between font-light'>
<div className='pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
<Link href='/category' passHref>
<a 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} />
</a>
</Link>
</div>
<CategoryGroup currentCategory={currentCategory} categories={categories} />
</section>
)}
</div>
</>
)

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 w-66 space-y-3'>
<div id='tags-group' className='dark:border-gray-600 w-66 space-y-2'>
{
tags.map(tag => {
const selected = tag.name === currentTag

8
components/TagItemMini.js
View File

@@ -4,12 +4,12 @@ import Link from 'next/link'
const TagItemMini = ({ tag, selected = false }) => {
return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`} passHref>
<a className={`cursor-pointer inline-block rounded hover:bg-blue-500 hover:text-white duration-200
mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white
<a className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200
mr-2 py-0.5 px-1 text-xs whitespace-nowrap dark:hover:text-white
${selected
? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-gray-900'
: `text-gray-600 dark:text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background `}` }>
<div>{selected && <FontAwesomeIcon icon={faTag} className='mr-1'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
: `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-600 dark:text-gray-300 `}` }>
<div className='font-light'>{selected && <FontAwesomeIcon icon={faTag} className='mr-1'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
</a>
</Link>
}

6
components/Toc.js
View File

@@ -55,16 +55,16 @@ const Toc = ({ toc, targetRef }) => {
<div className='w-full'>
<Progress targetRef={targetRef}/>
</div>
<nav className=' dark:text-gray-300 bg-white dark:bg-gray-800 overflow-y-auto scroll-hidden p-6'>
<nav className=' dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800 overflow-y-auto scroll-hidden p-6'>
{toc.map((tocItem) => {
const id = uuidToId(tocItem.id)
return (
<a
key={id}
href={`#${id}`}
className={`notion-table-of-contents-item duration-300 transform font-mono
className={`notion-table-of-contents-item duration-300 transform font-light
notion-table-of-contents-item-indent-level-${tocItem.indentLevel}
${activeSection === id && ' font-bold text-blue-600 dark:text-blue-400'}`}
${activeSection === id && ' font-bold text-gray-600 dark:text-gray-300'}`}
>
<span
style={{

22
components/TopNav.js
View File

@@ -1,9 +1,11 @@
import { useRef } from 'react'
import SideBarDrawer from '@/components/SideBarDrawer'
import BLOG from '@/blog.config'
import Link from 'next/link'
import Image from 'next/image'
import SideBarDrawer from '@/components/SideBarDrawer'
import { useGlobal } from '@/lib/global'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import { useRef } from 'react'
import Image from 'next/image'
import { faBars } from '@fortawesome/free-solid-svg-icons'
const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory }) => {
const drawer = useRef()
@@ -14,11 +16,15 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory })
<SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
{/* 导航栏 */}
<div id='sticky-nav' className='flex fixed md:relative w-full top-0 z-20 transform duration-500'>
<div id='sticky-nav' className='flex fixed lg:relative w-full top-0 z-20 transform duration-500'>
<div className='w-full flex justify-between items-center p-4 glassmorphism'>
{/* 左侧LOGO 标题 */}
<div className='flex flex-none flex-grow-0'>
<div className='relative w-10' ><Image
<div onClick={() => { drawer.current.handleSwitchSideDrawerVisible() }}
className='w-8 cursor-pointer dark:text-gray-300 block lg:hidden'>
<FontAwesomeIcon icon={faBars} size={'lg'}/>
</div>
<div className='relative w-10 hidden lg:block' ><Image
alt={BLOG.title}
layout='fill'
loading='lazy'
@@ -43,10 +49,6 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory })
<Link href='/about'>
<a>{locale.NAV.ABOUT}</a>
</Link>
<div onClick={() => { drawer.current.handleSwitchSideDrawerVisible() }}
className='cursor-pointer dark:text-gray-300 block md:hidden'>
{locale.NAV.SEARCH}
</div>
</div>
</div>
</div>