feature:

404页面检测文章加载； Page类型排版微调
2026-05-13 23:16:47 +00:00 · 2021-12-01 13:23:03 +08:00
parent 2b2ac12ce3
commit 3d02abf98e
4 changed files with 66 additions and 66 deletions
--- a/README.md
+++ b/README.md
@@ -35,6 +35,7 @@
 - 评论、搜索、标签、分类
 - 订阅、网站统计
 - 本地化多语言
+- 服务端渲染、优秀的SEO

 **🎨 &nbsp;美观，轻松自定义**

--- a/components/RewardButton.js
+++ b/components/RewardButton.js
@@ -5,9 +5,8 @@ import React from 'react'
 * @returns {JSX.Element}
 * @constructor
 */
-const   RewardButton = () => {
+const RewardButton = () => {
  const [popoverShow, setPopoverShow] = React.useState(false)
-  const btnRef = React.createRef()

  const openPopover = () => {
    setPopoverShow(true)
@@ -16,7 +15,7 @@ const   RewardButton = () => {
    setPopoverShow(false)
  }
  return (
-    <div onMouseEnter={openPopover} onMouseLeave={closePopover}>
+    <div onMouseEnter={openPopover} onMouseLeave={closePopover} className='justify-center py-10'>
      <div className='bg-red-500 w-36 mx-auto animate__jello text-white hover:bg-green-400 duration-200 transform hover:scale-110 px-3 py-2 rounded cursor-pointer'>
          <span className='fa fa-qrcode mr-2' />
          <span>打赏一杯咖啡</span>
--- a/pages/404.js
+++ b/pages/404.js
@@ -11,8 +11,14 @@ import { useRouter } from 'next/router'
 export default function Custom404 () {
  const router = useRouter()
  useEffect(() => {
+    // 延时3秒如果加载失败就返回首页
    setTimeout(() => {
-      router.push('/')
+      if (window) {
+        const article = document.getElementById('article-wrapper')
+        if (!article) {
+          router.push('/')
+        }
+      }
    }, 3000)
  })

--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -47,75 +47,71 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
  return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={posts} categories={categories}>
    <Progress targetRef={targetRef} />

-    <div id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-200 dark:bg-black'>
+    <div id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-200 dark:bg-black pt-16'>
      {/* 中央区域 wrapper */}
-      <header
-        className='hover:shadow-2xl hover:scale-105 transform duration-200 mx-auto max-w-5xl mt-16 mb-2 lg:mt-32 md:flex-shrink-0 animate__fadeIn animate__animated'>
-        {/* 封面图 */}
-        {post.page_cover && post.page_cover.length > 1 && (
-          <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }} loading='lazy'
-               src={post.page_cover} alt={post.title} />
-        )}
-      </header>
+      {post.type && !post.type.includes('Page') && (<>
+        <header
+          className='hover:shadow-2xl hover:scale-105 transform duration-200 mx-auto max-w-5xl mb-2 md:flex-shrink-0 animate__fadeIn animate__animated'>
+          {/* 封面图 */}
+          {post.page_cover && post.page_cover.length > 1 && (
+            <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }} loading='lazy'
+                 src={post.page_cover} alt={post.title} />
+          )}
+        </header>
+      </>)}

      <article
        className='hover:shadow-2xl duration-200 shadow-card mb-20 w-screen md:w-full overflow-x-auto md:px-10 px-5 pt-10 max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-900'>
-        {/* 文章标题 */}
-        <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
-          {post.title}
-        </h1>

-        <h2 className='text-gray-500 text-xs my-5 dark:text-gray-400 animate__animated animate__fadeIn'>
-          {post.summary}
-        </h2>
+        {post.type && !post.type.includes('Page') && (<>
+            {/* 文章信息 */}
+            <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'> {post.title}</h1>
+            <h2 className='text-gray-500 text-xs my-5 dark:text-gray-400 animate__animated animate__fadeIn'>{post.summary}</h2>
+            <div className='justify-between flex flex-wrap bg-gray-100 p-2 dark:bg-gray-900 dark:text-white'>
+              <div className='flex-nowrap flex'>
+                <div className='py-2 opacity-50'>
+                  {locale.COMMON.CATEGORY}：
+                </div>
+                <Link href={`/category/${post.category}`} passHref>
+                  <div className='cursor-pointer text-md py-2 mx-3 hover:underline'><i
+                    className='fa fa-folder-open-o mr-1' />{post.category}</div>
+                </Link>

-        {/* 文章作者等关联信息 */}
-        <div className='justify-between flex flex-wrap bg-gray-100 p-2 dark:bg-gray-900 dark:text-white'>
-          <div className='flex-nowrap flex'>
-            <div className='py-2 opacity-50'>
-              {locale.COMMON.CATEGORY}：
-            </div>
-            <Link href={`/category/${post.category}`} passHref>
-              <div className='cursor-pointer text-md py-2 mx-3 hover:underline'><i
-                className='fa fa-folder-open-o mr-1' />{post.category}</div>
-            </Link>
-
-            {post.type[0] !== 'Page' && (
-              <div className='flex items-start text-gray-500 dark:text-gray-400 leading-10'>
-                {formatDate(
-                  post?.date?.start_date || post.createdTime,
-                  BLOG.lang
+                {post.type[0] !== 'Page' && (
+                  <div className='flex items-start text-gray-500 dark:text-gray-400 leading-10'>
+                    {formatDate(
+                      post?.date?.start_date || post.createdTime,
+                      BLOG.lang
+                    )}
+                  </div>
                )}
              </div>
-            )}
-          </div>

-          {/* 不蒜子 */}
-          <div id='busuanzi_container_page_pv' className='hidden'>
-            <div className='fa fa-eye text-gray-500 text-sm leading-none py-1 px-2'>
-              &nbsp;<span id='busuanzi_value_page_pv' className='leading-6'></span>
+              {/* 不蒜子 */}
+              <div id='busuanzi_container_page_pv' className='hidden'>
+                <div className='fa fa-eye text-gray-500 text-sm leading-none py-1 px-2'>
+                  &nbsp;<span id='busuanzi_value_page_pv' className='leading-6'></span>
+                </div>
+              </div>
            </div>
-          </div>
-        </div>
+        </>)}

-        <div className='mb-10'>
-          {/* Notion文章主体 */}
-          {blockMap && (
-            <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
-                            components={{
-                              equation: Equation,
-                              code: Code,
-                              collectionRow: CollectionRow,
-                              collection: Collection
-                            }}
-            />
-          )}
-        </div>
+        {/* Notion文章主体 */}
+        {blockMap && (
+          <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
+                          components={{
+                            equation: Equation,
+                            code: Code,
+                            collectionRow: CollectionRow,
+                            collection: Collection
+                          }}
+          />
+        )}

-        <div className='flex justify-center pb-10'>
-          <RewardButton />
-        </div>
+        {/* 赞赏按钮 */}
+        <RewardButton />

+        {/* 推荐文章 */}
        <RecommendPosts currentPost={post} totalPosts={posts} />

        {/* 版权声明 */}
@@ -128,8 +124,8 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
          </ul>
        </section>

+        {/* 标签列表 */}
        <section className='md:flex md:justify-between'>
-
           {post.tagItems && (
            <div className='flex flex-nowrap leading-8 p-1 py-4 overflow-x-auto'>
              <div className='hidden md:block dark:text-gray-300'>{locale.COMMON.TAGS}：</div>
@@ -138,13 +134,12 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
              ))}
            </div>
           )}
-
          <div>
            <ShareBar post={post} />
          </div>
-
        </section>

+        {/* 上一篇下一篇文章 */}
        <div className='text-gray-800 my-5 dark:text-gray-300'>
          <hr />
          <div className='flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
@@ -168,6 +163,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })

    </div>

+    {/* 悬浮目录按钮 */}
    <div className='block lg:hidden'>
      <TocDrawerButton onClick={() => {
        drawerRight.current.handleSwitchVisible()
@@ -183,7 +179,6 @@ export async function getStaticPaths () {
  let posts = []
  if (BLOG.isProd) {
    posts = await getAllPosts({ from: 'slug - paths', includePage: true })
-    posts = posts.filter(post => post.status[0] === 'Published')
  }
  return {
    paths: posts.map(row => `${BLOG.path}/article/${row.slug}`),
@@ -192,8 +187,7 @@ export async function getStaticPaths () {
 }

 export async function getStaticProps ({ params: { slug } }) {
-  let posts = await getAllPosts({ from: 'slug-props' })
-  posts = posts.filter(post => post.status[0] === 'Published')
+  let posts = await getAllPosts({ from: 'slug-props', includePage: true })
  const post = posts.find(t => t.slug === slug)
  if (!post) {
    return {