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

分类页面

Browse Source
This commit is contained in:
tangly1024.com
2023-11-03 19:06:23 +08:00
parent 62c7e1c0df
commit d9ef9a31c9
5 changed files with 43 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/commerce/components/BlogPostListPage.js
View File

@@ -20,7 +20,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
return (
<div id="container" className='w-full'>
{/* 文章列表 */}
<div className="space-y-6 px-2">
<div className="py-4 gap-4 grid grid-cols-3">
{posts?.map(post => (
<ProductCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
))}

27
themes/commerce/components/ProductCategories.js Normal file
View File

@@ -0,0 +1,27 @@
import { siteConfig } from '@/lib/config'
import Link from 'next/link'
export default function ProductCategories(props) {
const { categoryOptions } = props
return <div className='hidden md:block w-72 mx-2'>
{/* 分类菜单 */}
<div className='bg-white p-4'>
<div className='font-bold text-lg mb-4 border-b-2 py-2 border-[#D2232A]'>{siteConfig('COMMERCE_TEXT_MENU_GROUP', 'Product Categories')}</div>
<nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
{categoryOptions.map(category => {
return (
<Link
key={`${category.name}`}
title={`${category.name}`}
href={`/category/${category.name}`}
className='hover:text-[#D2232A]'
passHref>
{category.name}
</Link>
)
})}
</nav>
</div>
</div>
}

25
themes/commerce/components/ProductCenter.js
View File

@@ -1,6 +1,6 @@
import { siteConfig } from '@/lib/config'
import Link from 'next/link'
import ProductCard from './ProductCard'
import ProductCategories from './ProductCategories'
/**
* 产品中心
@@ -8,7 +8,7 @@ import ProductCard from './ProductCard'
* @returns
*/
export default function ProductCenter(props) {
const { categoryOptions, allNavPages } = props
const { allNavPages } = props
const posts = allNavPages.slice(0, parseInt(siteConfig('COMMERCE_HOME_POSTS_COUNT', 9)))
return <div className='w-full my-4 mx-4'>
@@ -17,26 +17,7 @@ export default function ProductCenter(props) {
<div className='flex'>
<div className='hidden md:block w-72 mx-2'>
{/* 分类菜单 */}
<div className='bg-white p-4'>
<div className='font-bold text-lg mb-4 border-b-2 py-2 border-[#D2232A]'>{siteConfig('COMMERCE_TEXT_MENU_GROUP', 'Product Categories')}</div>
<nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
{categoryOptions.map(category => {
return (
<Link
key={`${category.name}`}
title={`${category.name}`}
href={`/category/${category.name}`}
className='hover:text-[#D2232A]'
passHref>
{category.name}
</Link>
)
})}
</nav>
</div>
</div>
<ProductCategories {...props} />
<div className='w-full p-4 mx-2'>
{/* 文章列表 */}

8
themes/commerce/components/SlotBar.js
View File

@@ -9,15 +9,15 @@ export default function SlotBar(props) {
const { tag, category } = props
if (tag) {
return <div className="cursor-pointer px-3 py-2 mb-2 font-light hover:text-red-700 dark:hover:text-red-400 transform dark:text-white">
return <div className="cursor-pointer px-3 py-2 mb-4 font-light hover:text-red-700 dark:hover:text-red-400 transform dark:text-white">
<Link key={tag} href={`/tag/${encodeURIComponent(tag)}`} passHref
className={'cursor-pointer inline-block rounded duration-200 mr-2 py-0.5 px-1 text-xl whitespace-nowrap '}>
<div className='font-light dark:text-gray-400 dark:hover:text-white'> #{tag} </div>
<div className='border-b-2 border-[#D2232A] font-light dark:text-gray-400 dark:hover:text-white'> #{tag} </div>
</Link>
</div>
} else if (category) {
return <div className="cursor-pointer text-lg px-5 py-1 mb-2 font-light hover:text-red-700 dark:hover:text-red-400 transform dark:text-white">
<i className="mr-1 far fa-folder-open" /> {category}
return <div className="cursor-pointer text-lg px-5 mb-4 font-light hover:text-red-700 dark:hover:text-red-400 transform dark:text-white">
<span className='border-b-2 pb-4 font-bold border-[#D2232A]'>{category}</span>
</div>
}
return <></>

12
themes/commerce/index.js
View File

@@ -30,6 +30,7 @@ import { siteConfig } from '@/lib/config'
import TopNavBar from './components/TopNavBar'
import ProductCenter from './components/ProductCenter'
import LazyImage from '@/components/LazyImage'
import ProductCategories from './components/ProductCategories'
/**
* 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -139,9 +140,12 @@ const LayoutIndex = (props) => {
* @returns
*/
const LayoutPostList = (props) => {
return <LayoutBase {...props} className='pt-8'>
<SlotBar {...props} />
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
const slotRight = <ProductCategories {...props}/>
return <LayoutBase {...props} slotRight={slotRight}>
<div className='bg-white border-[#D2232A] p-4'>
<SlotBar {...props} />
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
</div>
</LayoutBase>
}
@@ -242,7 +246,7 @@ const LayoutSlug = props => {
</div>
</div>
<hr className='border-2 border-[#D2232A]'/>
<hr className='border-2 border-[#D2232A]' />
<article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased overflow-y-hidden" >