From ef00d9d61b90169704912fcae015b3437eb209b0 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Fri, 21 Apr 2023 10:22:00 +0800
Subject: [PATCH 1/4] =?UTF-8?q?example=E4=B8=BB=E9=A2=98=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=B0=81=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/globals.css                          |  8 +++
 themes/example/components/BlogListPage.js   | 63 +++++++++++++--------
 themes/example/components/BlogListScroll.js | 59 ++++++++++++-------
 themes/example/config_example.js            |  5 +-
 4 files changed, 90 insertions(+), 45 deletions(-)

diff --git a/styles/globals.css b/styles/globals.css
index 972618ab..fa1f8f5d 100644
--- a/styles/globals.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/themes/example/components/BlogListPage.js b/themes/example/components/BlogListPage.js
index c655df4a..c36ebca1 100644
--- a/themes/example/components/BlogListPage.js
+++ b/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>
                 ))}
diff --git a/themes/example/components/BlogListScroll.js b/themes/example/components/BlogListScroll.js
index b3d7f3f0..0949f4da 100644
--- a/themes/example/components/BlogListScroll.js
+++ b/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
diff --git a/themes/example/config_example.js b/themes/example/config_example.js
index c77b1d2d..dd9427b7 100644
--- a/themes/example/config_example.js
+++ b/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

From eaa2997028439893e1636d454dee49562e8a8c71 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Fri, 21 Apr 2023 12:20:56 +0800
Subject: [PATCH 2/4] vercel-analytics

---
 blog.config.js             | 1 +
 components/CommonScript.js | 3 +++
 package.json               | 1 +
 3 files changed, 5 insertions(+)

diff --git a/blog.config.js b/blog.config.js
index 4e642e4d..4d53eaff 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -254,6 +254,7 @@ const BLOG = {
   // <---- 评论插件
 
   // ----> 站点统计
+  ANALYTICS_VERCEL: process.env.NEXT_PUBLIC_ANALYTICS_VERCEL || true, // vercel自带的统计 https://vercel.com/docs/concepts/analytics/quickstart https://github.com/tangly1024/NotionNext/issues/897
   ANALYTICS_BUSUANZI_ENABLE: true, // 展示网站阅读量、访问数 see http://busuanzi.ibruce.info/
   ANALYTICS_BAIDU_ID: process.env.NEXT_PUBLIC_ANALYTICS_BAIDU_ID || '', // e.g 只需要填写百度统计的id，[baidu_id] -> https://hm.baidu.com/hm.js?[baidu_id]
   ANALYTICS_CNZZ_ID: process.env.NEXT_PUBLIC_ANALYTICS_CNZZ_ID || '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id]
diff --git a/components/CommonScript.js b/components/CommonScript.js
index 57adf07a..09720bc5 100644
--- a/components/CommonScript.js
+++ b/components/CommonScript.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import { Analytics } from '@vercel/analytics/react'
 
 /**
  * 第三方代码 统计脚本
@@ -7,6 +8,8 @@ import BLOG from '@/blog.config'
  */
 const CommonScript = () => {
   return (<>
+    {BLOG.ANALYTICS_VERCEL && <div id='vercel-analytics'><Analytics /></div>}
+
     {BLOG.COMMENT_DAO_VOICE_ID && (<>
       {/* DaoVoice 反馈 */}
       <script async dangerouslySetInnerHTML={{
diff --git a/package.json b/package.json
index ab658ff0..58e579fd 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@giscus/react": "^2.2.6",
     "@next/bundle-analyzer": "^12.1.1",
     "@popperjs/core": "^2.9.3",
+    "@vercel/analytics": "^1.0.0",
     "animate.css": "^4.1.1",
     "animejs": "^3.2.1",
     "aos": "^3.0.0-beta.6",

From 750d0851e798f8c6bf7e65e432af0a334d2467cf Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Fri, 21 Apr 2023 12:27:55 +0800
Subject: [PATCH 3/4] vercel-analytics

---
 components/CommonScript.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/CommonScript.js b/components/CommonScript.js
index 09720bc5..badd7531 100644
--- a/components/CommonScript.js
+++ b/components/CommonScript.js
@@ -8,7 +8,7 @@ import { Analytics } from '@vercel/analytics/react'
  */
 const CommonScript = () => {
   return (<>
-    {BLOG.ANALYTICS_VERCEL && <div id='vercel-analytics'><Analytics /></div>}
+    {BLOG.ANALYTICS_VERCEL && <Analytics />}
 
     {BLOG.COMMENT_DAO_VOICE_ID && (<>
       {/* DaoVoice 反馈 */}

From 19b1b43c9685eff4bebb45f8ffbf4a743fe476b0 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Fri, 21 Apr 2023 15:16:23 +0800
Subject: [PATCH 4/4] =?UTF-8?q?Readme=20=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index dd0aa30e..63de7af3 100644
--- a/README.md
+++ b/README.md
@@ -28,8 +28,14 @@
 
 ## 我要如何开始？
 
-只需几分钟即可搭建您的个人站点，查看教程 [教程说明](https://tangly1024.com/article/notion-next) 
+只需几分钟即可搭建您的个人站点：
 
+- [快速部署教程 - 多种方案可供选择](https://tangly1024.com/article/notion-next) 
+
+- [个性配置手册 - 如何配置功能插件](https://tangly1024.com/article/notion-next-guide) 
+
+- [二次开发指引 - 如何进行本地开发](https://tangly1024.com/article/how-to-develop-with-notion-next)
+ 
 
 ## 致谢
 感谢Craig Hart发起的Nobelium项目