加入新的打赏码；

文章详情页重新排班；
文章卡牌动画调整；

blog.config.js

@@ -1,6 +1,6 @@
 const BLOG = {
-  title: '唐力1024',
+  title: '塘里1024',
-  author: '唐力',
+  author: '塘里',
   email: 'tlyong1992@hotmail.com',
   link: 'https://tangly1024.com',
   description: '分享有趣的技术与思考',

components/BlogPostCard.js

@@ -5,7 +5,7 @@ import React from 'react'
 
 const BlogPostCard = ({ post }) => {
   return (
-    <div key={post.id} className='animate__animated animate__slideInUp animate__faster shadow-card inline-block border dark:border-gray-600 my-2 w-full 2xl:max-w-2xl bg-white bg-opacity-80 dark:bg-gray-800 dark:hover:bg-gray-700 overflow-hidden'>
+    <div key={post.id} className='animate__animated animate__fadeIn animate__faster shadow-card inline-block border dark:border-gray-600 my-2 w-full 2xl:max-w-2xl bg-white bg-opacity-80 dark:bg-gray-800 dark:hover:bg-gray-700 overflow-hidden'>
         {/*  封面图 */}
         {post.page_cover && post.page_cover.length > 1 && (
           <Link href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>

components/BlogPostListScroll.js

@@ -67,7 +67,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
 
       {currentTag && (
         <div className='w-full p-1 bg-gray-100 dark:bg-gray-700 flex'>
-          <div className='cursor-pointer py-1.5 mr-2 hover:underline bg-gray-200 dark:bg-gray-400 px-2 rounded'># {currentTag}</div>
+          <div className='cursor-pointer py-1.5 mr-2 hover:underline bg-gray-200 dark:bg-gray-400 px-2 rounded'><i className='fa fa-tag mr-1 '/> {currentTag}</div>
         </div>
       )}
 

components/Comment.js

@@ -27,8 +27,6 @@ const Comment = ({ frontMatter }) => {
   const { theme } = useGlobal()
 
   return <div className='comment text-gray-800 dark:text-gray-300'>
-    <div className='font-bold pt-2 pb-4 '>留下评论</div>
-
     {/* 评论插件 */}
     {BLOG.comment.provider === 'gitalk' && (
       <GitalkComponent

components/JumpToTop.js

@@ -14,7 +14,7 @@ const JumpToTop = ({ targetRef, showPercent = true }) => {
   const { locale } = useGlobal()
   const [show, switchShow] = useState(false)
   const [percent, changePercent] = useState(0)
-  const scrollListener = useCallback(throttle(() => {
+  const scrollListener = () => {
     // 处理是否显示回到顶部按钮
     const clientHeight = targetRef ? (targetRef.current ? targetRef.current.clientHeight : 0) : 0
     const scrollY = window.pageYOffset
@@ -26,7 +26,7 @@ const JumpToTop = ({ targetRef, showPercent = true }) => {
     let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
     if (per > 100) per = 100
     changePercent(per)
-  }, 100))
+  }
   useEffect(() => {
     document.addEventListener('scroll', scrollListener)
     return () => document.removeEventListener('scroll', scrollListener)

components/Progress.js

@@ -8,7 +8,7 @@ import throttle from 'lodash.throttle'
  */
 const Progress = ({ targetRef }) => {
   const [percent, changePercent] = useState(0)
-  const scrollListener = useCallback(throttle(() => {
+  const scrollListener = () => {
     if (targetRef.current) {
       const clientHeight = targetRef ? (targetRef.current.clientHeight) : 0
       const scrollY = window.pageYOffset
@@ -17,7 +17,7 @@ const Progress = ({ targetRef }) => {
       if (per > 100) per = 100
       changePercent(per)
     }
-  }, 100))
+  }
 
   useEffect(() => {
     document.addEventListener('scroll', scrollListener)

components/RewardButton.js

@@ -39,18 +39,19 @@ const RewardButton = () => {
 
       <div
         className={
-          (popoverShow ? 'animate__animated animate__fadeIn ' : 'hidden ') +
+          (popoverShow ? 'animate__animated animate__fadeIn ' : ' hidden ') +
           ' animate__faster transform block z-50 font-normal'
         }
         ref={popoverRef}
       >
         <div
-          className='animate__animated animate__fadeIn hover:shadow-2xl duration-200 my-5 px-5 py-6 w-96 grid justify-center bg-white dark:bg-black dark:text-gray-200'>
+          className='flex space-x-10 animate__animated animate__fadeIn hover:shadow-2xl duration-200 my-5 px-5 py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
-         <span>
+         <div>
-            <img className='md:w-72 m-auto' src='/reward_code.jpg' />
+            <img className='md:w-72 m-auto' src='/reward_code_alipay.png' />
-          </span>
+          </div>
-          <br />
+          <div>
-          <span className='text-center text-gray-500'>微信赞赏码或支付宝tlyong@126.com赞助</span>
+            <img className='md:w-72 m-auto' src='/reward_code_wechat.png' />
+          </div>
         </div>
       </div>
     </div>

components/ShareBar.js

@@ -32,6 +32,7 @@ const ShareBar = ({ post }) => {
   return <>
     <div
       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'>分享本文:</div>
       <div className='text-3xl cursor-pointer'>
         <a className='fa fa-facebook-square hover:text-red-600'
            href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} />

components/TagItem.js

@@ -2,12 +2,10 @@ import Link from 'next/link'
 
 const TagItem = ({ tag }) => (
   <Link href={`/tag/${encodeURIComponent(tag)}`}>
-    <a>
+    <div className="cursor-pointer hover:shadow hover:border-gray-600 rounded-md dark:border-gray-500 border hover:scale-105 hover:bg-gray-500 bg-gray-100 hover:text-white duration-200 mr-1 p-2 leading-none text-sm
-      <p className="hover:shadow hover:border-gray-600 rounded-md dark:border-gray-500 border hover:scale-105 hover:bg-gray-500 bg-gray-100 hover:text-white duration-200 mr-1 p-2 leading-none text-sm
       dark:bg-gray-500 dark:text-gray-100 dark:hover:bg-black">
-        {tag}
+     <div>  <i className='fa fa-tag mr-1 '/> {tag}</div>
-      </p>
+    </div>
-    </a>
   </Link>
 )
 

components/TagItemMini.js

@@ -2,13 +2,13 @@ import Link from 'next/link'
 
 const TagItemMini = ({ tag, selected = false, count }) => (
   <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag)}`}>
-    <span
+    <div className={`cursor-pointer inline-block border rounded hover:bg-gray-300 duration-200 
-      className={`cursor-pointer inline-block border rounded hover:bg-gray-300 duration-200 mr-1 my-1 p-1 font-medium font-light text-xs whitespace-nowrap
+      mr-1 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:text-gray-300 dark:hover:bg-gray-500
-                   dark:text-gray-300 dark:hover:bg-gray-500 ${selected ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800' : 'bg-gray-200 text-gray-600 dark:bg-gray-800 dark:border-gray-600'
+       ${selected
-      }`}
+      ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800'
-    >
+      : 'bg-gray-200 text-gray-600 dark:bg-gray-800 dark:border-gray-600'}` }>
-                  <a> {tag + (count ? `(${count})` : '')} </a>
+    <div> <i className='fa fa-tag mr-1 py-0.5'/>{tag + (count ? `(${count})` : '')} </div>
-                </span>
+    </div>
   </Link>
 )
 

pages/article/[slug].js

@@ -3,18 +3,17 @@ import BLOG from '@/blog.config'
 import { getPageTableOfContents } from 'notion-utils'
 import { useRouter } from 'next/router'
 import Progress from '@/components/Progress'
-import Image from 'next/image'
 import TagItem from '@/components/TagItem'
 import formatDate from '@/lib/formatDate'
 import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
 import RewardButton from '@/components/RewardButton'
 import ShareBar from '@/components/ShareBar'
-import BlogPostCardMini from '@/components/BlogPostCardMini'
 import Comment from '@/components/Comment'
 import TocBar from '@/components/TocBar'
 import BaseLayout from '@/layouts/BaseLayout'
 import React, { useRef } from 'react'
 import Custom404 from '@/pages/404'
+import Link from 'next/link'
 
 import 'prismjs/themes/prism-okaidia.css'
 import 'prismjs'
@@ -40,10 +39,9 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
   const url = BLOG.link + useRouter().asPath
 
   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 shadow-inner'>
+    <div id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-200 dark:bg-black shadow-inner opacity-90'>
       {/* 中央区域 wrapper */}
       <header
         className='hover:shadow-2xl duration-200 mx-auto max-w-5xl mt-16 lg:mt-32 md:flex-shrink-0 animate__fadeIn animate__animated'>
@@ -54,8 +52,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
         )}
       </header>
 
-      <article
+      <article className='shadow 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-700'>
-        className='shadow 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'>
         {/* 文章标题 */}
         <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
           {post.title}
@@ -68,7 +65,12 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
         {/* 文章作者等关联信息 */}
         <div className='justify-between flex flex-wrap bg-gray-50 p-2 dark:bg-gray-800 dark:text-white'>
           <div className='flex-nowrap flex'>
-            <div className='cursor-pointer text-md py-2 mx-2 hover:underline'><i className='fa fa-folder-open-o mr-1'/>{post.category}</div>
+            <div className='py-2 opacity-50'>
+              发表于：
+            </div>
+            <Link href={`/category/${post.category}`}>
+              <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'>
@@ -78,15 +80,6 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
                 )}
               </div>
             )}
-
-            {post.tags && (
-              <div className='flex flex-nowrap leading-8 p-1'>
-                {post.tags.map(tag => (
-                  <TagItem key={tag} tag={tag} />
-                ))}
-              </div>
-            )}
-
           </div>
 
           {/* 不蒜子 */}
@@ -98,7 +91,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
           </div>
         </div>
 
-        <div>
+        <div className='mb-10'>
           {/* Notion文章主体 */}
           {blockMap && (
             <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
@@ -112,12 +105,16 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
           )}
         </div>
 
-        <div className='flex justify-center pt-5'>
+        <hr/>
+        <div className='flex text-2xl justify-center py-5 dark:text-gray-200'>
+          - 💖 本 文 结 束 😚 感 谢 您 的 阅 读 💖 -
+        </div>
+        <div className='flex opacity-50 justify-center pb-1 dark:text-gray-200'>
+          打赏一杯咖啡~
+        </div>
+        <div className='flex justify-center pb-5'>
           <RewardButton />
         </div>
-        <p className='flex justify-center py-5 dark:text-gray-200'>
-          - 💖 本 文 结 束 😚 感 谢 您 的 阅 读 💖 -
-        </p>
 
         {/* 版权声明 */}
         <section
@@ -129,22 +126,37 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
           </ul>
         </section>
 
-        <section className='flex'>
+        <section className='flex justify-between'>
-          <div className='text-gray-800 my-5 dark:text-gray-300 font-bold my-5 mr-2'>分享本文&nbsp;</div>
+
-          <ShareBar post={post} />
+          {post.tags && (
+            <div className='flex flex-nowrap leading-8 p-1 py-4'>
+              <div className='hidden md:block'>标签：</div>
+              {post.tags.map(tag => (
+                <TagItem key={tag} tag={tag} />
+              ))}
+            </div>
+          )}
+
+          <div>
+            <ShareBar post={post} />
+          </div>
+
         </section>
 
         <div className='text-gray-800 my-5 dark:text-gray-300'>
-          <div className='mt-4 font-bold'>其他文章</div>
+          <hr/>
           <div className='flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
-            <BlogPostCardMini post={prev} />
+            <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>
-            <BlogPostCardMini post={next} />
+            <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>
           </div>
         </div>
-        {/* 评论互动 */}
-        <Comment frontMatter={post} />
       </article>
 
+      {/* 评论互动 */}
+      <div className='shadow 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'>
+        <Comment frontMatter={post} />
+      </div>
+
     </div>
 
     {/* 右侧目录 */}