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

commerce 样式处理

Browse Source
This commit is contained in:
tangly1024.com
2023-11-03 18:54:11 +08:00
parent 8425de5bad
commit 62c7e1c0df
9 changed files with 88 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
themes/commerce/components/BlogPostCard.js
View File

@@ -1,49 +0,0 @@
import Link from 'next/link'
import React from 'react'
import CONFIG from '../config'
import { BlogPostCardInfo } from './BlogPostCardInfo'
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
// import Image from 'next/image'
const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
post.pageCoverThumbnail = siteInfo?.pageCover
}
const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
// const delay = (index % 2) * 200
return (
<div className={`${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
<div key={post.id}
data-aos="fade-up"
data-aos-easing="ease-in-out"
data-aos-duration="800"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
id='blog-post-card'
className={`group md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${CONFIG.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
overflow-hidden border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
{/* 文字内容 */}
<BlogPostCardInfo index={index} post={post} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary} />
{/* 图片封面 */}
{showPageCover && (
<div className="md:w-5/12 overflow-hidden">
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<LazyImage priority={index === 1} src={post?.pageCoverThumbnail} className='h-56 w-full object-cover object-center group-hover:scale-110 duration-500' />
</Link>
</div>
)}
</div>
</div>
)
}
export default BlogPostCard

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

@@ -1,4 +1,4 @@
import BlogPostCard from './BlogPostCard'
import ProductCard from './ProductCard'
import PaginationNumber from './PaginationNumber'
import BLOG from '@/blog.config'
import BlogPostListEmpty from './BlogPostListEmpty'
@@ -22,7 +22,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
{/* 文章列表 */}
<div className="space-y-6 px-2">
{posts?.map(post => (
<BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
<ProductCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
))}
</div>
{showPagination && <PaginationNumber page={page} totalPage={totalPage} />}

4
themes/commerce/components/BlogPostListScroll.js
View File

@@ -1,5 +1,5 @@
import BLOG from '@/blog.config'
import BlogPostCard from './BlogPostCard'
import ProductCard from './ProductCard'
import BlogPostListEmpty from './BlogPostListEmpty'
import { useGlobal } from '@/lib/global'
import React from 'react'
@@ -59,7 +59,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.PO
{/* 文章列表 */}
<div className="space-y-6 px-2">
{postsToShow.map(post => (
<BlogPostCard key={post.id} post={post} showSummary={showSummary} siteInfo={siteInfo}/>
<ProductCard key={post.id} post={post} showSummary={showSummary} siteInfo={siteInfo}/>
))}
</div>

12
themes/commerce/components/Footer.js
View File

