Merge branch 'tangly1024:main' into main

README.md

@@ -28,7 +28,13 @@
 
 ## 我要如何开始？
 
-只需几分钟即可搭建您的个人站点，查看教程 [教程说明](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)
  
 
 ## 致谢

blog.config.js

@@ -261,6 +261,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]

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 && <Analytics />}
+
     {BLOG.COMMENT_DAO_VOICE_ID && (<>
       {/* DaoVoice 反馈 */}
       <script async dangerouslySetInnerHTML={{

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",

styles/globals.css

@@ -303,3 +303,11 @@ a.avatar-wrapper {
   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" >
+                    <article key={p.id} className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
-                        <h2 className="mb-4">
+                        <div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
-                            <Link
+                            <h2 className="mb-4">
-                                href={`/${p.slug}`}
+                                <Link
-                                className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
+                                    href={`/${p.slug}`}
-                                  {p.title}
+                                    className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
-                            </Link>
+                                    {p.title}
-                        </h2>
+                                </Link>
+                            </h2>
 
-                        <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
+                            <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}
+                                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>
+                                <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>
+                                <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> */}
+                                {/* <span className="font-bold mx-1"> | </span> */}
-                            {/* <a href="#" className="text-gray-700">2 Comments</a> */}
+                                {/* <a href="#" className="text-gray-700">2 Comments</a> */}
-                        </div>
+                            </div>
 
-                        <p className="text-gray-700 dark:text-gray-400 leading-normal">
+                            <p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
-                            {p.summary}
+                                {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>
+                            {/* 搜索结果 */}
+                            {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" >
+                  <article key={p.id} className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
-                      <h2 className="mb-4">
+                        <div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
-                          <Link
+                            <h2 className="mb-4">
-                              href={`/${p.slug}`}
+                                <Link
-                              className="text-black text-xl md:text-2xl no-underline hover:underline">
+                                    href={`/${p.slug}`}
-                                {p.title}
+                                    className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
-                          </Link>
+                                    {p.title}
-                      </h2>
+                                </Link>
+                            </h2>
 
-                      <div className="mb-4 text-sm text-gray-700">
+                            <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
-                          by <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
+                                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>
+                                <span className="font-bold mx-1"> | </span>
-                          <a href="#" className="text-gray-700">{p.category}</a>
+                                <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>
+                                {/* <span className="font-bold mx-1"> | </span> */}
-                          {/* <a href="#" className="text-gray-700">2 Comments</a> */}
+                                {/* <a href="#" className="text-gray-700">2 Comments</a> */}
-                      </div>
+                            </div>
 
-                      <p className="text-gray-700 leading-normal">
+                            <p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
-                          {p.summary}
+                                {p.summary}
-                      </p>
+                            </p>
-                  </article>
+                            {/* 搜索结果 */}
+                            {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