From 84137cef6fee9f18ea7c55948941d6bb714a62ed Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 29 Sep 2021 12:52:24 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=20=E5=8A=A0=E5=85=A5DaoVoice?=
 =?UTF-8?q?=EF=BC=8C=E8=B0=83=E6=95=B4=E7=9B=AE=E5=BD=95=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/DarkModeButton.js   |  2 +-
 components/Footer.js           |  7 ++--
 components/Progress.js         |  2 +-
 components/RewardButton.js     |  2 +-
 components/RightAside.js       | 13 +++---
 components/ShareBar.js         |  2 +-
 components/ShareButton.js      | 12 +-----
 components/SideBar.js          | 72 ++++++++++++++++++++--------------
 components/ThirdPartyScript.js | 18 +++++++++
 components/TocBar.js           | 12 +++---
 layouts/ArticleLayout.js       | 72 ++++++++++++++++++++++------------
 pages/_document.js             |  2 +-
 12 files changed, 130 insertions(+), 86 deletions(-)

diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
index ac7601f4..6c3adfdc 100644
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -8,7 +8,7 @@ const DarkModeButton = () => {
     changeTheme(newTheme)
     localStorage.setItem('theme', newTheme)
   }
-  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'>
+  return <div className='z-10 p-1 border hover:shadow-xl duration-200 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>
 }
