🛠 SideBar调整

components/DarkModeButton.js

@@ -8,12 +8,10 @@ const DarkModeButton = () => {
     changeTheme(newTheme)
     localStorage.setItem('theme', newTheme)
   }
-  return <div className=''>
-   <div onClick={handleChangeDarkMode}
-        className='border w-10 h-10 justify-center align-middle font-bold text-lg rounded flex p-2.5 cursor-pointer text-gray-600 hover:scale-125 transform duration-200
+  return <div onClick={handleChangeDarkMode}
+        className=' justify-center align-middle font-bold text-xl rounded cursor-pointer text-gray-600 hover:scale-125 transform duration-200
                 dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-100 dark:hover:text-black'>
      <span className={'fa px-1 ' + (theme === 'dark' ? ' fa-sun-o' : ' fa-moon-o')} />
    </div>
- </div>
 }
 export default DarkModeButton

components/Footer.js

@@ -7,8 +7,8 @@ const Footer = ({ fullWidth = true }) => {
   const y = d.getFullYear()
   const from = +BLOG.since
   return (
-    <div
-      className='py-4 flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400 bottom-0'
+    <footer
+      className='p-5 flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400 bottom-0'
     >
       <SocialButton/>
       <div className='text-sm'>
@@ -16,7 +16,7 @@ const Footer = ({ fullWidth = true }) => {
         <br/>
         <span className='fa fa-copyright leading-6'> {from === y || !from ? y : `${from} - ${y}`} {BLOG.author} </span>
       </div>
-    </div>
+    </footer>
   )
 }
 

components/Header.js

@@ -49,6 +49,27 @@ const Header = ({ navBarTitle, fullWidth }) => {
   }, [sentinelRef])
   return (
     <>
+      { BLOG.autoCollapsedNavBar === true && (
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+                      var windowTop=0;
+                      function scrollTrigger(){
+                          let scrollS = window.scrollY;
+                          let nav = document.querySelector('.sticky-nav');
+                          if(scrollS >= windowTop){
+                              nav.style.opacity = 0;
+                              windowTop = scrollS;
+                          }else{
+                              nav.style.opacity = 1;
+                              windowTop = scrollS;
+                          }
+                      };
+                      window.addEventListener('scroll',scrollTrigger);
+                      `
+          }}
+        />
+      )}
       <div className='observer-element h-0.5' ref={sentinelRef}/>
       <div
         className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 py-8 bg-opacity-60 ${
@@ -73,12 +94,12 @@ const Header = ({ navBarTitle, fullWidth }) => {
           </Link>
           {navBarTitle
             ? (
-              <p className='ml-2 font-medium text-day dark:text-night header-name'>
+              <p className='ml-2 font-medium text-gray-500 dark:text-night header-name'>
                 {navBarTitle}
               </p>
               )
             : (
-              <p className='ml-2 font-medium text-day dark:text-night header-name'>
+              <p className='ml-2 font-medium text-500 dark:text-night header-name'>
                 {BLOG.title} {' '}
                 {BLOG.title},{' '}
                 <span className='font-normal'>{BLOG.description}</span>

components/LeftAside.js

@@ -1,70 +0,0 @@
-import Tags from '@/components/Tags'
-import { useLocale } from '@/lib/locale'
-import Link from 'next/link'
-import BLOG from '@/blog.config'
-import { useState } from 'react'
-import Router, { useRouter } from 'next/router'
-import DarkModeButton from '@/components/DarkModeButton'
-import SocialButton from '@/components/SocialButton'
-import Footer from '@/components/Footer'
-
-const LeftAside = ({ tags, currentTag }) => {
-  const locale = useLocale()
-  const router = useRouter()
-  const [searchValue, setSearchValue] = useState('')
-
-  const handleKeyUp = (e) => {
-    if (e.keyCode === 13) {
-      Router.push({ pathname: '/', query: { s: searchValue } })
-    }
-  }
-  return <aside
-    style={{ width: '330px' }}
-    className='px-10 hidden xl:block py-5 bg-gray-50 dark:bg-gray-800 duration-200 border-r dark:border-black'
-    >
-
-    <div className='sticky top-16'>
-      <div className='my-5 flex'>
-        <Link href='/'>
-          <a
-            className='hover:shadow-xl dark:border-gray-600 border-black border-2 bg-white dark:bg-gray-800 dark:text-gray-300 font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200'>{BLOG.title}</a>
-        </Link>
-      </div>
-
-      <div className='text-gray-500  dark:text-gray-300'>
-        <i className='fa fa-map-marker mr-1' />
-        Fuzhou, China
-      </div>
-
-      <hr className='my-5'/>
-
-      {/* 搜索框 */}
-      <div className='flex justify-center items-center py-5 '>
-        <i className='fa fa-search absolute right-8 text-gray-400' />
-        <input
-          type='text'
-          placeholder={
-            currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`
-          }
-          className='hover:shadow-xl duration-200 px-5 bg-gray-100 rounded w-full py-2 border-black dark:border-gray-600 bg-white text-black dark:bg-gray-700 dark:text-white'
-          onKeyUp={handleKeyUp}
-          onChange={e => setSearchValue(e.target.value)}
-          defaultValue={router.query.s ?? ''}
-        />
-      </div>
-
-      <hr className='my-5'/>
-
-      <div>
-        <span className='dark:text-gray-200'>标签</span>
-        <Tags tags={tags} currentTag={currentTag} />
-      </div>
-
-      <div className='bottom-1 fixed'>
-        <div className='justify-center flex '><DarkModeButton /></div>
-        <Footer/>
-      </div>
-    </div>
-  </aside>
-}
-export default LeftAside

components/SideBar.js

@@ -0,0 +1,75 @@
+import Tags from '@/components/Tags'
+import { useLocale } from '@/lib/locale'
+import Link from 'next/link'
+import BLOG from '@/blog.config'
+import { useState } from 'react'
+import Router, { useRouter } from 'next/router'
+import DarkModeButton from '@/components/DarkModeButton'
+import Footer from '@/components/Footer'
+
+const SideBar = ({ tags, currentTag }) => {
+  const locale = useLocale()
+  const router = useRouter()
+  const [searchValue, setSearchValue] = useState('')
+
+  const handleKeyUp = (e) => {
+    if (e.keyCode === 13) {
+      Router.push({ pathname: '/', query: { s: searchValue } })
+    }
+  }
+
+  const [collapse, changeCollapse] = useState(false)
+
+  return <aside
+    className={(collapse ? '' : '') + ' z-50 bg-gray-100 dark:bg-gray-800 dark:border-black duration-500 ease-in-out'}
+  >
+
+    <div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' sidebar bg-gray-100 h-full w-60 md:w-80 duration-500 ease-in-out'}>
+
+      {/* 搜索框 */}
+      <div className='flex justify-center items-center py-5 pr-5 pl-2 bg-gray-200'>
+        <input
+          type='text'
+          placeholder={
+            currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`
+          }
+          className='hover:shadow-xl duration-200 pl-2 rounded w-full py-2 border dark:border-gray-600 bg-white text-black dark:bg-gray-700 dark:text-white'
+          onKeyUp={handleKeyUp}
+          onChange={e => setSearchValue(e.target.value)}
+          defaultValue={router.query.s ?? ''}
+        />
+        <i className='fa fa-search text-gray-400 -ml-8' />
+      </div>
+
+      <section className='mx-5 py-5 flex'>
+        <Link href='/'>
+          <a
+            className='hover:shadow-xl dark:border-gray-600 border-gray-500 border-2 bg-white dark:bg-gray-800 dark:text-gray-300 font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200'>{BLOG.title}</a>
+        </Link>
+      </section>
+
+      <section className='text-gray-500 px-5 dark:text-gray-300'>
+        <i className='fa fa-map-marker mr-1' />
+        Fuzhou, China
+      </section>
+
+      {/* <hr className='my-5' /> */}
+
+      <div className='p-5'>
+        <span className='dark:text-gray-200'>标签</span>
+        <Tags tags={tags} currentTag={currentTag} />
+      </div>
+
+      <Footer />
+    </div>
+     <div className={(collapse ? 'left-0' : 'md:left-80 left-60') + ' space-x-2 fixed md:absolute flex top-0 px-4 py-3 duration-500 ease-in-out'}>
+      <div className='my-4 text-xl p-1 rounded cursor-pointer text-center hover:scale-125 transform duration-200 bg-gray-100 bg-opacity-50 md:bg-opacity-0'>
+        <i className='fa fa-bars px-1' onClick={() => changeCollapse(!collapse)} />
+      </div>
+      <div className='my-4 bg-gray-100 bg-opacity-50 p-1 rounded md:bg-opacity-0'>
+        <DarkModeButton />
+      </div>
+     </div>
+  </aside>
+}
+export default SideBar

components/ThirdPartyScript.js

@@ -0,0 +1,79 @@
+import BLOG from '@/blog.config'
+
+const ThirdPartyScript = () => {
+  return <>
+    {/* GoogleAdsense */}
+    { BLOG.isProd && (
+      <>
+        {BLOG.googleAdsense && (
+          <script data-ad-client='ca-pub-2708419466378217' async
+                  src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' />
+        )}
+
+        {/* 统计脚本 */}
+        { BLOG.analytics.provider === 'ackee' && (
+          <script async src={BLOG.analytics.ackeeConfig.tracker}
+                  data-ackee-server={BLOG.analytics.ackeeConfig.dataAckeeServer}
+                  data-ackee-domain-id={BLOG.analytics.ackeeConfig.domainId}
+          />
+        )}
+        {/* 百度 */}
+        {BLOG.analytics.baidyAnalytics && (
+          <script async
+                  dangerouslySetInnerHTML={{
+                    __html: `
+                  var _hmt = _hmt || [];
+                  (function() {
+                    var hm = document.createElement("script");
+                    hm.src = "https://hm.baidu.com/hm.js?${BLOG.analytics.baidyAnalytics}";
+                    var s = document.getElementsByTagName("script")[0]; 
+                    s.parentNode.insertBefore(hm, s);
+                  })();
+                  `
+                  }}
+          />
+        )}
+        {/* 不蒜子 */}
+        {BLOG.analytics.busuanzi && (
+          <script async
+                  src={'//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js'}
+          />
+        )}
+
+        {/* 站长统计 */}
+        {BLOG.isProd && (
+          <script async
+                  dangerouslySetInnerHTML={{
+                    __html: `
+                  document.write(unescape("%3Cspan style='display:none' id='cnzz_stat_icon_1279970751'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D1279970751' type='text/javascript'%3E%3C/script%3E"));
+                  `
+                  }}
+          />
+        )}
+
+        {/* 谷歌统计 */}
+        {BLOG.analytics.provider === 'ga' && (
+          <>
+            <script async
+                    src={`https://www.googletagmanager.com/gtag/js?id=${BLOG.analytics.gaConfig.measurementId}`}
+            />
+            <script async
+                    dangerouslySetInnerHTML={{
+                      __html: `
+                        window.dataLayer = window.dataLayer || [];
+                        function gtag(){dataLayer.push(arguments);}
+                        gtag('js', new Date());
+                        gtag('config', '${BLOG.analytics.gaConfig.measurementId}', {
+                          page_path: window.location.pathname,
+                        });
+                      `
+                    }}
+            />
+          </>
+        )}
+      </>
+    )}
+  </>
+}
+
+export default ThirdPartyScript

