diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js
index 83dc82b0..b8c6ddd3 100644
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -23,11 +23,7 @@ import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEye, faFolderOpen } from '@fortawesome/free-solid-svg-icons'
 import BlogAround from '@/components/BlogAround'
-import { useRef } from 'react'
-
-const mapPageUrl = id => {
-  return 'https://www.notion.so/' + id.replace(/-/g, '')
-}
+import { useEffect, useRef } from 'react'
 
 /**
  *
@@ -40,85 +36,90 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
   const url = BLOG.link + useRouter().asPath
   const { locale } = useGlobal()
   const date = formatDate(post?.date?.start_date || post.createdTime, BLOG.lang)
-  return (
-    <>
-     <Progress targetRef={targetRef} />
 
-      <div id="article-wrapper" ref={targetRef} className="flex-grow mt-14 md:mt-0">
-        <div className="max-w-5xl mx-auto w-screen md:w-full ">
-          <article
-            itemScope
-            itemType="https://schema.org/Movie"
-            className="rounded-xl shadow-md duration-300 hover:shadow-2xl animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 py-10 lg:px-52 px-5  dark:border-gray-700 bg-white dark:bg-gray-900"
+  useEffect(() => {
+    countWords()
+  })
+
+  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 duration-300 hover:shadow-2xl animate__fadeIn animate__animated subpixel-antialiased py-10 px-5 lg:pt-24 lg:px-48 dark:border-gray-700 bg-white dark:bg-gray-900"
           >
-            {post.type && !post.type.includes('Page') && post?.page_cover && (
-              <>
-                <header className="w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 overflow-hidden">
-                  <Image
-                    src={post?.page_cover}
-                    loading="eager"
-                    objectFit="cover"
-                    layout="fill"
-                    alt={post.title}
-                  />
-                </header>
-              </>
-            )}
-            {/* 文章Title */}
-            <h2 className="font-bold text-2xl text-black dark:text-white font-serif pt-10">
-              {' '}
-              {post.title}
-            </h2>
-            <hr className="mt-4" />
-            <section className="flex-nowrap flex  mt-1 dark:text-white font-light">
-              <Link href={`/category/${post.category}`} passHref>
-                <a className="cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white">
-                  <FontAwesomeIcon icon={faFolderOpen} className="mr-1" />
-                  {post.category}
-                </a>
-              </Link>
-              {post.type[0] !== 'Page' && (
-                <Link
-                  href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
-                  passHref
-                >
-                  <a className="pl-1 cursor-pointer hover:text-gray-700  dark:hover:text-gray-200 text-gray-400 dark:text-gray-400 leading-10">
-                    {date}
-                  </a>
-                </Link>
-              )}
+            <header>
+                {post.type && !post.type.includes('Page') && post?.page_cover && (
+                          <div className="w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 overflow-hidden">
+                            <Image
+                              src={post?.page_cover}
+                              loading="eager"
+                              objectFit="cover"
+                              layout="fill"
+                              alt={post.title}
+                            />
+                          </div>
+                )}
+                {/* 文章Title */}
+                <h2 className="font-bold text-2xl text-black dark:text-white font-serif pt-10">
+                  {' '}
+                  {post.title}
+                </h2>
+                <hr className="mt-4" />
+                <section className="flex-nowrap flex  mt-1 dark:text-white font-light">
+                  <Link href={`/category/${post.category}`} passHref>
+                    <a className="cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white">
+                      <FontAwesomeIcon icon={faFolderOpen} className="mr-1" />
+                      {post.category}
+                    </a>
+                  </Link>
+                  {post.type[0] !== 'Page' && (
+                    <Link
+                      href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
+                      passHref
+                    >
+                      <a className="pl-1 cursor-pointer hover:text-gray-700  dark:hover:text-gray-200 text-gray-400 dark:text-gray-400 leading-10">
+                        {date}
+                      </a>
+                    </Link>
+                  )}
 
-              <div id="busuanzi_container_page_pv" className="hidden">
-                <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>
-              </div>
-            </section>
+                  <div id="busuanzi_container_page_pv" className="hidden">
+                    <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>
+                  </div>
+                </section>
 
-            <section className="px-1 py-2 my-1 text-sm font-light bg-gray-50 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
-              {post.summary}
-            </section>
+                <section className="px-1 py-2 my-1 text-sm font-light  text-gray-600  dark:text-gray-400">
+                  {post.summary}
+                </section>
+
+                <section className='flex justify-end py-2 pl-1 dark:text-white items-center font-light italic text-sm'>
+                    本文共<strong id='wordCount'>0</strong>字，阅读需要约<strong id='readTime'>0</strong>分钟
+                </section>
+            </header>
 
             {/* Notion文章主体 */}
