bugFix:

最新文章排序；
输入框底边样式；
目录背景色高度；
夜间模式按钮颜色；
移动端隐藏悬浮Darkmode按钮；

components/LatestPosts.js

@@ -9,15 +9,21 @@ import { useRouter } from 'next/router'
  * @constructor
  */
 const LatestPosts = ({ posts }) => {
-  // 按时间排序
-  if (posts) {
-    posts = posts.sort((a, b) => {
+  // 深拷贝
+  let postsSortByDate = Object.create(posts)
+
+  // 时间排序
+  postsSortByDate.sort((a, b) => {
       const dateA = new Date(a?.lastEditedTime || a.createdTime)
       const dateB = new Date(b?.lastEditedTime || b.createdTime)
       return dateB - dateA
-    }).slice(0, 5)
-  }
-  const router = useRouter()
+  })
+
+  // 只取前五
+  postsSortByDate = postsSortByDate.slice(0, 5)
+  
+  // 获取当前路径
+  const currentPath = useRouter().asPath
 
   return <>
     <section
@@ -25,10 +31,10 @@ const LatestPosts = ({ posts }) => {
       <div className='w-32'>最近更新</div>
     </section>
     <div>
-      {posts.map(post => {
+      {postsSortByDate.map(post => {
         return (
           <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} >
-            <div className={(router.asPath === `${BLOG.path}/article/${post.slug}` ? 'bg-gray-200 dark:bg-black' : '') + ' text-xs leading-5 py-1.5 px-5 flex'}>
+            <div className={(currentPath === `${BLOG.path}/article/${post.slug}` ? 'bg-gray-200 dark:bg-black' : '') + ' text-xs leading-5 py-1.5 px-5 flex'}>
               <div className='mr-2 text-gray-500'>
                 {formatDateFmt(post.lastEditedTime, 'yyyy/MM/dd')}
               </div>

components/SearchInput.js

@@ -45,7 +45,7 @@ const SearchInput = ({ currentTag, currentSearch }) => {
     />
     { (searchKey && searchKey.length && <i className='fa fa-close text-gray-300 float-right p-3 cursor-pointer' onClick={ cleanSearch } />)}
 
-    <div className='py-3 px-4 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
+    <div className='py-4 px-4 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
          onClick={() => { handleSearch(searchKey) }}>
       <i className='fa fa-search text-black cursor-pointer' />
     </div>

components/SideBar.js

@@ -20,14 +20,6 @@ import DarkModeButton from '@/components/DarkModeButton'
  * @constructor
  */
 const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory }) => {
-  // 按时间排序
-  if (posts) {
-    posts = posts.sort((a, b) => {
-      const dateA = new Date(a?.lastEditedTime || a.createdTime)
-      const dateB = new Date(b?.lastEditedTime || b.createdTime)
-      return dateB - dateA
-    }).slice(0, 5)
-  }
 
   return <aside id='sidebar' className='pt-10 bg-white dark:bg-gray-800 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
     <section>

components/Toc.js

@@ -50,7 +50,7 @@ const Toc = ({ toc }) => {
     setActiveSection(currentSectionId)
   }, throttleMs))
 
-  return <>
+  return <div className='dark:bg-gray-600 min-h-screen'>
     <div
       className=' dark:border-gray-600 border-b text-2xl bg-white font-bold text-black dark:bg-gray-900 dark:text-white py-6 px-6'>
       文章目录
@@ -82,7 +82,7 @@ const Toc = ({ toc }) => {
         )
       })}
     </nav>
-  </>
+  </div>
 }
 
 export default Toc

components/TopNav.js

@@ -28,7 +28,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
         </div>
 
         {/* 右侧功能 */}
-        <div className='flex flex-nowrap space-x-1 ml-2'>
+        <div className='flex flex-nowrap space-x-1 ml-2 dark:text-gray-200'>
           <DarkModeButton />
         </div>
       </div>

layouts/BaseLayout.js

@@ -81,7 +81,7 @@ const BaseLayout = ({
           {children}
         </div>
         <JumpToTopButton targetRef={targetRef} showPercent={true} />
-        <div className='fixed right-4 top-4 p-1 bg-gray-700 dark:border-gray-500 dark:bg-gray-700 rounded-full text-white' style={{ boxShadow: 'rgba(41, 50, 60, 0.5) 0px 2px 16px', borderRadius: '28px' }}>
+        <div className='hidden lg:block fixed right-4 top-4 p-1 bg-gray-700 dark:border-gray-500 dark:bg-gray-700 rounded-full text-white' style={{ boxShadow: 'rgba(41, 50, 60, 0.5) 0px 2px 16px', borderRadius: '28px' }}>
           <DarkModeButton/>
         </div>
       </main>

lib/cache/cache_manager.js

@@ -1,7 +1,11 @@
 import { getCacheFromFile, setCacheToFile } from '@/lib/cache/local_file_cache'
 import { getCacheFromMemory, setCacheToMemory } from '@/lib/cache/memory_cache'
 import BLOG from '@/blog.config'
-
+/**
+ * 为减少频繁接口请求，notion数据将被缓存
+ * @param {*} key 
+ * @returns 
+ */
 export async function getDataFromCache (key) {
   let dataFromCache
   if (BLOG.isProd) {