d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-30 07:26:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature:

Browse Source 
标签加入颜色
This commit is contained in:
tangly1024
2021-11-30 17:48:57 +08:00
parent f5739dc51a
commit 1e24789a24
16 changed files with 217 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/BlogPostCard.js
View File

@@ -3,7 +3,7 @@ import TagItemMini from '@/components/TagItemMini'
import Link from 'next/link'
import React from 'react'
const BlogPostCard = ({ post }) => {
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'>
@@ -25,12 +25,14 @@ const BlogPostCard = ({ post }) => {
<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 underline hover:scale-105 transform duration-200'><i
className='fa fa-folder-open-o mr-1' />{post.category}</div>
<div
className='cursor-pointer dark:text-gray-200 text-gray-500 text-sm py-1.5 mr-1 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.tags.map(tag => (<TagItemMini key={tag} tag={tag} />))}</div>
<div className='flex ml-1'> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
</div>
</div>
</div>

2
components/BlogPostListScroll.js
View File

@@ -56,7 +56,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
{/* 文章列表 */}
<div className='flex flex-wrap'>
{postsToShow.map(post => (
<BlogPostCard key={post.id} post={post} />
<BlogPostCard key={post.id} post={post} tags={tags}/>
))}
</div>

2
components/TagGroups.js
View File

@@ -14,7 +14,7 @@ const TagGroups = ({ tags, currentTag }) => {
{
tags.map(tag => {
const selected = tag.name === currentTag
return <TagItemMini key={tag.name} tag={tag.name} selected={selected} count={tag.count} />
return <TagItemMini key={tag.name} tag={tag} selected={selected} />
})
}
</div>

12
components/TagItemMini.js
View File

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