重新排版优化

2026-05-21 15:09:43 +00:00 · 2021-10-14 17:36:39 +08:00
parent 6f5e1b3f39
commit a07894bd46
20 changed files with 184 additions and 168 deletions
--- a/components/BlogPost.js
+++ b/components/BlogPost.js
@@ -1,10 +1,10 @@
 import BLOG from '@/blog.config'
-import TagItem from '@/components/TagItem'
+import TagItemMini from '@/components/TagItemMini'

 const BlogPost = ({ post }) => {
  return (
    <article key={post.id}
-             className='inline-block border dark:border-gray-600 my-2 shadow-card w-full md:max-w-md bg-white dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
+             className='inline-block border dark:border-gray-600 my-2 w-full md:max-w-md bg-white dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
        {/*  封面图 */}
        {post.page_cover && post.page_cover.length > 1 && (
          <a href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>
@@ -14,15 +14,14 @@ const BlogPost = ({ post }) => {

        <div className='px-8 py-6'>
          <a href={`${BLOG.path}/article/${post.slug}`}
-             className='block my-3 text-2xl leading-tight font-semibold text-black dark:text-gray-100 hover:underline'>
+             className='block my-3 text-2xl leading-tight font-bold text-black dark:text-gray-100 hover:underline'>
            {post.title}
          </a>
+          <div className='flex flex-nowrap'>
+            {post.tags.map(tag => (<TagItemMini key={tag} tag={tag} />))}
+            <span className='mt-2 mx-2 text-gray-500 dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
+          </div>
          <p className='mt-2 text-gray-500 dark:text-gray-300 text-sm'>{post.summary}</p>
-            <div className='flex flex-nowrap leading-8 py-2'>
-              {post.tags.map(tag => (
-                <TagItem key={tag} tag={tag} />
-              ))}
-            </div>
        </div>
    </article>
  )
--- a/components/BlogPostMini.js
+++ b/components/BlogPostMini.js
@@ -9,13 +9,12 @@ const BlogPostMini = ({ post }) => {
            <img className='sm:w-40 w-full object-cover cursor-pointer' src={post.page_cover} alt={post.title} />
        )}

-        <main className='px-2 py-1'>
+        <main className='px-2 overflow-x-hidden'>
          <a href={`${BLOG.path}/article/${post.slug}`}
-             className='block my-3 leading-tight font-semibold text-black dark:text-gray-200 hover:underline'>
+             className='block my-3 leading-tight font-semibold text-black dark:text-gray-200 hover:underline whitespace-nowrap'>
            {post.title}
          </a>
-          {/* <p className='mt-2 text-gray-500 dark:text-gray-400 text-xs overflow-x-hidden'>{post.summary}</p> */}
-          {/* <p className='mt-2 text-gray-500 dark:text-gray-400 text-xs overflow-x-hidden'>{BLOG.link}/article/{post.slug}</p> */}
+           <p className='mt-2 text-gray-500 dark:text-gray-400 text-xs overflow-x-hidden'>{post.summary}</p>
        </main>
    </a>
  )
--- a/components/Container.js
+++ b/components/Container.js
@@ -11,14 +11,20 @@ const Container = ({ children, layout, fullWidth, tags, meta, ...customMeta }) =
  const scrollTrigger = useCallback(throttle(() => {
    const scrollS = window.scrollY
    const nav = document.querySelector('#sticky-nav')
+    const sidebar = document.querySelector('#sidebar')
    const tagsBar = document.querySelector('#tags-bar')
+    const rightToc = document.querySelector('#right-toc')
    if (scrollS >= windowTop && scrollS > 10) {
      nav && nav.classList.add('-mt-16')
      tagsBar && tagsBar.classList.add('-mt-32')
+      sidebar && sidebar.classList.replace('top-20', 'top-2')
+      rightToc && rightToc.classList.replace('top-16', 'top-0')
      windowTop = scrollS
    } else {
      nav && nav.classList.remove('-mt-16')
      tagsBar && tagsBar.classList.remove('-mt-32')
+      sidebar && sidebar.classList.replace('top-2', 'top-20')
+      rightToc && rightToc.classList.replace('top-0', 'top-16')
      windowTop = scrollS
    }
  }, 200))
--- a/components/Drawer.js
+++ b/components/Drawer.js
@@ -24,7 +24,6 @@ const Drawer = ({ post, currentTag, cRef, tags }) => {
  const handleMenuClick = () => {
    switchShowDrawer(!showDrawer)
  }
-  console.log(post)
  return <div>
    <div className='fixed top-0 left-0 z-30 h-full'>
      <div
--- a/components/DrawerRight.js
+++ b/components/DrawerRight.js
@@ -20,7 +20,6 @@ const DrawerRight = ({ post, cRef }) => {
    switchShowDrawer(!showDrawer)
  }

-  console.log(post)
  return <div>
    <div className='fixed top-0 right-0 z-30 h-full'>
      <div
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -5,9 +5,9 @@ const Footer = ({ fullWidth = true }) => {
  const y = d.getFullYear()
  return (
    <footer
-      className='flex-shrink-0 justify-center text-center m-auto w-full mx-auto text-gray-500 dark:text-gray-400 text-sm text-gray-400 p-6'
+      className='bg-gray-800 dark:bg-black dark:border-gray-900 border-t flex-shrink-0 justify-center text-center m-auto w-full text-gray-400 text-sm p-6'
    >
-      <span className='fa fa-copyright leading-6'> {` ${y}`} <span> <a href='https://www.tangly1024.com/article/about' className='underline font-bold'>tangly1024.com</a>. Powered by <a href='https://notion.so' className='underline font-bold'>Notion</a> & <a href='https://vercel.com' className='underline font-bold'>Vercel</a>.</span> </span>
+      <span className='fa fa-copyright leading-6'> {` ${y}`} <span> <a href='https://www.tangly1024.com/article/about' className='underline font-bold text-gray-100'>tangly1024.com</a>. Powered by <a href='https://notion.so' className='underline font-bold text-gray-100'>Notion</a> & <a href='https://vercel.com' className='underline font-bold text-gray-100'>Vercel</a>.</span> </span>
      <br />
      <span className='fa fa-shield leading-6 mr-2'> <a href='https://beian.miit.gov.cn/' className='ml-1 font-bold'>闽ICP备20010331号</a></span>

--- a/components/InfoCard.js
+++ b/components/InfoCard.js
@@ -6,7 +6,7 @@ import Router from 'next/router'
 const InfoCard = () => {
  return <>
    <div className='flex justify-center text-center'>
-      <div className='mx-auto py-4 leading-8'>
+      <div className='pb-6 mx-auto leading-8'>
        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/') }}>
          <Image
          alt={BLOG.author}
@@ -18,7 +18,6 @@ const InfoCard = () => {
        </div>
        <h1 className='text-2xl dark:text-white py-2'>{BLOG.author}</h1>
        <h2 className='text-sm text-gray-500 dark:text-gray-400'>{BLOG.description}</h2>
-        <h2 className='text-sm fa fa-map-marker text-gray-500 dark:text-gray-400'>&nbsp;Fuzhou,China</h2>
      </div>
    </div>
  </>
--- a/components/JumpToTop.js
+++ b/components/JumpToTop.js
@@ -33,16 +33,17 @@ const JumpToTop = ({ targetRef, showPercent = true }) => {

  return (
    <div
-      className={(show ? 'animate__fade InUp' : 'animate__fadeOutUp') + ' animate__animated animate__faster shadow-lg'}>
+      className={(show ? 'animate__fade InUp' : 'animate__fadeOutUp') + '  rounded-full animate__animated animate__faster shadow-xl'}>
      <div
-        className='border dark:border-gray-500 dark:bg-gray-600 bg-white cursor-pointer hover:shadow-2xl'
+        style={{ backgroundColor: 'rgb(56, 144, 255)' }}
+        className='rounded-full dark:bg-gray-600 bg-white cursor-pointer'
        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
        {showPercent && (
-          <div className='absolute bg-white dark:text-gray-200 dark:bg-gray-600 z-20 hover:opacity-0 w-11 py-3 text-center'>
-            {percent}%
-          </div>
+        <div style={{ backgroundColor: 'rgb(56, 144, 255)' }} className='text-gray-100 absolute rounded-full dark:text-gray-200 dark:bg-gray-600 z-20 hover:opacity-0 w-11 py-3 text-center'>
+          {percent}%
+        </div>
        )}
-        <a className='dark:text-gray-200 fa fa-arrow-up p-4 transform hover:scale-150 duration-200'
+        <a className='text-gray-100 fa fa-arrow-up p-4 transform hover:scale-150 duration-200'
           title={locale.POST.TOP} />
      </div>
    </div>
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -4,7 +4,7 @@ import { useLocale } from '@/lib/locale'
 const MenuButtonGroup = ({ allowCollapse = false }) => {
  const locale = useLocale()
  const links = [
-    // { id: 0, icon: 'fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
+    { id: 0, icon: 'fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
    { id: 1, icon: 'fa-info-circle', name: locale.NAV.ABOUT, to: '/article/about', show: true },
    { id: 7, icon: 'fa-github', name: 'Github', to: 'https://github.com/tangly1024', show: true },
    { id: 5, icon: 'fa-weibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true },
--- a/components/RewardButton.js
+++ b/components/RewardButton.js
@@ -40,12 +40,12 @@ const RewardButton = () => {
      <div
        className={
          (popoverShow ? 'animate__animated animate__fadeIn ' : 'hidden ') +
-          ' animate__faster border-0 transform block z-50 font-normal'
+          ' animate__faster transform block z-50 font-normal'
        }
        ref={popoverRef}
      >
        <div
-          className='border 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='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'>
         <span>
            <img className='md:w-72 m-auto' src='/reward_code.jpg' />
          </span>
--- a/components/ShareBar.js
+++ b/components/ShareBar.js
@@ -16,7 +16,7 @@ const ShareBar = ({ post }) => {

  const openPopover = () => {
    createPopper(btnRef.current, popoverRef.current, {
-      placement: 'left'
+      placement: 'top'
    })
    setQrCodeShow(true)
  }
@@ -31,20 +31,20 @@ const ShareBar = ({ post }) => {

  return <>
    <div
-      className='dark:border-gray-500 py-2 text-gray-500 flex-col text-center space-y-2 w-12 border my-1 bg-white dark:bg-gray-800 dark:text-white overflow-visible'>
+      className='py-2 text-gray-500 text-center space-x-2 flex inline-block my-1 dark:text-gray-200 overflow-visible'>
      <div className='text-3xl cursor-pointer'>
-        <a className='fa fa-facebook-square'
+        <a className='fa fa-facebook-square hover:text-red-600'
           href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} />
      </div>
      <div className='text-3xl cursor-pointer'>
-        <a className='fa fa-twitter-square' target='_blank' rel='noreferrer'
+        <a className='fa fa-twitter-square hover:text-red-600' target='_blank' rel='noreferrer'
           href={`https://twitter.com/intent/tweet?title=${post.title}&url${shareUrl}`} />
      </div>
      <div className='text-3xl cursor-pointer'>
-        <a className='fa fa-telegram' href={`https://telegram.me/share/url?url=${shareUrl}&text=${post.title}`} />
+        <a className='fa fa-telegram hover:text-red-600' href={`https://telegram.me/share/url?url=${shareUrl}&text=${post.title}`} />
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='fa fa-wechat' ref={btnRef}
+        <a className='fa fa-wechat hover:text-red-600' ref={btnRef}
           onMouseEnter={() => {
             openPopover()
           }}
@@ -66,19 +66,19 @@ const ShareBar = ({ post }) => {
        </a>
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='fa fa-weibo' target='_blank' rel='noreferrer'
+        <a className='fa fa-weibo hover:text-red-600' target='_blank' rel='noreferrer'
           href={`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${post.title}`} />
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='fa fa-qq' target='_blank' rel='noreferrer'
+        <a className='fa fa-qq hover:text-red-600' target='_blank' rel='noreferrer'
           href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${post.title}&desc=${post.summary}`} />
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='fa fa-star' target='_blank' rel='noreferrer'
+        <a className='fa fa-star 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}`} />
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='fa fa-link' onClick={copyUrl} />
+        <a className='fa fa-link hover:text-red-600' onClick={copyUrl} />
      </div>
    </div>
  </>
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -6,20 +6,26 @@ import TagList from '@/components/TagList'
 const SideBar = ({ tags, currentTag, post }) => {
  return <aside className='z-10 dark:border-gray-500 border-gray-200 bg-white hidden md:block'>
    <div className='dark:bg-gray-800 border-r dark:border-gray-700 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
-      <div className='hidden md:block sticky top-16'>
-
+      <div id='sidebar' className='hidden md:block sticky top-20 duration-500'>
        <InfoCard/>
+        <hr className='dark:border-gray-700'/>
        <div className={post ? 'hidden xl:block' : 'block'}>
          <MenuButtonGroup allowCollapse={true}/>
        </div>

        {tags && (
-          <div className='p-4'>
+          <div>
            {/* 标签云  */}
-            <section>
-              <strong className='text-xl text-gray-600 dark:text-gray-400'>标签</strong>
-              <TagList tags={tags} currentTag={currentTag} />
+            <hr className='dark:border-gray-700'/>
+            <section className='py-3 px-5 text-gray-600 dark:text-gray-400 dark:hover:bg-black duration-100 flex flex-nowrap align-middle'>
+              <div className='my-auto w-5 text-xl justify-center flex'>
+                <i className='fa fa-tags' />
+              </div>
+              <div className='ml-4 w-32'>标签</div>
            </section>
+            <div className='px-5'>
+              <TagList tags={tags} currentTag={currentTag} />
+            </div>
          </div>
        )}

--- a/components/TagItem.js
+++ b/components/TagItem.js
@@ -3,7 +3,7 @@ import Link from 'next/link'
 const TagItem = ({ tag }) => (
  <Link href={`/tag/${encodeURIComponent(tag)}`}>
    <a>
-      <p className="hover:shadow rounded-lg 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-lg 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}
      </p>
--- a/components/TagItemMini.js
+++ b/components/TagItemMini.js
@@ -0,0 +1,15 @@
+import Link from 'next/link'
+
+const TagItemMini = ({ tag, selected = false, count }) => (
+  <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag)}`}>
+    <span
+      className={`cursor-pointer inline-block border hover:bg-gray-300 duration-200 mr-1 my-1 p-1 font-medium font-light text-xs whitespace-nowrap
+                   dark:text-gray-300 dark:hover:bg-gray-800 ${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-600 dark:border-gray-600'
+      }`}
+    >
+                  <a> {tag + (count ? `(${count})` : '')} </a>
+                </span>
+  </Link>
+)
+
+export default TagItemMini
--- a/components/TagList.js
+++ b/components/TagList.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import TagItemMini from '@/components/TagItemMini'

 /**
 * 标签组
@@ -11,20 +11,10 @@ const TagList = ({ tags, currentTag }) => {
  if (!tags) return <></>
  return (
    <div id='tags-list' className='duration-500 dark:border-gray-600 dark:bg-gray-800 w-52 pt-2'>
-        {Object.keys(tags).map(key => {
-          const selected = key === currentTag
+        {Object.keys(tags).map(tag => {
+          const selected = tag === currentTag
          return (
-            <Link key={key} href={selected ? '/' : `/tag/${encodeURIComponent(key)}`}>
-              <span
-                className={`cursor-pointer inline-block border hover:bg-gray-300 duration-200 mr-1 my-1 p-1 font-medium font-light text-xs whitespace-nowrap
-                 dark:text-gray-300 dark:hover:bg-gray-800 ${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-600 dark:border-gray-600'
-                }`}
-              >
-                <a>
-                  {`${key} (${tags[key]})`}
-                </a>
-              </span>
-            </Link>
+            <TagItemMini tag={tag} selected={selected} count={tags[tag]}/>
          )
        })}
    </div>
--- a/components/TocBar.js
+++ b/components/TocBar.js
@@ -50,7 +50,7 @@ const TocBar = ({ toc }) => {
    setActiveSection(currentSectionId)
  }, throttleMs))

-  return <div className='bg-white dark:bg-gray-800 pb-10 min-h-screen'>
+  return <div>
    <nav className='text-gray-500 dark:text-gray-400 underline overflow-auto scroll-hidden py-2'>
      {toc.map((tocItem) => {
        const id = uuidToId(tocItem.id)
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -16,7 +16,7 @@ const TopNav = ({ tags, currentTag, post }) => {
    <DrawerRight post={post} cRef={drawerRight}/>

    {/* 导航栏 */}
-    <div id='sticky-nav' className='xl:mt-0 transform 2xl:mt-0 duration-500 bg-white dark:bg-gray-800 border-b dark:border-gray-700'>
+    <div id='sticky-nav' className='transform duration-500 bg-white dark:bg-gray-800 border-b dark:border-gray-700'>
      <div className='text-sm m-auto w-full flex flex-row justify-between items-center px-4 py-2 shadow-md'>
        {/* 左侧LOGO */}
        <div className='flex ml-12'>
@@ -41,9 +41,9 @@ const TopNav = ({ tags, currentTag, post }) => {
        {/* 右侧功能 */}
        <div className='flex flex-nowrap space-x-1'>
          <DarkModeButton />
-          <div className='z-10 p-1 duration-200 mr-2 h-12 text-xl cursor-pointer dark:text-gray-300 '>
+          {post && <div className='block xl:hidden z-10 p-1 duration-200 mr-2 h-12 text-xl cursor-pointer dark:text-gray-300 '>
            <i className='fa p-2.5 hover:scale-125 transform duration-200 fa-bookmark' onClick={() => { drawerRight.current.handleMenuClick() }}/>
-          </div>
+          </div>}
        </div>
      </div>
    </div>