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

feature:

Browse Source 
主要菜单加入图标
This commit is contained in:
tangly1024
2021-12-02 10:54:00 +08:00
parent f7dbd26b70
commit 2a105d71f3
8 changed files with 29 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/CategoryList.js
View File

@@ -6,7 +6,7 @@ const CategoryList = ({ currentCategory, categories }) => {
return <></> return <></>
} }
return <ul className='flex py-1 space-x-3'> return <ul className='flex py-1 space-x-3'>
<li className='w-10 py-2 dark:text-gray-200'>分类:</li> <li className='w-16 py-2 dark:text-gray-200'><i className='fa fa-th-list mr-2'/>分类:</li>
{Object.keys(categories).map(category => { {Object.keys(categories).map(category => {
const selected = category === currentCategory const selected = category === currentCategory
return ( return (

30
components/SideBar.js
View File

@@ -45,8 +45,12 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{categories && ( {categories && (
<section className='mt-2'> <section className='mt-2'>
<div className='text-sm font-bold py-2 px-5 flex flex-nowrap justify-between'> <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'>{locale.COMMON.CATEGORY}</div> <div className='text-black font-bold dark:text-gray-200'><i className='fa fa-th-list mr-4'/>{locale.COMMON.CATEGORY}</div>
<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} 》 </div></Link></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> </div>
<CategoryGroup currentCategory={currentCategory} categories={categories} /> <CategoryGroup currentCategory={currentCategory} categories={categories} />
</section> </section>
@@ -56,8 +60,12 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{posts && ( {posts && (
<section className='mt-3'> <section className='mt-3'>
<div className='text-sm font-bold py-2 px-5 flex flex-nowrap justify-between'> <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'>{locale.COMMON.LATEST_POSTS}</div> <div className='text-black font-bold dark:text-gray-200'><i className='fa fa-newspaper-o mr-4'/>{locale.COMMON.LATEST_POSTS}</div>
<div><Link href='/blogs'><div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>{locale.COMMON.MORE} 》 </div></Link></div> <Link href='/blogs'>
<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> </div>
<LatestPostsGroup posts={posts} /> <LatestPostsGroup posts={posts} />
</section> </section>
@@ -67,12 +75,16 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{tags && ( {tags && (
<section className='mt-3'> <section className='mt-3'>
<div className='text-sm font-bold py-2 px-5 flex flex-nowrap justify-between'> <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'>{locale.COMMON.TAGS}</div> <div className='text-black font-bold dark:text-gray-200'><i className='fa fa-tags mr-4'/>{locale.COMMON.TAGS}</div>
<div><Link href='/tag'><div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>{locale.COMMON.MORE} 》</div></Link></div> <Link href='/tag'>
</div> <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
<div className='px-5'> {locale.COMMON.MORE} <i className='fa fa-angle-double-right'/>
<TagGroups tags={tags} currentTag={currentTag} /> </div>
</Link>
</div> </div>
<div className='px-5'>
<TagGroups tags={tags} currentTag={currentTag} />
</div>
</section> </section>
)} )}
</div> </div>

1
components/TagItem.js
View File

@@ -13,7 +13,6 @@ const TagItem = ({ tag, selected }) => {
: ' text-gray-600'}`} : ' text-gray-600'}`}
> >
<a> <a>
<i className='fa fa-tag mr-1'/>
{`${tag.name} `} {tag.count ? `(${tag.count})` : ''} {`${tag.name} `} {tag.count ? `(${tag.count})` : ''}
</a> </a>
</li> </li>

4
components/TagItemMini.js
View File

@@ -3,11 +3,11 @@ import Link from 'next/link'
const TagItemMini = ({ tag, selected = false }) => { const TagItemMini = ({ tag, selected = false }) => {
return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}> return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}>
<div className={`cursor-pointer inline-block rounded hover:bg-gray-500 duration-200 <div className={`cursor-pointer inline-block rounded hover:bg-gray-500 duration-200
mr-2 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:hover:text-white mr-2 my-1 py-1 px-2 font-medium font-light text-xs whitespace-nowrap dark:hover:text-white
${selected ${selected
? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-gray-900' ? '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 hover:text-white dark:hover:bg-gray-600 dark:border-gray-600 notion-${tag.color}_background `}` }> : `text-gray-600 dark:text-gray-600 hover:shadow-xl hover:text-white dark:hover:bg-gray-600 dark:border-gray-600 notion-${tag.color}_background `}` }>
<div> <i className='fa fa-tag mr-2 py-0.5'/>{tag.name + (tag.count ? `(${tag.count})` : '')} </div> <div>{tag.name + (tag.count ? `(${tag.count})` : '')} </div>
</div> </div>
</Link> </Link>
} }

2
components/TagList.js
View File

@@ -14,7 +14,7 @@ const TagList = ({ tags, currentTag }) => {
return <></> return <></>
} }
return <ul className='flex py-1 space-x-3'> return <ul className='flex py-1 space-x-3'>
<li className='w-10 py-2 dark:text-gray-200'>标签:</li> <li className='w-16 py-2 dark:text-gray-200'><i className='fa fa-tags mr-2'/>标签:</li>
{tags.map(tag => { {tags.map(tag => {
const selected = tag.name === currentTag const selected = tag.name === currentTag
return <TagItem key={tag.name} tag={tag} selected={selected}/> return <TagItem key={tag.name} tag={tag} selected={selected}/>

2
pages/blogs/index.js
View File

@@ -46,7 +46,7 @@ const Index = ({ allPosts, tags, categories }) => {
<BaseLayout meta={meta} tags={tags} categories={categories}> <BaseLayout meta={meta} tags={tags} categories={categories}>
<div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16'> <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16'>
<StickyBar> <StickyBar>
<div className='py-4 text-lg lg:mx-14'>{locale.COMMON.LATEST_POSTS}</div> <div className='py-4 text-lg lg:mx-14'><i className='fa fa-newspaper-o mr-4'/>{locale.COMMON.LATEST_POSTS}</div>
</StickyBar> </StickyBar>
<BlogPostListScroll posts={postsSortByDate} tags={tags} /> <BlogPostListScroll posts={postsSortByDate} tags={tags} />
</div> </div>

2
pages/category/index.js
View File

@@ -18,7 +18,7 @@ export default function Category ({ tags, allPosts, categories }) {
return <BaseLayout meta={meta} totalPosts={allPosts} tags={tags}> return <BaseLayout meta={meta} totalPosts={allPosts} tags={tags}>
<div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-14'> <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-14'>
<div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'> <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'>{locale.COMMON.TAGS}:</div> <div className='dark:text-gray-200 mb-5'><i className='fa fa-th-list mr-4'/>{locale.COMMON.CATEGORY}:</div>
<div id='category-list' className='duration-200 flex flex-wrap'> <div id='category-list' className='duration-200 flex flex-wrap'>
{Object.keys(categories).map(category => { {Object.keys(categories).map(category => {
return <Link key={category} href={`/category/${category}`}> return <Link key={category} href={`/category/${category}`}>

3
pages/tag/index.js
View File

@@ -4,6 +4,7 @@ import BaseLayout from '@/layouts/BaseLayout'
import TagItem from '@/components/TagItem' import TagItem from '@/components/TagItem'
import { getNotionPageData } from '@/lib/notion/getNotionData' import { getNotionPageData } from '@/lib/notion/getNotionData'
import { useGlobal } from '@/lib/global' import { useGlobal } from '@/lib/global'
import React from 'react'
export default function Tag ({ tags, allPosts, categories }) { export default function Tag ({ tags, allPosts, categories }) {
const { locale } = useGlobal() const { locale } = useGlobal()
@@ -15,7 +16,7 @@ export default function Tag ({ tags, allPosts, categories }) {
return <BaseLayout meta={meta} categories={categories} totalPosts={allPosts}> return <BaseLayout meta={meta} categories={categories} totalPosts={allPosts}>
<div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-14'> <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-14'>
<div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'> <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'>{locale.COMMON.TAGS}:</div> <div className='dark:text-gray-200 mb-5'><i className='fa fa-tags mr-4'/>{locale.COMMON.TAGS}:</div>
<div id='tags-list' className='duration-200 flex flex-wrap'> <div id='tags-list' className='duration-200 flex flex-wrap'>
{ {
tags.map(tag => { tags.map(tag => {