Merge pull request #551 from tangly1024/main

发布tangly1024.com
2026-05-22 23:16:48 +00:00 · 2022-12-07 23:11:26 +08:00
parent 4cf08bbbd9 dbb10f75ee
commit 1ac5090a66
34 changed files with 413 additions and 396 deletions
--- a/.env.local
+++ b/.env.local
@@ -1,2 +1,2 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=3.6.1
+NEXT_PUBLIC_VERSION=3.6.3
--- a/blog.config.js
+++ b/blog.config.js
@@ -1,29 +1,26 @@
 // 注: process.env.XX是Vercel的环境变量，配置方式见：https://docs.tangly1024.com/zh/features/personality
 const BLOG = {
+  // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
+  NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5',
+  PSEUDO_STATIC: true, // 伪静态路径，开启后所有文章URL都以 .html 结尾。
+  NEXT_REVALIDATE_SECOND: 5, // 更新内容缓存间隔 单位(秒)；即每个页面有5秒的纯静态期、此期间无论多少次访问都不会抓取notion数据；调大该值有助于节省Vercel资源、同时提升访问速率，但也会使文章更新有延迟。
+  THEME: process.env.NEXT_PUBLIC_THEME || 'hexo', // 主题， 支持 ['next','hexo',"fukasawa','medium','example'] @see https://preview.tangly1024.com
+  THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮
+  LANG: 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
+  SINCE: 2021, // e.g if leave this empty, current year will be used.
+  APPEARANCE: 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
+
  AUTHOR: 'tangly1024', // 作者
  BIO: '一个普通的干饭人🍚', // 作者简介
  LINK: 'https://tangly1024.com', // 网站地址
  KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开
-  NOTION_PAGE_ID:
-  process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
-  NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
-  DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮
-
-  // 一个小插件展示你的facebook fan page~ @see https://tw.andys.pro/article/add-facebook-fanpage-notionnext
-  FACEBOOK_PAGE_TITLE:
-    process.env.NEXT_PUBLIC_FACEBOOK_PAGE_TITLE || null, // 邊欄 Facebook Page widget 的標題欄，填''則無標題欄 e.g FACEBOOK 粉絲團'
-  FACEBOOK_PAGE:
-    process.env.NEXT_PUBLIC_FACEBOOK_PAGE || null, // Facebook Page 的連結 e.g https://www.facebook.com/tw.andys.pro
-  FACEBOOK_PAGE_ID: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_ID || '', // Facebook Page ID 來啟用 messenger 聊天功能
-  FACEBOOK_APP_ID: process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || '', // Facebook App ID 來啟用 messenger 聊天功能 获取: https://developers.facebook.com/
-
-  THEME: process.env.NEXT_PUBLIC_THEME || 'hexo', // 主题， 支持 ['next','hexo',"fukasawa','medium','example'] @see https://preview.tangly1024.com
-  THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮
-  LANG: 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
-  HOME_BANNER_IMAGE: './bg_image.jpg', // 首页背景大图，默认文件：/public/bg_image.jpg 。会被Notion中的封面图覆盖。
-  SINCE: 2021, // e.g if leave this empty, current year will be used.
-  BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
-  APPEARANCE: 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
+  // 社交链接，不需要可留空白，例如 CONTACT_WEIBO:''
+  CONTACT_EMAIL: 'mail@tangly1024.com', // 邮箱
+  CONTACT_WEIBO: '', // 你的微博个人主页
+  CONTACT_TWITTER: '', // 你的twitter个人主页
+  CONTACT_GITHUB: 'https://github.com/tangly1024', // 你的github个人主页
+  CONTACT_TELEGRAM: 'https://t.me/tangly_1024', // 你的telegram 地址 例如 https://t.me/tangly_1024
+  CONTACT_LINKEDIN: '', // 你的linkedIn 首页

  // 自定义字体示例： 请先将 CUSTOM_FONT 改为 true， 并将 CUSTOM_FONT_URL 改为你的字体CSS地址，同时在 CUSTOM_FONT_SANS 与 CUSTOM_FONT_SERIF 中指定你的 fontfamily
  CUSTOM_FONT: true, // 是否使用自定义字体
@@ -31,15 +28,25 @@ const BLOG = {
  CUSTOM_FONT_SANS: ['LXGW WenKai'], // 自定义无衬线字体
  CUSTOM_FONT_SERIF: ['LXGW WenKai'], // 自定义衬线字体

+  // 一个小插件展示你的facebook fan page~ @see https://tw.andys.pro/article/add-facebook-fanpage-notionnext
+  FACEBOOK_PAGE_TITLE: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_TITLE || null, // 邊欄 Facebook Page widget 的標題欄，填''則無標題欄 e.g FACEBOOK 粉絲團'
+  FACEBOOK_PAGE: process.env.NEXT_PUBLIC_FACEBOOK_PAGE || null, // Facebook Page 的連結 e.g https://www.facebook.com/tw.andys.pro
+  FACEBOOK_PAGE_ID: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_ID || '', // Facebook Page ID 來啟用 messenger 聊天功能
+  FACEBOOK_APP_ID: process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || '', // Facebook App ID 來啟用 messenger 聊天功能 获取: https://developers.facebook.com/
+
+  BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
+
  // 图标库CDN(可以直接改版本号）
  FONT_AWESOME_PATH: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/6.2.0/css/all.min.css',
+  // PrismJs CDN
+  PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/',

  BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
  BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'
  SUB_PATH: '', // leave this empty unless you want to deploy in a folder

  POST_URL_PREFIX: process.env.NEXT_PUBLIC_POST_URL_PREFIX || 'article', // POST类型文章的默认路径前缀，例如默认POST类型的路径是  /article/[slug]
-  // 如果此项配置为 '' 空， 则文章将没有前缀路径，使用场景： 希望 文章前缀路径为 /post 的情况 支持多级
+  // 如果此项配置为 '' 空， 则文章将没有前缀路径，使用场景： 希望文章前缀路径为 /post 的情况 支持多级

  POST_LIST_STYLE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
  POST_LIST_PREVIEW: process.env.NEXT_PUBLIC_POST_PREVIEW || 'false', //  是否在列表加载文章预览
@@ -51,22 +58,12 @@ const BLOG = {
  PREVIEW_CATEGORY_COUNT: 16, // 首页最多展示的分类数量，0为不限制
  PREVIEW_TAG_COUNT: 16, // 首页最多展示的标签数量，0为不限制

-  // 社交链接，不需要可留空白，例如 CONTACT_WEIBO:''
-  CONTACT_EMAIL: 'mail@tangly1024.com', // 邮箱
-  CONTACT_WEIBO: '', // 你的微博个人主页
-  CONTACT_TWITTER: '', // 你的twitter个人主页
-  CONTACT_GITHUB: 'https://github.com/tangly1024', // 你的github个人主页
-  CONTACT_TELEGRAM: 'https://t.me/tangly_1024', // 你的telegram 地址 例如 https://t.me/tangly_1024
-  CONTACT_LINKEDIN: '', // 你的linkedIn 首页
-
-
  // 鼠标点击烟花特效
  FIREWORKS: process.env.NEXT_PUBLIC_FIREWORKS || false, // 鼠标点击烟花特效

  // 悬浮挂件
  WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
-  WIDGET_PET_LINK:
-    'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
+  WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
  WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题

  // 评论互动 可同时开启多个支持 GISCUS CUSDIS UTTERRANCES GITALK
@@ -74,40 +71,27 @@ const BLOG = {
  // giscus @see https://giscus.app/
  COMMENT_GISCUS_REPO: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REPO || '', // 你的Github仓库名 e.g 'tangly1024/NotionNext'
  COMMENT_GISCUS_REPO_ID: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REPO_ID || '', // 你的Github Repo ID e.g ( 設定完 giscus 即可看到 )
-  COMMENT_GISCUS_CATEGORY_ID:
-    process.env.NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID || '', // 你的Github Discussions 內的 Category ID ( 設定完 giscus 即可看到 )
-  COMMENT_GISCUS_MAPPING:
-    process.env.NEXT_PUBLIC_COMMENT_GISCUS_MAPPING || 'pathname', // 你的Github Discussions 使用哪種方式來標定文章, 預設 'pathname'
-  COMMENT_GISCUS_REACTIONS_ENABLED:
-    process.env.NEXT_PUBLIC_COMMENT_GISCUS_REACTIONS_ENABLED || '1', // 你的 Giscus 是否開啟文章表情符號 '1' 開啟 "0" 關閉 預設開啟
-  COMMENT_GISCUS_EMIT_METADATA:
-    process.env.NEXT_PUBLIC_COMMENT_GISCUS_EMIT_METADATA || '0', // 你的 Giscus 是否提取 Metadata '1' 開啟 '0' 關閉 預設關閉
-  COMMENT_GISCUS_INPUT_POSITION:
-    process.env.NEXT_PUBLIC_COMMENT_GISCUS_INPUT_POSITION || 'bottom', // 你的 Giscus 發表留言位置 'bottom' 尾部 'top' 頂部, 預設 'bottom'
+  COMMENT_GISCUS_CATEGORY_ID: process.env.NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID || '', // 你的Github Discussions 內的 Category ID ( 設定完 giscus 即可看到 )
+  COMMENT_GISCUS_MAPPING: process.env.NEXT_PUBLIC_COMMENT_GISCUS_MAPPING || 'pathname', // 你的Github Discussions 使用哪種方式來標定文章, 預設 'pathname'
+  COMMENT_GISCUS_REACTIONS_ENABLED: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REACTIONS_ENABLED || '1', // 你的 Giscus 是否開啟文章表情符號 '1' 開啟 "0" 關閉 預設開啟
+  COMMENT_GISCUS_EMIT_METADATA: process.env.NEXT_PUBLIC_COMMENT_GISCUS_EMIT_METADATA || '0', // 你的 Giscus 是否提取 Metadata '1' 開啟 '0' 關閉 預設關閉
+  COMMENT_GISCUS_INPUT_POSITION: process.env.NEXT_PUBLIC_COMMENT_GISCUS_INPUT_POSITION || 'bottom', // 你的 Giscus 發表留言位置 'bottom' 尾部 'top' 頂部, 預設 'bottom'
  COMMENT_GISCUS_LANG: process.env.NEXT_PUBLIC_COMMENT_GISCUS_LANG || 'zh-CN', // 你的 Giscus 語言 e.g 'en', 'zh-TW', 'zh-CN', 預設 'en'
-  COMMENT_GISCUS_LOADING:
-    process.env.NEXT_PUBLIC_COMMENT_GISCUS_LOADING || 'lazy', // 你的 Giscus 載入是否漸進式載入, 預設 'lazy'
-  COMMENT_GISCUS_CROSSORIGIN:
-    process.env.NEXT_PUBLIC_COMMENT_GISCUS_CROSSORIGIN || 'anonymous', // 你的 Giscus 可以跨網域, 預設 'anonymous'
+  COMMENT_GISCUS_LOADING: process.env.NEXT_PUBLIC_COMMENT_GISCUS_LOADING || 'lazy', // 你的 Giscus 載入是否漸進式載入, 預設 'lazy'
+  COMMENT_GISCUS_CROSSORIGIN: process.env.NEXT_PUBLIC_COMMENT_GISCUS_CROSSORIGIN || 'anonymous', // 你的 Giscus 可以跨網域, 預設 'anonymous'

  COMMENT_CUSDIS_APP_ID: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID || '', // data-app-id 36位 see https://cusdis.com/
-  COMMENT_CUSDIS_HOST:
-    process.env.NEXT_PUBLIC_COMMENT_CUSDIS_HOST || 'https://cusdis.com', // data-host, change this if you're using self-hosted version
-  COMMENT_CUSDIS_SCRIPT_SRC:
-    process.env.NEXT_PUBLIC_COMMENT_CUSDIS_SCRIPT_SRC ||
-    'https://cusdis.com/js/cusdis.es.js', // change this if you're using self-hosted version
+  COMMENT_CUSDIS_HOST: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_HOST || 'https://cusdis.com', // data-host, change this if you're using self-hosted version
+  COMMENT_CUSDIS_SCRIPT_SRC: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_SCRIPT_SRC || 'https://cusdis.com/js/cusdis.es.js', // change this if you're using self-hosted version

-  COMMENT_UTTERRANCES_REPO:
-    process.env.NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO || '', // 你的代码仓库名， 例如我是 'tangly1024/NotionNext'； 更多文档参考 https://utteranc.es/
+  COMMENT_UTTERRANCES_REPO: process.env.NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO || '', // 你的代码仓库名， 例如我是 'tangly1024/NotionNext'； 更多文档参考 https://utteranc.es/

  // gitalk评论插件 更多参考 https://gitalk.github.io/
  COMMENT_GITALK_REPO: process.env.NEXT_PUBLIC_COMMENT_GITALK_REPO || '', // 你的Github仓库名，例如 'NotionNext'
  COMMENT_GITALK_OWNER: process.env.NEXT_PUBLIC_COMMENT_GITALK_OWNER || '', // 你的用户名 e.g tangly1024
  COMMENT_GITALK_ADMIN: process.env.NEXT_PUBLIC_COMMENT_GITALK_ADMIN || '', // 管理员用户名、一般是自己 e.g 'tangly1024'
-  COMMENT_GITALK_CLIENT_ID:
-    process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID || '', // e.g 20位ID ， 在gitalk后台获取
-  COMMENT_GITALK_CLIENT_SECRET:
-    process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET || '', // e.g 40位ID， 在gitalk后台获取
+  COMMENT_GITALK_CLIENT_ID: process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID || '', // e.g 20位ID ， 在gitalk后台获取
+  COMMENT_GITALK_CLIENT_SECRET: process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET || '', // e.g 40位ID， 在gitalk后台获取
  COMMENT_GITALK_DISTRACTION_FREE_MODE: false, // 类似facebook的无干扰模式

  COMMENT_GITTER_ROOM: process.env.NEXT_PUBLIC_COMMENT_GITTER_ROOM || '', // gitter聊天室 see https://gitter.im/ 不需要则留空
@@ -128,16 +112,13 @@ const BLOG = {
  ANALYTICS_CNZZ_ID: process.env.NEXT_PUBLIC_ANALYTICS_CNZZ_ID || '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id]
  ANALYTICS_GOOGLE_ID: process.env.NEXT_PUBLIC_ANALYTICS_GOOGLE_ID || '', // 谷歌Analytics的id e.g: G-XXXXXXXXXX

-  ANALYTICS_ACKEE_TRACKER:
-    process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.net/tracker.js'
-  ANALYTICS_ACKEE_DATA_SERVER:
-    process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.net , don't end with a slash
-  ANALYTICS_ACKEE_DOMAIN_ID:
-    process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'
+  ANALYTICS_ACKEE_TRACKER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.net/tracker.js'
+  ANALYTICS_ACKEE_DATA_SERVER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.net , don't end with a slash
+  ANALYTICS_ACKEE_DOMAIN_ID: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'

-  SEO_GOOGLE_SITE_VERIFICATION:
-    process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code
+  SEO_GOOGLE_SITE_VERIFICATION: process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code

+  // 谷歌广告
  ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx

  // 自定义配置notion数据库字段名
@@ -154,13 +135,16 @@ const BLOG = {
    icon: process.env.NEXT_PUBLIC_NOTION_PROPERTY_ICON || 'icon'
  },

-  ENABLE_CACHE: process.env.ENABLE_CACHE || false, // 开启缓存 会将Notion数据缓存在内存中，稍微提升访问速度，但要更新内容需要多次刷新页面
-
-  AVATAR: '/avatar.png', // 作者头像，被notion中的ICON覆盖。如果没有ICON则取public目录下的avatar.png
+  // 作废配置
+  AVATAR: '/avatar.png', // 作者头像，被notion中的ICON覆盖。若无ICON则取public目录下的avatar.png
  TITLE: process.env.NEXT_PUBLIC_TITLE || 'NotionNext BLOG', // 站点标题 ，被notion中的页面标题覆盖
-  DESCRIPTION:
-    process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖
+  HOME_BANNER_IMAGE: './bg_image.jpg', // 首页背景大图, 会被notion中的封面图覆盖，若无封面图则会使用代码中的 /public/bg_image.jpg 文件
+  DESCRIPTION: process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖

+  // 开发相关
+  NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
+  DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮
+  ENABLE_CACHE: process.env.ENABLE_CACHE || false, // 开启缓存会将Notion数据缓存在内存中，通常在开发调试中使用，正式部署开启此功能意义不大。
  isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)  isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
  VERSION: process.env.NEXT_PUBLIC_VERSION // 版本号
 }
--- a/components/Busuanzi.js
+++ b/components/Busuanzi.js
@@ -4,26 +4,23 @@ import { useGlobal } from '@/lib/global'
 // import { useRouter } from 'next/router'
 import React from 'react'

+let path = ''
+
 export default function Busuanzi () {
  const { theme } = useGlobal()
-  const router = useRouter()
-
-  // 切换文章时更新
-  React.useEffect(() => {
-    const busuanziRouteChange = url => {
+  const Router = useRouter()
+  Router.events.on('routeChangeComplete', (url, option) => {
+    if (url !== path) {
+      path = url
      busuanzi.fetch()
    }
-    router.events.on('routeChangeComplete', busuanziRouteChange)
-    return () => {
-      router.events.off('routeChangeComplete', busuanziRouteChange)
-    }
-  }, [router.events])
+  })

  // 更换主题时更新
  React.useEffect(() => {
    if (theme) {
      busuanzi.fetch()
    }
-  })
+  }, [theme])
  return null
 }
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -1,47 +1,11 @@
 import { NotionRenderer } from 'react-notion-x'
 import dynamic from 'next/dynamic'
-// import mediumZoom from 'medium-zoom'
 import mediumZoom from '@fisch0920/medium-zoom'
 import React from 'react'
 import { isBrowser } from '@/lib/utils'
 import Image from 'next/image'
 import Link from 'next/link'
 import { Code } from 'react-notion-x/build/third-party/code'
-// import { Pdf } from 'react-notion-x/build/third-party/pdf'
-// import { Equation } from 'react-notion-x/build/third-party/equation'
-
-import 'prismjs/components/prism-bash.js'
-import 'prismjs/components/prism-markup-templating.js'
-import 'prismjs/components/prism-markup.js'
-import 'prismjs/components/prism-c.js'
-import 'prismjs/components/prism-cpp.js'
-import 'prismjs/components/prism-csharp.js'
-import 'prismjs/components/prism-docker.js'
-import 'prismjs/components/prism-java.js'
-import 'prismjs/components/prism-js-templates.js'
-import 'prismjs/components/prism-coffeescript.js'
-import 'prismjs/components/prism-diff.js'
-import 'prismjs/components/prism-git.js'
-import 'prismjs/components/prism-go.js'
-import 'prismjs/components/prism-graphql.js'
-import 'prismjs/components/prism-handlebars.js'
-import 'prismjs/components/prism-less.js'
-import 'prismjs/components/prism-makefile.js'
-import 'prismjs/components/prism-markdown.js'
-import 'prismjs/components/prism-objectivec.js'
-import 'prismjs/components/prism-ocaml.js'
-import 'prismjs/components/prism-python.js'
-import 'prismjs/components/prism-reason.js'
-import 'prismjs/components/prism-rust.js'
-import 'prismjs/components/prism-sass.js'
-import 'prismjs/components/prism-scss.js'
-import 'prismjs/components/prism-solidity.js'
-import 'prismjs/components/prism-sql.js'
-import 'prismjs/components/prism-stylus.js'
-import 'prismjs/components/prism-swift.js'
-import 'prismjs/components/prism-wasm.js'
-import 'prismjs/components/prism-yaml.js'
-import 'prismjs/components/prism-r.js'

 const Equation = dynamic(() =>
  import('react-notion-x/build/third-party/equation').then(async (m) => {
--- a/components/PrismMac.js
+++ b/components/PrismMac.js
@@ -3,32 +3,35 @@ import Prism from 'prismjs'
 import 'prismjs/plugins/toolbar/prism-toolbar'
 import 'prismjs/plugins/show-language/prism-show-language'
 import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'
-// import 'prismjs/plugins/autoloader/prism-autoloader'
 import 'prismjs/plugins/line-numbers/prism-line-numbers'
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
-
+// 所有语言的prismjs 使用autoloader引入
+import 'prismjs/plugins/autoloader/prism-autoloader'
 // mermaid图
 import mermaid from 'mermaid'
-import { useGlobal } from '@/lib/global'
-import { useRouter } from 'next/router'
+import BLOG from '@/blog.config'

 /**
 * @author https://github.com/txs/
 * @returns
 */
 const PrismMac = () => {
-  const router = useRouter()
-  const { isDarkMode } = useGlobal()
-  const scrollTop = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop
-
  React.useEffect(() => {
    renderPrismMac()
-    window.scrollTo(0, scrollTop)
-    router.events.on('routeChangeComplete', renderPrismMac)
-    return () => {
-      router.events.off('routeChangeComplete', renderPrismMac)
-    }
-  }, [isDarkMode])
+
+    // 折叠代码行号bug
+    const observer = new MutationObserver(mutationsList => {
+      for (const m of mutationsList) {
+        if (m.target.nodeName === 'DETAILS') {
+          const preCode = m.target.querySelector('pre.notion-code')
+          if (preCode) {
+            Prism.plugins.lineNumbers.resize(preCode)
+          }
+        }
+      }
+    })
+    observer.observe(document.querySelector('#container'), { attributes: true, subtree: true })
+  }, [])
  return <></>
 }

@@ -36,14 +39,6 @@ function renderPrismMac() {
  const container = document?.getElementById('container-inner')
  const codeToolBars = container?.getElementsByClassName('code-toolbar')

-  if (codeToolBars) {
-    Array.from(codeToolBars).forEach(item => {
-      const codeBlocks = item.getElementsByTagName('pre')
-      if (codeBlocks.length === 0) {
-        item.remove()
-      }
-    })
-  }
  // Add line numbers
  const codeBlocks = container?.getElementsByTagName('pre')
  if (codeBlocks) {
@@ -56,33 +51,37 @@ function renderPrismMac() {
  }

  //   支持 Mermaid
-  const mermaids = document.querySelectorAll('.notion-code .language-mermaid')
-  if (mermaids) {
-    for (const e of mermaids) {
-      e.parentElement.classList.remove('code-toolbar')
-      const chart = e.firstChild.textContent
-      if (e.firstElementChild) {
-        e.parentElement.remove()
-        continue
-      }
-      if (chart) {
-        e.parentElement.innerHTML = `<div class="mermaid">${chart}</div>`
+  const mermaidPres = document.querySelectorAll('pre.notion-code.language-mermaid')
+  if (mermaidPres) {
+    for (const e of mermaidPres) {
+      const chart = e.querySelector('code').textContent
+      if (chart && !e.querySelector('.mermaid')) {
+        const m = document.createElement('div')
+        m.className = 'mermaid'
+        m.innerHTML = chart
+        e.appendChild(m)
      }
    }
  }

  const mermaidsSvg = document.querySelectorAll('.mermaid')
  if (mermaidsSvg) {
+    let needLoad = false
    for (const e of mermaidsSvg) {
      if (e?.firstChild?.nodeName !== 'svg') {
-        mermaid.contentLoaded()
+        needLoad = true
      }
    }
+    if (needLoad) {
+      mermaid.contentLoaded()
+    }
  }

  // 重新渲染之前检查所有的多余text

  try {
+    // setup autoloader
+    Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
    Prism.highlightAll()
  } catch (err) {
    console.log('代码渲染', err)
--- a/components/WalineComponent.js
+++ b/components/WalineComponent.js
@@ -3,28 +3,34 @@ import { init } from '@waline/client'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'

+const path = ''
+let waline = null
 /**
 * @see https://waline.js.org/guide/get-started.html
 * @param {*} props
 * @returns
 */
 const WalineComponent = (props) => {
-  const walineInstanceRef = React.useRef(null)
  const containerRef = React.createRef()
  const router = useRouter()

  const updateWaline = url => {
-    walineInstanceRef.current?.update(props)
+    if (url !== path && waline) {
+      waline.update(props)
+    }
  }

  React.useEffect(() => {
-    walineInstanceRef.current = init({
-      ...props,
-      el: containerRef.current,
-      serverURL: BLOG.COMMENT_WALINE_SERVER_URL
-    })
-    router.events.on('routeChangeComplete', updateWaline)
+    if (!waline) {
+      waline = init({
+        ...props,
+        el: containerRef.current,
+        serverURL: BLOG.COMMENT_WALINE_SERVER_URL
+      })
+    }

+    // 跳转评论
+    router.events.on('routeChangeComplete', updateWaline)
    const anchor = window.location.hash
    if (anchor) {
      // 选择需要观察变动的节点
@@ -54,7 +60,8 @@ const WalineComponent = (props) => {
    }

    return () => {
-      walineInstanceRef.current?.destroy()
+      waline.destroy()
+      waline = null
      router.events.off('routeChangeComplete', updateWaline)
    }
  }, [])
--- 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()
  })
 }
--- a/lib/notion/getNotionData.js
+++ b/lib/notion/getNotionData.js
@@ -224,8 +224,7 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
            post.type &&
            (post.type === 'Post' || post.type === 'Page') &&
            (post.status === 'Published' || post.status === 'Invisible')
-  }
-  )
+  })

  // Sort by date
  if (BLOG.POSTS_SORT_BY === 'date') {
--- a/lib/notion/getPageProperties.js
+++ b/lib/notion/getPageProperties.js
@@ -76,6 +76,13 @@ export default async function getPageProperties(id, block, schema, authToken, ta
    properties.slug = (properties.slug ?? properties.id)
  }

+  // 开启伪静态路径
+  if (BLOG.PSEUDO_STATIC) {
+    if (!properties.slug.endsWith('.html')) {
+      properties.slug += '.html'
+    }
+  }
+
  properties.createdTime = formatDate(new Date(value.created_time).toString(), BLOG.LANG)
  properties.lastEditedTime = formatDate(new Date(value?.last_edited_time).toString(), BLOG.LANG)
  properties.fullWidth = value.format?.page_full_width ?? false
@@ -87,25 +94,25 @@ export default async function getPageProperties(id, block, schema, authToken, ta
  }) || []
  delete properties.content
  return properties
-
-  // 从Block获取封面图;优先取PageCover，否则取内容图片
-  function getImageUrl(imgObj, blockVal) {
-    if (!imgObj) {
-      return null
-    }
-    if (imgObj.startsWith('/')) {
-      return 'https://www.notion.so' + imgObj // notion内部图片转相对路径为绝对路径
-    }
-
-    if (imgObj.startsWith('http')) {
-      // 判断如果是notion上传的图片要拼接访问token
-      const u = new URL(imgObj)
-      if (u.pathname.startsWith('/secure.notion-static.com') && u.hostname.endsWith('.amazonaws.com')) {
-        return defaultMapImageUrl(imgObj, blockVal) // notion上传的图片需要转换请求地址
-      }
-    }
-
-    // 其他图片链接 或 emoji
-    return imgObj
-  }
+}
+
+// 从Block获取封面图;优先取PageCover，否则取内容图片
+function getImageUrl(imgObj, blockVal) {
+  if (!imgObj) {
+    return null
+  }
+  if (imgObj.startsWith('/')) {
+    return 'https://www.notion.so' + imgObj // notion内部图片转相对路径为绝对路径
+  }
+
+  if (imgObj.startsWith('http')) {
+    // 判断如果是notion上传的图片要拼接访问token
+    const u = new URL(imgObj)
+    if (u.pathname.startsWith('/secure.notion-static.com') && u.hostname.endsWith('.amazonaws.com')) {
+      return defaultMapImageUrl(imgObj, blockVal) // notion上传的图片需要转换请求地址
+    }
+  }
+
+  // 其他图片链接 或 emoji
+  return imgObj
 }
--- a/lib/notion/getPostBlocks.js
+++ b/lib/notion/getPostBlocks.js
@@ -72,7 +72,7 @@ function filterPostBlocks(id, pageBlock, slice) {
      continue
    }
    count++
-    // 处理 c++ 和 c#两种语言
+    // 处理 c++、c#、汇编等语言名字映射
    if (b?.value?.type === 'code') {
      if (b?.value?.properties?.language?.[0][0] === 'C++') {
        b.value.properties.language[0][0] = 'cpp'
@@ -80,6 +80,9 @@ function filterPostBlocks(id, pageBlock, slice) {
      if (b?.value?.properties?.language?.[0][0] === 'C#') {
        b.value.properties.language[0][0] = 'csharp'
      }
+      if (b?.value?.properties?.language?.[0][0] === 'Assembly') {
+        b.value.properties.language[0][0] = 'asm6502'
+      }
    }

    delete b?.role
--- a/next.config.js
+++ b/next.config.js
@@ -17,6 +17,14 @@ module.exports = withBundleAnalyzer({
      'images.unsplash.com'
    ]
  },
+  async rewrites() {
+    return [
+      {
+        source: '/:path*.html',
+        destination: '/:path*'
+      }
+    ]
+  },
  async headers() {
    return [
      {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "notion-next",
-  "version": "3.6.1",
+  "version": "3.6.3",
  "homepage": "https://github.com/tangly1024/NotionNext.git",
  "license": "MIT",
  "repository": {
@@ -40,7 +40,7 @@
    "notion-client": "6.15.6",
    "notion-utils": "6.15.6",
    "preact": "^10.5.15",
-    "prism-themes": "^1.9.0",
+    "prism-themes": "1.9.0",
    "qrcode.react": "^1.0.1",
    "react": "17.0.2",
    "react-cookies": "^0.1.1",
--- a/pages/[...slug].js
+++ b/pages/[...slug].js
@@ -24,6 +24,7 @@ const Slug = props => {
  const [lock, setLock] = React.useState(post?.password && post?.password !== '')

  React.useEffect(() => {
+    changeLoadingState(false)
    if (post?.password && post?.password !== '') {
      setLock(true)
    } else {
@@ -32,7 +33,6 @@ const Slug = props => {
  }, [post])

  if (!post) {
-    changeLoadingState(true)
    setTimeout(() => {
      if (isBrowser()) {
        const article = document.getElementById('container')
@@ -47,8 +47,6 @@ const Slug = props => {
    return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
  }

-  changeLoadingState(false)
-
  /**
   * 验证文章密码
   * @param {*} result
@@ -97,8 +95,13 @@ export async function getStaticPaths() {
 }

 export async function getStaticProps({ params: { slug } }) {
-  // slug 是个数组
-  const fullSlug = slug.join('/')
+  let fullSlug = slug.join('/')
+  console.log('[读取Notion]', fullSlug)
+  if (BLOG.PSEUDO_STATIC) {
+    if (!fullSlug.endsWith('.html')) {
+      fullSlug += '.html'
+    }
+  }
  const from = `slug-props-${fullSlug}`
  const props = await getGlobalNotionData({ from })
  props.post = props.allPages.find((p) => {
@@ -108,13 +111,13 @@ export async function getStaticProps({ params: { slug } }) {
  if (!props.post) {
    const pageId = slug.slice(-1)[0]
    if (pageId.length < 32) {
-      return { props, revalidate: 1 }
+      return { props, revalidate: BLOG.NEXT_REVALIDATE_SECOND }
    }
    const post = await getNotion(pageId)
    if (post) {
      props.post = post
    } else {
-      return { props, revalidate: 1 }
+      return { props, revalidate: BLOG.NEXT_REVALIDATE_SECOND }
    }
  } else {
    props.post.blockMap = await getPostBlocks(props.post.id, 'slug')
@@ -132,7 +135,7 @@ export async function getStaticProps({ params: { slug } }) {
  delete props.allPages
  return {
    props,
-    revalidate: 1
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND
  }
 }

--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -2,6 +2,7 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'
+import BLOG from '@/blog.config'

 const ArchiveIndex = props => {
  const { theme, locale } = useGlobal()
@@ -26,7 +27,7 @@ export async function getStaticProps() {

  return {
    props,
-    revalidate: 1
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND
  }
 }

--- a/pages/category/[category]/index.js
+++ b/pages/category/[category]/index.js
@@ -52,7 +52,7 @@ export async function getStaticProps({ params: { category } }) {

  return {
    props,
-    revalidate: 1
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND
  }
 }

--- a/pages/category/[category]/page/[page].js
+++ b/pages/category/[category]/page/[page].js
@@ -47,7 +47,7 @@ export async function getStaticProps({ params: { category, page } }) {

  return {
    props,
-    revalidate: 1
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND
  }
 }

--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -3,6 +3,7 @@ import React from 'react'
 import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'
 import { getAllCategories } from '@/lib/notion/getAllCategories'
+import BLOG from '@/blog.config'

 /**
 * 分类首页
@@ -30,6 +31,6 @@ export async function getStaticProps() {
  delete props.categoryOptions
  return {
    props,
-    revalidate: 1
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND
  }
 }
--- a/pages/index.js
+++ b/pages/index.js
@@ -44,7 +44,7 @@ export async function getStaticProps() {
      meta,
      ...props
    },
-    revalidate: 5
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND
  }
 }

--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -56,7 +56,7 @@ export async function getStaticProps({ params: { page } }) {

  return {
    props,
-    revalidate: 1
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND
  }
 }

--- a/pages/search/[keyword]/index.js
+++ b/pages/search/[keyword]/index.js
@@ -48,7 +48,7 @@ export async function getStaticProps({ params: { keyword } }) {
  props.keyword = keyword
  return {
    props,
-    revalidate: 1
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND
  }
 }

--- a/pages/search/[keyword]/page/[page].js
+++ b/pages/search/[keyword]/page/[page].js
@@ -45,7 +45,7 @@ export async function getStaticProps({ params: { keyword, page } }) {
  props.page = page
  return {
    props,
-    revalidate: 1
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND
  }
 }

--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -2,6 +2,7 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import * as ThemeMap from '@/themes'
+import BLOG from '@/blog.config'

 const Search = props => {
  const { posts, siteInfo } = props
@@ -58,7 +59,7 @@ export async function getStaticProps() {
  props.posts = allPosts
  return {
    props,
-    revalidate: 1
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND
  }
 }

--- a/pages/tag/[tag]/index.js
+++ b/pages/tag/[tag]/index.js
@@ -43,7 +43,7 @@ export async function getStaticProps({ params: { tag } }) {
  props.tag = tag
  return {
    props,
-    revalidate: 1
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND
  }
 }

--- a/pages/tag/[tag]/page/[page].js
+++ b/pages/tag/[tag]/page/[page].js
@@ -38,7 +38,7 @@ export async function getStaticProps({ params: { tag, page } }) {
  delete props.allPages
  return {
    props,
-    revalidate: 1
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND
  }
 }

--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -3,6 +3,7 @@ import React from 'react'
 import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'
 import { getAllTags } from '@/lib/notion'
+import BLOG from '@/blog.config'

 /**
 * 标签首页
@@ -31,7 +32,7 @@ export async function getStaticProps() {
  delete props.tagOptions
  return {
    props,
-    revalidate: 1
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND
  }
 }

--- a/styles/notion.css
+++ b/styles/notion.css
@@ -929,7 +929,7 @@ svg.notion-page-icon {

 .notion-toggle {
  padding: 3px 2px;
-  max-width: 100%;
+  width: 100%;
 }
 .notion-toggle > summary {
  cursor: pointer;
@@ -1945,4 +1945,37 @@ pre[class*='language-'] {

 .notion-asset-wrapper-pdf > div {
    display: block !important;
+}
+
+::selection {
+    @apply bg-blue-500 text-gray-50 !important; 
+}
+
+.dark img{
+    @apply opacity-80
+}
+
+.dark #live2d {
+    @apply opacity-80
+}
+
+/* https://github.com/kchen0x */
+.notion-quote {
+  display: block;
+  border-radius: 5px;
+  border-color: var(--notion-blue);
+  border-left-color: var(--notion-blue);
+  background-color: var(--notion-blue_background_co);
+  width: 100%;
+  white-space: pre-wrap;
+  word-break: break-word;
+  border-left: 10px solid;
+  padding: 0.2em 0.9em;
+  margin: 6px 0;
+  font-size: 1em;
+  /* color: var(--notion-gray); */
+}
+
+.notion-asset-wrapper-pdf>div{
+    width:unset!important
 }
--- a/styles/prism-mac-style.css
+++ b/styles/prism-mac-style.css
@@ -4,6 +4,7 @@
 .code-toolbar {
  position: relative;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
+  padding-bottom: 0 !important;
  @apply mb-8 mt-4 pt-6 w-full rounded-lg bg-black
 }

@@ -26,16 +27,6 @@
  margin-top: -0.1rem;
 }

-pre[class*='language-'].line-numbers {
-  position: relative;
-  padding: 3px; /*修改*/
-  padding-left: 3.8em;
-  counter-reset: linenumber;
-  max-height: 400px; /*修改*/
-  background: black;
-  border: none;
-}
-
 .notion-code > code[class*='language-'],
 pre[class*='language-'] {
  background: black;
@@ -70,10 +61,14 @@ pre[class*='language-'] {
 }

 pre[class*="language-mermaid"] {
-  background: transparent !important; 
-  @apply dark:bg-gray-200 !important;
+  @apply bg-gray-50 dark:bg-gray-200 !important;
 }

-.line-numbers-rows > span {
-    height:auto !important;
+/* mermaid 原文隐藏 */
+code.language-mermaid {
+  display:none
+}
+
+pre.notion-code.line-numbers{
+    margin-bottom: 0 !important
 }
--- a/themes/medium/LayoutSlug.js
+++ b/themes/medium/LayoutSlug.js
@@ -9,6 +9,8 @@ import { ArticleLock } from './components/ArticleLock'

 export const LayoutSlug = props => {
  const { post, lock, validPassword } = props
+  const { locale } = useGlobal()
+
  if (!post) {
    return <LayoutBase
      {...props}
@@ -20,7 +22,6 @@ export const LayoutSlug = props => {
    post.content = Object.keys(post.blockMap.block)
    post.toc = getPageTableOfContents(post, post.blockMap)
  }
-  const { locale } = useGlobal()

  const slotRight = post?.toc && post?.toc?.length > 3 && (
    <div key={locale.COMMON.TABLE_OF_CONTENTS} >
--- a/themes/medium/components/ArticleDetail.js
+++ b/themes/medium/components/ArticleDetail.js
@@ -19,55 +19,58 @@ export const ArticleDetail = props => {
    locale.LOCALE
  )
  return <div id='container'>
-    <h1 className="text-4xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>
-    <section className="flex py-4 items-center font-sans px-1">
-      <Link href="/about" passHref>
-        <>

-         {/* eslint-disable-next-line @next/next/no-img-element */}
-         <img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={25}/>
+        {/* title */}
+        <h1 className="text-4xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>

-          <div className="mr-3 ml-1 text-green-500 cursor-pointer">
-            {BLOG.AUTHOR}
-          </div>
-        </>
-      </Link>
-      <div className="text-gray-500">{date}</div>
-      <div className='mx-2 text-gray-300 dark:text-gray-600'>
-        {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
-      </div>
-      <div className="hidden busuanzi_container_page_pv text-gray-500 font-light mr-2">
-        <i className="ml-3 mr-0.5 fas fa-eye" />
-        &nbsp;
-        <span className="mr-2 busuanzi_value_page_pv" />
-      </div>
-    </section>
-    {/* Notion文章主体 */}
-    <section id="notion-article" className="px-1 max-w-5xl">
-      {post && (<NotionPage post={post} />)}
-    </section>
+        {/* meta */}
+        <section className="py-2 items-center font-sans px-1">
+            <div className='flex text-gray-500 py-1 dark:text-gray-600'>
+                <span> <i className='far fa-calendar mr-2' />{date}</span>
+                <span className='mx-2'>|</span>
+                <span> <i className='far fa-calendar-check mr-2'/>{post.lastEditedTime}</span>
+                <div className="hidden busuanzi_container_page_pv font-light mr-2">
+                    <i className="ml-3 mr-1 fas fa-eye" />
+                    <span className="busuanzi_value_page_pv" />
+                </div>
+            </div>
+            <Link href="/about" passHref>
+                <div className='flex pt-2'>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={25} />

-    <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
-      {/* 文章内嵌广告 */}
-      <ins
-        className="adsbygoogle"
-        style={{ display: 'block', textAlign: 'center' }}
-        data-adtest="on"
-        data-ad-layout="in-article"
-        data-ad-format="fluid"
-        data-ad-client="ca-pub-2708419466378217"
-        data-ad-slot="3806269138"
-      />
-    </section>
-    <section>
-      <div className='flex justify-between'>
-        {CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category} />}
-        <div>
-          {CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
-        </div>
-      </div>
-      {post.type === 'Post' && <ArticleAround prev={prev} next={next} /> }
-      <Comment frontMatter={post} />
-    </section>
-  </div>
+                    <div className="mr-3 ml-2 text-md text-green-500 cursor-pointer">
+                        {BLOG.AUTHOR}
+                    </div>
+                </div>
+            </Link>
+        </section>
+        {/* Notion文章主体 */}
+        <section id="notion-article" className="px-1 max-w-5xl">
+            {post && (<NotionPage post={post} />)}
+        </section>
+
+        <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
+            {/* 文章内嵌广告 */}
+            <ins
+                className="adsbygoogle"
+                style={{ display: 'block', textAlign: 'center' }}
+                data-adtest="on"
+                data-ad-layout="in-article"
+                data-ad-format="fluid"
+                data-ad-client="ca-pub-2708419466378217"
+                data-ad-slot="3806269138"
+            />
+        </section>
+        <section>
+            <div className='flex justify-between'>
+                {CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category} />}
+                <div>
+                    {CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+                </div>
+            </div>
+            {post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
+            <Comment frontMatter={post} />
+        </section>
+    </div>
 }
--- a/themes/medium/components/GroupMenu.js
+++ b/themes/medium/components/GroupMenu.js
@@ -9,18 +9,18 @@ function GroupMenu ({ customNav }) {
  const router = useRouter()

  let links = [
-    { name: locale.NAV.INDEX, to: '/' || '/', show: true },
+    // { name: locale.NAV.INDEX, to: '/' || '/', show: true },
    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MEDIUM.MENU_CATEGORY },
    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG },
-    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE },
-    { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH }
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE }
+    // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH }
  ]

  if (customNav) {
    links = links.concat(customNav)
  }

-  return <nav id='nav' className='font-sans text-sm'>
+  return <nav id='nav' className='font-sans text-md'>
      {links.map(link => {
        if (link.show) {
          const selected = (router.pathname === link.to) || (router.asPath === link.to)
--- a/themes/medium/components/TopNavBar.js
+++ b/themes/medium/components/TopNavBar.js
@@ -4,6 +4,9 @@ import LogoBar from './LogoBar'
 import React from 'react'
 import Collapse from '@/components/Collapse'
 import GroupMenu from './GroupMenu'
+import { useGlobal } from '@/lib/global'
+import CONFIG_MEDIUM from '../config_medium'
+
 /**
 * 顶部导航栏 + 菜单
 * @param {} param0
@@ -14,11 +17,23 @@ export default function TopNavBar(props) {
  const router = useRouter()
  const [isOpen, changeShow] = React.useState(false)

+  const { locale } = useGlobal()
+
+  const defaultLinks = [
+    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MEDIUM.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH }
+  ]
+
+  const navs = defaultLinks.concat(customNav)
+
  const toggleMenuOpen = () => {
    changeShow(!isOpen)
  }

  return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
+        {/* 折叠菜单 */}
        <Collapse type='vertical' isOpen={isOpen} className='md:hidden'>
            <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 px-5 lg:hidden '>
                <GroupMenu {...props} />
@@ -26,6 +41,8 @@ export default function TopNavBar(props) {
        </Collapse>

        <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-5 items-between'>
+
+            {/* 图标Logo */}
            <LogoBar {...props} />

            {/* 右侧功能 */}
@@ -37,11 +54,11 @@ export default function TopNavBar(props) {

            {/* 顶部菜单 */}
            <div className='hidden md:flex'>
-                {customNav && customNav.map(link => {
-                  if (link.show) {
+                {navs && navs.map(link => {
+                  if (link?.show) {
                    const selected = (router.pathname === link.to) || (router.asPath === link.to)
                    return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
-                            <a target={link.to.indexOf('http') === 0 ? '_blank' : '_self'} className={'px-2 duration-300 text-sm justify-between dark:text-gray-300 hover:underline cursor-pointer flex flex-nowrap items-center ' +
+                            <a target={link.to.indexOf('http') === 0 ? '_blank' : '_self'} className={'px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
                                (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')} >
                                <div className='items-center justify-center flex '>
                                    <i className={link.icon} />
--- a/themes/next/LayoutSlug.js
+++ b/themes/next/LayoutSlug.js
@@ -12,15 +12,6 @@ import { isBrowser } from '@/lib/utils'

 export const LayoutSlug = (props) => {
  const { post, latestPosts, lock, validPassword } = props
-  if (!post) {
-    return <LayoutBase
-      {...props}
-      rightAreaSlot={
-        CONFIG_NEXT.RIGHT_LATEST_POSTS && <Card><LatestPostsGroup posts={latestPosts} /></Card>
-      }
-    />
-  }
-
  if (!lock && post?.blockMap?.block) {
    post.content = Object.keys(post.blockMap.block)
    post.toc = getPageTableOfContents(post, post.blockMap)
@@ -34,6 +25,15 @@ export const LayoutSlug = (props) => {
    }} /></div>
    : null

+  if (!post) {
+    return <LayoutBase
+          {...props}
+          rightAreaSlot={
+            CONFIG_NEXT.RIGHT_LATEST_POSTS && <Card><LatestPostsGroup posts={latestPosts} /></Card>
+          }
+        />
+  }
+
  return (
    <LayoutBase
      {...props}
--- a/themes/next/components/ArticleDetail.js
+++ b/themes/next/components/ArticleDetail.js
@@ -26,114 +26,107 @@ export default function ArticleDetail(props) {
  const date = formatDate(post?.date?.start_date || post?.createdTime, locale.LOCALE)

  return (<div id="container" 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 py-10 px-5 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-hexo-black-gray"
-    >
+        <div itemScope itemType="https://schema.org/Movie"
+            className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-hexo-black-gray"
+        >

-      {showArticleInfo && <header className='animate__slideInDown animate__animated'>
-        {CONFIG_NEXT.POST_HEADER_IMAGE_VISIBLE && post?.type && !post?.type !== 'Page' && post?.page_cover && (
-          <div className="w-full relative md:flex-shrink-0 overflow-hidden">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img alt={post.title} src={post?.page_cover} className='object-center w-full' />
-          </div>
-        )}
+            {showArticleInfo && <header className='animate__slideInDown animate__animated'>
+                {/* 头图 */}
+                {CONFIG_NEXT.POST_HEADER_IMAGE_VISIBLE && post?.type && !post?.type !== 'Page' && post?.page_cover && (
+                    <div className="w-full relative md:flex-shrink-0 overflow-hidden">
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img alt={post.title} src={post?.page_cover} className='object-center w-full' />
+                    </div>
+                )}

-        {/* 文章Title */}
-        <div className="font-bold text-3xl text-black dark:text-white font-serif pt-10">
-          <NotionIcon icon={post.pageIcon}/>{post.title}
+                {/* title */}
+                <div className=" text-center font-bold text-3xl text-black dark:text-white font-serif pt-6">
+                    <NotionIcon icon={post.pageIcon} />{post.title}
+                </div>
+
+                {/* meta */}
+                <section className="mt-2 text-gray-400 dark:text-gray-400 font-light leading-7 text-sm">
+                    <div className='flex flex-wrap justify-center'>
+                        {post?.type !== 'Page' && (<>
+                            <Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
+                                <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' /> {date}
+                                </div>
+                            </Link>
+                            <span className='mr-2'> | <i className='far fa-calendar-check mr-2' />{post.lastEditedTime} </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 id='notion-article' className='px-1'>
+                {post && (<NotionPage post={post} />)}
+            </article>
+
+            <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
+                {/* 文章内嵌广告 */}
+                <ins className="adsbygoogle"
+                    style={{ display: 'block', textAlign: 'center' }}
+                    data-adtest="on"
+                    data-ad-layout="in-article"
+                    data-ad-format="fluid"
+                    data-ad-client="ca-pub-2708419466378217"
+                    data-ad-slot="3806269138" />
+            </section>
+
+            {showArticleInfo && <>
+                {/* 版权声明 */}
+                {post.type === 'Post' && <ArticleCopyright author={BLOG.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:border-gray-500 border-dashed">
+                            <Link href={`/category/${post.category}`} passHref>
+                                <><i className="mr-1 far fa-folder-open" /> {post.category}</>
+                            </Link>
+                        </div>
+
+                    </>}
+
+                    {/* 标签列表 */}
+                    {post.type === 'Post' && (
+                        <>
+                            {post.tagItems && (
+                                <div className="flex 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}：
+                                    </div>
+                                    {post.tagItems.map(tag => (
+                                        <TagItem key={tag.name} tag={tag} />
+                                    ))}
+                                </div>
+                            )}
+                            <ShareBar post={post} />
+                        </>
+                    )}
+                </section>
+                {post.type === 'Post' && <BlogAround prev={prev} next={next} />}
+            </>}
+
+            {/* 评论互动 */}
+            <div className="duration-200 w-full dark:border-gray-700 bg-white dark:bg-gray-800">
+                <Comment frontMatter={post} />
+            </div>
        </div>

-        <section className="flex-wrap flex mt-2 text-gray-400 dark:text-gray-400 font-light leading-8">
-          <div className='flex  flex-wrap'>
-            {post.category && <>
-              <Link href={`/category/${post.category}`} passHref>
-                <a className="cursor-pointer text-md mr-2 hover:text-black dark:hover:text-white border-b dark:border-gray-500 border-dashed">
-                  <i className="mr-1 far fa-folder-open" />  {post.category}
-                </a>
-              </Link>
-              <span className='mr-2'>|</span>
-            </>}
-            {post?.type !== 'Page' && (<>
-              <Link
-                href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
-                passHref
-              >
-                <a className="pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed">
-                  {date}
-                </a>
-              </Link>
-              <span className='mr-2'>|</span>
-              <div className="hidden busuanzi_container_page_pv font-light mr-2">
-                <i className='mr-1 fas fa-eye' />
-                &nbsp;
-                <span className="mr-2 busuanzi_value_page_pv" />
-              </div>
-
-            </>)}
-
-          </div>
-
-          <div className='mr-2'>
-            <i className='far fa-clock mr-2' />{locale.COMMON.LAST_EDITED_TIME} {post.lastEditedTime}
-          </div>
-
-          <div className='flex flex-nowrap whitespace-nowrap items-center font-light text-md'>
-            <WordCount />
-          </div>
-        </section>
-
-      </header>}
-
-      {/* Notion内容主体 */}
-      <article id='notion-article' className='px-1'>
-        {post && (<NotionPage post={post} />)}
-      </article>
-
-      <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
-        {/* 文章内嵌广告 */}
-        <ins className="adsbygoogle"
-          style={{ display: 'block', textAlign: 'center' }}
-          data-adtest="on"
-          data-ad-layout="in-article"
-          data-ad-format="fluid"
-          data-ad-client="ca-pub-2708419466378217"
-          data-ad-slot="3806269138" />
-      </section>
-
-      {showArticleInfo && <>
-        {/* 版权声明 */}
-        {post.type === 'Post' && <ArticleCopyright author={BLOG.AUTHOR} url={url} /> }
-
-        {/* 推荐文章 */}
-        {post.type === 'Post' && <RecommendPosts currentPost={post} recommendPosts={recommendPosts} />}
-
-        {/* 标签列表 */}
-        {post.type === 'Post' && (
-            <section className="md:flex md:justify-between">
-            {post.tagItems && (
-                <div className="flex 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}：
-                </div>
-                {post.tagItems.map(tag => (
-                    <TagItem key={tag.name} tag={tag} />
-                ))}
-                </div>
-            )}
-            <div>
-                <ShareBar post={post} />
-            </div>
-            </section>
-        )}
-
-        {post.type === 'Post' && <BlogAround prev={prev} next={next} /> }
-      </>}
-
-      {/* 评论互动 */}
-      <div className="duration-200 w-full dark:border-gray-700 bg-white dark:bg-gray-800">
-        <Comment frontMatter={post} />
-      </div>
-    </div>
-
-  </div>)
+    </div>)
 }
--- a/themes/next/components/WordCount.js
+++ b/themes/next/components/WordCount.js
@@ -9,8 +9,8 @@ export default function WordCount() {
    countWords()
  })

-  return <div id='wordCountWrapper' className='hidden'>
-    <i className='mr-1 fas fa-file-word' /> 本文字数 <strong id='wordCount'>0</strong> &nbsp;|&nbsp; <i className='mr-1 fas fa-clock' /> 阅读时长 ≈ <strong id='readTime'>0</strong> 分钟
+  return <div id='wordCountWrapper' className='flex justify-center my-auto font-light'>
+    <i className='mr-1 fas fa-file-word my-auto' /> <span className='hidden md:block'>本文字数</span> <strong id='wordCount'>0</strong> &nbsp;|&nbsp; <i className='mr-1 fas fa-clock my-auto' /> <span className='hidden md:block'>阅读时长 ≈</span> <strong id='readTime'>0</strong> 分钟
  </div>
 }