💅 微调 样式

components/Comment.js

@@ -1,6 +1,8 @@
 import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
+import { useTheme } from '@/lib/theme'
+import { useEffect, useState } from 'react'
 
 const GitalkComponent = dynamic(
   () => {
@@ -23,6 +25,7 @@ const CusdisComponent = dynamic(
 
 const Comment = ({ frontMatter }) => {
   const router = useRouter()
+  const { theme } = useTheme()
 
   return <div className='comment text-gray-800 dark:text-gray-300'>
     <div className='font-bold pt-2 pb-4 '>留下评论</div>
@@ -55,7 +58,7 @@ const Comment = ({ frontMatter }) => {
             pageId: frontMatter.id,
             pageTitle: frontMatter.title,
             pageUrl: BLOG.link + router.asPath,
-            theme: BLOG.appearance
+            theme: theme
           }}
           lang={BLOG.lang.toLowerCase()}
         />

components/DarkModeButton.js

@@ -8,7 +8,7 @@ const DarkModeButton = () => {
     changeTheme(newTheme)
     localStorage.setItem('theme', newTheme)
   }
-  return <div className='p-1 border dark:border-gray-500 my-4 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70 dark:hover:bg-gray-100 text-xl cursor-pointer dark:text-gray-300 dark:hover:text-black'>
+  return <div className='z-10 p-1 border dark:border-gray-500 mr-2 h-12 my-2 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70 dark:hover:bg-gray-100 text-xl cursor-pointer dark:text-gray-300 dark:hover:text-black'>
     <i className={'fa p-2.5 hover:scale-125 transform duration-200 ' + (theme === 'dark' ? ' fa-sun-o' : ' fa-moon-o') } onClick={handleChangeDarkMode} />
   </div>
 }

components/RightAside.js

@@ -22,17 +22,15 @@ const RightAside = ({ toc, post }) => {
       changeHideAside(true)
     }
   }, 500)
-  const [hideAside, changeHideAside] = useState(false)
+  const [hideAside, changeHideAside] = useState(true)
 
   return <aside className='bg-white dark:bg-gray-800 py-5'>
-    <div className={(hideAside ? 'w-0' : 'w-52') + ' duration-500'} />
-
     {/* 上方菜单组 */}
     <div
-      className={(hideAside ? 'right-0' : 'right-52') + ' space-x-2 fixed md:fixed flex top-0 px-4 py-1 duration-500'}>
+      className={(hideAside ? 'right-0' : 'right-48') + ' z-20 space-x-2 fixed flex top-0 px-3 py-1 duration-500'}>
       {/* 目录按钮 */}
       <div
-        className='border dark:border-gray-500 my-3 bg-white dark:bg-gray-600 bg-opacity-70 dark:hover:bg-gray-100 text-xl cursor-pointer dark:text-gray-300 dark:hover:text-black p-1'>
+        className='border dark:border-gray-500 my-2 bg-white dark:bg-gray-600 bg-opacity-70 dark:hover:bg-gray-100 text-xl cursor-pointer dark:text-gray-300 dark:hover:text-black p-1'>
         <i className='fa fa-book p-2.5 hover:scale-125 transform duration-200'
            onClick={() => changeHideAside(!hideAside)} />
       </div>
@@ -40,7 +38,7 @@ const RightAside = ({ toc, post }) => {
 
     {/* 下方菜单组 */}
     <div
-      className={(hideAside ? 'right-0' : 'right-52') + ' space-x-2 fixed flex bottom-10 px-4 py-1 duration-500'}>
+      className={(hideAside ? 'right-0' : 'right-48') + ' space-x-2 fixed flex bottom-10 px-4 py-1 duration-500'}>
       <div className='flex-wrap'>
         {/* 分享按钮 */}
         <ShareButton post={post} />
@@ -51,7 +49,7 @@ const RightAside = ({ toc, post }) => {
 
     {/* 目录 */}
     <div
-      className={(hideAside ? '-mr-52' : 'mr-0 shadow-xl xl:shadow-none') + ' h-full hover:shadow-2xl bg-white w-52 right-0 dark:bg-gray-800 duration-500 fixed top-0 pt-8'}>
+      className={(hideAside ? '-mr-48' : 'mr-0 shadow-xl xl:shadow-none') + ' fixed h-full hover:shadow-2xl bg-white w-48 right-0 dark:bg-gray-800 duration-500 top-0 pt-8'}>
       <TocBar toc={toc} />
     </div>
 

components/SideBar.js

@@ -41,6 +41,7 @@ const SideBar = ({ tags, currentTag }) => {
 
     <div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' hover:shadow-2xl dark:bg-gray-800 bg-white sidebar h-full w-60 duration-500 ease-in-out'}>
 
+      {/* Logo  */}
       <section className='mx-5 pt-6 pb-2 border-b'>
         <Link href='/'>
           <a
@@ -48,6 +49,7 @@ const SideBar = ({ tags, currentTag }) => {
         </Link>
       </section>
 
+      {/* 地理标志 */}
       <section className='text-gray-500 text-sm px-7 pt-3 pb-5 dark:text-gray-300'>
         <i className='fa fa-map-marker mr-1' />
         Fuzhou, China
@@ -69,6 +71,7 @@ const SideBar = ({ tags, currentTag }) => {
         <i className='fa fa-search text-gray-400 -ml-8' />
       </div>
 
+      {/* 标签云  */}
       <div className='p-6'>
         <div className='mb-3'>
           <span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>标签</span>
@@ -76,6 +79,7 @@ const SideBar = ({ tags, currentTag }) => {
         <Tags tags={tags} currentTag={currentTag} />
       </div>
 
+      {/* 菜单 */}
       <div className='p-6'>
         <div className='mb-3'>
           <span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>菜单</span>
@@ -88,15 +92,16 @@ const SideBar = ({ tags, currentTag }) => {
         </ul>
       </div>
 
+      {/* 站点信息 */}
       <Footer />
     </div>
 
     {/* 顶部菜单按钮 */}
     <div
-      className={(collapse ? 'left-0' : 'left-60') + ' fixed flex-wrap top-0 px-4 py-1 duration-500 ease-in-out'}>
+      className={(collapse ? 'left-0' : 'left-60') + ' fixed flex flex-nowrap md:flex-col  top-0 pl-4 py-1 duration-500 ease-in-out'}>
       {/* 菜单折叠 */}
-      <div className='p-1 border dark:border-gray-500 my-3 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70
+      <div className='z-30 p-1 border dark:border-gray-500 h-12 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70
-      dark:hover:bg-gray-100 text-xl cursor-pointer dark:text-gray-300 dark:hover:text-black'>
+      dark:hover:bg-gray-100 text-xl cursor-pointer mr-2 my-2 dark:text-gray-300 dark:hover:text-black'>
         <i className='fa fa-bars p-2.5 hover:scale-125 transform duration-200' onClick={() => changeCollapse(!collapse)} />
       </div>
       {/* 夜间模式 */}

layouts/ArticleLayout.js

@@ -57,7 +57,7 @@ const ArticleLayout = ({
           {/* 中央区域 wrapper */}
           <div>
 
-            <header className='border-l border-t border-r mx-auto max-w-5xl mt-20 md:flex-shrink-0 overflow-y-hidden animate__fadeIn animate__animated'>
+            <header className='mx-auto max-w-5xl mt-20 md:flex-shrink-0 overflow-y-hidden animate__fadeIn animate__animated'>
               {/* 封面图 */}
               {frontMatter.page_cover && frontMatter.page_cover.length > 1 && (
                 <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }}