feature:

排版微调，增加文章易读性
2026-05-14 07:26:52 +00:00 · 2021-12-03 17:18:53 +08:00
parent 23e7e4605f
commit f13ce77cd5
13 changed files with 131 additions and 147 deletions
--- a/components/CategoryGroup.js
+++ b/components/CategoryGroup.js
@@ -5,7 +5,7 @@ import React from 'react'

 const CategoryGroup = ({ currentCategory, categories }) => {
  return <div>
-      <div id='category-list' className='dark:border-gray-600 dark:bg-gray-800'>
+      <div id='category-list' className='dark:border-gray-600 dark:bg-gray-900'>
        {Object.keys(categories).map(category => {
          const selected = currentCategory === category
          return <Link key={category} href={`/category/${category}`} passHref>
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -27,7 +27,6 @@ const Comment = ({ frontMatter }) => {
  const { theme } = useGlobal()

  return <div className='comment text-gray-800 dark:text-gray-300'>
-    {/* 评论插件 */}
    {BLOG.comment.provider === 'gitalk' && (<div className='m-10'>
      <GitalkComponent
        options={{
@@ -46,9 +45,9 @@ const Comment = ({ frontMatter }) => {
      <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
    </div>
    )}
-    {BLOG.comment.provider === 'cusdis' && (
+    {BLOG.comment.provider === 'cusdis' && (<>
+      <script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />
      <div className='m-10'>
-        <script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />
        <CusdisComponent
          attrs={{
            host: BLOG.comment.cusdisConfig.host,
@@ -61,8 +60,7 @@ const Comment = ({ frontMatter }) => {
          lang={BLOG.lang.toLowerCase()}
        />
      </div>
-
-    )}
+    </>)}
  </div>
 }

--- a/components/JumpToTopButton.js
+++ b/components/JumpToTopButton.js
@@ -34,24 +34,17 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
    return () => document.removeEventListener('scroll', scrollListener)
  }, [show])

-  return (
-    <div id='jump-to-top' className='right-0 fixed flex bottom-36 mr-4 duration-500 z-20 opacity-75'>
-      <div >
-        <div
-          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-          style={{ boxShadow: 'rgba(41, 50, 60, 0.5) 0px 2px 16px', borderRadius: '28px' }}
-          className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' bg-white dark:bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-2xl'}>
-          <div className='text-center'>
-            <div className='w-10 text-xl dark:text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} >
-              <FontAwesomeIcon icon={faArrowUp} />
-            </div>
-            {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent} </div>)}
+  return (<div id='jump-to-top' className='right-1 fixed flex bottom-36 duration-500 z-20'>
+      <div onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+        className={(show ? 'animate__fadeInRight' : 'animate__fadeOutRight') + ' shadow-card bg-white dark:bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-2xl'}>
+        <div className='text-center'>
+          <div className='w-10 text-xl dark:text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} >
+            <FontAwesomeIcon icon={faArrowUp} />
          </div>
+          {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent} </div>)}
        </div>
      </div>
-    </div>
-
-  )
+    </div>)
 }

 export default JumpToTopButton
--- a/components/LatestPostsGroup.js
+++ b/components/LatestPostsGroup.js
@@ -32,8 +32,8 @@ const LatestPostsGroup = ({ posts, sliceCount = 6 }) => {
        return (
          <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
            <div
-              className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' text-xs leading-5 py-1.5 px-5 flex'}>
-              <div className='mr-2 text-gray-500'>
+              className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' leading-5 py-1.5 px-5 flex'}>
+              <div className='mr-2 text-gray-500 text-xs leading-5'>
                {formatDateFmt(post.lastEditedTime, 'MM/dd')}
              </div>
              <div
--- a/components/RecommendPosts.js
+++ b/components/RecommendPosts.js
@@ -39,7 +39,7 @@ const RecommendPosts = ({ currentPost, totalPosts }) => {

  return <div className='dark:text-gray-300 dark:bg-gray-800 bg-gray-100 p-2 my-2  border-l-4 border-yellow-500'>
    <h2 className='mb-2 font-bold text-xl'>{locale.COMMON.RELATE_POSTS}</h2>
-    <ul className='list-disc px-5'>
+    <ul className='list-disc px-5 text-sm '>
      {filteredPosts.map(post => (
        <li className='py-1' key={post.id} ><Link href={`/article/${post.slug}`}><a className='cursor-pointer hover:underline'>{post.title}</a></Link></li>
      ))}
--- a/components/RewardButton.js
+++ b/components/RewardButton.js
@@ -21,7 +21,8 @@ const RewardButton = () => {
  }
  return (
    <div className='justify-center'>
-      <div onMouseEnter={openPopover} onMouseLeave={closePopover} 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'>
+      <div onMouseEnter={openPopover} onMouseLeave={closePopover}
+      className='bg-pink-500 py-2 w-36 mx-auto animate__jello text-white hover:bg-green-400 duration-200 transform hover:scale-110 px-3 rounded cursor-pointer'>
          <FontAwesomeIcon icon={faQrcode} className='mr-2' />
          <span>打赏一杯咖啡</span>
      </div>
--- a/components/SearchInput.js
+++ b/components/SearchInput.js
@@ -42,7 +42,7 @@ const SearchInput = ({ currentTag, currentSearch }) => {
      ref={searchInputRef}
      type='text'
      placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-      className={'pl-2 w-full transition leading-10 border-gray-300 bg-white text-black dark:bg-gray-900 dark:text-white'}
+      className={'pl-2 w-full transition leading-10 border-gray-300 bg-white text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
      onKeyUp={handleKeyUp}
      onChange={e => updateSearchKey(e.target.value)}
      defaultValue={currentSearch}
--- a/components/ShareBar.js
+++ b/components/ShareBar.js
@@ -46,22 +46,22 @@ const ShareBar = ({ post }) => {
      className='py-2 text-gray-500 text-center space-x-2 flex inline-block my-1 dark:text-gray-200 overflow-visible'>
      <div className='hidden md:block text-gray-800 dark:text-gray-300 mr-2 my-2'>{locale.COMMON.SHARE}:</div>
      <div className='text-3xl cursor-pointer'>
-        <a className='hover:text-blue-700' href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} >
+        <a className='text-blue-700' href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} >
          <FontAwesomeIcon icon={faFacebookSquare}/>
        </a>
      </div>
      <div className='text-3xl cursor-pointer'>
-        <a className='hover:text-blue-400' target='_blank' rel='noreferrer' href={`https://twitter.com/intent/tweet?title=${post.title}&url${shareUrl}`} >
+        <a className='text-blue-400' target='_blank' rel='noreferrer' href={`https://twitter.com/intent/tweet?title=${post.title}&url${shareUrl}`} >
          <FontAwesomeIcon icon={faTwitterSquare}/>
        </a>
      </div>
      <div className='text-3xl cursor-pointer'>
-        <a className='hover:text-blue-500' href={`https://telegram.me/share/url?url=${shareUrl}&text=${post.title}`} >
+        <a className='text-blue-500' href={`https://telegram.me/share/url?url=${shareUrl}&text=${post.title}`} >
        <FontAwesomeIcon icon={faTelegram}/>
        </a>
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='hover:text-green-600' ref={btnRef} onMouseEnter={openPopover} onMouseLeave={closePopover}>
+        <a className='text-green-600' ref={btnRef} onMouseEnter={openPopover} onMouseLeave={closePopover}>
          <FontAwesomeIcon icon={faWeixin}/>
          <div ref={popoverRef} className={(qrCodeShow ? 'animate__animated animate__fadeIn ' : 'hidden') + ' text-center py-2'}>
            <div className='p-2 bg-white border-0 duration-200 transform block z-50 font-normal shadow-xl mr-10'>
@@ -74,22 +74,22 @@ const ShareBar = ({ post }) => {
        </a>
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='hover:text-red-600' target='_blank' rel='noreferrer'href={`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${post.title}`} >
+        <a className='text-red-600' target='_blank' rel='noreferrer'href={`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${post.title}`} >
          <FontAwesomeIcon icon={faWeibo}/>
        </a>
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='hover:text-blue-400' target='_blank' rel='noreferrer'href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${post.title}&desc=${post.summary}`} >
+        <a className='text-blue-400' target='_blank' rel='noreferrer'href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${post.title}&desc=${post.summary}`} >
          <FontAwesomeIcon icon={faQq}/>
        </a>
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='hover:text-red-600' target='_blank' rel='noreferrer' href={`https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${shareUrl}&sharesource=qzone&title=${post.title}&summary=${post.summary}`} >
+        <a className='text-red-600' target='_blank' rel='noreferrer' href={`https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${shareUrl}&sharesource=qzone&title=${post.title}&summary=${post.summary}`} >
          <FontAwesomeIcon icon={faStar}/>
        </a>
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='hover:text-red-600' onClick={copyUrl} >
+        <a className='text-red-600' onClick={copyUrl} >
          <FontAwesomeIcon icon={faLink}/>
        </a>
      </div>
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -25,12 +25,12 @@ import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/fr
 */
 const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
  const { locale } = useGlobal()
-  return <aside id='sidebar' className='pt-10 bg-white dark:bg-gray-800 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
+  return <aside id='sidebar' className='pt-10 bg-white dark:bg-gray-900 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
    <section>
      <InfoCard />
    </section>

-    <div className={(!post ? 'sticky top-0' : '') + ' bg-white dark:bg-gray-800 pb-4'}>
+    <div className={(!post ? 'sticky top-0' : '') + ' bg-white dark:bg-gray-900 pb-4'}>

      <section>
        {/* <hr className='dark:border-gray-700' /> */}
@@ -43,7 +43,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c

      {/* 最新文章 */}
      {posts && (
-        <section className='mt-4'>
+        <section className='mt-12'>
          <div className='text-sm py-2 px-5  flex flex-nowrap justify-between'>
            <div className='font-bold text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-4' />{locale.COMMON.LATEST_POSTS}</div>
            <Link href='/archive' passHref>
@@ -58,7 +58,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c

      {/* 分类  */}
      {categories && (
-        <section className='mt-5'>
+        <section className='mt-12'>
          <div className='text-sm py-2 px-5  flex flex-nowrap justify-between'>
            <div className='font-bold text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}</div>
            <Link href='/category' passHref>
@@ -73,7 +73,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c

      {/* 标签云  */}
      {tags && (
-        <section className='mt-5'>
+        <section className='mt-12'>
          <div className='text-sm py-2 px-5 flex flex-nowrap justify-between'>
            <div className='text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-4' />{locale.COMMON.TAGS}</div>
            <Link href='/tag' passHref>
--- a/components/TocDrawer.js
+++ b/components/TocDrawer.js
@@ -27,7 +27,7 @@ const TocDrawer = ({ post, cRef }) => {
      <div
        className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') + ' border ' +
        ' dark:border-gray-800 bg-white dark:bg-gray-700 shadow-xl animate__animated animate__faster max-h-96 ' +
-        ' w-60 duration-200 fixed right-4 top-16 rounded-xl overflow-y-auto'}>
+        ' w-60 duration-200 fixed right-4 top-16 rounded overflow-y-auto'}>
          {post && <>
            <div className='border-b text-xl font-bold text-black dark:text-white py-3 px-6'>
              {locale.COMMON.TABLE_OF_CONTENTS}
--- a/components/TocDrawerButton.js
+++ b/components/TocDrawerButton.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBook } from '@fortawesome/free-solid-svg-icons'
+import { faListOl } from '@fortawesome/free-solid-svg-icons'

 /**
 * 点击召唤目录抽屉
@@ -14,13 +14,11 @@ const TocDrawerButton = (props) => {
  const { locale } = useGlobal()

  return (
-    <div id='toc-drawer-button' className='right-0 fixed flex top-40 mr-4 duration-500 z-40 hidden' onClick={props.onClick}>
+    <div id='toc-drawer-button' className='right-1 fixed flex bottom-52 duration-500 z-40 hidden' onClick={props.onClick}>
      <div className='transform hover:scale-105 duration-200 '>
-        <div style={{ borderRadius: '28px' }}
-          className={'animate__fadeInUp bg-white dark:bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-xl'}>
+        <div className='animate__fadeInRight animate__animated bg-white dark:bg-gray-700 px-1 py-2.5 cursor-pointer shadow-card'>
          <div className='text-center dark:text-gray-100'>
-            <div className='w-10 text-xl' title={locale.COMMON.TABLE_OF_CONTENTS} ><FontAwesomeIcon icon={faBook} /> </div>
-            <div className='text-xs'>{locale.COMMON.TABLE_OF_CONTENTS}</div>
+            <div className='w-10 text-xl' title={locale.COMMON.TABLE_OF_CONTENTS} ><FontAwesomeIcon icon={faListOl} /> </div>
          </div>
        </div>
      </div>
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -71,23 +71,21 @@ const BaseLayout = ({
      {/* 顶部导航栏 */}
      <div className='block lg:hidden'>
        <TopNav tags={tags} post={post} posts={totalPosts} currentSearch={currentSearch} categories={categories}
-                currentCategory={currentCategory} />
+          currentCategory={currentCategory} />
      </div>

      {/* Middle Wrapper */}
      <main className='flex dark:bg-black'>
-         <div className='hidden lg:block z-10'>
-           <SideBar post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />
-         </div>
+        <div className='hidden lg:block z-10'>
+          <SideBar post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />
+        </div>
        <div className='flex flex-grow' ref={targetRef}>
          {children}
        </div>
        <JumpToTopButton targetRef={targetRef} showPercent={true} />
-        <div className='hidden lg:block fixed right-4 top-20 p-1 rounded-full
-         bg-white text-black
-         dark:border-gray-500 dark:bg-gray-700 dark:text-white
-         ' style={{ boxShadow: 'rgba(41, 50, 60, 0.5) 0px 2px 16px', borderRadius: '28px' }}>
-          <DarkModeButton/>
+        <div className='hidden lg:block fixed right-1 bottom-52 p-1
+         bg-white text-black shadow-card dark:border-gray-500 dark:bg-gray-700 dark:text-white'>
+          <DarkModeButton />
        </div>
      </main>

--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -51,110 +51,106 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
  return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={allPosts} categories={categories}>
    <Progress targetRef={targetRef} />

-    <article id='article-wrapper' ref={targetRef} className='flex-grow dark:bg-black pt-16 bg-gray-100'>
+    <article id='article-wrapper' ref={targetRef} className='flex-grow dark:bg-black pt-16 bg-gray-200'>

-      <div className='w-screen md:w-full pt-10 max-w-5xl mx-auto'>
-        {post.type && !post.type.includes('Page') && (<>
-
-          <div className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 animate__fadeIn animate__animated'>
+      <div className='max-w-5xl mx-auto'>
+        <div className='w-screen md:w-full pt-10 '>
+          {post.type && !post.type.includes('Page') && (<div className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0'>
            <Image src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} loading='lazy' objectFit='cover' layout='fill' alt={post.title} />
-          </div>
+          </div>)}
+        </div>

-          <div className='dark:border-gray-700 bg-gray-50 dark:bg-gray-800 pb-3'>
-            {/* 文章信息 */}
-            <h1 className='font-bold text-2xl px-5 pt-5 text-black dark:text-white animate__animated animate__fadeIn'> {post.title}</h1>
-            <div className='flex-nowrap flex  mt-1  mx-4 dark:text-white'>
-              <Link href={`/category/${post.category}`} passHref>
-                <div className='cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white'>
-                  <FontAwesomeIcon icon={faFolderOpen} className='mr-1' />{post.category}
-                </div>
-              </Link>
-              {post.type[0] !== 'Page' && (
-                <div className='pl-1 text-gray-400 dark:text-gray-300 leading-10'>
-                  {formatDate(
-                    post?.date?.start_date || post.createdTime,
-                    BLOG.lang
-                  )}
-                </div>
-              )}
+        <div className='animate__fadeIn animate__animated subpixel-antialiased w-screen md:w-full lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
+          {/* 文章Title */}
+          <h1 className='font-bold text-4xl pt-5 text-black dark:text-white italic'> {post.title}</h1>

-              {/* 不蒜子 */}
-              <div id='busuanzi_container_page_pv' className='hidden'>
-                <FontAwesomeIcon icon={faEye} className='text-gray-500 dark:text-gray-400 mt-3 ml-2'/>
-                &nbsp;<span id='busuanzi_value_page_pv' className='text-gray-500 dark:text-gray-400 leading-6'></span>
-              </div>
-            </div>
-            <h2 className='text-gray-600 px-5 pt-1 text-md dark:text-gray-400'>{post.summary}</h2>
-          </div>
-
-        </>)}
-      </div>
-
-      <div className='w-screen md:w-full md:px-10 px-5 py-2 max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-900'>
-
-        {/* Notion文章主体 */}
-        {blockMap && (
-          <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
-            components={{
-              equation: Equation,
-              code: Code,
-              collectionRow: CollectionRow,
-              collection: Collection
-            }}
-          />
-        )}
-
-        {/* 版权声明 */}
-        <section
-          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>本文作者: {BLOG.author}</li>
-            <li>本文链接: <a href={url}>{url}</a></li>
-            <li>版权声明: 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！</li>
-          </ul>
-        </section>
-
-        {/* 推荐文章 */}
-        <RecommendPosts currentPost={post} totalPosts={allPosts} />
-
-        {/* 标签列表 */}
-        <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>
-              {post.tagItems.map(tag => (
-                <TagItem key={tag.name} tag={tag} />
-              ))}
-            </div>
+          {/* Notion文章主体 */}
+          {blockMap && (
+            <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
+              components={{
+                equation: Equation,
+                code: Code,
+                collectionRow: CollectionRow,
+                collection: Collection
+              }}
+            />
          )}
-          <div>
-            <ShareBar post={post} />
-          </div>
-        </section>

-        <RewardButton />
+          {/* 版权声明 */}
+          <section className='text-sm 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>本文作者: {BLOG.author}</li>
+              <li>本文链接: <a href={url}>{url}</a></li>
+              <li>版权声明: 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！</li>
+            </ul>
+          </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'>
-            <Link href={`/article/${prev.slug}`} passHref>
-              <div className='py-3 text-blue-500 text-lg hover:underline cursor-pointer'>
-                <FontAwesomeIcon icon={faAngleDoubleLeft} className='mr-1' />{prev.title}</div>
-            </Link>
-            <Link href={`/article/${next.slug}`} passHref>
-              <div className='flex py-3 text-blue-500 text-lg hover:underline cursor-pointer'>{next.title}
-                <FontAwesomeIcon icon={faAngleDoubleRight} className='ml-1 my-1' />
+          {/* 推荐文章 */}
+          <RecommendPosts currentPost={post} totalPosts={allPosts} />
+
+          {/* 标签列表 */}
+          <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>
+                {post.tagItems.map(tag => (
+                  <TagItem key={tag.name} tag={tag} />
+                ))}
+              </div>
+            )}
+            <div>
+              <ShareBar post={post} />
+            </div>
+          </section>
+
+          <div className='flex-nowrap flex  mt-1 dark:text-white'>
+            <Link href={`/category/${post.category}`} passHref>
+              <div className='cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white'>
+                <FontAwesomeIcon icon={faFolderOpen} className='mr-1' />{post.category}
              </div>
            </Link>
+            {post.type[0] !== 'Page' && (
+              <div className='pl-1 text-gray-400 dark:text-gray-300 leading-10'>
+                {formatDate(
+                  post?.date?.start_date || post.createdTime,
+                  BLOG.lang
+                )}
+              </div>
+            )}
+
+            {/* 不蒜子 */}
+            <div id='busuanzi_container_page_pv' className='hidden'>
+              <FontAwesomeIcon icon={faEye} className='text-gray-500 dark:text-gray-400 mt-3 ml-2' />
+              &nbsp;<span id='busuanzi_value_page_pv' className='text-gray-500 dark:text-gray-400 leading-6'></span>
+            </div>
+          </div>
+
+        </div>
+
+        <div className='w-screen md:w-full px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
+          <div className='py-10'>
+            <RewardButton />
          </div>
        </div>
-      </div>
+        <div className='text-gray-800 dark:text-gray-300 dark:bg-gray-900 bg-gray-50 px-5 '>
+            <div className='flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
+              <Link href={`/article/${prev.slug}`} passHref>
+                <div className='py-3 text-blue-500 text-lg hover:underline cursor-pointer'>
+                  <FontAwesomeIcon icon={faAngleDoubleLeft} className='mr-1' />{prev.title}</div>
+              </Link>
+              <Link href={`/article/${next.slug}`} passHref>
+                <div className='flex py-3 text-blue-500 text-lg hover:underline cursor-pointer'>{next.title}
+                  <FontAwesomeIcon icon={faAngleDoubleRight} className='ml-1 my-1' />
+                </div>
+              </Link>
+            </div>
+          </div>

-      {/* 评论互动 */}
-      <div
-        className='my-10 w-screen md:w-full overflow-x-auto max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-700'>
-        <Comment frontMatter={post} />
+        {/* 评论互动 */}
+        <div
+          className='my-10 w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700'>
+          <Comment frontMatter={post} />
+        </div>
      </div>
    </article>