diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js
index f60b375ae13..0a508878f4c 100644
--- a/lib/lang/en-US.js
+++ b/lib/lang/en-US.js
@@ -61,7 +61,8 @@ export default {
     START_READING: 'Start Reading',
     MINUTE: 'min',
     WORD_COUNT: 'Words',
-    READ_TIME: 'Read Time'
+    READ_TIME: 'Read Time',
+    NEXT_POST: '下一篇'
   },
   PAGINATION: {
     PREV: 'Prev',
diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js
index 4dd1962e764..9969452da08 100644
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -62,7 +62,8 @@ export default {
     START_READING: '开始阅读',
     MINUTE: '分钟',
     WORD_COUNT: '字数',
-    READ_TIME: '阅读时长'
+    READ_TIME: '阅读时长',
+    NEXT_POST:'下一篇'
   },
   PAGINATION: {
     PREV: '上页',
diff --git a/themes/example/components/BlogListPage.js b/themes/example/components/BlogListPage.js
index f9ae29a42dd..b8a1e573c61 100644
--- a/themes/example/components/BlogListPage.js
+++ b/themes/example/components/BlogListPage.js
@@ -24,6 +24,7 @@ export const BlogListPage = props => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
 
   const showPageCover = siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG)
 
diff --git a/themes/game/components/PaginationSimple.js b/themes/game/components/PaginationSimple.js
index 3f5a2760b01..6df710f5513 100644
--- a/themes/game/components/PaginationSimple.js
+++ b/themes/game/components/PaginationSimple.js
@@ -17,6 +17,7 @@ const PaginationSimple = ({ page, showNext }) => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
 
   return (
     <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
diff --git a/themes/heo/components/Header.js b/themes/heo/components/Header.js
index 3e1fd81433d..bebe333ba9f 100644
--- a/themes/heo/components/Header.js
+++ b/themes/heo/components/Header.js
@@ -140,7 +140,7 @@ const Header = props => {
       {/* 顶部导航菜单栏 */}
       <nav
         id='nav'
-        className={`z-20 h-16 top-0 w-full duration-500 transition-all
+        className={`z-20 h-16 top-0 w-full duration-300 transition-all
             ${fixedNav ? 'fixed' : 'relative bg-transparent'} 
             ${textWhite ? 'text-white ' : 'text-black dark:text-white'}  
             ${navBgWhite ? 'bg-white dark:bg-[#18171d] shadow' : 'bg-transparent'}`}>
@@ -153,14 +153,18 @@ const Header = props => {
           {/* 中间菜单 */}
           <div
             id='nav-bar-swipe'
-            className={`hidden lg:flex flex-grow flex-col items-center justify-center h-full relative w-full ${activeIndex === 0 ? 'fade-in-down' : 'fade-in-up'}`}>
-            {activeIndex === 0 && <MenuListTop {...props} />}
-            {activeIndex === 1 && (
+            className={`hidden lg:flex flex-grow flex-col items-center justify-center h-full relative w-full`}>
+            <div
+              className={`absolute transition-all duration-700 ${activeIndex === 0 ? 'opacity-100 mt-0' : '-mt-20 opacity-0 invisible'}`}>
+              <MenuListTop {...props} />
+            </div>
+            <div
+              className={`absolute transition-all duration-700 ${activeIndex === 1 ? 'opacity-100 mb-0' : '-mb-20 opacity-0 invisible'}`}>
               <h1 className='font-bold text-center text-light-400 dark:text-gray-400'>
                 {siteConfig('AUTHOR') || siteConfig('TITLE')}{' '}
                 {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}
               </h1>
-            )}
+            </div>
           </div>
 
           {/* 右侧固定 */}
diff --git a/themes/heo/components/MenuItemDrop.js b/themes/heo/components/MenuItemDrop.js
index 4f8241fc131..fd7e35c72f0 100644
--- a/themes/heo/components/MenuItemDrop.js
+++ b/themes/heo/components/MenuItemDrop.js
@@ -36,12 +36,12 @@ export const MenuItemDrop = ({ link }) => {
       {hasSubMenu && (
         <ul
           style={{ backdropFilter: 'blur(3px)' }}
-          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white dark:bg-[#1e1e1e] border dark:border-gray-700 transition-all duration-300 z-20 absolute`}>
+          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white dark:bg-[#1e1e1e] transition-all duration-300 z-20 absolute`}>
           {link.subMenus.map((sLink, index) => {
             return (
               <li
                 key={index}
-                className='cursor-pointer hover:bg-blue-600 dark:hover:bg-yellow-600 hover:text-white text-gray-900 dark:text-gray-100  tracking-widest transition-all duration-200 dark:border-gray-700  py-1 pr-6 pl-3'>
+                className='cursor-pointer hover:bg-blue-600 dark:hover:bg-yellow-600 hover:text-white text-gray-900 dark:text-gray-100  tracking-widest transition-all duration-200 py-1 pr-6 pl-3'>
                 <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm text-nowrap font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
diff --git a/themes/heo/components/PaginationNumber.js b/themes/heo/components/PaginationNumber.js
index 0ffc7bfbdf0..a68f33e5955 100644
--- a/themes/heo/components/PaginationNumber.js
+++ b/themes/heo/components/PaginationNumber.js
@@ -21,6 +21,7 @@ const PaginationNumber = ({ page, totalPage }) => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
   const pages = generatePages(pagePrefix, page, currentPage, totalPage)
 
   const [value, setValue] = useState('')
diff --git a/themes/heo/components/PostAdjacent.js b/themes/heo/components/PostAdjacent.js
index aa61d3f8d95..9f97eac7bdf 100644
--- a/themes/heo/components/PostAdjacent.js
+++ b/themes/heo/components/PostAdjacent.js
@@ -1,4 +1,5 @@
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
@@ -12,6 +13,7 @@ import CONFIG from '../config'
 export default function PostAdjacent({ prev, next }) {
   const [isShow, setIsShow] = useState(false)
   const router = useRouter()
+  const { locale } = useGlobal()
 
   useEffect(() => {
     setIsShow(false)
@@ -85,13 +87,13 @@ export default function PostAdjacent({ prev, next }) {
 
       <div
         id='pc-next-post'
-        className={`hidden md:block fixed z-40 right-24 bottom-4 duration-200 transition-all ${isShow ? 'mb-0 opacity-100' : '-mb-24 opacity-0'}`}>
+        className={`${isShow ? 'mb-5 opacity-100' : '-mb-24 opacity-0'} hidden md:block fixed z-40 right-10 bottom-4 duration-200 transition-all`}>
         <Link
           href={`/${next.slug}`}
-          className='cursor-pointer drop-shadow-xl duration transition-all h-24 dark:bg-[#1e1e1e] border dark:border-gray-600 p-3 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:font-bold hover:text-blue-600 rounded-lg flex flex-col justify-between'>
-          <div className='text-xs'>下一篇</div>
-          <hr />
-          <div>{next?.title}</div>
+          className='text-sm block p-4 w-72 h-28 cursor-pointer drop-shadow-xl duration transition-all dark:bg-[#1e1e1e] border dark:border-gray-600 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:font-bold hover:text-blue-600 rounded-lg'>
+          <div className='font-semibold'>{locale.COMMON.NEXT_POST}</div>
+          <hr className='mt-2 mb-3' />
+          <div className='line-clamp-2'>{next?.title}</div>
         </Link>
       </div>
     </div>
diff --git a/themes/heo/index.js b/themes/heo/index.js
index 26c1aeda0a8..33f88f270de 100644
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -291,18 +291,19 @@ const LayoutSlug = props => {
         {!lock && (
           <div id='article-wrapper' className='mx-auto md:w-full md:px-5'>
             {/* 文章主体 */}
-            <article
-              itemScope
-              itemType='https://schema.org/Movie'
-              data-wow-delay='.2s'
-              className='wow fadeInUp'>
+            <article itemScope itemType='https://schema.org/Movie'>
               {/* Notion文章主体 */}
-              <section className='px-5 py-5 justify-center mx-auto'>
+              <section
+                className='wow fadeInUp p-5 justify-center mx-auto'
+                data-wow-delay='.2s'>
                 <WWAds orientation='horizontal' className='w-full' />
                 {post && <NotionPage post={post} />}
                 <WWAds orientation='horizontal' className='w-full' />
               </section>
 
+              {/* 上一篇\下一篇文章 */}
+              <PostAdjacent {...props} />
+
               {/* 分享 */}
               <ShareBar post={post} />
               {post?.type === 'Post' && (
@@ -315,9 +316,6 @@ const LayoutSlug = props => {
               )}
             </article>
 
-            {/* 上一篇\下一篇文章 */}
-            <PostAdjacent {...props} />
-
             {/* 评论区 */}
             {fullWidth ? null : (
               <div className={`${commentEnable && post ? '' : 'hidden'}`}>
diff --git a/themes/hexo/components/PaginationNumber.js b/themes/hexo/components/PaginationNumber.js
index e99a0c5df5c..57d755dd59f 100644
--- a/themes/hexo/components/PaginationNumber.js
+++ b/themes/hexo/components/PaginationNumber.js
@@ -16,6 +16,7 @@ const PaginationNumber = ({ page, totalPage }) => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
   const pages = generatePages(pagePrefix, page, currentPage, totalPage)
 
   return (
diff --git a/themes/movie/components/PaginationNumber.js b/themes/movie/components/PaginationNumber.js
index effc1835549..64323b9cc03 100644
--- a/themes/movie/components/PaginationNumber.js
+++ b/themes/movie/components/PaginationNumber.js
@@ -22,6 +22,7 @@ const PaginationNumber = ({ page, totalPage }) => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
   const pages = generatePages(pagePrefix, page, currentPage, totalPage)
   if (pages?.length <= 1) {
     return <></>
@@ -46,7 +47,7 @@ const PaginationNumber = ({ page, totalPage }) => {
   return (
     <>
       {/* pc端分页按钮 */}
-      <div className="hidden lg:flex justify-between items-end mt-10 mb-5 font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2 overflow-x-auto">
+      <div className='hidden lg:flex justify-between items-end mt-10 mb-5 font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2 overflow-x-auto'>
         {/* 上一页 */}
         <Link
           href={{
@@ -56,32 +57,29 @@ const PaginationNumber = ({ page, totalPage }) => {
                 : `${pagePrefix}/page/${currentPage - 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="prev"
-          className={`${currentPage === 1 ? 'invisible' : 'block'}`}
-        >
-          <div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
-            <i className="fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4" />
-            <div className="absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0">
+          rel='prev'
+          className={`${currentPage === 1 ? 'invisible' : 'block'}`}>
+          <div className='relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group'>
+            <i className='fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4' />
+            <div className='absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0'>
               {locale.PAGINATION.PREV}
             </div>
           </div>
         </Link>
 
         {/* 分页 */}
-        <div className="flex items-center space-x-2">
+        <div className='flex items-center space-x-2'>
           {pages}
 
           {/* 跳转页码 */}
-          <div className="bg-white hover:bg-gray-100 dark:hover:bg-yellow-600  dark:bg-[#1e1e1e]  h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200">
+          <div className='bg-white hover:bg-gray-100 dark:hover:bg-yellow-600  dark:bg-[#1e1e1e]  h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200'>
             <input
               value={value}
-              className="w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg"
-              onInput={handleInputChange}
-            ></input>
+              className='w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg'
+              onInput={handleInputChange}></input>
             <div
               onClick={jumpToPage}
-              className="cursor-pointer hover:bg-indigo-600  dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white"
-            >
+              className='cursor-pointer hover:bg-indigo-600  dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white'>
               <ChevronDoubleRight className={'w-4 h-4'} />
             </div>
           </div>
@@ -93,12 +91,11 @@ const PaginationNumber = ({ page, totalPage }) => {
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="next"
-          className={`${+showNext ? 'block' : 'invisible'} `}
-        >
-          <div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
-            <i className="fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6" />
-            <div className="absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2">
+          rel='next'
+          className={`${+showNext ? 'block' : 'invisible'} `}>
+          <div className='relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group'>
+            <i className='fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6' />
+            <div className='absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2'>
               {locale.PAGINATION.NEXT}
             </div>
           </div>
@@ -107,7 +104,7 @@ const PaginationNumber = ({ page, totalPage }) => {
 
       {/* 移动端分页 */}
 
-      <div className="lg:hidden w-full flex flex-row">
+      <div className='lg:hidden w-full flex flex-row'>
         {/* 上一页 */}
         <Link
           href={{
@@ -117,13 +114,12 @@ const PaginationNumber = ({ page, totalPage }) => {
                 : `${pagePrefix}/page/${currentPage - 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="prev"
-          className={`${showPrev ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}
-        >
+          rel='prev'
+          className={`${showPrev ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
           {locale.PAGINATION.PREV}
         </Link>
 
-        {showPrev && showNext && <div className="w-12"></div>}
+        {showPrev && showNext && <div className='w-12'></div>}
 
         {/* 下一页 */}
         <Link
@@ -131,9 +127,8 @@ const PaginationNumber = ({ page, totalPage }) => {
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="next"
-          className={`${+showNext ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}
-        >
+          rel='next'
+          className={`${+showNext ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
           {locale.PAGINATION.NEXT}
         </Link>
       </div>
@@ -163,8 +158,7 @@ function getPageElement(page, currentPage, pagePrefix) {
           ? 'bg-indigo-600 dark:bg-yellow-600 text-white '
           : 'dark:bg-[#1e1e1e] bg-white') +
         ' hover:border-indigo-600 dark:hover:bg-yellow-600 dark:border-gray-600 px-4 border py-2 rounded-lg drop-shadow-sm duration-200 transition-colors'
-      }
-    >
+      }>
       {page}
     </Link>
   )
@@ -197,7 +191,7 @@ function generatePages(pagePrefix, page, currentPage, totalPage) {
     }
     if (startPage > 2) {
       pages.push(
-        <div key={-1} className="-mt-2 mx-1">
+        <div key={-1} className='-mt-2 mx-1'>
           ...{' '}
         </div>
       )
diff --git a/themes/next/components/ArticleDetail.js b/themes/next/components/ArticleDetail.js
index bdd677ef710..f461b5f79cd 100644
--- a/themes/next/components/ArticleDetail.js
+++ b/themes/next/components/ArticleDetail.js
@@ -1,20 +1,20 @@
-import BlogAround from './BlogAround'
 import Comment from '@/components/Comment'
-import RecommendPosts from './RecommendPosts'
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import NotionPage from '@/components/NotionPage'
 import ShareBar from '@/components/ShareBar'
-import TagItem from './TagItem'
+import WWAds from '@/components/WWAds'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
+import { formatDateFmt } from '@/lib/utils/formatDate'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import CONFIG from '../config'
 import ArticleCopyright from './ArticleCopyright'
+import BlogAround from './BlogAround'
+import RecommendPosts from './RecommendPosts'
+import TagItem from './TagItem'
 import WordCount from './WordCount'
-import NotionPage from '@/components/NotionPage'
-import CONFIG from '../config'
-import NotionIcon from '@/components/NotionIcon'
-import LazyImage from '@/components/LazyImage'
-import { formatDateFmt } from '@/lib/utils/formatDate'
-import { siteConfig } from '@/lib/config'
-import WWAds from '@/components/WWAds'
 
 /**
  *
@@ -35,105 +35,135 @@ export default function ArticleDetail(props) {
   }
 
   return (
-        <div id="article-wrapper"
-            className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
-            <div itemScope itemType="https://schema.org/Movie"
-                className="subpixel-antialiased overflow-y-hidden py-10 px-5 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-hexo-black-gray article-padding"
-            >
-
-                {showArticleInfo && <header {...aosProps}>
-                    {/* 头图 */}
-                    {siteConfig('NEXT_POST_HEADER_IMAGE_VISIBLE', null, CONFIG) && post?.type && !post?.type !== 'Page' && post?.pageCover && (
-                        <div className="w-full relative md:flex-shrink-0 overflow-hidden">
-                            <LazyImage alt={post.title} src={post?.pageCover} className='object-center w-full' />
-                        </div>
-                    )}
-
-                    {/* title */}
-                    <div className=" text-center font-bold text-3xl text-black dark:text-white font-serif pt-6">
-                        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
-                    </div>
-
-                    {/* meta */}
-                    <section className="mt-2 text-gray-500 dark:text-gray-400 font-light leading-7 text-sm">
-                        <div className='flex flex-wrap justify-center'>
-                            {post?.type !== 'Page' && (<>
-                                <Link
-                                    href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
-                                    passHref
-                                    legacyBehavior>
-                                    <div className="pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed">
-                                        <i className='far fa-calendar mr-1' /> {post?.publishDay}
-                                    </div>
-                                </Link>
-                                <span className='mr-2'> | <i className='far fa-calendar-check mr-2' />{post.lastEditedDay} </span>
-
-                                <div className="hidden busuanzi_container_page_pv font-light mr-2">
-                                    <i className='mr-1 fas fa-eye' />
-                                    <span className="mr-2 busuanzi_value_page_pv" />
-                                </div>
-
-                            </>)}
-                        </div>
-
-                        <WordCount />
-                    </section>
-
-                </header>}
-
-                {/* Notion内容主体 */}
-                <article className='mx-auto'>
-                    <WWAds className="w-full" orientation="horizontal" />
-                    {post && (<NotionPage post={post} />)}
-                    <WWAds className="w-full" orientation="horizontal" />
-                </article>
-
-                {showArticleInfo && <>
-
-                    {/* 分享 */}
-                    <ShareBar post={post} />
-
-                    {/* 版权声明 */}
-                    {post?.type === 'Post' && <ArticleCopyright author={siteConfig('AUTHOR')} url={url} />}
-
-                    {/* 推荐文章 */}
-                    {post?.type === 'Post' && <RecommendPosts currentPost={post} recommendPosts={recommendPosts} />}
-
-                    <section className="flex justify-between">
-                        {/* 分类 */}
-                        {post.category && <>
-                            <div className="cursor-pointer my-auto text-md mr-2 hover:text-black dark:hover:text-white border-b dark:text-gray-500 border-dashed">
-                                <Link href={`/category/${post.category}`} legacyBehavior>
-                                    <a><i className="mr-1 far fa-folder-open" /> {post.category}</a>
-                                </Link>
-                            </div>
-                        </>}
-
-                        {/* 标签列表 */}
-                        {post?.type === 'Post' && (
-                            <>
-                                {post.tagItems && (
-                                    <div className="flex items-center flex-nowrap leading-8 p-1 py-4 overflow-x-auto">
-                                        <div className="hidden md:block dark:text-gray-300 whitespace-nowrap">
-                                            {locale.COMMON.TAGS}:&nbsp;
-                                        </div>
-                                        {post.tagItems.map(tag => (
-                                            <TagItem key={tag.name} tag={tag} />
-                                        ))}
-                                    </div>
-                                )}
-                            </>
-                        )}
-                    </section>
-                    {post?.type === 'Post' && <BlogAround prev={prev} next={next} />}
-                </>}
-
-                {/* 评论互动 */}
-                <div className="duration-200 w-full dark:border-gray-700 bg-white dark:bg-hexo-black-gray">
-                    <Comment frontMatter={post} />
+    <div
+      id='article-wrapper'
+      className='shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full '>
+      <div
+        itemScope
+        itemType='https://schema.org/Movie'
+        className='overflow-y-hidden py-10 px-4 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-hexo-black-gray'>
+        {showArticleInfo && (
+          <header {...aosProps}>
+            {/* 头图 */}
+            {siteConfig('NEXT_POST_HEADER_IMAGE_VISIBLE', null, CONFIG) &&
+              post?.type &&
+              !post?.type !== 'Page' &&
+              post?.pageCover && (
+                <div className='w-full relative md:flex-shrink-0 overflow-hidden'>
+                  <LazyImage
+                    alt={post.title}
+                    src={post?.pageCover}
+                    className='object-center w-full'
+                  />
                 </div>
+              )}
+
+            {/* title */}
+            <div className=' text-center font-bold text-3xl text-black dark:text-white font-serif pt-6'>
+              {siteConfig('POST_TITLE_ICON') && (
+                <NotionIcon icon={post.pageIcon} />
+              )}
+              {post.title}
             </div>
 
+            {/* meta */}
+            <section className='mt-2 text-gray-500 dark:text-gray-400 font-light leading-7 text-sm'>
+              <div className='flex flex-wrap justify-center'>
+                {post?.type !== 'Page' && (
+                  <>
+                    <Link
+                      href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
+                      passHref
+                      legacyBehavior>
+                      <div className='pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed'>
+                        <i className='far fa-calendar mr-1' />{' '}
+                        {post?.publishDay}
+                      </div>
+                    </Link>
+                    <span className='mr-2'>
+                      {' '}
+                      | <i className='far fa-calendar-check mr-2' />
+                      {post.lastEditedDay}{' '}
+                    </span>
+
+                    <div className='hidden busuanzi_container_page_pv font-light mr-2'>
+                      <i className='mr-1 fas fa-eye' />
+                      <span className='mr-2 busuanzi_value_page_pv' />
+                    </div>
+                  </>
+                )}
+              </div>
+
+              <WordCount />
+            </section>
+          </header>
+        )}
+
+        {/* Notion内容主体 */}
+        <article className='mx-auto'>
+          <WWAds className='w-full' orientation='horizontal' />
+          {post && <NotionPage post={post} />}
+          <WWAds className='w-full' orientation='horizontal' />
+        </article>
+
+        {showArticleInfo && (
+          <>
+            {/* 分享 */}
+            <ShareBar post={post} />
+
+            {/* 版权声明 */}
+            {post?.type === 'Post' && (
+              <ArticleCopyright author={siteConfig('AUTHOR')} url={url} />
+            )}
+
+            {/* 推荐文章 */}
+            {post?.type === 'Post' && (
+              <RecommendPosts
+                currentPost={post}
+                recommendPosts={recommendPosts}
+              />
+            )}
+
+            <section className='flex justify-between'>
+              {/* 分类 */}
+              {post.category && (
+                <>
+                  <div className='cursor-pointer my-auto text-md mr-2 hover:text-black dark:hover:text-white border-b dark:text-gray-500 border-dashed'>
+                    <Link href={`/category/${post.category}`} legacyBehavior>
+                      <a>
+                        <i className='mr-1 far fa-folder-open' />{' '}
+                        {post.category}
+                      </a>
+                    </Link>
+                  </div>
+                </>
+              )}
+
+              {/* 标签列表 */}
+              {post?.type === 'Post' && (
+                <>
+                  {post.tagItems && (
+                    <div className='flex items-center flex-nowrap leading-8 p-1 py-4 overflow-x-auto'>
+                      <div className='hidden md:block dark:text-gray-300 whitespace-nowrap'>
+                        {locale.COMMON.TAGS}:&nbsp;
+                      </div>
+                      {post.tagItems.map(tag => (
+                        <TagItem key={tag.name} tag={tag} />
+                      ))}
+                    </div>
+                  )}
+                </>
+              )}
+            </section>
+            {post?.type === 'Post' && <BlogAround prev={prev} next={next} />}
+          </>
+        )}
+
+        {/* 评论互动 */}
+        <div className='duration-200 w-full dark:border-gray-700 bg-white dark:bg-hexo-black-gray'>
+          <Comment frontMatter={post} />
         </div>
+      </div>
+    </div>
   )
 }
diff --git a/themes/next/components/PaginationNumber.js b/themes/next/components/PaginationNumber.js
index af72c797da3..02c61693fb0 100644
--- a/themes/next/components/PaginationNumber.js
+++ b/themes/next/components/PaginationNumber.js
@@ -16,6 +16,8 @@ const PaginationNumber = ({ page, totalPage }) => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
+
   const pages = generatePages(pagePrefix, page, currentPage, totalPage)
 
   return (
@@ -67,22 +69,14 @@ const PaginationNumber = ({ page, totalPage }) => {
   )
 }
 
-function getPageElement(pagePrefix, page, currentPage) {
-  return (
-    <Link
-      href={page === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${page}`}
-      key={page}
-      passHref
-      className={
-        (page + '' === currentPage + ''
-          ? 'font-bold bg-gray-500 dark:bg-gray-400 text-white '
-          : 'hover:border-t-2 duration-200 transition-all border-white hover:border-gray-400 ') +
-        ' border-white  dark:hover:border-gray-400 cursor-pointer w-8 h-8 justify-center flex items-center font-light hover:font-bold'
-      }>
-      {page}
-    </Link>
-  )
-}
+/**
+ * 生成分页按钮组
+ * @param {*} pagePrefix
+ * @param {*} page
+ * @param {*} currentPage
+ * @param {*} totalPage
+ * @returns
+ */
 function generatePages(pagePrefix, page, currentPage, totalPage) {
   const pages = []
   const groupCount = 7 // 最多显示页签数
@@ -126,4 +120,28 @@ function generatePages(pagePrefix, page, currentPage, totalPage) {
   }
   return pages
 }
+/**
+ * 生成分页按钮对象
+ * @param {*} pagePrefix
+ * @param {*} page
+ * @param {*} currentPage
+ * @returns
+ */
+function getPageElement(pagePrefix, page, currentPage) {
+  return (
+    <Link
+      href={page === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${page}`}
+      key={page}
+      passHref
+      className={
+        (page + '' === currentPage + ''
+          ? 'font-bold bg-gray-500 dark:bg-gray-400 text-white '
+          : 'hover:border-t-2 duration-200 transition-all border-white hover:border-gray-400 ') +
+        ' border-white  dark:hover:border-gray-400 cursor-pointer w-8 h-8 justify-center flex items-center font-light hover:font-bold'
+      }>
+      {page}
+    </Link>
+  )
+}
+
 export default PaginationNumber
diff --git a/themes/next/style.js b/themes/next/style.js
index daf6af46ab0..41746f9affe 100644
--- a/themes/next/style.js
+++ b/themes/next/style.js
@@ -5,35 +5,31 @@
  * @returns
  */
 const Style = () => {
-  return <style jsx global>{`
-
-    // 底色
-    body{
-        background-color: #eeedee
-    }
-    .dark body{
+  return (
+    <style jsx global>{`
+      // 底色
+      body {
+        background-color: #eeedee;
+      }
+      .dark body {
         background-color: black;
-    }
-
-    .article-padding {
-      padding: 40px;
-    }
-
-    // 菜单下划线动画
-    #theme-next .menu-link {
-      text-decoration: none;
-      background-image: linear-gradient(#4e80ee, #4e80ee);
-      background-repeat: no-repeat;
-      background-position: bottom center;
-      background-size: 0 2px;
-      transition: background-size 100ms ease-in-out;
-    }
-    #theme-next .menu-link:hover {
-      background-size: 100% 2px;
-      color: #4e80ee;
-    }
+      }
 
-  `}</style>
+      // 菜单下划线动画
+      #theme-next .menu-link {
+        text-decoration: none;
+        background-image: linear-gradient(#4e80ee, #4e80ee);
+        background-repeat: no-repeat;
+        background-position: bottom center;
+        background-size: 0 2px;
+        transition: background-size 100ms ease-in-out;
+      }
+      #theme-next .menu-link:hover {
+        background-size: 100% 2px;
+        color: #4e80ee;
+      }
+    `}</style>
+  )
 }
 
 export { Style }
diff --git a/themes/nobelium/components/BlogListPage.js b/themes/nobelium/components/BlogListPage.js
index 0c313ba4fc1..6998c522e74 100644
--- a/themes/nobelium/components/BlogListPage.js
+++ b/themes/nobelium/components/BlogListPage.js
@@ -19,6 +19,7 @@ export const BlogListPage = props => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
 
   return (
     <div className='w-full md:pr-12 my-6'>
diff --git a/themes/plog/components/BlogListPage.js b/themes/plog/components/BlogListPage.js
index 68790295974..9224c16b90c 100644
--- a/themes/plog/components/BlogListPage.js
+++ b/themes/plog/components/BlogListPage.js
@@ -20,6 +20,7 @@ export const BlogListPage = props => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
 
   const blogPostRefs = useRef([])
 
diff --git a/themes/simple/components/BlogListPage.js b/themes/simple/components/BlogListPage.js
index 0345185bf0b..1219aac77a6 100644
--- a/themes/simple/components/BlogListPage.js
+++ b/themes/simple/components/BlogListPage.js
@@ -32,6 +32,7 @@ export default function BlogListPage(props) {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
 
   return (
     <div className='w-full md:pr-8 mb-12'>