HEO 首页支持配置单列显示博客

This commit is contained in:
tangly1024.com
2024-08-28 12:46:25 +08:00
parent 9535807fbe
commit 1750d189ad
4 changed files with 43 additions and 8 deletions

View File

@@ -1,11 +1,14 @@
import LazyImage from '@/components/LazyImage'
import NotionIcon from '@/components/NotionIcon'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import CONFIG from '../config'
import TagItemMini from './TagItemMini'
const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
const { NOTION_CONFIG } = useGlobal()
const showPreview =
siteConfig('HEO_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
if (
@@ -19,18 +22,34 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
siteConfig('HEO_POST_LIST_COVER', null, CONFIG) &&
post?.pageCoverThumbnail &&
!showPreview
const POST_TWO_COLS = siteConfig(
'HEO_HOME_POST_TWO_COLS',
null,
NOTION_CONFIG
)
return (
<article
className={` ${siteConfig('HEO_POST_LIST_COVER_HOVER_ENLARGE', null, CONFIG) ? ' hover:scale-110 transition-all duration-150' : ''}`}>
<div
data-wow-delay='.2s'
className={
'wow fadeInUp border bg-white dark:bg-[#1e1e1e] flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full dark:border-gray-600 hover:border-indigo-600 dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl'
POST_TWO_COLS
? '2xl:h-96 2xl:flex-col'
: '' +
'wow fadeInUp border bg-white dark:bg-[#1e1e1e] flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row group w-full dark:border-gray-600 hover:border-indigo-600 dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl'
}>
{/* 图片封面 */}
{showPageCover && (
<Link href={post?.href} passHref legacyBehavior>
<div className='w-full md:w-5/12 2xl:w-full overflow-hidden cursor-pointer select-none'>
<div
className={
POST_TWO_COLS
? ' 2xl:w-full'
: '' +
'w-full md:w-5/12 overflow-hidden cursor-pointer select-none'
}>
<LazyImage
priority={index === 0}
src={post?.pageCoverThumbnail}
@@ -44,7 +63,10 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
{/* 文字区块 */}
<div
className={
'flex p-6 2xl:p-4 flex-col justify-between h-48 md:h-full 2xl:h-48 w-full md:w-7/12 2xl:w-full'
POST_TWO_COLS
? '2xl:p-4 2xl:h-48 2xl:w-full'
: '' +
'flex p-6 flex-col justify-between h-48 md:h-full w-full md:w-7/12'
}>
<header>
{/* 分类 */}