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

themes/heo/components/BlogPostCard.js

@@ -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>
             {/* 分类 */}

themes/heo/components/BlogPostListPage.js

@@ -17,13 +17,19 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const showPagination = postCount >= POSTS_PER_PAGE
+  const POST_TWO_COLS = siteConfig(
+    'HEO_HOME_POST_TWO_COLS',
+    null,
+    NOTION_CONFIG
+  )
   if (!posts || posts.length === 0 || page > totalPage) {
     return <BlogPostListEmpty />
   } else {
     return (
       <div id='container' className='w-full'>
         {/* 文章列表 */}
-        <div className='2xl:grid 2xl:grid-cols-2 grid-cols-1 gap-5'>
+        <div
+          className={`2xl:grid ${POST_TWO_COLS && '2xl:grid-cols-2'} grid-cols-1 gap-5`}>
           {posts?.map(post => (
             <BlogPostCard
               index={posts.indexOf(post)}

themes/heo/components/BlogPostListScroll.js

@@ -19,7 +19,7 @@ const BlogPostListScroll = ({
   showSummary = siteConfig('HEO_POST_LIST_SUMMARY', null, CONFIG),
   siteInfo
 }) => {
-  const { NOTION_CONFIG } = useGlobal()
+  const { locale, NOTION_CONFIG } = useGlobal()
   const [page, updatePage] = useState(1)
   const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)
@@ -59,15 +59,20 @@ const BlogPostListScroll = ({
   })
 
   const targetRef = useRef(null)
-  const { locale } = useGlobal()
-
+  const POST_TWO_COLS = siteConfig(
+    'HEO_HOME_POST_TWO_COLS',
+    null,
+    NOTION_CONFIG
+  )
   if (!postsToShow || postsToShow.length === 0) {
     return <BlogPostListEmpty currentSearch={currentSearch} />
   } else {
     return (
       <div id='container' ref={targetRef} className='w-full'>
         {/* 文章列表 */}
-        <div className='2xl:grid 2xl:grid-cols-2 grid-cols-1 gap-5'>
+        <div
+          className={`2xl:grid ${POST_TWO_COLS && '2xl:grid-cols-2'} grid-cols-1 gap-5`}>
+          {' '}
           {postsToShow.map(post => (
             <BlogPostCard
               key={post.id}

themes/heo/config.js

@@ -1,4 +1,6 @@
 const CONFIG = {
+  HEO_HOME_POST_TWO_COLS: true, // 首页博客两列显示，若为false则只显示一列
+
   HEO_HOME_BANNER_ENABLE: true,
 
   HEO_SITE_CREATE_TIME: '2021-09-21', // 建站日期，用于计算网站运行的第几天