feature:

统计模块
2026-05-14 07:26:52 +00:00 · 2021-12-21 15:04:05 +08:00
parent c1ab81b11e
commit a78a25ae96
9 changed files with 37 additions and 24 deletions
--- a/components/ArticleDetail.js
+++ b/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>
--- a/components/FloatDarkModeButton.js
+++ b/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.add(newTheme)
+    htmlElement.classList?.remove(userTheme)
+    htmlElement.classList?.add(newTheme)
  }

  return (
--- a/components/InfoCard.js
+++ b/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>
  </>
 }
--- a/components/SideAreaLeft.js
+++ b/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>
--- a/components/SideAreaRight.js
+++ b/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">
--- a/layouts/BaseLayout.js
+++ b/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} />
--- a/lib/global.js
+++ b/lib/global.js
@@ -92,13 +92,13 @@ const initTheme = (theme, changeTheme) => {
    if (useDark) {
      changeTheme('dark')
      saveTheme('dark')
-      htmlElement.classList.remove('light')
-      htmlElement.classList.add('dark')
+      htmlElement.classList?.remove('light')
+      htmlElement.classList?.add('dark')
    } else {
      changeTheme('light')
      saveTheme('light')
-      htmlElement.classList.remove('dark')
-      htmlElement.classList.add('light')
+      htmlElement.classList?.remove('dark')
+      htmlElement.classList?.add('light')
    }
  }
 }
--- a/lib/lang/en-US.js
+++ b/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: {
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -24,6 +24,10 @@ export default {
    COPYRIGHT: '版权声明',
    AUTHOR: '作者',
    URL: '链接',
+    ANALYTICS: '统计',
+    POSTS: '篇文章',
+    VISITORS: '位访客',
+    VIEWS: '次查看',
    COPYRIGHT_NOTICE: '本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！'
  },
  PAGINATION: {