From c1ab81b11e9556174d67d5da8d998401966815bc Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 21 Dec 2021 14:29:00 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E4=B8=8D=E8=92=9C=E5=AD=90=E9=87=8D?=
 =?UTF-8?q?=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ArticleDetail.js |  6 ++----
 components/Footer.js        | 10 +++++-----
 components/InfoCard.js      | 13 ++++++++++++-
 components/SideAreaLeft.js  |  3 ++-
 lib/busuanzi.js             | 26 +++++++++++++++++++-------
 5 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js
index 9a055ffd..dabf6941 100644
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -80,15 +80,13 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
                     </Link>
                   )}
 
-                  <div id="busuanzi_container_page_pv" className="hidden">
+                  <div className="hidden busuanzi_container_page_pv">
                     <FontAwesomeIcon
                       icon={faEye}
                       className="text-gray-500 dark:text-gray-400 mt-3 ml-5"
                     />
                     &nbsp;
-                    <span
-                      id="busuanzi_value_page_pv"
-                      className="text-gray-500 dark:text-gray-400 leading-6"
+                    <span className="text-gray-500 dark:text-gray-400 leading-6 busuanzi_container_page_pv"
                     ></span>
                   </div>
                 </section>
diff --git a/components/Footer.js b/components/Footer.js
index 8755e53f..0a0cb6bb 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -1,4 +1,4 @@
-import { faCopyright, faEye, faShieldAlt, faUser } from '@fortawesome/free-solid-svg-icons'
+import { faCopyright, faEye, faShieldAlt, faUsers } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import Link from 'next/link'
@@ -15,11 +15,11 @@ const Footer = ({ title }) => {
       <FontAwesomeIcon icon={faShieldAlt} /> <a href='https://beian.miit.gov.cn/' className='ml-1 font-bold'>闽ICP备20010331号</a>
       <span > <Link href='/article/privacy-policy' ><a className='ml-1 mr-1 font-bold underline'>隐私政策</a></Link></span>
 
-      <span id='busuanzi_container_site_pv' className='hidden'>
-            <FontAwesomeIcon icon={faEye}/><span id='busuanzi_value_site_pv' className='px-1'> </span>pv
+      <span className='hidden busuanzi_container_site_pv'>
+            <FontAwesomeIcon icon={faEye}/><span className='px-1 busuanzi_value_site_pv'> </span>pv
       </span>
-      <span id='busuanzi_container_site_uv' className='pl-2 hidden'>
-        <FontAwesomeIcon icon={faUser}/> <span id='busuanzi_value_site_uv' className='px-1'> </span>uv   </span>
+      <span className='pl-2 hidden busuanzi_container_site_uv'>
+        <FontAwesomeIcon icon={faUsers}/> <span className='px-1 busuanzi_value_site_uv'> </span>uv   </span>
         <br/>
         <h1>{title}</h1>
     </footer>
diff --git a/components/InfoCard.js b/components/InfoCard.js
index 95cfc4d6..7077a84a 100644
--- a/components/InfoCard.js
+++ b/components/InfoCard.js
@@ -2,8 +2,10 @@ import BLOG from '@/blog.config'
 import Image from 'next/image'
 import React from 'react'
 import Router from 'next/router'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faEye, faFileAlt, faUsers } from '@fortawesome/free-solid-svg-icons'
 
-const InfoCard = () => {
+const InfoCard = ({ postCount }) => {
   return <>
     <div className='flex flex-col items-center justify-center cursor-pointer' onClick={ () => { Router.push('/') }}>
         <div className='hover:rotate-45 hover:scale-125 transform duration-200 mx-auto'>
@@ -17,6 +19,15 @@ const InfoCard = () => {
         />
         </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>
   </>
 }
diff --git a/components/SideAreaLeft.js b/components/SideAreaLeft.js
index 13ed6d51..5cb644d5 100644
--- a/components/SideAreaLeft.js
+++ b/components/SideAreaLeft.js
@@ -24,11 +24,12 @@ 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
   return <>
 
     <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 />
+        <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'>
diff --git a/lib/busuanzi.js b/lib/busuanzi.js
index 49713446..a7b854fa 100644
--- a/lib/busuanzi.js
+++ b/lib/busuanzi.js
@@ -55,7 +55,7 @@ bszCaller = {
 const fetch = () => {
   bszTag && bszTag.hides()
   bszCaller.fetch('//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback', function (t) {
-    // console.log('不蒜子请求结果',t)
+    console.log('不蒜子请求结果',t)
     bszTag.texts(t), bszTag.shows()
   })
 }
@@ -64,20 +64,32 @@ bszTag = {
   bszs: ['site_pv', 'page_pv', 'site_uv'],
   texts: function (n) {
     this.bszs.map(function (t) {
-      const e = document.getElementById('busuanzi_value_' + t)
-      e && (e.innerHTML = n[t])
+      const e = document.getElementsByClassName('busuanzi_value_' + t)
+      if(e){
+        for (var element of e) {
+          element.innerHTML = n[t]
+        }
+      }
     })
   },
   hides: function () {
     this.bszs.map(function (t) {
-      const e = document.getElementById('busuanzi_container_' + t)
-      e && (e.style.display = 'none')
+      const e = document.getElementsByClassName('busuanzi_container_' + t)
+      if(e){
+        for (var element of e){
+          element.style.display = 'none'
+        }
+      }
     })
   },
   shows: function () {
     this.bszs.map(function (t) {
-      const e = document.getElementById('busuanzi_container_' + t)
-      e && (e.style.display = 'inline')
+      const e = document.getElementsByClassName('busuanzi_container_' + t)
+      if(e){
+        for(var element of e){
+          element.style.display = 'inline'
+        }
+      }
     })
   }
 }