components/TopNav.js

@@ -1,11 +1,8 @@
 import Link from 'next/link'
 import BLOG from '@/blog.config'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useLocale } from '@/lib/locale'
 import Router, { useRouter } from 'next/router'
-import Tags from '@/components/Tags'
-import localStorage from 'localStorage'
-import { useTheme } from '@/lib/theme'
 import DarkModeButton from '@/components/DarkModeButton'
 import SocialButton from '@/components/SocialButton'
 
@@ -25,21 +22,16 @@ const TopNav = ({ tags, currentTag }) => {
   }
 
   return (
-    <div className='bg-white dark:bg-gray-600 block xl:hidden'>
+    <div className='bg-white dark:bg-gray-600 block xl:hidden '>
       {/* 隐藏的顶部菜单 */}
-      <div
-        className={(hiddenMenu ? 'h-0 ' : 'h-full ') + ' overflow-hidden bg-gray-800 text-xl text-gray-200 w-full transform ease-in-out duration-500'}>
+      <nav
+        className={(hiddenMenu ? '-mt-10' : ' ') + ' py-1 overflow-hidden bg-gray-800 text-xl text-gray-200 w-full ease-in-out duration-500'}>
         <ul className='mx-5 duration-300'>
-          <li>
-            <div>
-              <Tags tags={tags} currentTag={currentTag} />
-            </div>
-          </li>
           <li>
             <SocialButton/>
           </li>
         </ul>
-      </div>
+      </nav>
 
       {/* 导航栏 */}
       <div