From 1d73dc6de16239b88a192a9b309b3da0750ad3e2 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 13 Oct 2021 12:41:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=9D=A1=E5=8A=A0=E9=98=B4?=
 =?UTF-8?q?=E5=BD=B1=EF=BC=9B=20=E8=88=AA=E6=9D=A1=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E6=A0=8F=E6=BB=9A=E5=8A=A8=E6=97=B6=E9=9A=90=E8=97=8F=EF=BC=9B?=
 =?UTF-8?q?=20=E4=BD=BF=E7=94=A8Container=E5=AE=B9=E5=99=A8;=20=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E6=96=87=E7=AB=A0=E8=BE=B9=E8=B7=9D=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CommonHead.js      |  1 +
 components/Drawer.js          | 37 ++++++++++++++++++++---------------
 components/MenuButtonGroup.js |  4 ++--
 components/SideBar.js         |  2 +-
 components/TocBar.js          |  2 +-
 components/TopNav.js          | 27 ++++++++++++++++---------
 layouts/ArticleLayout.js      | 14 +++++--------
 layouts/DefaultLayout.js      | 13 ++++++------
 8 files changed, 55 insertions(+), 45 deletions(-)

diff --git a/components/CommonHead.js b/components/CommonHead.js
index cdc12b36..aef00a8e 100644
--- a/components/CommonHead.js
+++ b/components/CommonHead.js
@@ -1,5 +1,6 @@
 import BLOG from '@/blog.config'
 import Head from 'next/head'
+import ThirdPartyScript from '@/components/ThirdPartyScript'
 
 const CommonHead = ({ meta }) => {
   const url = BLOG.path.length ? `${BLOG.link}/${BLOG.path}` : BLOG.link
diff --git a/components/Drawer.js b/components/Drawer.js
index 7a670907..6f98a6f2 100644
--- a/components/Drawer.js
+++ b/components/Drawer.js
@@ -3,32 +3,35 @@ import BLOG from '@/blog.config'
 import SearchInput from '@/components/SearchInput'
 import MenuButtonGroup from '@/components/MenuButtonGroup'
 import TocBar from '@/components/TocBar'
-import React, { useState } from 'react'
+import React, { forwardRef, useImperativeHandle, useState } from 'react'
 
 /**
  * 抽屉面板，可以从侧面拉出
  * @returns {JSX.Element}
  * @constructor
  */
-const Drawer = ({ post, currentTag }) => {
+const Drawer = ({ post, currentTag, cRef }) => {
+  // 暴露给父组件 通过cRef.current.handleMenuClick 调用
+  useImperativeHandle(cRef, () => {
+    return {
+      handleMenuClick: () => handleMenuClick()
+    }
+  })
   const [showDrawer, switchShowDrawer] = useState(false)
   // 点击按钮更改侧边抽屉状态
   const handleMenuClick = () => {
     switchShowDrawer(!showDrawer)
   }
   return <div>
-    {/* 触发抽屉按钮 */}
-    <div onClick={handleMenuClick}
-      className='fixed top-3 left-0 z-30 py-1 px-5 duration-200 text-gray-600 text-2xl cursor-pointer dark:text-gray-300'>
-      <i className='fa hover:scale-125 transform duration-200 fa-bars '
-          />
-    </div>
     <div className='fixed top-0 left-0 z-30 h-full'>
-      <div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' overflow-y-auto duration-200 w-72 h-full bg-white dark:bg-gray-800 border-r dark:border-gray-600'}>
+      <div
+        className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' overflow-y-auto duration-200 w-72 h-full bg-white dark:bg-gray-800 border-r dark:border-gray-600'}>
         {/* LOGO */}
-        <div className='sticky top-0 z-20 bg-white w-72  flex space-x-4 px-5 py-3.5 dark:border-gray-500 border-b dark:bg-gray-600 '>
-          <div className='z-10 p-1 duration-200 mr-2 bg-white dark:bg-gray-600 text-gray-600 text-xl cursor-pointer dark:text-gray-300'>
-            <i className='fa hover:scale-125 transform duration-200 fa-bars ' onClick={handleMenuClick}/>
+        <div
+          className='sticky top-0 z-20 bg-white w-72  flex space-x-4 px-5 py-3.5 dark:border-gray-500 border-b dark:bg-gray-600 '>
+          <div
+            className='z-10 p-1 duration-200 mr-2 bg-white dark:bg-gray-600 text-gray-600 text-xl cursor-pointer dark:text-gray-300'>
+            <i className='fa hover:scale-125 transform duration-200 fa-bars ' onClick={handleMenuClick} />
           </div>
           <Link href='/'>
             <a
@@ -40,13 +43,14 @@ const Drawer = ({ post, currentTag }) => {
       </div>
 
       {/* 侧边菜单 */}
-      <div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' w-72 duration-200 h-full fixed left-0 top-20 overflow-y-auto'}>
+      <div
+        className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' w-72 duration-200 h-full fixed left-0 top-16 overflow-y-auto'}>
         <div className='z-20'>
           <div className='px-5 my-3 block md:hidden'>
