bugfix:

评论插件空白；赞赏按钮微调；侧边栏、详情页微调排班
2026-05-14 07:26:52 +00:00 · 2021-12-03 16:11:05 +08:00
parent f695e98e0c
commit 1ddd7adf37
6 changed files with 53 additions and 56 deletions
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -28,7 +28,7 @@ const Comment = ({ frontMatter }) => {

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

-    )}</div>
+    )}
+  </div>
 }

 export default Comment
--- a/components/LatestPostsGroup.js
+++ b/components/LatestPostsGroup.js
@@ -2,7 +2,6 @@ import Link from 'next/link'
 import BLOG from '@/blog.config'
 import { formatDateFmt } from '@/lib/formatDate'
 import { useRouter } from 'next/router'
-import { useGlobal } from '@/lib/global'

 /**
 * 最新文章列表
@@ -31,15 +30,15 @@ const LatestPostsGroup = ({ posts, sliceCount = 6 }) => {
      {postsSortByDate.map(post => {
        const selected = currentPath === `${BLOG.path}/article/${post.slug}`
        return (
-          <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`}>
+          <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-400'>
+              <div className='mr-2 text-gray-500'>
                {formatDateFmt(post.lastEditedTime, 'MM/dd')}
              </div>
              <div
                className={
-                  (selected ? 'dark:text-white text-black ' : 'text-gray-500 ') +
+                  (selected ? 'dark:text-white text-black ' : 'text-gray-500') +
                  ' text-sm flex w-50 overflow-x-hidden whitespace-nowrap  hover:text-black dark:hover:text-white cursor-pointer hover:underline'
                }>
                {post.title}
--- a/components/RecommendPosts.js
+++ b/components/RecommendPosts.js
@@ -37,7 +37,7 @@ const RecommendPosts = ({ currentPost, totalPosts }) => {

  const { locale } = useGlobal()

-  return <div className='dark:text-gray-300 dark:bg-gray-800 bg-gray-100 p-2 mb-2  border-l-4 border-yellow-500'>
+  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'>
      {filteredPosts.map(post => (
--- a/components/RewardButton.js
+++ b/components/RewardButton.js
@@ -20,15 +20,15 @@ const RewardButton = () => {
    }
  }
  return (
-    <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'>
+    <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'>
          <FontAwesomeIcon icon={faQrcode} className='mr-2' />
          <span>打赏一杯咖啡</span>
      </div>

-      <div id='reward-qrcode' className='hidden flex space-x-10 animate__animated animate__fadeIn duration-200 my-5 px-5 mx-auto py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
-           <div className='w-72 bg-black'><Image width='auto' height='auto' layout='responsive' objectFit='fill' src='/reward_code_alipay.png' /></div>
-           <div className='w-72 bg-black'><Image width='auto' height='auto' layout='responsive' objectFit='fill' src='/reward_code_wechat.png' /></div>
+      <div onMouseEnter={openPopover} onMouseLeave={closePopover} id='reward-qrcode' className='hidden flex space-x-10 animate__animated animate__fadeIn duration-200 my-5 px-5 mx-auto py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
+           <div className='w-80'><Image width='auto' height='auto' layout='responsive' objectFit='fill' src='/reward_code_alipay.png' /></div>
+           <div className='w-80'><Image width='auto' height='auto' layout='responsive' objectFit='fill' src='/reward_code_wechat.png' /></div>
      </div>
    </div>
  )
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -38,14 +38,14 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
        <section className='p-5'>
          <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
        </section>
-        <hr classNaÍme='dark:border-gray-700' />
+        <hr className='dark:border-gray-700' />
      </section>

      {/* 最新文章 */}
      {posts && (
        <section className='mt-4'>
-          <div className='text-sm font-bold py-2 px-5  flex flex-nowrap justify-between'>
-            <div className='text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-4' />{locale.COMMON.LATEST_POSTS}</div>
+          <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>
              <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
                {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
@@ -59,8 +59,8 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
      {/* 分类  */}
      {categories && (
        <section className='mt-5'>
-          <div className='text-sm font-bold py-2 px-5  flex flex-nowrap justify-between'>
-            <div className='text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}</div>
+          <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>
              <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
                {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
@@ -74,7 +74,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
      {/* 标签云  */}
      {tags && (
        <section className='mt-5'>
-          <div className='text-sm font-bold py-2 px-5 flex flex-nowrap justify-between'>
+          <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>
              <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -51,48 +51,46 @@ 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 bg-gray-200 dark:bg-black pt-16'>
+    <article id='article-wrapper' ref={targetRef} className='flex-grow dark:bg-black pt-16 bg-gray-100'>

      <div className='w-screen md:w-full pt-10 max-w-5xl mx-auto'>
        {post.type && !post.type.includes('Page') && (<>
-          {/* 封面图 */}

-            <div style={{ height: '30rem' }} className='w-full transform duration-200 md:flex-shrink-0 animate__fadeIn animate__animated'>
-              <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 className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 animate__fadeIn animate__animated'>
+            <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 className='dark:border-gray-700 bg-white dark:bg-gray-800'>
+          <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>
-            <h2 className='text-gray-500 px-5 pt-3 text-sm dark:text-gray-400 animate__animated animate__fadeIn'>{post.summary}</h2>
-            <div className='justify-between mt-5 flex flex-wrap bg-gray-100 p-2 dark:bg-gray-700 dark:text-white border-b-2 dark:border-gray-500'>
-              <div className='flex-nowrap flex'>
-                <Link href={`/category/${post.category}`} passHref>
-                  <div className='cursor-pointer text-md py-2 mx-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='flex items-start text-gray-500 dark:text-gray-300 leading-10'>
-                    {formatDate(
-                      post?.date?.start_date || post.createdTime,
-                      BLOG.lang
-                    )}
-                  </div>
-                )}
-              </div>
+            <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 id='busuanzi_container_page_pv' className='hidden'>
-                <FontAwesomeIcon icon={faEye} className='text-gray-500 leading-none m-2.5' />
+                <FontAwesomeIcon icon={faEye} className='text-gray-500 dark:text-gray-400 mt-3 ml-2'/>
                &nbsp;<span id='busuanzi_value_page_pv' className='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='shadow-card  w-screen md:w-full md:px-10 px-5 max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-900'>
+      <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 && (
@@ -106,12 +104,6 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
          />
        )}

-        {/* 赞赏按钮 */}
-        <RewardButton />
-
-        {/* 推荐文章 */}
-        <RecommendPosts currentPost={post} totalPosts={allPosts} />
-
        {/* 版权声明 */}
        <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'>
@@ -122,6 +114,9 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
          </ul>
        </section>

+        {/* 推荐文章 */}
+        <RecommendPosts currentPost={post} totalPosts={allPosts} />
+
        {/* 标签列表 */}
        <section className='md:flex md:justify-between'>
          {post.tagItems && (
@@ -137,6 +132,8 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
          </div>
        </section>

+        <RewardButton />
+
        {/* 上一篇下一篇文章 */}
        <div className='text-gray-800 my-5 dark:text-gray-300'>
          <hr />
@@ -147,7 +144,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
            </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' />
+                <FontAwesomeIcon icon={faAngleDoubleRight} className='ml-1 my-1' />
              </div>
            </Link>
          </div>
@@ -156,10 +153,9 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories

      {/* 评论互动 */}
      <div
-        className='shadow-card mb-20 w-screen md:w-full overflow-x-auto md:px-10 px-5 py-10 max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-700'>
+        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>
-
    </article>

    {/* 悬浮目录按钮 */}