diff --git a/components/Footer.js b/components/Footer.js
index e17bc537..7b477f8f 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -8,17 +8,16 @@ const Footer = ({ fullWidth = true }) => {
   const from = +BLOG.since
   return (
     <footer
-      className='p-6 flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400'
+      className='flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400'
     >
       <div className='py-2'>
         <span className='text-xl border-b-2'>联系我</span>
-        <div className='py-4'>
+        <div className='py-2'>
           <SocialButton />
         </div>
       </div>
 
-      <hr />
-      <div className='text-sm py-10 text-gray-400'>
+      <div className='text-sm py-4 text-gray-400'>
         <span className='fa fa-shield leading-6'><a href='https://beian.miit.gov.cn/'
                                                     className='ml-1'>闽ICP备20010331号</a></span>
         <br />
diff --git a/components/Progress.js b/components/Progress.js
index 0b08a04c..51859331 100644
--- a/components/Progress.js
+++ b/components/Progress.js
@@ -12,7 +12,7 @@ const Progress = ({ targetRef }) => {
     const scrollListener = throttle(() => {
       if (targetRef.current) {
         const fullHeight = targetRef.current.clientHeight
-        const per = parseFloat(((window.scrollY / (fullHeight) * 100)).toFixed(0))
+        const per = parseFloat(((window.scrollY / (fullHeight - 100) * 100)).toFixed(0))
         changePercent(per)
       }
       // console.log('滚动信息', window.scrollY, fullHeight, per)
diff --git a/components/RewardButton.js b/components/RewardButton.js
index 5bb9091e..3ba287f1 100644
--- a/components/RewardButton.js
+++ b/components/RewardButton.js
@@ -31,7 +31,7 @@ const RewardButton = () => {
       <div className='animate__jello animate__animated animate__faster'>
         <div
           ref={btnRef}
-          className='bg-blue-500 text-white hover:bg-white hover:text-black hover:shadow-2xl border duration-200 transform hover:scale-110 px-3 py-2 rounded cursor-pointer'>
+          className='bg-red-500 text-white hover:bg-green-400 hover:shadow-2xl duration-200 transform hover:scale-110 px-3 py-2 rounded cursor-pointer'>
           <div>
             <span className='fa fa-qrcode mr-2' />
             <span>打赏</span>
diff --git a/components/RightAside.js b/components/RightAside.js
index 2088a16f..509a7954 100644
--- a/components/RightAside.js
+++ b/components/RightAside.js
@@ -24,7 +24,7 @@ const RightAside = ({ toc, post }) => {
   }, 500)
   const [hideAside, changeHideAside] = useState(true)
 
-  return <aside className='bg-white dark:bg-gray-800 py-5'>
+  return <aside className='dark:bg-gray-800'>
     {/* 上方菜单组 */}
     <div
       className={(hideAside ? 'right-0' : 'right-48') + ' z-20 space-x-2 fixed flex top-0 px-3 py-1 duration-500'}>
@@ -38,7 +38,7 @@ const RightAside = ({ toc, post }) => {
 
     {/* 下方菜单组 */}
     <div
-      className={(hideAside ? 'right-0' : 'right-48') + ' 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-20 px-4 py-1 duration-500'}>
       <div className='flex-wrap'>
         {/* 分享按钮 */}
         <ShareButton post={post} />
@@ -48,10 +48,13 @@ const RightAside = ({ toc, post }) => {
     </div>
 
     {/* 目录 */}
-    <div
-      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'}>
+    <section
+      className={(hideAside ? '-mr-48' : 'mr-0 shadow-xl xl:shadow-none') + ' md:static top-0 fixed h-full w-48 right-0 dark:bg-gray-800 duration-500 top-0'}>
+      <div className='sticky top-0'>
       <TocBar toc={toc} />
-    </div>
+      </div>
+
+    </section>
 
   </aside>
 }
diff --git a/components/ShareBar.js b/components/ShareBar.js
index 1b0f380e..af0b35d7 100644
--- a/components/ShareBar.js
+++ b/components/ShareBar.js
@@ -31,7 +31,7 @@ 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-hidden'>
+      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'>
       <div className='text-3xl cursor-pointer'>
         <a className='fa fa-facebook-square'
            href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} />
diff --git a/components/ShareButton.js b/components/ShareButton.js
index 641ad0f4..3fbe1972 100644
--- a/components/ShareButton.js
+++ b/components/ShareButton.js
@@ -20,21 +20,13 @@ const ShareButton = ({ post }) => {
     <div className='my-2'
          onMouseEnter={() => { openPopover() }}
          onMouseLeave={() => { closePopover() }}>
-      <div className='overflow-hidden'>
-        <div
-          className={
-            (popoverShow ? ' h-96 ' : ' h-0 ') +
-            ' duration-200 ease-in-out transform z-50 font-normal'
-          }
-        >
+        <div className={(popoverShow ? 'opacity-100' : 'opacity-0') + ' duration-200 ease-in-out transform font-normal'}>
           <ShareBar post={post}/>
         </div>
-        <div
-          ref={btnRef}
+        <div ref={btnRef}
           className='border dark:border-gray-500 dark:bg-gray-600 bg-white px-4 py-3 cursor-pointer text-md transform duration-200'>
           <div className='dark:text-gray-200 fa fa-share-alt' title='share' />
         </div>
-      </div>
     </div>
   )
 }
diff --git a/components/SideBar.js b/components/SideBar.js
index 01972af9..4b91d3d8 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -7,8 +7,9 @@ import Router, { useRouter } from 'next/router'
 import DarkModeButton from '@/components/DarkModeButton'
 import Footer from '@/components/Footer'
 import throttle from 'lodash.throttle'
+import TocBar from '@/components/TocBar'
 
-const SideBar = ({ tags, currentTag }) => {
+const SideBar = ({ tags, currentTag, toc }) => {
   const locale = useLocale()
   const router = useRouter()
   const [searchValue, setSearchValue] = useState('')
@@ -37,12 +38,13 @@ const SideBar = ({ tags, currentTag }) => {
   }, 500)
   const [collapse, changeCollapse] = useState(true)
 
-  return <aside className='z-10' >
+  return <aside className='z-10'>
 
-    <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'}>
+    <div
+      className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' 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'>
+      <section className='mx-5 pt-6 pb-2'>
         <Link href='/'>
           <a
             className='text-3xl hover:shadow-2xl text-black dark:bg-gray-900 dark:text-gray-300 font-semibold dark:hover:bg-gray-600 hover:bg-gray-800 hover:text-white p-2 duration-200'>{BLOG.title}</a>
@@ -56,53 +58,63 @@ const SideBar = ({ tags, currentTag }) => {
       </section>
 
       {/* 搜索框 */}
-      <div className='flex justify-center items-center py-5 pr-5 pl-2 bg-gray-100 dark:bg-black'>
-        <div className='hover:block hidden fixed left-0 top-0 w-screen h-screen bg-black z-20 opacity-40' />
+      <section className='sticky top-0 flex justify-center items-center py-5 pr-5 pl-2 bg-gray-100 dark:bg-black'>
         <input
           type='text'
           placeholder={
             currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`
           }
-          className='hover:shadow-inner 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'
+          className='shadow-inner 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>
 
-      {/* 标签云  */}
+      {/* wrapper */}
       <div className='p-6'>
-        <div className='mb-3'>
-          <span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>标签</span>
-        </div>
-        <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>
-        </div>
-        <ul className='leading-8 dark:text-gray-400'>
-          <li><a className='fa fa-info hover:underline' href='/article/about' id='about'><span
-            className='ml-2'>关于本站</span></a></li>
-          <li><a className='fa fa-rss hover:underline' href='/feed' target='_blank' id='feed'><span
-            className='ml-2'>RSS订阅</span></a></li>
-        </ul>
-      </div>
+        {/* 菜单 */}
+        <nav className='py-4'>
+          <div className='mb-3'>
+            <span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>菜单</span>
+          </div>
+          <ul className='leading-8 dark:text-gray-400'>
+            <li><a className='fa fa-info hover:underline' href='/article/about' id='about'><span
+              className='ml-2'>关于本站</span></a></li>
+            <li><a className='fa fa-rss hover:underline' href='/feed' target='_blank' id='feed'><span
+              className='ml-2'>RSS订阅</span></a></li>
+          </ul>
+        </nav>
 
-      {/* 站点信息 */}
-      <Footer />
+        {/* 标签云  */}
+        <section className=''>
+          <div className='mb-3'>
+            <span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>标签</span>
+          </div>
+          <Tags tags={tags} currentTag={currentTag} />
+        </section>
+
+        <section className='pt-2'>
+          {/* 站点信息 */}
+          <Footer />
+        </section>
+
+      </div>
+      <div className='sticky top-0'>
+        <TocBar toc={toc} />
+      </div>
     </div>
 
     {/* 顶部菜单按钮 */}
     <div
       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='z-30 p-1 border dark:border-gray-500 h-12 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70
+      <div className='z-30 p-1 border hover:shadow-xl duration-200 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 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)} />
+        <i className='fa fa-bars p-2.5 hover:scale-125 transform duration-200'
+           onClick={() => changeCollapse(!collapse)} />
       </div>
       {/* 夜间模式 */}
       <DarkModeButton />
diff --git a/components/ThirdPartyScript.js b/components/ThirdPartyScript.js
index d548b25c..18f87c7b 100644
--- a/components/ThirdPartyScript.js
+++ b/components/ThirdPartyScript.js
@@ -2,6 +2,24 @@ import BLOG from '@/blog.config'
 
 const ThirdPartyScript = () => {
   return <>
+    {/* DaoVoice http://dashboard.daovoice.io/get-started */}
+
+    <script dangerouslySetInnerHTML={{
+      __html: `
+                  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/daf1a94b.js","daovoice")
+                  `
+    }}
+    />
+    <script async dangerouslySetInnerHTML={{
+      __html: `
+                 daovoice('init', {
+                    app_id: "daf1a94b"
+                  });
+                  daovoice('update');
+                  `
+    }}
+    />
+
     {/* GoogleAdsense */}
     { BLOG.isProd && (
       <>
diff --git a/components/TocBar.js b/components/TocBar.js
index 5a289b89..bf5eb8d8 100644
--- a/components/TocBar.js
+++ b/components/TocBar.js
@@ -8,7 +8,7 @@ import { cs } from 'react-notion-x'
  */
 const TocBar = ({ toc }) => {
   // 无目录就直接返回空
-  if (toc.length < 1) return <></>
+  if (!toc || toc.length < 1) return <></>
 
   // 监听滚动事件
   React.useEffect(() => {
@@ -47,11 +47,11 @@ const TocBar = ({ toc }) => {
     setActiveSection(currentSectionId)
   }, throttleMs)
 
-  return <>
-    <div className='text-center font-bold text-black dark:text-white border-b pb-2 mb-2 mx-4'>
+  return <div className='bg-white dark:bg-gray-800'>
+    <div className='text-center text-2xl font-bold text-black dark:text-white py-6 '>
       文章目录
     </div>
-    <nav className='notion-table-of-contents text-gray-500 dark:text-gray-400 underline overflow-x-auto'>
+    <nav className='text-gray-500 dark:text-gray-400 underline overflow-x-auto'>
       {toc.map((tocItem) => {
         const id = uuidToId(tocItem.id)
         return (
@@ -62,7 +62,7 @@ const TocBar = ({ toc }) => {
               'notion-table-of-contents-item px-5',
               `notion-table-of-contents-item-indent-level-${tocItem.indentLevel}`,
               activeSection === id &&
-              ' font-bold text-black dark:text-white bg-gray-100 dark:bg-gray-500'
+              ' font-bold text-black dark:text-white'
             )}
           >
                       <span
@@ -78,7 +78,7 @@ const TocBar = ({ toc }) => {
         )
       })}
     </nav>
-  </>
+  </div>
 }
 
 export default TocBar
diff --git a/layouts/ArticleLayout.js b/layouts/ArticleLayout.js
index 217c13f5..ecefb559 100644
--- a/layouts/ArticleLayout.js
+++ b/layouts/ArticleLayout.js
@@ -16,6 +16,10 @@ import RightWidget from '@/components/RightWidget'
 import { useTheme } from '@/lib/theme'
 import SideBar from '@/components/SideBar'
 import BlogPostMini from '@/components/BlogPostMini'
+import { useRouter } from 'next/router'
+import ShareButton from '@/components/ShareButton'
+import TopJumper from '@/components/TopJumper'
+import TocBar from '@/components/TocBar'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -37,6 +41,7 @@ const ArticleLayout = ({
   }
   const targetRef = useRef(null)
   const { theme } = useTheme()
+  const url = BLOG.link + useRouter().asPath
   return (
     <div className={`${BLOG.font} ${theme}`}>
       <CommonHead meta={meta} />
@@ -45,19 +50,18 @@ const ArticleLayout = ({
 
       <Progress targetRef={targetRef} />
 
-      {/* <TopNav tags={tags} /> */}
-
       {/* Wrapper */}
-      <div className='flex justify-between'>
+      <div className='flex justify-between bg-gray-100 dark:bg-black'>
 
-        <SideBar tags={tags} />
+        <SideBar tags={tags} toc={frontMatter.toc} />
 
         {/* 主体区块 */}
-        <main className='bg-gray-100 dark:bg-black w-full'>
+        <main className='bg-gray-100 dark:bg-black flex'>
           {/* 中央区域 wrapper */}
           <div>
 
-            <header className='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' }}
@@ -67,7 +71,7 @@ const ArticleLayout = ({
 
             <article
               ref={targetRef}
-              className='border-l border-b border-r mb-20 overflow-x-auto px-10 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-600'>
+              className='mb-20 overflow-x-auto px-10 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-600'>
               {/* 文章标题 */}
               <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
                 {frontMatter.title}
@@ -107,14 +111,14 @@ const ArticleLayout = ({
                   )}
                 </div>
 
-                  {/* 不蒜子 */}
-                  <div id='busuanzi_container_page_pv' className='hidden'>
-                    <a href='https://analytics.google.com/analytics/web/#/p273013569/reports/reportinghub'
-                         className='fa fa-eye text-gray-500 text-sm leading-none py-1 px-2'>
-                      &nbsp;<span id='busuanzi_value_page_pv' className='leading-6'></span>
-                    </a>
-                  </div>
+                {/* 不蒜子 */}
+                <div id='busuanzi_container_page_pv' className='hidden'>
+                  <a href='https://analytics.google.com/analytics/web/#/p273013569/reports/reportinghub'
+                     className='fa fa-eye text-gray-500 text-sm leading-none py-1 px-2'>
+                    &nbsp;<span id='busuanzi_value_page_pv' className='leading-6'></span>
+                  </a>
                 </div>
+              </div>
 
               <div>{children}</div>
 
@@ -134,9 +138,21 @@ const ArticleLayout = ({
                 </div>
               )}
 
-              <div className='flex justify-center py-10'>
+              <div className='flex justify-center pt-5'>
                 <RewardButton />
               </div>
+              <p className='flex justify-center py-5'>
+                ------------- 💖 🌞 本 文 结 束 😚 感 谢 您 的 阅 读 🌞 💖 -------------
+              </p>
+
+              {/* 版权声明 */}
+              <section className='dark:bg-gray-700 dark:text-gray-300 bg-gray-100 p-5 leading-8 border-l-4 border-red-500'>
+                <ul>
+                  <li><strong>本文作者：</strong>{BLOG.author}</li>
+                  <li><strong>本文链接：</strong> <a href={url}>{url}</a> 《{frontMatter.title}》</li>
+                  <li><strong>版权声明：</strong> 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！</li>
+                </ul>
+              </section>
 
               <div className='text-gray-800 my-5 dark:text-gray-300'>
                 <div className='mt-4 my-2 font-bold'>继续阅读</div>
@@ -151,22 +167,26 @@ const ArticleLayout = ({
                   {/* </Link> */}
                 </div>
               </div>
-
-              {/*  分享 */}
-              {/* <ShareBar post={frontMatter} /> */}
-              {/* <Share url={shareUrl} title={frontMatter.title}/> */}
-
               {/* 评论互动 */}
               <Comment frontMatter={frontMatter} />
             </article>
-
           </div>
-          {/* <RightWidget post={frontMatter} /> */}
-          {/* <ShareButton post={frontMatter}/> */}
-          {/* <TopJumper /> */}
+
         </main>
-        {/* 右侧内容 */}
-        <RightAside toc={frontMatter.toc} post={frontMatter} />
+
+        <div>
+          {/* 下方菜单组 */}
+          <div
+            className='right-0 space-x-2 fixed flex bottom-20 px-5 py-1 duration-500'>
+            <div className='flex-wrap'>
+              {/* 分享按钮 */}
+              <ShareButton post={frontMatter} />
+              {/* 跳回顶部 */}
+              <TopJumper />
+            </div>
+          </div>
+
+        </div>
       </div>
 
     </div>
diff --git a/pages/_document.js b/pages/_document.js
index 8ca31e5c..adf9fbb4 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -17,7 +17,7 @@ class MyDocument extends Document {
           <ThirdPartyScript />
         </Head>
 
-        <body className='bg-gray-200 dark:bg-black'>
+        <body>
           <Main />
           <NextScript />
         </body>