Merge branch 'main' into wx

2026-05-14 07:26:52 +00:00 · 2023-04-24 11:07:00 +08:00
parent 3e86cbfab7 f9a08aceec
commit f9fe90b355
8 changed files with 102 additions and 46 deletions
--- 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项目
--- a/blog.config.js
+++ b/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]
--- 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 && <Analytics />}
+
    {BLOG.COMMENT_DAO_VOICE_ID && (<>
      {/* DaoVoice 反馈 */}
      <script async dangerouslySetInnerHTML={{
--- 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",
--- 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;
 }
--- 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>
                ))}
--- 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
--- 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