允许封面图为空

This commit is contained in:
tangly1024.com
2023-02-03 13:09:37 +08:00
parent a947be01e5
commit d93f08fe11
9 changed files with 42 additions and 34 deletions

View File

@@ -4,8 +4,14 @@ import React from 'react'
import CONFIG_FUKA from '../config_fuka'
import Card from './Card'
const BlogCard = ({ post, showSummary }) => {
const BlogCard = ({ post, showSummary, siteInfo }) => {
const showPreview = CONFIG_FUKA.POST_LIST_PREVIEW && post.blockMap
// matery 主题默认强制显示图片
if (post && !post.page_cover) {
post.page_cover = siteInfo?.pageCover
}
const showPageCover = CONFIG_FUKA.POST_LIST_COVER && post?.page_cover
return (
<Card className="w-full lg:max-w-sm p-2 h-full overflow-auto">
<div
@@ -30,14 +36,14 @@ const BlogCard = ({ post, showSummary }) => {
)}
</div>
{CONFIG_FUKA.POST_LIST_COVER && post?.page_cover && (
{showPageCover && (
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div className="h-40 w-full relative duration-200 cursor-pointer transform overflow-hidden">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={post?.page_cover}
alt={post.title}
className="hover:scale-125 transform duration-500"
className="w-full hover:scale-125 transform duration-500"
></img>
{/* <Image className='hover:scale-105 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
</div>
@@ -45,7 +51,7 @@ const BlogCard = ({ post, showSummary }) => {
)}
</div>
</Card>
);
)
}
export default BlogCard

View File

@@ -12,7 +12,7 @@ import PaginationSimple from './PaginationSimple'
* @returns {JSX.Element}
* @constructor
*/
const BlogListPage = ({ page = 1, posts = [], postCount }) => {
const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
const showNext = page < totalPage
const [colCount, changeCol] = useState(1)
@@ -44,7 +44,7 @@ const BlogListPage = ({ page = 1, posts = [], postCount }) => {
<div id="container" style={{ columnCount: colCount }}>
{posts?.map(post => (
<div key={post.id} className='justify-center flex' style={{ breakInside: 'avoid' }}>
<BlogCard key={post.id} post={post} />
<BlogCard key={post.id} post={post} siteInfo={siteInfo} />
</div>
))}
</div>

View File

@@ -13,7 +13,7 @@ import throttle from 'lodash.throttle'
* @constructor
*/
const BlogListScroll = props => {
const { posts = [] } = props
const { posts = [], siteInfo } = props
const [colCount, changeCol] = React.useState(1)
const { locale } = useGlobal()
@@ -73,15 +73,13 @@ const BlogListScroll = props => {
<div style={{ columnCount: colCount }}>
{postsToShow?.map(post => (
<div key={post.id} className='justify-center flex' style={{ breakInside: 'avoid' }}>
<BlogCard key={post.id} post={post} />
<BlogCard key={post.id} post={post} siteInfo={siteInfo} />
</div>
))}
</div>
<div
onClick={handleGetMore}
className="w-full my-4 py-4 text-center cursor-pointer "
>
<div className="w-full my-4 py-4 text-center cursor-pointer "
onClick={handleGetMore}>
{' '}
{hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
</div>

View File

@@ -7,7 +7,7 @@ import NotionPage from '@/components/NotionPage'
const BlogPostCard = ({ post, showSummary, index }) => {
const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap
const showPageCover = CONFIG_HEXO.POST_LIST_COVER
const showPageCover = CONFIG_HEXO.POST_LIST_COVER && post?.page_cover
return (
<div
key={post.id}

View File

@@ -4,8 +4,13 @@ import React from 'react'
import TagItemMini from './TagItemMini'
import CONFIG_MATERY from '../config_matery'
const BlogPostCard = ({ post, showSummary }) => {
const BlogPostCard = ({ post, showSummary, siteInfo }) => {
const showPreview = CONFIG_MATERY.POST_LIST_PREVIEW && post.blockMap
// matery 主题默认强制显示图片
if (post && !post.page_cover) {
post.page_cover = siteInfo.pageCover
}
const showPageCover = CONFIG_MATERY.POST_LIST_COVER && !showPreview && post?.page_cover
return (
<div
data-aos="zoom-in"
@@ -19,7 +24,7 @@ const BlogPostCard = ({ post, showSummary }) => {
<div key={post.id} className="flex flex-col h-96 justify-between">
{/* 头部图片 填充卡片 */}
{CONFIG_MATERY.POST_LIST_COVER && !showPreview && post?.page_cover && (
{showPageCover && (
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div className="flex flex-grow w-full relative duration-200 bg-black rounded-t-md cursor-pointer transform overflow-hidden">
{/* eslint-disable-next-line @next/next/no-img-element */}

View File

@@ -11,7 +11,7 @@ import PaginationSimple from './PaginationSimple'
* @returns {JSX.Element}
* @constructor
*/
const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
const showPagination = postCount >= BLOG.POSTS_PER_PAGE
if (!posts || posts.length === 0 || page > totalPage) {
@@ -23,7 +23,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
{/* 文章列表 */}
<div className="px-4 pt-4 xl:columns-3 md:columns-2 pb-24" >
{posts.map(post => (
<BlogPostCard key={post.id} post={post} />
<BlogPostCard key={post.id} post={post} siteInfo={siteInfo} />
))}
</div>
{showPagination && <PaginationSimple page={page} totalPage={totalPage} />}

View File

@@ -14,7 +14,7 @@ import { getListByPage } from '@/lib/utils'
* @returns {JSX.Element}
* @constructor
*/
const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_MATERY.POST_LIST_SUMMARY }) => {
const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_MATERY.POST_LIST_SUMMARY, siteInfo }) => {
const postsPerPage = BLOG.POSTS_PER_PAGE
const [page, updatePage] = React.useState(1)
const postsToShow = getListByPage(posts, page, postsPerPage)
@@ -58,7 +58,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_MA
{/* 文章列表 */}
<div className='flex flex-wrap space-y-1 lg:space-y-4 px-2'>
{postsToShow.map(post => (
<BlogPostCard key={post.id} post={post} showSummary={showSummary}/>
<BlogPostCard key={post.id} post={post} showSummary={showSummary} siteInfo={siteInfo}/>
))}
</div>