feature:

新增StickyBar组件；标签页、分类页、搜索页重排；
2026-05-16 15:09:28 +00:00 · 2021-11-29 17:25:34 +08:00
parent 99d98566b7
commit 5c84afb5c3
15 changed files with 145 additions and 106 deletions
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -48,15 +48,15 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
    <div id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-200 dark:bg-black'>
      {/* 中央区域 wrapper */}
      <header
-        className='shadow-card duration-200 mx-auto max-w-5xl mt-16 lg:mt-32 md:flex-shrink-0 animate__fadeIn animate__animated'>
+        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' }}
+          <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }} loading="lazy"
               src={post.page_cover} alt={post.title} />
        )}
      </header>

-      <article className='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'>
+      <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}
@@ -109,7 +109,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
          )}
        </div>

-        <div className='flex justify-center pb-5'>
+        <div className='flex justify-center pb-10'>
          <RewardButton />
        </div>

@@ -117,7 +117,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })

        {/* 版权声明 */}
        <section
-          className='overflow-auto dark:bg-gray-700 dark:text-gray-300 bg-gray-100 p-5 leading-8 border-l-4 border-red-500'>
+          className='overflow-auto dark:bg-gray-800 dark:text-gray-300 bg-gray-100 p-5 leading-8 border-l-4 border-red-500'>
          <ul>
            <li><strong>本文作者：</strong>{BLOG.author}</li>
            <li><strong>本文链接：</strong> <a href={url}>{url}</a> 《{post.title}》</li>
@@ -145,8 +145,8 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
        <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'>
-            <Link href={`/article/${prev.slug}`}><div className=' py-3 text-blue-500 text-xl hover:underline cursor-pointer'><i className='fa fa-angle-double-left mr-1'/>{prev.title}</div></Link>
-            <Link href={`/article/${next.slug}`}><div className='flex py-3 text-blue-500 text-xl hover:underline cursor-pointer'>{next.title}<i className='fa fa-angle-double-right ml-1'/></div></Link>
+            <Link href={`/article/${prev.slug}`}><div className='py-3 text-blue-500 text-lg hover:underline cursor-pointer'><i className='fa fa-angle-double-left mr-1'/>{prev.title}</div></Link>
+            <Link href={`/article/${next.slug}`}><div className='flex py-3 text-blue-500 text-lg hover:underline cursor-pointer'>{next.title}<i className='fa fa-angle-double-right ml-1'/></div></Link>
          </div>
        </div>
      </article>
--- a/pages/category/[category].js
+++ b/pages/category/[category].js
@@ -1,8 +1,10 @@
 import { getAllCategories, getAllPosts, getAllTags } from '@/lib/notion'
 import BLOG from '@/blog.config'
-import TagsBar from '@/components/TagsBar'
+import StickyBar from '@/components/StickyBar'
 import BaseLayout from '@/layouts/BaseLayout'
 import BlogPostListScroll from '@/components/BlogPostListScroll'
+import React from 'react'
+import CategoryList from '@/components/CategoryList'

 export default function Category ({ tags, posts, category, categories }) {
  const meta = {
@@ -12,7 +14,9 @@ export default function Category ({ tags, posts, category, categories }) {
  }
  return <BaseLayout meta={meta} tags={tags} currentCategory={category} totalPosts={posts} categories={categories}>
    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner'>
-      <TagsBar tags={tags} />
+      <StickyBar >
+        <CategoryList currentCategory={category} categories={categories} />
+      </StickyBar>
      <BlogPostListScroll posts={posts} tags={tags} currentCategory={category}/>
    </div>
  </BaseLayout>
--- a/pages/search.js
+++ b/pages/search.js
@@ -1,7 +1,7 @@
 import { getAllCategories, getAllPosts, getAllTags } from '@/lib/notion'
 import BLOG from '@/blog.config'
 import BaseLayout from '@/layouts/BaseLayout'
-import TagsBar from '@/components/TagsBar'
+import StickyBar from '@/components/StickyBar'
 import BlogPostListScroll from '@/components/BlogPostListScroll'
 import { useRouter } from 'next/router'

@@ -43,9 +43,9 @@ const Search = ({ posts, tags, meta, categories }) => {
  return (
    <BaseLayout meta={meta} tags={tags} totalPosts={posts} currentSearch={searchKey} categories={categories}>
      <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner'>
-        <TagsBar tags={tags} />
-        {/* 标签栏留白 */}
-        <div className='my-6 md:pt-0'/>
+        <StickyBar>
+          <div className='p-4 dark:text-gray-200'><i className='fa fa-search mr-1'/> 搜索词： {searchKey}</div>
+        </StickyBar>
        <BlogPostListScroll posts={filteredPosts} tags={tags} currentSearch={searchKey} />
      </div>
    </BaseLayout>
--- a/pages/tag/[tag].js
+++ b/pages/tag/[tag].js
@@ -1,8 +1,9 @@
 import { getAllCategories, getAllPosts, getAllTags } from '@/lib/notion'
 import BLOG from '@/blog.config'
-import TagsBar from '@/components/TagsBar'
+import StickyBar from '@/components/StickyBar'
 import BaseLayout from '@/layouts/BaseLayout'
 import BlogPostListScroll from '@/components/BlogPostListScroll'
+import TagList from '@/components/TagList'

 export default function Tag ({ tags, posts, currentTag, categories }) {
  const meta = {
@@ -12,7 +13,9 @@ export default function Tag ({ tags, posts, currentTag, categories }) {
  }
  return <BaseLayout meta={meta} tags={tags} currentTag={currentTag} categories={categories} totalPosts={posts}>
    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner'>
-      <TagsBar tags={tags} currentTag={currentTag}/>
+      <StickyBar>
+        <TagList tags={tags} currentTag={currentTag}/>
+      </StickyBar>
      <BlogPostListScroll posts={posts} tags={tags} currentTag={currentTag}/>
    </div>
  </BaseLayout>