feature:

统计模块

components/ArticleDetail.js

@@ -42,7 +42,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
   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 ">
           <article itemScope itemType="https://schema.org/Movie"
-            className="rounded-xl shadow-md hover:shadow-2xl duration-300 animate__fadeIn animate__animated subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white  dark:bg-gray-900"
+            className="rounded-xl shadow-md hover:shadow-2xl duration-300 animate__fadeIn animate__animated subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
           >
             <header>
                 {post.type && !post.type.includes('Page') && post?.page_cover && (
@@ -80,13 +80,13 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
                     </Link>
                   )}
 
-                  <div className="hidden busuanzi_container_page_pv">
+                  <div className="hidden busuanzi_container_page_pv font-light">
                     <FontAwesomeIcon
                       icon={faEye}
                       className="text-gray-500 dark:text-gray-400 mt-3 ml-5"
                     />
                     &nbsp;
-                    <span className="text-gray-500 dark:text-gray-400 leading-6 busuanzi_container_page_pv"
+                    <span className="text-gray-500 dark:text-gray-400 leading-6 busuanzi_value_page_pv"
                     ></span>
                   </div>
                 </section>

components/FloatDarkModeButton.js

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

components/InfoCard.js

@@ -19,15 +19,6 @@ const InfoCard = ({ postCount }) => {
         />
         </div>
         <div className='text-3xl font-serif dark:text-white mx-auto py-4 hover:scale-105 transform duration-200'>{BLOG.title}</div>
-        <div className=' dark:text-gray-300 font-light text-xs'>
-          <span className='busuanzi_container_site_pv hidden '>
-                <FontAwesomeIcon icon={faEye}/><span className='px-1 busuanzi_value_site_pv'> </span>
-          </span>
-          <span className='pl-2 busuanzi_container_site_uv hidden'>
-                <FontAwesomeIcon icon={faUsers}/> <span className='px-1 busuanzi_value_site_pv'> </span>   </span>
-          <span className='pl-2'>
-          <FontAwesomeIcon icon={faFileAlt}/> <span className='px-1'> {postCount}</span>   </span>
-        </div>
     </div>
   </>
 }

components/SideAreaLeft.js

@@ -4,7 +4,7 @@ import MenuButtonGroup from '@/components/MenuButtonGroup'
 import SearchInput from '@/components/SearchInput'
 import Toc from '@/components/Toc'
 import { useGlobal } from '@/lib/global'
-import { faAngleDoubleRight, faThList } from '@fortawesome/free-solid-svg-icons'
+import { faAngleDoubleRight, faChartBar, faThList } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'
@@ -24,13 +24,14 @@ import React from 'react'
 const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
   const { locale } = useGlobal()
   const showToc = post && post.toc && post.toc.length > 1
-  const postCount = posts.length
+  const postCount = posts?.length || 0
   return <>
 
-    <div className={(!post ? 'sticky top-10 ' : ' ') + ' w-72'}>
+    <div className={(!post ? 'sticky top-8 ' : ' ') + ' 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 postCount={postCount} />
       </section>
+
       {/* 菜单 */}
       <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} />
@@ -38,6 +39,20 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
            <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
         </div>
       </section>
+
+      {/* 统计 */}
+      <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-4 shadow-md'>
+          <div className='px-5 text-sm font-light pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faChartBar} className='mr-2' />{locale.COMMON.ANALYTICS}</div>
+          <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
+              <span className='px-1 '>
+                  <strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
+              <span className='px-1 busuanzi_container_site_uv hidden'>
+              | <strong className='pl-1 busuanzi_value_site_uv font-medium'></strong>{locale.COMMON.VISITORS}</span>
+              <span className='px-1 busuanzi_container_site_pv hidden'>
+              | <strong className='pl-1 busuanzi_value_site_pv font-medium'></strong>{locale.COMMON.VIEWS}</span>
+            </div>
+      </section>
+
       {/* 分类  */}
       {!post && categories && (
         <section className='rounded-xl shadow-md py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
@@ -55,7 +70,7 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
     </div>
 
     {showToc && (
-      <section className='sticky top-10 pb-20 rounded-xl shadow-md bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
+      <section className='sticky top-8 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>

components/SideAreaRight.js

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

layouts/BaseLayout.js

@@ -71,7 +71,7 @@ const BaseLayout = ({
       {/* 顶部导航栏 */}
       <TopNav tags={tags} post={post} posts={totalPosts} currentSearch={currentSearch} categories={categories} currentCategory={currentCategory} />
 
-      <div className='flex max-w-full mx-auto lg:px-16 lg:space-x-10 md:pt-10 pb-12 '>
+      <div className='flex max-w-full mx-auto lg:px-16 lg:space-x-10 md:pt-8 pb-12 '>
 
         <div id='left' className='hidden xl:block flex-col w-72'>
           <SideAreaLeft title={meta.title} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />

lib/global.js

@@ -92,13 +92,13 @@ const initTheme = (theme, changeTheme) => {
     if (useDark) {
       changeTheme('dark')
       saveTheme('dark')
-      htmlElement.classList.remove('light')
+      htmlElement.classList?.remove('light')
-      htmlElement.classList.add('dark')
+      htmlElement.classList?.add('dark')
     } else {
       changeTheme('light')
       saveTheme('light')
-      htmlElement.classList.remove('dark')
+      htmlElement.classList?.remove('dark')
-      htmlElement.classList.add('light')
+      htmlElement.classList?.add('light')
     }
   }
 }

lib/lang/en-US.js

@@ -23,6 +23,9 @@ export default {
     COPYRIGHT: 'Copyright',
     AUTHOR: 'Author',
     URL: 'URL',
+    POSTS: 'Posts',
+    VISITORS: 'Visitors',
+    VIEWS: 'Views',
     COPYRIGHT_NOTICE: 'All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!'
   },
   PAGINATION: {

lib/lang/zh-CN.js

@@ -24,6 +24,10 @@ export default {
     COPYRIGHT: '版权声明',
     AUTHOR: '作者',
     URL: '链接',
+    ANALYTICS: '统计',
+    POSTS: '篇文章',
+    VISITORS: '位访客',
+    VIEWS: '次查看',
     COPYRIGHT_NOTICE: '本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！'
   },
   PAGINATION: {