d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-22 15:09:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature：

Browse Source 
新增标签汇总页
This commit is contained in:
tangly1024
2021-11-11 17:01:17 +08:00
parent 635735c4e5
commit fcb4409af8
9 changed files with 71 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/BlogPostListScroll.js
View File

@@ -55,19 +55,19 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
{currentCategory && (
<div className='w-full p-1 bg-gray-100 dark:bg-gray-700'>
<div className='cursor-pointer py-1.5 mr-2 dark:text-gray-300 hover:underline'><i className='fa fa-folder-open-o mr-1'/>{currentCategory}</div>
<div className='cursor-pointer p-1.5 mr-2 dark:text-gray-300 hover:underline'><i className='fa fa-folder-open-o mr-1'/>{currentCategory}</div>
</div>
)}
{currentSearch && (
<div className='w-full p-1 bg-gray-100 dark:bg-gray-700'>
<div className='cursor-pointer py-1.5 mr-2 dark:text-gray-300 hover:underline'><i className='fa fa-search mr-1'/>关键字：{currentSearch}</div>
<div className='cursor-pointer p-1.5 mr-2 dark:text-gray-300 hover:underline'><i className='fa fa-search mr-1'/>关键字：{currentSearch}</div>
</div>
)}
{currentTag && (
<div className='w-full p-1 bg-gray-100 dark:bg-gray-700 flex'>
<div className='cursor-pointer py-1.5 mr-2 hover:underline bg-gray-200 dark:bg-gray-400 px-2 rounded'><i className='fa fa-tag mr-1 '/> {currentTag}</div>
<div className='cursor-pointer p-1.5 mr-2 hover:underline bg-gray-200 dark:bg-gray-500 dark:text-gray-200 px-2 rounded'><i className='fa fa-tag mr-1 '/> {currentTag}</div>
</div>
)}

2
components/PostsCategories.js
View File

@@ -8,7 +8,7 @@ const PostsCategories = ({ currentCategory, categories }) => {
<div className='w-32'>文章分类</div>
</section>
<div>
<div id='category-list' className='duration-500 dark:border-gray-600 dark:bg-gray-800 w-66'>
<div id='category-list' className='dark:border-gray-600 dark:bg-gray-800 w-66'>
{Object.keys(categories).map(category => {
return <Link key={category} href={`/category/${category}`}>
<div className={(currentCategory === category ? 'bg-gray-200 dark:bg-black' : '') + ' dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}><i className='fa fa-folder-open-o mr-4'/>{category}({categories[category]})</div>

6
components/SearchInput.js
View File

@@ -5,7 +5,7 @@ import { useRef, useState } from 'react'
const SearchInput = ({ currentTag, currentSearch }) => {
const { locale } = useGlobal()
const [searchKey, setSearchKey] = useState(currentSearch)
const [onLoading,setLoadingState] = useState(false)
const [onLoading, setLoadingState] = useState(false)
const router = useRouter()
const searchInputRef = useRef()
const handleSearch = (key) => {
@@ -41,7 +41,7 @@ const SearchInput = ({ currentTag, currentSearch }) => {
ref={searchInputRef}
type='text'
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'pl-2 w-full transition duration-200 leading-10 border-gray-300 bg-white text-black dark:bg-gray-900 dark:text-white'}
className={'pl-2 w-full transition leading-10 border-gray-300 bg-white text-black dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={currentSearch}
@@ -50,7 +50,7 @@ const SearchInput = ({ currentTag, currentSearch }) => {
<div className='py-4 px-4 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
onClick={() => { handleSearch(searchKey) }}>
<i className={`fa ${onLoading ? 'fa-spinner animate-spin':'fa-search'} text-black cursor-pointer`}/>
<i className={`fa ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'} text-black cursor-pointer`}/>
</div>
</div>
}

8
components/SideBar.js
View File

@@ -6,7 +6,7 @@ import LatestPosts from '@/components/LatestPosts'
import PostsCategories from '@/components/PostsCategories'
import Toc from '@/components/Toc'
import SearchInput from '@/components/SearchInput'
import DarkModeButton from '@/components/DarkModeButton'
import Link from 'next/link'
/**
* 侧边栏
@@ -20,7 +20,6 @@ import DarkModeButton from '@/components/DarkModeButton'
* @constructor
*/
const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory }) => {
return <aside id='sidebar' className='pt-10 bg-white dark:bg-gray-800 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
<section>
<InfoCard />
@@ -57,8 +56,9 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory })
{tags && (
<section className='mt-2'>
<section
className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
<div className='w-32'>标签</div>
className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap justify-between'>
<div>标签</div>
<div><Link href='/tag'><div className='hover:underline cursor-pointer opacity-50'>更多标签</div></Link></div>
</section>
<div className='px-5'>
<TagList tags={tags} currentTag={currentTag} />

4
components/TagItem.js
View File

@@ -1,10 +1,10 @@
import Link from 'next/link'
const TagItem = ({ tag }) => (
const TagItem = ({ tag, count }) => (
<Link href={`/tag/${encodeURIComponent(tag)}`}>
<div className="cursor-pointer hover:shadow hover:border-gray-600 rounded-md dark:border-gray-500 border hover:scale-105 hover:bg-gray-500 bg-gray-100 hover:text-white duration-200 mr-1 p-2 leading-none text-sm
dark:bg-gray-500 dark:text-gray-100 dark:hover:bg-black">
<div className='whitespace-nowrap'> <i className='fa fa-tag mr-1 '/> {tag}</div>
<span className='whitespace-nowrap'> <i className='fa fa-tag mr-1 '/> {tag}({count})</span>
</div>
</Link>
)

2
components/TagItemMini.js
View File

@@ -2,7 +2,7 @@ import Link from 'next/link'
const TagItemMini = ({ tag, selected = false, count }) => {
return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag)}`}>
<div className={`cursor-pointer inline-block border rounded hover:bg-gray-300 duration-200
<div className={`cursor-pointer inline-block border rounded hover:bg-gray-300
mr-1 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:text-gray-300 dark:hover:bg-gray-500
${selected
? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800'

8
components/TagList.js
View File

@@ -12,10 +12,10 @@ const TagList = ({ tags, currentTag }) => {
return (
<div id='tags-list' className='duration-500 dark:border-gray-600 dark:bg-gray-800 w-66'>
{
tags.map(tag=>{
const selected = tag.name === currentTag
return <TagItemMini key={tag.name} tag={tag.name} selected={selected} count={tag.count}/>
})
tags.map(tag => {
const selected = tag.name === currentTag
return <TagItemMini key={tag.name} tag={tag.name} selected={selected} count={tag.count} />
})
}
</div>
)