-            <SearchInput currentTag={currentTag}/>
+            <SearchInput currentTag={currentTag} />
           </div>
           {/* 菜单 */}
-          <MenuButtonGroup allowCollapse={false}/>
+          <MenuButtonGroup allowCollapse={false} />
           {post && (
             <div className='sticky top-24'>
               <TocBar toc={post.toc} />
@@ -56,7 +60,8 @@ const Drawer = ({ post, currentTag }) => {
       </div>
     </div>
     {/* 背景蒙版 */}
-    <div className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-20 w-full h-full bg-black bg-opacity-50' } onClick={handleMenuClick}/>
+    <div className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-20 w-full h-full bg-black bg-opacity-50'}
+         onClick={handleMenuClick} />
   </div>
 }
 export default Drawer
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index d7ef8d8e..5b9b2d70 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -23,14 +23,14 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
           link.show && (
             <Link href={link.to}>
               <li
-                key={link.id}
+                key={link.id + link.icon}
                 title={link.to}
                 className='py-3 px-5 hover:bg-gray-100 cursor-pointer dark:hover:bg-black duration-100 flex flex-nowrap align-middle'
               >
                 <div className='my-auto w-5 text-2xl justify-center flex'>
                   <i className={'fa ' + link.icon} />
                 </div>
-                <div className={(allowCollapse ? 'hidden xl:block' : '') + ' ml-4 w-32'}>{link.name}</div>
+                <div className={(allowCollapse ? 'hidden 2xl:block' : '') + ' ml-4 w-32'}>{link.name}</div>
               </li>
             </Link>
           )
diff --git a/components/SideBar.js b/components/SideBar.js
index 0b022054..21264289 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -3,7 +3,7 @@ import TocBar from '@/components/TocBar'
 import MenuButtonGroup from '@/components/MenuButtonGroup'
 
 const SideBar = ({ tags, currentTag, post }) => {
-  return <aside className='z-10 bg-white dark:border-gray-500 border-gray-200 hidden lg:block'>
+  return <aside className='z-10 bg-white dark:border-gray-500 border-gray-200 hidden xl: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 className={post ? 'hidden xl:block' : 'block'}>
diff --git a/components/TocBar.js b/components/TocBar.js
index c4f46f3b..3f6bc2f0 100644
--- a/components/TocBar.js
+++ b/components/TocBar.js
@@ -51,7 +51,7 @@ const TocBar = ({ toc }) => {
   }, throttleMs)
 
   return <div className='bg-white dark:bg-gray-800 pb-10 min-h-screen'>
-    <div className='border-t dark:border-gray-600 border-b text-2xl bg-gray-100 font-bold text-black dark:bg-black dark:text-white py-6 px-6'>
+    <div className='w-52 border-t dark:border-gray-600 border-b text-2xl bg-gray-100 font-bold text-black dark:bg-black dark:text-white py-6 px-6'>
       文章目录
     </div>
     <nav className='text-gray-500 dark:text-gray-400 underline overflow-y-auto overflow-x-auto'>
diff --git a/components/TopNav.js b/components/TopNav.js
index 5fc2d12b..9ae00535 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -1,24 +1,31 @@
 import Link from 'next/link'
 import BLOG from '@/blog.config'
-import React from 'react'
+import React, { useRef } from 'react'
 import DarkModeButton from '@/components/DarkModeButton'
 import Image from 'next/image'
 import SearchInput from '@/components/SearchInput'
 import Drawer from '@/components/Drawer'
 
 const TopNav = ({ tags, currentTag, post }) => {
-  return (
-    <div className='bg-white dark:bg-gray-800 border-b dark:border-gray-700'>
+  const drawer = useRef()
 
-      {/* 侧面抽屉 */}
-      <Drawer post={post} currentTag={currentTag} />
+  return (<div className='fixed w-full top-0 z-20'>
+    {/* 侧面抽屉 */}
+    <Drawer post={post} currentTag={currentTag} cRef={drawer} />
 
+    <div id='sticky-nav'
+         className='transform xl:mt-0 duration-500 bg-white dark:bg-gray-800 border-b dark:border-gray-700'>
       {/* 导航栏 */}
       <div
-        id='sticky-nav'
-        className='text-sm m-auto w-full flex flex-row justify-between items-center p-2 md:px-4'
+        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'>
+          <div onClick={() => { drawer.current.handleMenuClick() }}
+               className='fixed top-3 left-0 z-30 py-1 px-5 text-gray-600 text-2xl cursor-pointer dark:text-gray-300'>
+            <i className='fa hover:scale-125 transform duration-200 fa-bars '
+            />
+          </div>
           <Link href='/'>
             <a
               className='flex text-xl py-1 px-3 justify-center align-middle my-auto font-bold font-semibold hover:bg-gray-800 hover:text-white duration-200
@@ -27,11 +34,12 @@ const TopNav = ({ tags, currentTag, post }) => {
           </Link>
         </div>
 
+        {/* 中间搜索框 */}
         <div className='hidden sm:block w-96'>
-          {/* 搜索框 */}
           <SearchInput currentTag={currentTag} />
         </div>
 
+        {/* 右侧功能 */}
         <div className='flex flex-nowrap space-x-1'>
           <DarkModeButton />
           <div className='flex align-middle cursor-pointer'>
@@ -48,7 +56,8 @@ const TopNav = ({ tags, currentTag, post }) => {
         </div>
       </div>
     </div>
-  )
+
+  </div>)
 }
 
 export default TopNav
diff --git a/layouts/ArticleLayout.js b/layouts/ArticleLayout.js
index 47b8b7b8..64383d9b 100644
--- a/layouts/ArticleLayout.js
+++ b/layouts/ArticleLayout.js
@@ -17,6 +17,7 @@ import CommonHead from '@/components/CommonHead'
 import TopNav from '@/components/TopNav'
 import SideBar from '@/components/SideBar'
 import Footer from '@/components/Footer'
+import Container from '@/components/Container'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -41,22 +42,17 @@ const ArticleLayout = ({
   const url = BLOG.link + useRouter().asPath
 
   return (
-    <div className={`${BLOG.font} ${theme}`}>
-      <CommonHead meta={meta} />
+    <Container className={`${BLOG.font} ${theme}`} meta={meta} tags={tags}>
 
       {/* live2d 看板娘 */}
        <script async src='https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js' />
 
       <Progress targetRef={targetRef} />
 
-      <div className='fixed w-full top-0 z-20'>
-         <TopNav post={frontMatter}/>
-      </div>
-
       {/* Wrapper */}
       <div className='flex justify-between bg-gray-100'>
 
-         <SideBar tags={tags} post={frontMatter} />
+        <SideBar tags={tags} post={frontMatter} />
 
         {/* 主体区块 */}
         <main className='bg-gray-100 w-full dark:bg-gray-800'>
@@ -72,7 +68,7 @@ const ArticleLayout = ({
 
             <article
               ref={targetRef}
-              className='mb-10 overflow-x-auto px-10 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
+              className='mb-10 overflow-x-auto md:px-10 px-5 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
               {/* 文章标题 */}
               <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
                 {frontMatter.title}
@@ -175,7 +171,7 @@ const ArticleLayout = ({
         </div>
       </div>
 
-    </div>
+    </Container>
   )
 }
 
diff --git a/layouts/DefaultLayout.js b/layouts/DefaultLayout.js
index bf23a2fa..b4f4c1b6 100644
--- a/layouts/DefaultLayout.js
+++ b/layouts/DefaultLayout.js
@@ -9,6 +9,8 @@ import TopNav from '@/components/TopNav'
 import Tags from '@/components/Tags'
 import SideBar from '@/components/SideBar'
 import Footer from '@/components/Footer'
+import React from 'react'
+import Container from '@/components/Container'
 
 const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
   const meta = {
@@ -48,18 +50,15 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
   const { theme } = useTheme()
 
   return (
-    <div id='wrapper' className={theme}>
-      <CommonHead meta={meta} />
-      <div className=' fixed w-full top-0 z-20'>
-        <TopNav />
-      </div>
+    <Container id='wrapper' className={theme} meta={meta} tags={tags}>
 
       <div className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
         {/* 侧边菜单 */}
         <SideBar />
 
         <div className='flex-grow'>
-          <div className='fixed top-16 z-10 w-full border-b dark:border-gray-600'>
+
+          <div id='tags-bar' className='fixed xl:mt-0 top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
             <Tags tags={tags} currentTag={currentTag} />
           </div>
 
@@ -96,7 +95,7 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
         </div>
 
       </div>
-    </div>
+    </Container>
   )
 }
 DefaultLayout.propTypes = {