🛠 SideBar调整

blog.config.js

@@ -32,7 +32,9 @@ const BLOG = {
     },
     gaConfig: {
       measurementId: 'G-5EV4HZD0XX' // e.g: G-XXXXXXXXXX
-    }
+    },
+    baidyAnalytics: 'f683ef76f06bb187cbed5546f6f28f28', // e.g only need xxxxx -> https://hm.baidu.com/hm.js?xxxxx
+    busuanzi: true // see http://busuanzi.ibruce.info/
   },
   comment: {
     // support provider: gitalk, utterances, cusdis
@@ -54,7 +56,8 @@ const BLOG = {
       repo: 'tangly1024/NotionNext'
     }
   },
-  isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
+  isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
+  googleAdsense: true
 }
 // export default BLOG
 module.exports = BLOG

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

layouts/ArticleLayout.js

@@ -14,7 +14,7 @@ import RightAside from '@/components/RightAside'
 import RewardButton from '@/components/RewardButton'
 import RightWidget from '@/components/RightWidget'
 import { useTheme } from '@/lib/theme'
-import LeftAside from '@/components/LeftAside'
+import SideBar from '@/components/SideBar'
 import BlogPostMini from '@/components/BlogPostMini'
 
 const mapPageUrl = id => {
@@ -49,7 +49,7 @@ const ArticleLayout = ({
 
       <div className='flex justify-between'>
 
-        <LeftAside tags={tags} />
+        <SideBar tags={tags} />
 
         {/* 主体区块 */}
         <main className='bg-gray-100 dark:bg-black w-full'>

layouts/DefaultLayout.js

@@ -4,12 +4,9 @@ import Pagination from '@/components/Pagination'
 import BLOG from '@/blog.config'
 import CommonHead from '@/components/CommonHead'
 import { useRouter } from 'next/router'
-import TopNav from '@/components/TopNav'
-import Footer from '@/components/Footer'
-import localStorage from 'localStorage'
 import { useTheme } from '@/lib/theme'
 import { useEffect } from 'react'
-import LeftAside from '@/components/LeftAside'
+import SideBar from '@/components/SideBar'
 
 const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
   const meta = {
@@ -57,16 +54,17 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
   const { theme } = useTheme()
 
   return (
-    <div className={theme}>
+    <div id='wrapper' className={theme}>
       <CommonHead meta={meta} />
-      <TopNav tags={tags} currentTag={currentTag} />
-      <div className={`${BLOG.font} flex justify-between`}>
+      {/* <TopNav tags={tags} currentTag={currentTag} /> */}
+      {/* <Header navBarTitle={meta.title} fullWidth={true}/> */}
 
-        <LeftAside tags={tags} currentTag={currentTag} />
+      <div className={`${BLOG.font} flex bg-gray-50`}>
+        <SideBar tags={tags} currentTag={currentTag} />
 
-        <main className='md:pb-10 md:px-24 p-5 bg-gray-100 dark:bg-gray-900 w-full'>
+        <main className='md:pb-10 md:px-24 p-5 flex-grow'>
           {(!page || page === 1) && (
-            <div className='py-5'></div>
+            <div className='py-5' />
           )
           }
           {/* 标签 */}

pages/_document.js

@@ -1,5 +1,6 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import BLOG from '@/blog.config'
+import ThirdPartyScript from '@/components/ThirdPartyScript'
 
 class MyDocument extends Document {
   static async getInitialProps (ctx) {
@@ -9,105 +10,14 @@ class MyDocument extends Document {
 
   render () {
     return (
-      <Html lang={BLOG.lang} >
+      <Html lang={BLOG.lang}>
         <Head>
           <link rel='icon' href='/favicon.ico' />
-          <link rel='icon' href='/favicon.svg' type='image/svg+xml'></link>
-          {/* 字体 */}
-          {/* <link rel='stylesheet' href='/font-awesome-4.7.0/css/font-awesome.min.css'/> */}
-          {/* <link rel='stylesheet' href='https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css'/> */}
-
-          {/* GoogleAdsense */}
-          {BLOG.isProd && (
-            <script data-ad-client="ca-pub-2708419466378217" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-          )}
-
-          {/* 统计脚本 */}
-          {BLOG.isProd && BLOG.analytics && 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.isProd && 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);
-                      `
-              }}
-            />
-          )}
-          {/* 百度 */}
-          {BLOG.isProd && (
-              <script async
-                dangerouslySetInnerHTML={{
-                  __html: `
-                  var _hmt = _hmt || [];
-                  (function() {
-                    var hm = document.createElement("script");
-                    hm.src = "https://hm.baidu.com/hm.js?f683ef76f06bb187cbed5546f6f28f28";
-                    var s = document.getElementsByTagName("script")[0]; 
-                    s.parentNode.insertBefore(hm, s);
-                  })();
-                  `
-                }}
-              />
-          )}
-          {/* 不蒜子 */}
-          {BLOG.isProd && (
-            <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.isProd && BLOG.analytics && 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,
-                        });
-                      `
-                }}
-              />
-            </>
-          )}
-
+          <link rel='icon' href='/favicon.svg' type='image/svg+xml' />
+          <ThirdPartyScript />
         </Head>
 
-        <body className='dark:bg-black h-full'>
+        <body>
           <Main />
           <NextScript />
         </body>

styles/globals.css

@@ -47,8 +47,6 @@ body::-webkit-scrollbar-thumb {
 }
 
 .header-name {
-  display: none;
-  opacity: 0;
   overflow: hidden;
 }
 
@@ -85,11 +83,9 @@ nav {
   }
   .header-name {
     display: block;
-    opacity: 0;
     transition: all 0.5s cubic-bezier(0.4, 0, 0, 1);
   }
   .sticky-nav-full .header-name {
-    opacity: 1;
     @apply dark:text-gray-300 text-gray-600;
   }
 }
@@ -109,6 +105,12 @@ nav {
   @apply dark:text-gray-300
 }
 
-#waifu{
-    @apply left-auto right-0 hidden lg:block !important
+#waifu {
+  @apply left-auto right-0 hidden lg:block !important
+}
+
+@media (max-width: 1300px){
+  .sidebar{
+    @apply border-r border-gray-200 h-screen overflow-y-scroll fixed left-0
+  }
 }