💅 加入DaoVoice，调整目录位置

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>