-            {blockMap && (
-              <NotionRenderer
-                className={`${BLOG.font}`}
-                recordMap={blockMap}
-                mapPageUrl={mapPageUrl}
-                components={{
-                  equation: Equation,
-                  code: Code,
-                  collectionRow: CollectionRow,
-                  collection: Collection
-                }}
-              />
-            )}
+            <section id='notion-article'>
+              {blockMap && (
+                <NotionRenderer
+                  className={`${BLOG.font}`}
+                  recordMap={blockMap}
+                  mapPageUrl={mapPageUrl}
+                  components={{
+                    equation: Equation,
+                    code: Code,
+                    collectionRow: CollectionRow,
+                    collection: Collection
+                  }}
+                />
+              )}
+            </section>
 
             {/* 推荐文章 */}
             <RecommendPosts currentPost={post} recommendPosts={recommendPosts} />
@@ -170,19 +171,57 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
           <div className="mt-5 shadow-lg rounded-xl w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700">
             <Comment frontMatter={post} />
           </div>
-        </div>
       </div>
 
       {/* 悬浮目录按钮 */}
       <div className="block lg:hidden">
-        <TocDrawerButton
-          onClick={() => {
-            drawerRight.current.handleSwitchVisible()
-          }}
-        />
-        {/* 目录侧边栏 */}
+        <TocDrawerButton onClick={() => { drawerRight.current.handleSwitchVisible() }} />
         <TocDrawer post={post} cRef={drawerRight} />
       </div>
-    </>
-  )
+
+      <Progress targetRef={targetRef} />
+    </>)
+}
+
+const mapPageUrl = id => {
+  return 'https://www.notion.so/' + id.replace(/-/g, '')
+}
+
+/**
+ * 更新字数统计和阅读时间
+ */
+function countWords () {
+  if (window) {
+    const articleElement = document.getElementById('notion-article')
+    if (articleElement) {
+      const articleText = deleteHtmlTag(articleElement.innerHTML)
+      const wordCount = fnGetCpmisWords(articleText)
+      // 阅读速度 300-500每分钟
+      document.getElementById('wordCount').innerHTML = wordCount
+      document.getElementById('readTime').innerHTML = Math.floor(wordCount / 400)
+    }
+  }
+}
+
+// 去除html标签
+function deleteHtmlTag (str) {
+  str = str.replace(/<[^>]+>|&[^>]+;/g, '').trim()// 去掉所有的html标签和&nbsp;之类的特殊符合
+  return str
+}
+
+// 用word方式计算正文字数
+function fnGetCpmisWords (str) {
+  let sLen = 0
+  try {
+    // eslint-disable-next-line no-irregular-whitespace
+    str = str.replace(/(\r\n+|\s+|　+)/g, '龘')
+    // eslint-disable-next-line no-control-regex
+    str = str.replace(/[\x00-\xff]/g, 'm')
+    str = str.replace(/m+/g, '*')
+    str = str.replace(/龘+/g, '')
+    sLen = str.length
+  } catch (e) {
+
+  }
+  return sLen
 }
diff --git a/components/BlogAround.js b/components/BlogAround.js
index 53231eb1..986b337f 100644
--- a/components/BlogAround.js
+++ b/components/BlogAround.js
@@ -11,7 +11,7 @@ export default function BlogAround ({ prev, next }) {
   if (!prev || !next) {
     return <></>
   }
-  return <section className='text-gray-800 mb-8 lg:mb-32 border-t dark:text-gray-300 flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
+  return <section className='text-gray-800 border-t dark:text-gray-300 flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
     <Link href={`/article/${prev.slug}`} passHref>
       <a className='text-sm py-3 text-blue-500 hover:underline cursor-pointer'>
         <FontAwesomeIcon icon={faAngleDoubleLeft} className='mr-1' />{prev.title}
diff --git a/pages/archive/index.js b/pages/archive/index.js
index e1220044..25cd0f34 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -56,7 +56,6 @@ const Index = ({ allPosts, tags, categories }) => {
     () => {
       if (window) {
         const anchor = window.location.hash
-        console.log('滚动', anchor)
         if (anchor) {
           setTimeout(() => {
             const anchorElement = document.getElementById(anchor.substring(1))