Merge pull request #998 from tangly1024/feat/example-blog-list-cover

example主题列表展示封面

styles/globals.css

@@ -302,4 +302,12 @@ a.avatar-wrapper {
   -webkit-line-clamp: 4;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.p-3-lines {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

themes/example/components/BlogListPage.js

@@ -3,6 +3,7 @@ import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
+import CONFIG_EXAMPLE from '../config_example'
 
 export const BlogListPage = props => {
   const { page = 1, posts, postCount } = props
@@ -15,38 +16,50 @@ export const BlogListPage = props => {
   const showNext = page < totalPage
   const pagePrefix = router.asPath.replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
 
+  const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
+
   return (
-      <div className="w-full md:pr-12 mb-12">
+        <div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`}>
 
             <div id="container">
                 {posts?.map(p => (
-                    <article key={p.id} className="mb-12" >
-                        <h2 className="mb-4">
-                            <Link
-                                href={`/${p.slug}`}
-                                className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
-                                  {p.title}
-                            </Link>
-                        </h2>
+                    <article key={p.id} className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
+                        <div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
+                            <h2 className="mb-4">
+                                <Link
+                                    href={`/${p.slug}`}
+                                    className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
+                                    {p.title}
+                                </Link>
+                            </h2>
 
-                        <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
-                            by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
-                            <span className="font-bold mx-1"> | </span>
-                            <a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
-                            {/* <span className="font-bold mx-1"> | </span> */}
-                            {/* <a href="#" className="text-gray-700">2 Comments</a> */}
-                        </div>
+                            <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
+                                by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
+                                <span className="font-bold mx-1"> | </span>
+                                <a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
+                                {/* <span className="font-bold mx-1"> | </span> */}
+                                {/* <a href="#" className="text-gray-700">2 Comments</a> */}
+                            </div>
 
-                        <p className="text-gray-700 dark:text-gray-400 leading-normal">
-                            {p.summary}
-                        </p>
-                            {/* 搜索结果 */}
-                        {p.results && (
-                            <p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
-                            {p.results.map(r => (
-                                <span key={r}>{r}</span>
-                            ))}
+                            <p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
+                                {p.summary}
                             </p>
+                            {/* 搜索结果 */}
+                            {p.results && (
+                                <p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                                    {p.results.map(r => (
+                                        <span key={r}>{r}</span>
+                                    ))}
+                                </p>
+                            )}
+                        </div>
+                        {/* 图片封面 */}
+                        {showPageCover && (
+                            <div className="md:w-5/12 w-full overflow-hidden p-1">
+                                <Link href={`${BLOG.SUB_PATH}/${p.slug}`} passHref legacyBehavior>
+                                    <div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${p?.page_cover}')` }} />
+                                </Link>
+                            </div>
                         )}
                     </article>
                 ))}

themes/example/components/BlogListScroll.js

@@ -3,6 +3,7 @@ import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import React from 'react'
 import throttle from 'lodash.throttle'
+import CONFIG_EXAMPLE from '../config_example'
 
 export const BlogListScroll = props => {
   const { posts } = props
@@ -43,30 +44,50 @@ export const BlogListScroll = props => {
     }
   })
 
+  const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
+
   return (
       <div id="container" className="w-full md:pr-12 mb-12" ref={targetRef}>
               {postsToShow.map(p => (
-                  <article key={p.id} className="mb-12" >
-                      <h2 className="mb-4">
-                          <Link
-                              href={`/${p.slug}`}
-                              className="text-black text-xl md:text-2xl no-underline hover:underline">
-                                {p.title}
-                          </Link>
-                      </h2>
+                  <article key={p.id} className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
+                        <div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
+                            <h2 className="mb-4">
+                                <Link
+                                    href={`/${p.slug}`}
+                                    className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
+                                    {p.title}
+                                </Link>
+                            </h2>
 
-                      <div className="mb-4 text-sm text-gray-700">
-                          by <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
-                          <span className="font-bold mx-1"> | </span>
-                          <a href="#" className="text-gray-700">{p.category}</a>
-                          <span className="font-bold mx-1"> | </span>
-                          {/* <a href="#" className="text-gray-700">2 Comments</a> */}
-                      </div>
+                            <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
+                                by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
+                                <span className="font-bold mx-1"> | </span>
+                                <a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
+                                {/* <span className="font-bold mx-1"> | </span> */}
+                                {/* <a href="#" className="text-gray-700">2 Comments</a> */}
+                            </div>
 
-                      <p className="text-gray-700 leading-normal">
-                          {p.summary}
-                      </p>
-                  </article>
+                            <p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
+                                {p.summary}
+                            </p>
+                            {/* 搜索结果 */}
+                            {p.results && (
+                                <p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                                    {p.results.map(r => (
+                                        <span key={r}>{r}</span>
+                                    ))}
+                                </p>
+                            )}
+                        </div>
+                        {/* 图片封面 */}
+                        {showPageCover && (
+                            <div className="md:w-5/12 w-full overflow-hidden p-1">
+                                <Link href={`${BLOG.SUB_PATH}/${p.slug}`} passHref legacyBehavior>
+                                    <div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${p?.page_cover}')` }} />
+                                </Link>
+                            </div>
+                        )}
+                    </article>
               ))}
 
               <div

themes/example/config_example.js

@@ -3,6 +3,9 @@ const CONFIG_EXAMPLE = {
   MENU_CATEGORY: true, // 显示分类
   MENU_TAG: true, // 显示标签
   MENU_ARCHIVE: true, // 显示归档
-  MENU_SEARCH: true // 显示搜索
+  MENU_SEARCH: true, // 显示搜索
+
+  POST_LIST_COVER: true // 列表显示文章封面
+
 }
 export default CONFIG_EXAMPLE