feature:

语言本地化完善；
夜间模式完善；
封装版权声明；
侧边栏sticky优化

components/ArticleCopyright.js

@@ -0,0 +1,26 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+
+export default function ArticleCopyright ({ author, url }) {
+  const { locale } = useGlobal()
+  return <section className="dark:text-gray-300 mt-6">
+    <div className="text-2xl mb-2">{locale.COMMON.COPYRIGHT}</div>
+    <ul className="text-sm dark:bg-gray-900 bg-gray-100 p-5 leading-8 border-l-4 border-red-500">
+      <li>
+        <strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>
+        <Link href="/about">
+          <a className="hover:underline">{author}</a>
+        </Link>
+      </li>
+      <li>
+      <strong className='mr-2'>{locale.COMMON.URL}:</strong>
+        <a className="hover:underline" href={url}>
+          {url}
+        </a>
+      </li>
+      <li>
+      {locale.COMMON.COPYRIGHT_NOTICE}
+      </li>
+    </ul>
+  </section>
+}

components/ArticleDetail.js

@@ -25,6 +25,7 @@ import { faEye, faFolderOpen } from '@fortawesome/free-solid-svg-icons'
 import BlogAround from '@/components/BlogAround'
 import { useRef } from 'react'
 import WordCount from './WordCount'
+import ArticleCopyright from './ArticleCopyright'
 
 /**
  *
@@ -36,7 +37,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
   const drawerRight = useRef(null)
   const url = BLOG.link + useRouter().asPath
   const { locale } = useGlobal()
-  const date = formatDate(post?.date?.start_date || post.createdTime, BLOG.lang)
+  const date = formatDate(post?.date?.start_date || post.createdTime, locale.LOCALE)
 
   return (<>
       <div id="article-wrapper" ref={targetRef} className="flex-grow mt-14 md:mt-0 max-w-5xl mx-auto w-screen md:w-full ">
@@ -134,27 +135,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
             <RecommendPosts currentPost={post} recommendPosts={recommendPosts} />
 
             {/* 版权声明 */}
-            <section className="dark:text-gray-300 mt-6">
-              <div className="text-2xl mb-2">版权声明</div>
-              <ul className="text-sm dark:bg-gray-900 bg-gray-100 p-5 leading-8 border-l-4 border-red-500">
-                <li>
-                  本文作者:{' '}
-                  <Link href="/about">
-                    <a className="hover:underline">{BLOG.author}</a>
-                  </Link>
-                </li>
-                <li>
-                  本文链接:{' '}
-                  <a className="hover:underline" href={url}>
-                    {url}
-                  </a>
-                </li>
-                <li>
-                  本博客所有文章除特别声明外，均采用 BY-NC-SA
-                  许可协议。转载请注明出处！
-                </li>
-              </ul>
-            </section>
+            <ArticleCopyright author={BLOG.author} url={url} />
 
             {/* 标签列表 */}
             <section className="md:flex md:justify-between">

components/BlogPostListScroll.js

@@ -4,6 +4,7 @@ import BLOG from '@/blog.config'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import BlogPostListEmpty from '@/components/BlogPostListEmpty'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 博客列表滚动分页
@@ -47,6 +48,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
   })
 
   const targetRef = useRef(null)
+  const { locale } = useGlobal()
 
   if (!postsToShow || postsToShow.length === 0) {
     return <BlogPostListEmpty currentSearch={currentSearch} />
@@ -65,7 +67,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
           handleGetMore()
         }}
              className='w-full my-4 py-4  text-center cursor-pointer glassmorphism shadow-xl rounded-xl dark:text-gray-200'
-        > {hasMore ? '继续加载' : '加载完了😰'} </div>
+        > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`} </div>
       </div>
     </div>
   }

components/DarkModeButton.js

@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 const DarkModeButton = () => {
   const { changeTheme } = useGlobal()
   const userTheme = loadUserThemeFromCookies()
+
   // 用户手动设置主题
   const handleChangeDarkMode = () => {
     const newTheme = (userTheme === 'light' ? 'dark' : 'light')

components/FloatDarkModeButton.js

@@ -25,6 +25,10 @@ export default function FloatDarkModeButton () {
     const newTheme = userTheme === 'light' ? 'dark' : 'light'
     saveTheme(newTheme)
     changeTheme(newTheme)
+    const htmlElement = document.getElementsByTagName('html')[0]
+    console.log('切换主题', htmlElement)
+    htmlElement.classList.remove(userTheme)
+    htmlElement.classList.add(newTheme)
   }
 
   return (

components/SideAreaLeft.js

@@ -21,28 +21,25 @@ import React from 'react'
  * @returns {JSX.Element}
  * @constructor
  */
-const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
+const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
   const { locale } = useGlobal()
+  const showToc = post && post.toc && post.toc.length > 1
+  return <>
 
-  return <aside id='sidebar' className='scroll-hidden h-full w-72 z-10'>
-
-    <div className={(!post ? 'sticky top-5' : '') + ' pb-4'}>
-
-      <section className='hidden lg:block bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-8 shadow-md'>
+    <div className={(!post ? 'sticky top-10 ' : ' ') + ' w-72'}>
+      <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-8 shadow-md'>
         <InfoCard />
       </section>
-
       {/* 菜单 */}
-      <section className='hidden lg:block mt-5 py-5 rounded-xl shadow-md bg-white dark:bg-gray-800  hover:shadow-2xl duration-200'>
+      <section className='hidden lg:block mb-5 py-5 rounded-xl shadow-md bg-white dark:bg-gray-800  hover:shadow-2xl duration-200'>
         <MenuButtonGroup allowCollapse={true} />
         <div className='px-5 pt-2'>
            <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
         </div>
       </section>
-
       {/* 分类  */}
       {!post && categories && (
-        <section className='rounded-xl shadow-md py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
+        <section className='rounded-xl shadow-md py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
           <div className='text-sm px-5 mb-2 flex flex-nowrap justify-between font-light'>
             <div className='pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
             <Link href='/category' passHref>
@@ -54,18 +51,16 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
           <CategoryGroup currentCategory={currentCategory} categories={categories} />
         </section>
       )}
-
     </div>
 
-    {post && post.toc && post.toc.length > 1 && (
-      <section id='left-toc' className='sticky top-6 pb-20 rounded-xl shadow-md bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
+    {showToc && (
+      <section className='sticky top-10 pb-20 rounded-xl shadow-md bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
         <div className='border-b text-2xl bg-white text-black rounded-t-xl dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
           {locale.COMMON.TABLE_OF_CONTENTS}
         </div>
         <Toc toc={post.toc} />
       </section>
     )}
-
-  </aside>
+ </>
 }
-export default SideArea
+export default SideAreaLeft

components/SideAreaRight.js

@@ -51,7 +51,7 @@ const SideAreaRight = ({
         ></ins>
       </section>
 
-      <div className="sticky top-5">
+      <div className="sticky top-10">
         {/* 最新文章 */}
         {posts && (
           <section className="rounded-xl shadow-md py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">