@@ -14,7 +14,7 @@ const Footer = (props) => {
const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
const { categoryOptions, customMenu } = props
return <footer id="footer-wrapper" className='relative bg-[#2A2A2A] justify-center m-auto w-full leading-6 text-gray-300 text-sm p-10'>
return <footer id="footer-wrapper" className='relative bg-[#2A2A2A] justify-center w-full leading-6 text-gray-300 text-sm p-10'>
<div id='footer-container' className='w-full mx-auto max-w-screen-xl'>
@@ -23,7 +23,7 @@ const Footer = (props) => {
{/* 分类菜单 */}
<div>
<div className='font-bold mb-4 text-white'>{siteConfig('COMMERCE_TEXT_MENU_GROUP', 'Product Center')}</div>
<div className='font-bold mb-4 text-white'>{siteConfig('COMMERCE_TEXT_FOOTER_MENU_1', 'Product Center')}</div>
<nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
{categoryOptions.map(category => {
return (
@@ -41,7 +41,7 @@ const Footer = (props) => {
{/* 系统菜单 */}
<div>
<div className='font-bold mb-4 text-white'>{siteConfig('COMMERCE_TEXT_MENU_TITLE', 'About US')}</div>
<div className='font-bold mb-4 text-white'>{siteConfig('COMMERCE_TEXT_FOOTER_MENU_2', 'About US')}</div>
<nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
{customMenu.map(menu => {
return (
@@ -59,9 +59,9 @@ const Footer = (props) => {
</div>
{siteConfig('COMMERCE_TEXT_SHOP_LINKS') && <div className='border-l pl-4 border-gray-600 my-6 whitespace-pre-line text-left max-w-md'>
<div className='font-bold text-white'>{siteConfig('COMMERCE_TEXT_SHOP_TITLE')}</div>
<div>{siteConfig('COMMERCE_TEXT_SHOP_LINKS')}</div>
{siteConfig('COMMERCE_TEXT_FOOTER_LINKS') && <div className='md:border-l pl-4 border-gray-600 my-6 whitespace-pre-line text-left max-w-md'>
<div className='font-bold text-white'>{siteConfig('COMMERCE_TEXT_FOOTER_TITLE', 'Contact US')}</div>
<div>{siteConfig('COMMERCE_TEXT_FOOTER_LINKS')}</div>
</div>}
</div>

41
themes/commerce/components/PostHeader.js
View File

@@ -1,14 +1,8 @@
import Link from 'next/link'
import TagItemMini from './TagItemMini'
import { useGlobal } from '@/lib/global'
import BLOG from '@/blog.config'
import NotionIcon from '@/components/NotionIcon'
import LazyImage from '@/components/LazyImage'
import { formatDateFmt } from '@/lib/formatDate'
export default function PostHeader({ post, siteInfo }) {
const { locale } = useGlobal()
if (!post) {
return <></>
}
@@ -37,41 +31,6 @@ export default function PostHeader({ post, siteInfo }) {
<NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />{post.title}
</div>
<section className="flex-wrap shadow-text-md flex text-sm justify-center mt-4 text-white dark:text-gray-400 font-light leading-8">
<div className='flex justify-center dark:text-gray-200 text-opacity-70'>
{post?.type !== 'Page' && (
<>
<Link
href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
passHref
className="pl-1 mr-2 cursor-pointer hover:underline">
{locale.COMMON.POST_TIME}: {post?.publishDay}
</Link>
</>
)}
<div className="pl-1 mr-2">
{locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedDay}
</div>
</div>
{JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <div className="busuanzi_container_page_pv font-light mr-2">
<span className="mr-2 busuanzi_value_page_pv" />
{locale.COMMON.VIEWS}
</div>}
</section>
<div className='mt-4 mb-1'>
{post.tagItems && (
<div className="flex justify-center flex-nowrap overflow-x-auto">
{post.tagItems.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
</div>
)}
</div>
</div>
</header>
</div>

38
themes/commerce/components/ProductCard.js Normal file
View File

@@ -0,0 +1,38 @@
import Link from 'next/link'
import React from 'react'
import CONFIG from '../config'
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
// import Image from 'next/image'
/**
* 商品卡
*/
const ProductCard = ({ index, post, siteInfo }) => {
if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
post.pageCoverThumbnail = siteInfo?.pageCover
}
return (
<div className={`${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
<div key={post.id} className={'group flex flex-col space-y-2 justify-between border dark:border-black bg-white dark:bg-hexo-black-gray'}>
{/* 图片封面 */}
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div className="overflow-hidden m-2">
<LazyImage priority={index === 1} src={post?.pageCoverThumbnail} className='h-auto aspect-square w-full object-cover object-center group-hover:scale-110 duration-500' />
</div>
</Link>
<div className='text-center'>{post.title}</div>
</div>
</div>
)
}
export default ProductCard

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

@@ -1,5 +1,6 @@
import { siteConfig } from '@/lib/config'
import Link from 'next/link'
import ProductCard from './ProductCard'
/**
* 产品中心
@@ -7,17 +8,19 @@ import Link from 'next/link'
* @returns
*/
export default function ProductCenter(props) {
const { categoryOptions } = props
const { categoryOptions, allNavPages } = props
const posts = allNavPages.slice(0, parseInt(siteConfig('COMMERCE_HOME_POSTS_COUNT', 9)))
return <div className='w-full my-4 mx-4'>
<div className='w-full text-center text-4xl font-bold'>{siteConfig('TEXT_HOME_PRODUCT_CENTER', 'Product Center')}</div>
<div className='w-full text-center text-4xl font-bold'>{siteConfig('COMMERCE_TEXT_CENTER_TITLE', 'Product Center')}</div>
{siteConfig('COMMERCE_TEXT_CENTER_DESCRIPTION') && <div className='w-full text-center text-lg my-3 text-gray-500'>{siteConfig('COMMERCE_TEXT_CENTER_DESCRIPTION')}</div>}
<div className='flex'>
<div className='hidden md:block w-72 bg-white p-4 mx-2'>
<div className='hidden md:block w-72 mx-2'>
{/* 分类菜单 */}
<div>
<div className='font-bold mb-4 border-b-2 p-2 border-[#D2232A]'>{siteConfig('COMMERCE_TEXT_MENU_GROUP', 'Product Center')}</div>
<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 (
@@ -35,7 +38,15 @@ export default function ProductCenter(props) {
</div>
</div>
<div className='w-full border'>右侧产品列表</div>
<div className='w-full p-4 mx-2'>
{/* 文章列表 */}
<div className="grid md:grid-cols-3 grid-cols-2 gap-5">
{posts?.map(post => (
<ProductCard index={posts.indexOf(post)} key={post.id} post={post} />
))}
</div>
</div>
</div>
</div>
}

5
themes/commerce/components/RightFloatArea.js
View File

@@ -1,6 +1,5 @@
import throttle from 'lodash.throttle'
import { useCallback, useEffect, useState } from 'react'
import FloatDarkModeButton from './FloatDarkModeButton'
import JumpToTopButton from './JumpToTopButton'
/**
@@ -31,9 +30,9 @@ export default function RightFloatArea({ floatSlot }) {
}, [])
return (
<div className={(showFloatButton ? 'opacity-100 ' : 'invisible opacity-0') + ' duration-300 transition-all bottom-12 right-1 fixed justify-end z-20 text-white bg-red-500 dark:bg-hexo-black-gray rounded-sm'}>
<div className={(showFloatButton ? 'opacity-100 ' : 'invisible opacity-0') + ' duration-300 transition-all bottom-24 right-1 fixed justify-end z-20 text-white bg-red-500 dark:bg-hexo-black-gray'}>
<div className={'justify-center flex flex-col items-center cursor-pointer'}>
<FloatDarkModeButton />
{/* <FloatDarkModeButton /> */}
{floatSlot}
<JumpToTopButton />
</div>

43
themes/commerce/index.js
View File

@@ -19,12 +19,7 @@ import PostHeader from './components/PostHeader'
import JumpToCommentButton from './components/JumpToCommentButton'
import TocDrawer from './components/TocDrawer'
import TocDrawerButton from './components/TocDrawerButton'
import Comment from '@/components/Comment'
import NotionPage from '@/components/NotionPage'
import ArticleAdjacent from './components/ArticleAdjacent'
import ArticleCopyright from './components/ArticleCopyright'
import ArticleRecommend from './components/ArticleRecommend'
import ShareBar from '@/components/ShareBar'
import TagItemMini from './components/TagItemMini'
import Link from 'next/link'
import SlotBar from './components/SlotBar'
@@ -34,6 +29,7 @@ import replaceSearchResult from '@/components/Mark'
import { siteConfig } from '@/lib/config'
import TopNavBar from './components/TopNavBar'
import ProductCenter from './components/ProductCenter'
import LazyImage from '@/components/LazyImage'
/**
* 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -51,7 +47,7 @@ const LayoutBase = props => {
})
return (
<div id='theme-commerce'>
<div id='theme-commerce' className='flex flex-col min-h-screen justify-between'>
{/* 网页SEO */}
<CommonHead meta={meta} />
<Style />
@@ -124,7 +120,7 @@ const LayoutIndex = (props) => {
return <LayoutBase headerSlot={headerSlot} {...props}>
{/* 产品中心 */}
<ProductCenter {...props}/>
<ProductCenter {...props} />
{/* 企业介绍 + 联系 */}
{notice && <div className='w-full my-4 mx-4'>
@@ -213,6 +209,7 @@ const LayoutSlug = props => {
const drawerRight = useRef(null)
const targetRef = isBrowser ? document.getElementById('article-wrapper') : null
const headerImage = post?.pageCover ? post.pageCover : siteConfig('HOME_BANNER_IMAGE')
const floatSlot = <>
{post?.toc?.length > 1 && <div className="block lg:hidden">
@@ -227,33 +224,35 @@ const LayoutSlug = props => {
return (
<LayoutBase {...props} headerSlot={<PostHeader {...props} />} showCategory={false} showTag={false} floatSlot={floatSlot} >
<div className="w-full lg:hover:shadow lg:border rounded-t-xl lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article">
<div className="w-full max-w-screen-xl mx-auto lg:hover:shadow lg:border lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article">
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && <div id="article-wrapper" className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 ">
{/* 预览区块 */}
<div className='flex md:flex-row flex-col w-full justify-between py-4' >
<div id='left-img' className='w-1/2 flex justify-center items-center border'>
<LazyImage src={headerImage} className='m-auto w-full h-auto aspect-square object-cover object-center' />
</div>
<div id='info-right' className='w-1/2 p-4'>
<div>{post?.title}</div>
<div>{post?.summary}</div>
</div>
</div>
<hr className='border-2 border-[#D2232A]'/>
<article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased overflow-y-hidden" >
{/* Notion文章主体 */}
<section className='px-5 justify-center mx-auto max-w-2xl lg:max-w-full'>
{post && <NotionPage post={post} />}
</section>
{/* 分享 */}
<ShareBar post={post} />
{post?.type === 'Post' && <>
<ArticleCopyright {...props} />
<ArticleRecommend {...props} />
<ArticleAdjacent {...props} />
</>}
</article>
<div className='pt-4 border-dashed'></div>
{/* 评论互动 */}
<div className="duration-200 overflow-x-auto bg-white dark:bg-hexo-black-gray px-3">
<Comment frontMatter={post} />
</div>
</div>}
</div>