样式微调

blog.config.js

@@ -8,7 +8,7 @@ const BLOG = {
   notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // Important page_id！！！
   notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
   appearance: 'auto', // ['light', 'dark', 'auto'],
-  font: 'font-sans', // ['font-sans', 'font-serif', 'font-mono']
+  font: 'font-serif', // ['font-sans', 'font-serif', 'font-mono']
   lightBackground: '#ffffff', // use hex value, don't forget '#' e.g #fffefc
   darkBackground: '#111827', // use hex value, don't forget '#'
   path: '', // leave this empty unless you want to deploy in a folder
@@ -58,7 +58,7 @@ const BLOG = {
     }
   },
   isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
-  googleAdsenseId: 'ca-pub-2708419466378217',
+  googleAdsenseId: 'ca-pub-2708419466378217', //谷歌广告ID
   DaoVoiceId: '', // 在线聊天 DaoVoice http://dashboard.daovoice.io/get-started
   TidioId: '8lgekxyr9hr9m7archbs0a4a2gu9ckbg' // 在线聊天 https://www.tidio.com/
 }

components/RecommendPosts.js

@@ -34,11 +34,11 @@ const RecommendPosts = ({ currentPost, totalPosts }) => {
     filteredPosts = filteredPosts.slice(0, 5)
   }
 
-  return <div className='dark:text-gray-300'>
-    <h2 className='text-3xl mb-2'>推荐文章</h2>
+  return <div className='dark:text-gray-300 dark:bg-gray-900 bg-gray-100 p-2 mb-2  border-l-4 border-yellow-500'>
+    <h2 className='ml-2 mb-2 font-bold'>相关推荐</h2>
     <ul className='list-disc px-5'>
       {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>
+        <li className='py-1' key={post.id} ><Link href={`/article/${post.slug}`}><a className='cursor-pointer underline'>{post.title}</a></Link></li>
       ))}
     </ul>
   </div>

components/RewardButton.js

@@ -16,10 +16,10 @@ const   RewardButton = () => {
     setPopoverShow(false)
   }
   return (
-    <div onMouseEnter={openPopover} onMouseLeave={closePopover} className='py-5'>
-      <div className='bg-red-500 w-20 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}>
+      <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>
+          <span>打赏一杯咖啡</span>
       </div>
 
       <div className={ `${(popoverShow ? ' block ' : ' hidden ')} transform block z-50 font-normal`}>

layouts/BaseLayout.js

@@ -63,7 +63,7 @@ const BaseLayout = ({
   const targetRef = useRef(null)
 
   return (
-    <div id='wrapper' className={[BLOG.font, theme].join(' ')}>
+    <div id='wrapper' className={[BLOG.font,'subpixel-antialiased', theme].join(' ')}>
       <CommonHead meta={meta} />
 
       {/* 顶部导航栏 */}

pages/article/[slug].js

@@ -109,20 +109,12 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
           )}
         </div>
 
-        <RecommendPosts currentPost={post} totalPosts={posts}/>
-
-        <div id='end-slogan' className='flex justify-between justify-center my-12 dark:text-gray-200'>
-          <div>———</div>
-          <div>💖 本 文 结 束 😚 感 谢 您 的 阅 读 💖</div>
-          <div>———</div>
-        </div>
-        <div className='flex opacity-50 justify-center dark:text-gray-200'>
-          打赏一杯咖啡~
-        </div>
         <div className='flex justify-center pb-5'>
           <RewardButton />
         </div>
 
+        <RecommendPosts currentPost={post} totalPosts={posts}/>
+
         {/* 版权声明 */}
         <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'>