Merge pull request #1007 from emengweb/main

【fukasawa/hexo主题】优化样式/侧栏增加公告，文章列表&详情优化；增加对notion.so自定义反代域名的配置支持
2026-05-14 07:26:52 +00:00 · 2023-05-23 16:39:13 +08:00
parent 1c0696a7ef 4aa0bf5598
commit c6c7b095e6
44 changed files with 568 additions and 140 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.13.6
+NEXT_PUBLIC_VERSION=3.14.0
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -21,13 +21,13 @@ assignees: tangly1024
 希望按这个步骤，正常操作结果是什么

 **截图**
-相关的页面，应该用结果
+相关的页面，应该的结果

 **环境**

 - 操作系统: [例如. iOS, Android, macOS, windows]
 - 浏览器 [例如. chrome, safari, firefox]
- 版本 [e.g. 22]
+- NotionNext版本 [e.g. 3.13.6]

 **补充说明**
 与问题相关的其它说明
--- a/README.md
+++ b/README.md
@@ -169,11 +169,15 @@
  </td>

  <td align="center">
-  <a href="https://github.com/Allengl" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/58612763" width="64px;"  alt="Allen"/><br/><sub><b>Allen</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=Allengl" title="Allengl" >🔧 🐛</a>
+    <a href="https://github.com/Allengl" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/58612763" width="64px;"  alt="Allen"/><br/><sub><b>Allen</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=Allengl" title="Allengl" >🔧 🐛</a>
  </td>

  <td align="center">
-  <a href="https://github.com/zdf1230" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/5999425" width="64px;"  alt="zdf1230"/><br/><sub><b>zdf</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=zdf1230" title="zdf1230" >🔧 🐛</a>
+    <a href="https://github.com/zdf1230" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/5999425" width="64px;"  alt="zdf1230"/><br/><sub><b>zdf</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=zdf1230" title="zdf1230" >🔧 🐛</a>
+  </td>
+
+  <td align="center">
+    <a href="https://github.com/emengweb" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/31469739" width="64px;"  alt="emengweb"/><br/><sub><b>emengweb</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=emengweb" title="emengweb" >🔧 🐛</a>
  </td>


--- a/blog.config.js
+++ b/blog.config.js
@@ -2,7 +2,7 @@
 const BLOG = {
  // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
  NOTION_PAGE_ID:
-    process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5',
+      process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5',
  PSEUDO_STATIC: false, // 伪静态路径，开启后所有文章URL都以 .html 结尾。
  NEXT_REVALIDATE_SECOND: process.env.NEXT_PUBLIC_REVALIDATE_SECOND || 5, // 更新内容缓存间隔 单位(秒)；即每个页面有5秒的纯静态期、此期间无论多少次访问都不会抓取notion数据；调大该值有助于节省Vercel资源、同时提升访问速率，但也会使文章更新有延迟。
  THEME: process.env.NEXT_PUBLIC_THEME || 'hexo', // 主题， 支持 ['next','hexo',"fukasawa','medium','example'] @see https://preview.tangly1024.com
@@ -26,6 +26,8 @@ const BLOG = {
  CONTACT_TELEGRAM: process.env.NEXT_PUBLIC_CONTACT_TELEGRAM || '', // 你的telegram 地址 例如 https://t.me/tangly_1024
  CONTACT_LINKEDIN: process.env.NEXT_PUBLIC_CONTACT_LINKEDIN || '', // 你的linkedIn 首页

+  NOTION_HOST: process.env.NEXT_PUBLIC_NOTION_HOST || 'https://www.notion.so', // Notion域名，您可以选择用自己的域名进行反向代理
+
  // 网站字体
  FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-serif', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
  FONT_URL: [
@@ -85,10 +87,10 @@ const BLOG = {

  // PrismJs 代码相关
  PRISM_JS_AUTO_LOADER:
-    'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js',
+      'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js',
  PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/',
  PRISM_THEME_PATH:
-    'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
+      'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
  CODE_MAC_BAR: true, // 代码左上角显示mac的红黄绿图标
  CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 是否显示行号

@@ -143,19 +145,19 @@ const BLOG = {
  // 悬浮挂件
  WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
  WIDGET_PET_LINK:
-    process.env.NEXT_PUBLIC_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
+      process.env.NEXT_PUBLIC_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, // 点击宠物挂件切换博客主题

  // 音乐播放插件
  MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件
  MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换，如果使用播放器，打开自动播放再隐藏，就会以类似背景音乐的方式播放，无法取消和暂停
  MUSIC_PLAYER_AUTO_PLAY:
-    process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过自动播放时常不生效（移动设备不支持自动播放）
+      process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过自动播放时常不生效（移动设备不支持自动播放）
  MUSIC_PLAYER_LRC_TYPE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_LRC_TYPE || '0', // 歌词显示类型，可选值： 3 | 1 | 0（0：禁用 lrc 歌词，1：lrc 格式的字符串，3：lrc 文件 url）（前提是有配置歌词路径，对 meting 无效）
  MUSIC_PLAYER_CDN_URL:
-    process.env.NEXT_PUBLIC_MUSIC_PLAYER_CDN_URL ||
-    'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js',
+      process.env.NEXT_PUBLIC_MUSIC_PLAYER_CDN_URL ||
+      'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js',
  MUSIC_PLAYER_ORDER: process.env.NEXT_PUBLIC_MUSIC_PLAYER_ORDER || 'list', // 默认播放方式，顺序 list，随机 random
  MUSIC_PLAYER_AUDIO_LIST: [
    // 示例音乐列表。除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/
@@ -164,23 +166,23 @@ const BLOG = {
      artist: 'Falcom Sound Team jdk',
      url: 'https://music.163.com/song/media/outer/url?id=731419.mp3',
      cover:
-        'https://p2.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
+          'https://p2.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
    },
    {
      name: '王都グランセル',
      artist: 'Falcom Sound Team jdk',
      url: 'https://music.163.com/song/media/outer/url?id=731355.mp3',
      cover:
-        'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
+          'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
    }
  ],
  MUSIC_PLAYER_METING: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING || false, // 是否要开启 MetingJS，从平台获取歌单。会覆盖自定义的 MUSIC_PLAYER_AUDIO_LIST，更多配置信息：https://github.com/metowolf/MetingJS
  MUSIC_PLAYER_METING_SERVER:
-    process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER || 'netease', // 音乐平台，[netease, tencent, kugou, xiami, baidu]
+      process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER || 'netease', // 音乐平台，[netease, tencent, kugou, xiami, baidu]
  MUSIC_PLAYER_METING_ID:
-    process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_ID || '60198', // 对应歌单的 id
+      process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_ID || '60198', // 对应歌单的 id
  MUSIC_PLAYER_METING_LRC_TYPE:
-    process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_LRC_TYPE || '1', // 可选值： 3 | 1 | 0（0：禁用 lrc 歌词，1：lrc 格式的字符串，3：lrc 文件 url）
+      process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_LRC_TYPE || '1', // 可选值： 3 | 1 | 0（0：禁用 lrc 歌词，1：lrc 格式的字符串，3：lrc 文件 url）

  // ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK

@@ -191,42 +193,42 @@ const BLOG = {

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

  // 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 即可看到 )
+      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'
+      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" 關閉 預設開啟
+      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' 關閉 預設關閉
+      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'
+      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'
+      process.env.NEXT_PUBLIC_COMMENT_GISCUS_LOADING || 'lazy', // 你的 Giscus 載入是否漸進式載入, 預設 'lazy'
  COMMENT_GISCUS_CROSSORIGIN:
-    process.env.NEXT_PUBLIC_COMMENT_GISCUS_CROSSORIGIN || 'anonymous', // 你的 Giscus 可以跨網域, 預設 'anonymous'
+      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
+      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
+      process.env.NEXT_PUBLIC_COMMENT_CUSDIS_SCRIPT_SRC ||
+      'https://cusdis.com/js/cusdis.es.js', // change this if you're using self-hosted version

  // 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后台获取
+      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后台获取
+      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/ 不需要则留空
@@ -237,7 +239,7 @@ const BLOG = {
  COMMENT_VALINE_APP_KEY: process.env.NEXT_PUBLIC_VALINE_KEY || '',
  COMMENT_VALINE_SERVER_URLS: process.env.NEXT_PUBLIC_VALINE_SERVER_URLS || '', // 该配置适用于国内自定义域名用户, 海外版本会自动检测(无需手动填写) @see https://valine.js.org/configuration.html#serverURLs
  COMMENT_VALINE_PLACEHOLDER:
-    process.env.NEXT_PUBLIC_VALINE_PLACEHOLDER || '抢个沙发吧~', // 可以搭配后台管理评论 https://github.com/DesertsP/Valine-Admin  便于查看评论，以及邮件通知，垃圾评论过滤等功能
+      process.env.NEXT_PUBLIC_VALINE_PLACEHOLDER || '抢个沙发吧~', // 可以搭配后台管理评论 https://github.com/DesertsP/Valine-Admin  便于查看评论，以及邮件通知，垃圾评论过滤等功能

  COMMENT_WALINE_SERVER_URL: process.env.NEXT_PUBLIC_WALINE_SERVER_URL || '', // 请配置完整的Waline评论地址 例如 hhttps://preview-waline.tangly1024.com @see https://waline.js.org/guide/get-started.html
  COMMENT_WALINE_RECENT: process.env.NEXT_PUBLIC_WALINE_RECENT || false, // 最新评论
@@ -267,14 +269,14 @@ const BLOG = {
  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'
+      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
+      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'
+      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
+      process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code

  // <---- 站点统计

@@ -288,16 +290,16 @@ const BLOG = {
    type_post: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_POST || 'Post', // 当type文章类型与此值相同时，为博文。
    type_page: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_PAGE || 'Page', // 当type文章类型与此值相同时，为单页。
    type_notice:
-      process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_NOTICE || 'Notice', // 当type文章类型与此值相同时，为公告。
+        process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_NOTICE || 'Notice', // 当type文章类型与此值相同时，为公告。
    type_menu: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_MENU || 'Menu', // 当type文章类型与此值相同时，为菜单。
    type_sub_menu:
-      process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_SUB_MENU || 'SubMenu', // 当type文章类型与此值相同时，为子菜单。
+        process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_SUB_MENU || 'SubMenu', // 当type文章类型与此值相同时，为子菜单。
    title: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TITLE || 'title', // 文章标题
    status: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS || 'status',
    status_publish:
-      process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_PUBLISH || 'Published', // 当status状态值与此相同时为发布，可以为中文
+        process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_PUBLISH || 'Published', // 当status状态值与此相同时为发布，可以为中文
    status_invisible:
-      process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_INVISIBLE || 'Invisible', // 当status状态值与此相同时为隐藏发布，可以为中文 ， 除此之外其他页面状态不会显示在博客上
+        process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_INVISIBLE || 'Invisible', // 当status状态值与此相同时为隐藏发布，可以为中文 ， 除此之外其他页面状态不会显示在博客上
    summary: process.env.NEXT_PUBLIC_NOTION_PROPERTY_SUMMARY || 'summary',
    slug: process.env.NEXT_PUBLIC_NOTION_PROPERTY_SLUG || 'slug',
    category: process.env.NEXT_PUBLIC_NOTION_PROPERTY_CATEGORY || 'category',
@@ -313,9 +315,9 @@ const BLOG = {
  AVATAR: process.env.NEXT_PUBLIC_AVATAR || '/avatar.svg', // 作者头像，被notion中的ICON覆盖。若无ICON则取public目录下的avatar.png
  TITLE: process.env.NEXT_PUBLIC_TITLE || 'NotionNext BLOG', // 站点标题 ，被notion中的页面标题覆盖
  HOME_BANNER_IMAGE:
-    process.env.NEXT_PUBLIC_HOME_BANNER_IMAGE || './bg_image.jpg', // 首页背景大图, 会被notion中的封面图覆盖，若无封面图则会使用代码中的 /public/bg_image.jpg 文件
+      process.env.NEXT_PUBLIC_HOME_BANNER_IMAGE || './bg_image.jpg', // 首页背景大图, 会被notion中的封面图覆盖，若无封面图则会使用代码中的 /public/bg_image.jpg 文件
  DESCRIPTION:
-    process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖
+      process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖

  // 网站图片
  IMG_URL_TYPE: process.env.NEXT_PUBLIC_IMG_TYPE || 'Notion', // 此配置已失效，请勿使用；AMAZON方案不再支持，仅支持Notion方案。 ['Notion','AMAZON'] 站点图片前缀 默认 Notion:(https://notion.so/images/xx) ， AMAZON(https://s3.us-west-2.amazonaws.com/xxx)
--- a/lib/lang/en-US.js
+++ b/lib/lang/en-US.js
@@ -40,7 +40,10 @@ export default {
    DEBUG_CLOSE: 'Close',
    THEME_SWITCH: 'Theme Switch',
    ANNOUNCEMENT: 'Announcement',
-    START_READING: 'Start Reading'
+    START_READING: 'Start Reading',
+    MINUTE: 'min',
+    WORD_COUNT: 'W.C.'
+
  },
  PAGINATION: {
    PREV: 'Prev',
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -42,7 +42,9 @@ export default {
    DEBUG_CLOSE: '关闭调试',
    THEME_SWITCH: '切换主题',
    ANNOUNCEMENT: '公告',
-    START_READING: '开始阅读'
+    START_READING: '开始阅读',
+    MINUTE: '分钟',
+    WORD_COUNT: '字数'
  },
  PAGINATION: {
    PREV: '上一页',
--- a/lib/notion/getNotion.js
+++ b/lib/notion/getNotion.js
@@ -36,7 +36,7 @@ export async function getNotion(pageId) {
 function getPageCover(postInfo) {
  const pageCover = postInfo.format?.page_cover
  if (pageCover) {
-    if (pageCover.startsWith('/')) return 'https://www.notion.so' + pageCover
+    if (pageCover.startsWith('/')) return BLOG.NOTION_HOST + pageCover
    if (pageCover.startsWith('http')) return defaultMapImageUrl(pageCover, postInfo)
  }
 }
--- a/lib/notion/getPageProperties.js
+++ b/lib/notion/getPageProperties.js
@@ -115,7 +115,7 @@ function getImageUrl(imgObj, blockVal) {
    return null
  }
  if (imgObj.startsWith('/')) {
-    return 'https://www.notion.so' + imgObj // notion内部图片转相对路径为绝对路径
+    return BLOG.NOTION_HOST + imgObj // notion内部图片转相对路径为绝对路径
  }

  if (imgObj.startsWith('http')) {
--- a/lib/notion/mapImage.js
+++ b/lib/notion/mapImage.js
@@ -12,7 +12,7 @@ const mapImgUrl = (img, block, type = 'block') => {
    return ret
  }
  // 相对目录，则视为notion的自带图片
-  if (img.startsWith('/')) ret = 'https://www.notion.so' + img
+  if (img.startsWith('/')) ret = BLOG.NOTION_HOST + img

  // 书签的地址本身就是永久链接，无需处理
  if (!ret && block?.type === 'bookmark') {
@@ -21,7 +21,7 @@ const mapImgUrl = (img, block, type = 'block') => {

  // notion永久图床地址
  if (!ret && img.indexOf('secure.notion-static.com') > 0 && (BLOG.IMG_URL_TYPE === 'Notion' || type !== 'block')) {
-    ret = 'https://www.notion.so/image/' + encodeURIComponent(img) + '?table=' + type + '&id=' + block.id
+    ret = BLOG.NOTION_HOST + '/image/' + encodeURIComponent(img) + '?table=' + type + '&id=' + block.id
  }

  // 剩余的是第三方图片url或emoji
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "notion-next",
-  "version": "3.13.6",
+  "version": "3.14.0",
  "homepage": "https://github.com/tangly1024/NotionNext.git",
  "license": "MIT",
  "repository": {
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -1,2 +1,5 @@
 /* 静态文件导入 自定义样式*/

+#theme-fukasawa .sideLeft hr{
+    opacity: .04;
+}
--- a/public/css/theme-hexo.css
+++ b/public/css/theme-hexo.css
@@ -22,4 +22,9 @@
    width: 100%;
    height: 100%;
    background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
+}
+
+/* Custem */
+.tk-footer{
+    opacity: 0;
 }
--- a/themes/blog.config.js
+++ b/themes/blog.config.js
@@ -0,0 +1,326 @@
+// 注: 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: false, // 伪静态路径，开启后所有文章URL都以 .html 结尾。
+  NEXT_REVALIDATE_SECOND: process.env.NEXT_PUBLIC_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: process.env.NEXT_PUBLIC_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: process.env.NEXT_PUBLIC_APPEARANCE || 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
+  APPEARANCE_DARK_TIME: process.env.NEXT_PUBLIC_APPEARANCE_DARK_TIME || [18, 6], // 夜间模式起至时间，false时关闭根据时间自动切换夜间模式
+
+  CUSTOM_MENU: process.env.NEXT_PUBLIC_CUSTOM_MENU || false, // 支持Menu 类型，从3.12.0版本起，各主题将逐步支持灵活的二级菜单配置，替代了原来的Page类型，此配置是试验功能、默认关闭。
+
+  AUTHOR: process.env.NEXT_PUBLIC_AUTHOR || 'NotionNext', // 您的昵称 例如 tangly1024
+  BIO: process.env.NEXT_PUBLIC_BIO || '一个普通的干饭人🍚', // 作者简介
+  LINK: process.env.NEXT_PUBLIC_LINK || 'https://tangly1024.com', // 网站地址
+  KEYWORDS: process.env.NEXT_PUBLIC_KEYWORD || 'Notion, 博客', // 网站关键词 英文逗号隔开
+  // 社交链接，不需要可留空白，例如 CONTACT_WEIBO:''
+  CONTACT_EMAIL: process.env.NEXT_PUBLIC_CONTACT_EMAIL || '', // 邮箱地址 例如mail@tangly1024.com
+  CONTACT_WEIBO: process.env.NEXT_PUBLIC_CONTACT_WEIBO || '', // 你的微博个人主页
+  CONTACT_TWITTER: process.env.NEXT_PUBLIC_CONTACT_TWITTER || '', // 你的twitter个人主页
+  CONTACT_GITHUB: process.env.NEXT_PUBLIC_CONTACT_GITHUB || '', // 你的github个人主页 例如 https://github.com/tangly1024
+  CONTACT_TELEGRAM: process.env.NEXT_PUBLIC_CONTACT_TELEGRAM || '', // 你的telegram 地址 例如 https://t.me/tangly_1024
+  CONTACT_LINKEDIN: process.env.NEXT_PUBLIC_CONTACT_LINKEDIN || '', // 你的linkedIn 首页
+
+  // 网站字体
+  FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-serif', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
+  FONT_URL: [
+    // 字体CSS 例如 https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css
+    'https://fonts.googleapis.com/css?family=Bitter&display=swap',
+    'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&display=swap',
+    'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300&display=swap'
+  ],
+  FONT_SANS: [
+    // 无衬线字体 例如'LXGW WenKai'
+    'Bitter',
+    '"PingFang SC"',
+    '-apple-system',
+    'BlinkMacSystemFont',
+    '"Hiragino Sans GB"',
+    '"Segoe UI Emoji"',
+    '"Segoe UI Symbol"',
+    '"Segoe UI"',
+    '"Noto Sans SC"',
+    'HarmonyOS_Regular',
+    '"Microsoft YaHei"',
+    '"Helvetica Neue"',
+    'Helvetica',
+    '"Source Han Sans SC"',
+    'Arial',
+    'sans-serif',
+    '"Apple Color Emoji"'
+  ],
+  FONT_SERIF: [
+    // 衬线字体 例如'LXGW WenKai'
+    'Bitter',
+    '"Noto Serif SC"',
+    'SimSun',
+    '"Times New Roman"',
+    'Times',
+    'serif',
+    '"Segoe UI Emoji"',
+    '"Segoe UI Symbol"',
+    '"Apple Color Emoji"'
+  ],
+  FONT_AWESOME: '/css/all.min.css', // font-awesome 字体图标地址
+
+  // 自定义外部脚本，外部样式
+  CUSTOM_EXTERNAL_JS: [''], // e.g. ['http://xx.com/script.js','http://xx.com/script.js']
+  CUSTOM_EXTERNAL_CSS: [''], // e.g. ['http://xx.com/style.css','http://xx.com/style.css']
+
+  // 侧栏布局 是否反转(左变右,右变左) 已支持主题: hexo next medium fukasawa example
+  LAYOUT_SIDEBAR_REVERSE: 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/
+
+  BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
+
+  // PrismJs 代码相关
+  PRISM_JS_AUTO_LOADER:
+      'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js',
+  PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/',
+  PRISM_THEME_PATH:
+      'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
+  CODE_MAC_BAR: true, // 代码左上角显示mac的红黄绿图标
+  CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 是否显示行号
+
+  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 的情况 支持多级
+  // 支援類似 WP 可自訂文章連結格式的功能：https://wordpress.org/documentation/article/customize-permalinks/，目前只先實作 %year%/%month%/%day%
+  // 例：如想連結改成前綴 article + 時間戳記，可變更為： 'article/%year%/%month%/%day%'
+
+  POST_LIST_STYLE: process.env.NEXT_PUBLIC_PPOST_LIST_STYLE || 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
+  POST_LIST_PREVIEW: process.env.NEXT_PUBLIC_POST_PREVIEW || 'false', //  是否在列表加载文章预览
+  POST_PREVIEW_LINES: 12, // 预览博客行数
+  POST_RECOMMEND_COUNT: 6, // 推荐文章数量
+  POSTS_PER_PAGE: 12, // post counts per page
+  POSTS_SORT_BY: process.env.NEXT_PUBLIC_POST_SORT_BY || 'notion', // 排序方式 'date'按时间,'notion'由notion控制
+
+  PREVIEW_CATEGORY_COUNT: 16, // 首页最多展示的分类数量，0为不限制
+  PREVIEW_TAG_COUNT: 16, // 首页最多展示的标签数量，0为不限制
+
+  // 鼠标点击烟花特效
+  FIREWORKS: process.env.NEXT_PUBLIC_FIREWORKS || false, // 开关
+  // 烟花色彩，感谢 https://github.com/Vixcity 提交的色彩
+  FIREWORKS_COLOR: [
+    '255, 20, 97',
+    '24, 255, 146',
+    '90, 135, 255',
+    '251, 243, 140'
+  ],
+
+  // 樱花飘落特效
+  SAKURA: process.env.NEXT_PUBLIC_SAKURA || false, // 开关
+
+  // 漂浮线段特效
+  NEST: process.env.NEXT_PUBLIC_NEST || false, // 开关
+
+  // 动态彩带特效
+  FLUTTERINGRIBBON: process.env.NEXT_PUBLIC_FLUTTERINGRIBBON || false, // 开关
+  // 静态彩带特效
+  RIBBON: process.env.NEXT_PUBLIC_RIBBON || false, // 开关
+
+  // 星空雨特效 黑夜模式才会生效
+  STARRY_SKY: process.env.NEXT_PUBLIC_STARRY_SKY || false, // 开关
+
+  // 悬浮挂件
+  WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
+  WIDGET_PET_LINK:
+      process.env.NEXT_PUBLIC_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, // 点击宠物挂件切换博客主题
+
+  // 音乐播放插件
+  MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件
+  MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换，如果使用播放器，打开自动播放再隐藏，就会以类似背景音乐的方式播放，无法取消和暂停
+  MUSIC_PLAYER_AUTO_PLAY:
+      process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过自动播放时常不生效（移动设备不支持自动播放）
+  MUSIC_PLAYER_LRC_TYPE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_LRC_TYPE || '0', // 歌词显示类型，可选值： 3 | 1 | 0（0：禁用 lrc 歌词，1：lrc 格式的字符串，3：lrc 文件 url）（前提是有配置歌词路径，对 meting 无效）
+  MUSIC_PLAYER_CDN_URL:
+      process.env.NEXT_PUBLIC_MUSIC_PLAYER_CDN_URL ||
+      'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js',
+  MUSIC_PLAYER_ORDER: process.env.NEXT_PUBLIC_MUSIC_PLAYER_ORDER || 'list', // 默认播放方式，顺序 list，随机 random
+  MUSIC_PLAYER_AUDIO_LIST: [
+    // 示例音乐列表。除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/
+    {
+      name: '风を共に舞う気持ち',
+      artist: 'Falcom Sound Team jdk',
+      url: 'https://music.163.com/song/media/outer/url?id=731419.mp3',
+      cover:
+          'https://p2.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
+    },
+    {
+      name: '王都グランセル',
+      artist: 'Falcom Sound Team jdk',
+      url: 'https://music.163.com/song/media/outer/url?id=731355.mp3',
+      cover:
+          'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
+    }
+  ],
+  MUSIC_PLAYER_METING: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING || false, // 是否要开启 MetingJS，从平台获取歌单。会覆盖自定义的 MUSIC_PLAYER_AUDIO_LIST，更多配置信息：https://github.com/metowolf/MetingJS
+  MUSIC_PLAYER_METING_SERVER:
+      process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER || 'netease', // 音乐平台，[netease, tencent, kugou, xiami, baidu]
+  MUSIC_PLAYER_METING_ID:
+      process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_ID || '60198', // 对应歌单的 id
+  MUSIC_PLAYER_METING_LRC_TYPE:
+      process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_LRC_TYPE || '1', // 可选值： 3 | 1 | 0（0：禁用 lrc 歌词，1：lrc 格式的字符串，3：lrc 文件 url）
+
+  // ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK
+
+  // twikoo
+  COMMENT_TWIKOO_ENV_ID: process.env.NEXT_PUBLIC_COMMENT_ENV_ID || '', // TWIKOO地址 腾讯云环境填 envId；Vercel 环境域名地址（https://xxx.vercel.app)
+
+  // utterance
+  COMMENT_UTTERRANCES_REPO:
+      process.env.NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO || '', // 你的代码仓库名， 例如我是 'tangly1024/NotionNext'； 更多文档参考 https://utteranc.es/
+
+  // 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_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_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
+
+  // 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_DISTRACTION_FREE_MODE: false, // 类似facebook的无干扰模式
+
+  COMMENT_GITTER_ROOM: process.env.NEXT_PUBLIC_COMMENT_GITTER_ROOM || '', // gitter聊天室 see https://gitter.im/ 不需要则留空
+  COMMENT_DAO_VOICE_ID: process.env.NEXT_PUBLIC_COMMENT_DAO_VOICE_ID || '', // DaoVoice http://dashboard.daovoice.io/get-started
+  COMMENT_TIDIO_ID: process.env.NEXT_PUBLIC_COMMENT_TIDIO_ID || '', // [tidio_id] -> //code.tidio.co/[tidio_id].js
+
+  COMMENT_VALINE_APP_ID: process.env.NEXT_PUBLIC_VALINE_ID || '', // Valine @see https://valine.js.org/quickstart.html 或 https://github.com/stonehank/react-valine#%E8%8E%B7%E5%8F%96app-id-%E5%92%8C-app-key
+  COMMENT_VALINE_APP_KEY: process.env.NEXT_PUBLIC_VALINE_KEY || '',
+  COMMENT_VALINE_SERVER_URLS: process.env.NEXT_PUBLIC_VALINE_SERVER_URLS || '', // 该配置适用于国内自定义域名用户, 海外版本会自动检测(无需手动填写) @see https://valine.js.org/configuration.html#serverURLs
+  COMMENT_VALINE_PLACEHOLDER:
+      process.env.NEXT_PUBLIC_VALINE_PLACEHOLDER || '抢个沙发吧~', // 可以搭配后台管理评论 https://github.com/DesertsP/Valine-Admin  便于查看评论，以及邮件通知，垃圾评论过滤等功能
+
+  COMMENT_WALINE_SERVER_URL: process.env.NEXT_PUBLIC_WALINE_SERVER_URL || '', // 请配置完整的Waline评论地址 例如 hhttps://preview-waline.tangly1024.com @see https://waline.js.org/guide/get-started.html
+  COMMENT_WALINE_RECENT: process.env.NEXT_PUBLIC_WALINE_RECENT || false, // 最新评论
+
+  // 此评论系统基于WebMention，细节可参考https://webmention.io
+  // 它是一个基于IndieWeb理念的开放式评论系统，下方COMMENT_WEBMENTION包含的属性皆需配置：
+  // ENABLE: 是否开启
+  // AUTH: Webmention使用的IndieLogin，可使用Twitter或Github个人页面连结
+  // HOSTNAME: Webmention绑定之网域，通常即为本站网址
+  // TWITTER_USERNAME: 评论显示区域需要的资讯
+  // TOKEN: Webmention的API token
+  COMMENT_WEBMENTION: {
+    ENABLE: process.env.NEXT_PUBLIC_WEBMENTION_ENABLE || false,
+    AUTH: process.env.NEXT_PUBLIC_WEBMENTION_AUTH || '',
+    HOSTNAME: process.env.NEXT_PUBLIC_WEBMENTION_HOSTNAME || '',
+    TWITTER_USERNAME: process.env.NEXT_PUBLIC_TWITTER_USERNAME || '',
+    TOKEN: process.env.NEXT_PUBLIC_WEBMENTION_TOKEN || ''
+  },
+
+  // <---- 评论插件
+
+  // ----> 站点统计
+  ANALYTICS_VERCEL: process.env.NEXT_PUBLIC_ANALYTICS_VERCEL || true, // vercel自带的统计 https://vercel.com/docs/concepts/analytics/quickstart https://github.com/tangly1024/NotionNext/issues/897
+  ANALYTICS_BUSUANZI_ENABLE: true, // 展示网站阅读量、访问数 see http://busuanzi.ibruce.info/
+  ANALYTICS_BAIDU_ID: process.env.NEXT_PUBLIC_ANALYTICS_BAIDU_ID || '', // e.g 只需要填写百度统计的id，[baidu_id] -> https://hm.baidu.com/hm.js?[baidu_id]
+  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'
+
+  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数据库字段名
+  NOTION_PROPERTY_NAME: {
+    password: process.env.NEXT_PUBLIC_NOTION_PROPERTY_PASSWORD || 'password',
+    type: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE || 'type', // 文章类型，
+    type_post: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_POST || 'Post', // 当type文章类型与此值相同时，为博文。
+    type_page: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_PAGE || 'Page', // 当type文章类型与此值相同时，为单页。
+    type_notice:
+        process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_NOTICE || 'Notice', // 当type文章类型与此值相同时，为公告。
+    type_menu: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_MENU || 'Menu', // 当type文章类型与此值相同时，为菜单。
+    type_sub_menu:
+        process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_SUB_MENU || 'SubMenu', // 当type文章类型与此值相同时，为子菜单。
+    title: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TITLE || 'title', // 文章标题
+    status: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS || 'status',
+    status_publish:
+        process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_PUBLISH || 'Published', // 当status状态值与此相同时为发布，可以为中文
+    status_invisible:
+        process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_INVISIBLE || 'Invisible', // 当status状态值与此相同时为隐藏发布，可以为中文 ， 除此之外其他页面状态不会显示在博客上
+    summary: process.env.NEXT_PUBLIC_NOTION_PROPERTY_SUMMARY || 'summary',
+    slug: process.env.NEXT_PUBLIC_NOTION_PROPERTY_SLUG || 'slug',
+    category: process.env.NEXT_PUBLIC_NOTION_PROPERTY_CATEGORY || 'category',
+    date: process.env.NEXT_PUBLIC_NOTION_PROPERTY_DATE || 'date',
+    tags: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TAGS || 'tags',
+    icon: process.env.NEXT_PUBLIC_NOTION_PROPERTY_ICON || 'icon'
+  },
+
+  // RSS
+  ENABLE_RSS: process.env.NEXT_PUBLIC_ENABLE_RSS || true, // 是否开启RSS订阅功能
+
+  // 作废配置
+  AVATAR: process.env.NEXT_PUBLIC_AVATAR || '/avatar.svg', // 作者头像，被notion中的ICON覆盖。若无ICON则取public目录下的avatar.png
+  TITLE: process.env.NEXT_PUBLIC_TITLE || 'NotionNext BLOG', // 站点标题 ，被notion中的页面标题覆盖
+  HOME_BANNER_IMAGE:
+      process.env.NEXT_PUBLIC_HOME_BANNER_IMAGE || './bg_image.jpg', // 首页背景大图, 会被notion中的封面图覆盖，若无封面图则会使用代码中的 /public/bg_image.jpg 文件
+  DESCRIPTION:
+      process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖
+
+  // 网站图片
+  IMG_URL_TYPE: process.env.NEXT_PUBLIC_IMG_TYPE || 'Notion', // 此配置已失效，请勿使用；AMAZON方案不再支持，仅支持Notion方案。 ['Notion','AMAZON'] 站点图片前缀 默认 Notion:(https://notion.so/images/xx) ， AMAZON(https://s3.us-west-2.amazonaws.com/xxx)
+  IMG_SHADOW: process.env.NEXT_PUBLIC_IMG_SHADOW || false, // 文章图片是否自动添加阴影
+
+  // 开发相关
+  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 // 版本号
+}
+
+module.exports = BLOG
--- a/themes/fukasawa/LayoutTag.js
+++ b/themes/fukasawa/LayoutTag.js
@@ -1,6 +1,7 @@
 import BLOG from '@/blog.config'
 import BlogListPage from './components/BlogListPage'
 import BlogListScroll from './components/BlogListScroll'
+import TagItemMini from './components/TagItemMini'
 import LayoutBase from './LayoutBase'

 export const LayoutTag = (props) => {
--- a/themes/fukasawa/LayoutTagIndex.js
+++ b/themes/fukasawa/LayoutTagIndex.js
@@ -1,5 +1,6 @@
 import { useGlobal } from '@/lib/global'
 import TagItem from './components/TagItem'
+import TagItemMini from './components/TagItemMini'
 import LayoutBase from './LayoutBase'

 export const LayoutTagIndex = (props) => {
@@ -8,11 +9,15 @@ export const LayoutTagIndex = (props) => {
  return <LayoutBase {...props} >
    <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
      <div className='dark:text-gray-200 mb-5'><i className='mr-4 fas fa-tag'/>{locale.COMMON.TAGS}:</div>
-      <div id='tags-list' className='duration-200 flex flex-wrap'>
-        { tagOptions.map(tag => {
-          return <div key={tag.name} className='p-2'><TagItem key={tag.name} tag={tag} /></div>
-        }) }
-      </div>
+        <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
+          {tagOptions.map(tag => {
+            return (
+              <div key={tag.name} className="p-2">
+                <TagItemMini key={tag.name} tag={tag} />
+              </div>
+            )
+          })}
+        </div>
    </div>
  </LayoutBase>
 }
--- a/themes/fukasawa/components/Announcement.js
+++ b/themes/fukasawa/components/Announcement.js
@@ -0,0 +1,21 @@
+import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ post, className }) => {
+  const { locale } = useGlobal()
+  if (post?.blockMap) {
+    return <div className={className}>
+        <section id='announcement-wrapper' className="dark:text-gray-300 rounded-xl px-2 py-4">
+            <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div>
+            {post && (<div id="announcement-content">
+            <NotionPage post={post} className='text-center ' />
+        </div>)}
+        </section>
+    </div>
+  } else {
+    return <></>
+  }
+}
+export default Announcement
--- a/themes/fukasawa/components/ArticleDetail.js
+++ b/themes/fukasawa/components/ArticleDetail.js
@@ -1,3 +1,4 @@
+import TagItemMini from './TagItemMini'
 import Comment from '@/components/Comment'
 import NotionPage from '@/components/NotionPage'
 import ShareBar from '@/components/ShareBar'
@@ -34,7 +35,7 @@ export default function ArticleDetail(props) {
        <header className='animate__slideInDown animate__animated'>

          {/* 文章Title */}
-          <div className="font-bold text-3xl text-black dark:text-white font-serif pt-10">
+          <div className="font-bold text-4xl text-black dark:text-white">
            {post.title}
          </div>

@@ -69,11 +70,15 @@ export default function ArticleDetail(props) {
                </span>
              </>)}

-              <div className=" 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 className='my-2'>
+                {post.tagItems && (
+                    <div className="flex flex-nowrap overflow-x-auto">
+                        {post.tagItems.map(tag => (
+                            <TagItemMini key={tag.name} tag={tag} />
+                        ))}
+                    </div>
+                )}
+            </div>
            </div>

          </section>
--- a/themes/fukasawa/components/AsideLeft.js
+++ b/themes/fukasawa/components/AsideLeft.js
@@ -5,42 +5,48 @@ import GroupTag from './GroupTag'
 import SearchInput from './SearchInput'
 import SiteInfo from './SiteInfo'
 import Catalog from './Catalog'
+import Announcement from './Announcement'
 import { useRouter } from 'next/router'
 import DarkModeButton from '@/components/DarkModeButton'

 function AsideLeft (props) {
-  const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo } = props
+  const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo, notice } = props
  const router = useRouter()
-  return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block z-20'>
+  return <div className='sideLeft relative w-80 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block z-20'>
    <Logo {...props}/>
+    
+    <section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
+      { siteInfo?.description }
+    </section>

    <section className='flex flex-col text-gray-600'>
-      <hr className='w-12 my-8' />
+      <div className='w-12 my-4' />
      <MenuList {...props}/>
    </section>

    <section className='flex flex-col text-gray-600'>
-      <hr className='w-12 my-8' />
+      <div className='w-12 my-4' />
      <SearchInput {...props}/>
    </section>

-    <section className='flex flex-col dark:text-gray-300'>
-      <hr className='w-12 my-8' />
-      { siteInfo?.description }
-    </section>

+    <section className='flex flex-col dark:text-gray-300'>
+      <div className='w-12 my-4' />
+      <Announcement post={notice}/>
+    </section>
+      
    {router.asPath !== '/tag' && <section className='flex flex-col'>
-      <hr className='w-12 my-8 ' />
+      <div className='w-12 my-4' />
      <GroupTag tags={tagOptions} currentTag={currentTag}/>
    </section>}

    {router.asPath !== '/category' && <section className='flex flex-col'>
-      <hr className='w-12 my-8 ' />
+      <div className='w-12 my-4' />
      <GroupCategory categories={categoryOptions} currentCategory={currentCategory}/>
    </section>}

    <section className='flex flex-col'>
-      <hr className='w-12 my-8 ' />
+      <div className='w-12 my-4' />
      <SiteInfo/>
    </section>

--- a/themes/fukasawa/components/BlogCard.js
+++ b/themes/fukasawa/components/BlogCard.js
@@ -1,5 +1,6 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
+import TagItemMini from './TagItemMini'
 import React from 'react'
 import CONFIG_FUKA from '../config_fuka'

@@ -28,10 +29,31 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
            </Link>

            {(!showPreview || showSummary) && (
-                <p className="mt-4 mb-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7 overflow-hidden">
+                <p className="mt-1 mb-1 text-gray-700 dark:text-gray-300 text-sm font-light leading-7 overflow-hidden">
                {post.summary}
                </p>
            )}
+            
+                {/* 分类标签 */}
+                <div className="mt-1 text-gray-400 justify-between flex">
+                    <Link
+                        href={`/category/${post.category}`}
+                        passHref
+                        className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
+            
+                        <i className="mr-1 far fa-folder" />
+                        {post.category}
+            
+                    </Link>
+                    <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
+                        <div>
+                            {' '}
+                            {post.tagItems.map(tag => (
+                                <TagItemMini key={tag.name} tag={tag} />
+                            ))}
+                        </div>
+                    </div>
+                </div>
            </div>

            {showPageCover && (
--- a/themes/hexo/LayoutSlug.js
+++ b/themes/hexo/LayoutSlug.js
@@ -77,7 +77,7 @@ export const LayoutSlug = props => {

          </article>

-          <hr className='border-dashed' />
+          <div className='pt-4 border-dashed'></div>

          {/* 评论互动 */}
          <div className="duration-200 overflow-x-auto bg-white dark:bg-hexo-black-gray px-3">
--- a/themes/hexo/components/Announcement.js
+++ b/themes/hexo/components/Announcement.js
@@ -7,10 +7,10 @@ const Announcement = ({ post, className }) => {
  const { locale } = useGlobal()
  if (post?.blockMap) {
    return <div className={className}>
-        <section id='announcement-wrapper' className="dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray">
+        <section id='announcement-wrapper' className="dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-4 bg-white dark:bg-hexo-black-gray">
            <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div>
            {post && (<div id="announcement-content">
-            <NotionPage post={post} className='text-center ' />
+            <NotionPage post={post} className='text-center' />
        </div>)}
        </section>
    </div>
--- a/themes/hexo/components/ArticleAdjacent.js
+++ b/themes/hexo/components/ArticleAdjacent.js
@@ -11,7 +11,7 @@ export default function ArticleAdjacent ({ prev, next }) {
    return <></>
  }
  return (
-    <section className='text-gray-800 items-center text-xs md:text-sm flex justify-between m-1 '>
+    <section className='pt-8 text-gray-800 items-center text-xs md:text-sm flex justify-between m-1 '>
      <Link
        href={`/${prev.slug}`}
        passHref
--- a/themes/hexo/components/ArticleCopyright.js
+++ b/themes/hexo/components/ArticleCopyright.js
@@ -27,7 +27,7 @@ export default function ArticleCopyright () {
        </li>
        <li>
        <strong className='mr-2'>{locale.COMMON.URL}:</strong>
-          <a className="hover:underline" href={path}>
+          <a className="whitespace-normal break-words hover:underline" href={path}>
            {path}
          </a>
        </li>
--- a/themes/hexo/components/ArticleRecommend.js
+++ b/themes/hexo/components/ArticleRecommend.js
@@ -20,7 +20,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
  }

  return (
-    <div className="p-2">
+    <div className="pt-8">
      <div className=" mb-2 px-1 flex flex-nowrap justify-between">
        <div className='dark:text-gray-300'>
          <i className="mr-2 fas fa-thumbs-up" />
@@ -30,8 +30,8 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
        {recommendPosts.map(post => {
          const headerImage = post?.page_cover
-            ? `url("${post.page_cover}")`
-            : `url("${siteInfo?.pageCover}")`
+            ? `url("${post.page_cover}&w=240")`
+            : `url("${siteInfo?.pageCover}&w=240")`

          return (
            (<Link
@@ -51,7 +51,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
                      <i className="fas fa-calendar-alt mr-1" />
                      {post.date?.start_date}
                    </div>
-                    <div className="hover:underline">{post.title}</div>
+                    <div className="">{post.title}</div>
                  </div>
                </div>
              </div>
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -36,7 +36,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                {showPageCover && (
                    <div className="md:w-5/12 overflow-hidden">
                        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
-                            <div className='h-56 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}')` }} />
+                            <div className='h-56 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}&w=800')` }} />
                        </Link>
                    </div>
                )}
--- a/themes/hexo/components/BlogPostCardInfo.js
+++ b/themes/hexo/components/BlogPostCardInfo.js
@@ -18,24 +18,24 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
            href={`${BLOG.SUB_PATH}/${post.slug}`}
            passHref
            className={`replace cursor-pointer hover:underline text-2xl ${showPreview ? 'text-center' : ''
-                } leading-tight text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
+                } leading-tight font-normal text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>

            {post.title}

        </Link>

-        {/* 日期 */}
+        {/* 分类 */}
        <div
            className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
                } flex-wrap dark:text-gray-500 text-gray-400 `}
        >
            <Link
-                href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
+                href={`/category/${post.category}`}
                passHref
-                className="font-light cursor-pointer text-sm leading-4 mr-3 hover:text-indigo-700 dark:hover:text-indigo-400">
+                className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">

-                <i className="far fa-calendar-alt mr-1" />
-                {post.date?.start_date || post.lastEditedTime}
+                <i className="mr-1 far fa-folder" />
+                {post.category}

            </Link>

@@ -67,17 +67,19 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
       </div>

       <div>
-         {/* 分类标签 */}
+         {/* 日期标签 */}
         <div className="text-gray-400 justify-between flex">
+            {/* 日期 */}
            <Link
-                href={`/category/${post.category}`}
+                href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
                passHref
-                className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
+                className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">

-                <i className="mr-1 far fa-folder" />
-                {post.category}
+                <i className="far fa-calendar-alt mr-1" />
+                {post.date?.start_date || post.lastEditedTime}

            </Link>
+
            <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
                <div>
                    {' '}
--- a/themes/hexo/components/Card.js
+++ b/themes/hexo/components/Card.js
@@ -1,7 +1,7 @@
 const Card = ({ children, headerSlot, className }) => {
  return <div className={className}>
    <>{headerSlot}</>
-    <section className="card shadow-md hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
+    <section className="card shadow-md hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
        {children}
    </section>
  </div>
--- a/themes/hexo/components/Catalog.js
+++ b/themes/hexo/components/Catalog.js
@@ -61,7 +61,7 @@ const Catalog = ({ toc }) => {
    return <></>
  }

-  return <div className='px-3'>
+  return <div className='px-3 py-1'>
    <div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
    <div className='w-full py-3'>
      <Progress />
@@ -79,7 +79,7 @@ const Catalog = ({ toc }) => {
            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
            >
              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-indigo-400 underline'}`}
+                className={`${activeSection === id && ' font-bold text-indigo-600'}`}
              >
                {tocItem.text}
              </span>
--- a/themes/hexo/components/Footer.js
+++ b/themes/hexo/components/Footer.js
@@ -26,9 +26,8 @@ const Footer = ({ title }) => {
            <i className='fas fa-eye'/><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
      <span className='pl-2 hidden busuanzi_container_site_uv'>
        <i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
-        <br/>
-        <h1>{title}</h1>
-        <span className='text-xs '>Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</span></span><br/>
+        <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} | {BLOG.BIO}</h1>
+        <p className='text-xs pt-2 text-light-500 dark:text-gray-500'>Powered by <a href='https://github.com/tangly1024/NotionNext' className='dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</p></span><br/>

    </footer>
  )
--- a/themes/hexo/components/Header.js
+++ b/themes/hexo/components/Header.js
@@ -4,10 +4,11 @@ import Typed from 'typed.js'
 import CONFIG_HEXO from '../config_hexo'
 import NavButtonGroup from './NavButtonGroup'
 import throttle from 'lodash.throttle'
+import { useGlobal } from '@/lib/global'

 let wrapperTop = 0
 let windowTop = 0
-let autoScroll = false
+let autoScroll = true
 const enableAutoScroll = false // 是否开启自动吸附滚动

 /**
@@ -17,6 +18,7 @@ const enableAutoScroll = false // 是否开启自动吸附滚动
 const Header = props => {
  const [typed, changeType] = useState()
  const { siteInfo } = props
+  const { locale } = useGlobal()
  useEffect(() => {
    updateHeaderHeight()

@@ -85,12 +87,12 @@ const Header = props => {
  return (
        <header id="header" style={{ zIndex: 1 }} className="w-full h-screen relative" >

-            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
+            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}&w=1920')` }}
                className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>

            <div className="text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
-                <div className='text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
-                <div className='mt-2 h-12 items-center text-center shadow-text text-lg'>
+                <div className='font-black text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
+                <div className='mt-2 h-12 items-center text-center font-medium shadow-text text-lg'>
                    <span id='typed' />
                </div>

@@ -103,7 +105,8 @@ const Header = props => {
                onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
                className="cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white"
            >
-                <i className='animate-bounce fas fa-angle-down' />
+                <div className="opacity-70 animate-bounce text-xs">{locale.COMMON.START_READING}</div>
+                <i className='opacity-70 animate-bounce fas fa-angle-down' />
            </div>
        </header>
  )
--- a/themes/hexo/components/HeaderArticle.js
+++ b/themes/hexo/components/HeaderArticle.js
@@ -1,7 +1,9 @@
 import Link from 'next/link'
+import TagItemMini from './TagItemMini'
 import { useGlobal } from '@/lib/global'
 import formatDate from '@/lib/formatDate'
 import BLOG from '@/blog.config'
+import NotionIcon from '@/components/NotionIcon'

 export default function HeaderArticle({ post, siteInfo }) {
  const { locale } = useGlobal()
@@ -9,7 +11,7 @@ export default function HeaderArticle({ post, siteInfo }) {
  if (!post) {
    return <></>
  }
-  const headerImage = post?.page_cover ? `url("${post.page_cover}")` : `url("${siteInfo?.pageCover}")`
+  const headerImage = post?.page_cover ? `url("${post.page_cover}&w=1600")` : `url("${siteInfo?.pageCover}&w=1600")`

  const date = formatDate(
    post?.date?.start_date || post?.createdTime,
@@ -29,24 +31,25 @@ export default function HeaderArticle({ post, siteInfo }) {
            data-aos-anchor-placement="top-bottom"
            className="bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">

-        <div className='mt-24'>
-          {/* 文章Title */}
-          <div className="font-bold text-xl shadow-text flex justify-center text-center text-white dark:text-white ">
-            {post.title}
-          </div>
-
-          <section className="flex-wrap shadow-text flex text-sm justify-center mt-2 text-white dark:text-gray-400 font-light leading-8">
-            <div className='dark:text-gray-200'>
+        <div className='mt-10'>
+            <div className='mb-3 flex justify-center'>
              {post.category && <>
                <Link href={`/category/${post.category}`} passHref legacyBehavior>
-                  <div className="cursor-pointer mr-2 dark:hover:text-white hover:underline">
-                    <i className="mr-1 fas fa-folder-open" />
+                  <div className="cursor-pointer px-2 py-1 mb-2 border rounded-sm dark:border-white text-sm font-medium  text-5xl shadow-text-md text-white">
                    {post.category}
                  </div>
                </Link>
              </>}
            </div>
-            <div className='flex justify-center'>
+
+          {/* 文章Title */}
+          <div className="leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
+            <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />{post.title}
+          </div>
+
+          <section className="flex-wrap shadow-text-md flex text-sm justify-center mt-4 text-white dark:text-gray-400 font-light leading-8">
+
+            <div className='flex justify-center dark:text-gray-200 text-opacity-70'>
              {post?.type !== 'Page' && (
                <>
                  <Link
@@ -63,11 +66,22 @@ export default function HeaderArticle({ post, siteInfo }) {
                {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
              </div>
            </div>
+
            {BLOG.ANALYTICS_BUSUANZI_ENABLE && <div className="busuanzi_container_page_pv font-light mr-2">
              <span className="mr-2 busuanzi_value_page_pv" />
              {locale.COMMON.VIEWS}
            </div>}
          </section>
+
+            <div className='mt-4 mb-1'>
+                {post.tagItems && (
+                    <div className="flex justify-center flex-nowrap overflow-x-auto">
+                        {post.tagItems.map(tag => (
+                            <TagItemMini key={tag.name} tag={tag} />
+                        ))}
+                    </div>
+                )}
+            </div>
        </div>
      </header>
    </div>
--- a/themes/hexo/components/InfoCard.js
+++ b/themes/hexo/components/InfoCard.js
@@ -8,7 +8,7 @@ export function InfoCard (props) {
  const router = useRouter()
  return <Card className={className}>
    <div
-      className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100  transform duration-200 cursor-pointer'
+      className='justify-center items-center flex py-6 dark:text-gray-100  transform duration-200 cursor-pointer'
      onClick={() => {
        router.push('/')
      }}
@@ -16,7 +16,7 @@ export function InfoCard (props) {
    {/* eslint-disable-next-line @next/next/no-img-element */}
    <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
    </div>
-    <div className='text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
+    <div className='font-medium text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
    <div className='text-sm text-center'>{BLOG.BIO}</div>
    <MenuGroupCard {...props}/>
    <SocialButton />
--- a/themes/hexo/components/LatestPostsGroup.js
+++ b/themes/hexo/components/LatestPostsGroup.js
@@ -37,9 +37,9 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
                    title={post.title}
                    href={`${BLOG.SUB_PATH}/${post.slug}`}
                    passHref
-                    className={'my-2 flex'}>
+                    className={'my-3 flex'}>

-                    <div className="w-20 h-16 overflow-hidden relative">
+                    <div className="w-20 h-14 overflow-hidden relative">
                          {/* <Image
                            src={headerImage}
                            fill
@@ -49,7 +49,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
                            quality={10}
                            alt={post.title} /> */}
                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={headerImage} className='object-cover w-full h-full'/>
+                            <img src={`${headerImage}&w=120`} className='object-cover w-full h-full'/>
                    </div>
                    <div
                        className={
--- a/themes/hexo/components/Logo.js
+++ b/themes/hexo/components/Logo.js
@@ -7,7 +7,7 @@ const Logo = props => {
  return (
    <Link href='/' passHref legacyBehavior>
      <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
-        <div className=' text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'> {siteInfo?.title || BLOG.TITLE}</div>
+        <div className='font-medium text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'> {siteInfo?.title || BLOG.TITLE}</div>
      </div>
    </Link>
  );
--- a/themes/hexo/components/NavButtonGroup.js
+++ b/themes/hexo/components/NavButtonGroup.js
@@ -14,7 +14,7 @@ const NavButtonGroup = (props) => {
  }

  return (
-    <nav id='home-nav-button' className={'md:h-52 md:mt-6 xl:mt-32 px-5 py-2 mt-8 flex flex-wrap md:max-w-5xl space-y-2 md:space-y-0 md:flex justify-center max-h-80 overflow-auto'}>
+    <nav id='home-nav-button' className={'w-full md:h-52 md:mt-6 xl:mt-32 px-5 py-2 mt-8 flex flex-wrap md:max-w-5xl space-y-2 md:space-y-0 md:flex justify-center max-h-80 overflow-auto'}>
      {categoryOptions.map(category => {
        return (
          <Link
@@ -22,7 +22,7 @@ const NavButtonGroup = (props) => {
            title={`${category.name}`}
            href={`/category/${category.name}`}
            passHref
-            className='text-center w-full md:mx-6 md:w-40 md:h-14 lg:h-20 h-14 justify-center items-center flex border-2 cursor-pointer rounded-lg glassmorphism hover:bg-white hover:text-black duration-200 font-bold hover:scale-110 transform'>
+            className='text-center w-full sm:w-4/5 md:mx-6 md:w-40 md:h-14 lg:h-20 h-14 justify-center items-center flex border-2 cursor-pointer rounded-lg glassmorphism hover:bg-white hover:text-black duration-200 font-bold hover:scale-105 transform'>
                {category.name}
            </Link>
        )
--- a/themes/hexo/components/Progress.js
+++ b/themes/hexo/components/Progress.js
@@ -28,9 +28,9 @@ const Progress = ({ targetRef, showPercent = true }) => {
  }, [])

  return (
-    <div className="h-4 w-full shadow-2xl bg-gray-400 ">
+    <div className="h-4 w-full shadow-2xl bg-gray-700 rounded-sm">
      <div
-        className="h-4 bg-indigo-400 duration-200"
+        className="h-4 bg-indigo-600 duration-200 rounded-sm"
        style={{ width: `${percent}%` }}
      >
        {showPercent && (
--- a/themes/hexo/components/SideBar.js
+++ b/themes/hexo/components/SideBar.js
@@ -25,7 +25,6 @@ const SideBar = (props) => {
                    <MenuGroupCard {...props} />
                </div>
            </div>
-            <hr className=' border-dashed'/>
            <MenuListSide {...props} />
        </div>
  )
--- a/themes/hexo/components/SideBarDrawer.js
+++ b/themes/hexo/components/SideBarDrawer.js
@@ -39,7 +39,7 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {

  return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>

-    <div id="sidebar-drawer" className={`${isOpen ? 'mr-0 w-72 visible' : '-mr-72 max-w-side invisible'} bg-gray-50 right-0 top-0 dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full overflow-y-scroll scroll-hidden z-30`}>
+    <div id="sidebar-drawer" className={`${isOpen ? 'mr-0 w-72 visible' : '-mr-72 max-w-side invisible'} bg-gray-50 right-0 top-0 dark:bg-hexo-black-gray shadow-black shadow-lg flex flex-col duration-300 fixed h-full overflow-y-scroll scroll-hidden z-30`}>
      {children}
    </div>

--- a/themes/hexo/components/TocDrawer.js
+++ b/themes/hexo/components/TocDrawer.js
@@ -25,7 +25,7 @@ const TocDrawer = ({ post, cRef }) => {
      <div
        className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
        ' shadow-card animate__animated animate__faster' +
-        ' w-60 duration-200 fixed right-12 bottom-12 rounded py-2 bg-white dark:bg-gray-600'}>
+        ' w-60 duration-200 fixed right-12 bottom-12 rounded py-2 bg-white dark:bg-gray-900'}>
          {post && <>
           <div className='dark:text-gray-400 text-gray-600'>
             <Catalog toc={post.toc}/>
--- a/themes/matery/LayoutTag.js
+++ b/themes/matery/LayoutTag.js
@@ -6,6 +6,7 @@ import React from 'react'
 import HeaderArticle from './components/HeaderArticle'
 import { useGlobal } from '@/lib/global'
 import TagItemMiddle from './components/TagItemMiddle'
+import TagItemMini from './components/TagItemMini'

 export const LayoutTag = (props) => {
  const { tagOptions, tag } = props
--- a/themes/matery/LayoutTagIndex.js
+++ b/themes/matery/LayoutTagIndex.js
@@ -1,6 +1,7 @@
 import { useGlobal } from '@/lib/global'
 import HeaderArticle from './components/HeaderArticle'
 import TagItemMiddle from './components/TagItemMiddle'
+import TagItemMini from './components/TagItemMini'
 import LayoutBase from './LayoutBase'

 export const LayoutTagIndex = props => {
--- a/themes/matery/components/ArticleInfo.js
+++ b/themes/matery/components/ArticleInfo.js
@@ -29,11 +29,11 @@ export const ArticleInfo = (props) => {
                        passHref
                        className="cursor-pointer whitespace-nowrap">

-                        <i className='far fa-calendar-minus fa-fw'/> 发布日期:{date}
+                        <i className='far fa-calendar-minus fa-fw'/> {locale.COMMON.POST_TIME}:{date}

                    </Link>
                    <span className='whitespace-nowrap'>
-                        <i className='far fa-calendar-check fa-fw' /> 更新日期: {post.lastEditedTime}
+                        <i className='far fa-calendar-check fa-fw' />{locale.COMMON.LAST_EDITED_TIME}:{post.lastEditedTime}
                    </span>
                    <span className="hidden busuanzi_container_page_pv font-light mr-2">
                        <i className='mr-1 fas fa-eye' /><span className="busuanzi_value_page_pv" />
--- a/themes/matery/components/HeaderArticle.js
+++ b/themes/matery/components/HeaderArticle.js
@@ -16,12 +16,14 @@ export default function HeaderArticle({ post, siteInfo }) {
                alt={title}
                className="opacity-50 dark:opacity-40 h-full w-full object-cover"
            /> */}
-             <Image alt={title} src={headerImage} fill
-                    style={{ objectFit: 'cover' }}
-                    className='opacity-50'
-                    placeholder='blur'
-                    blurDataURL='/bg_image.jpg' />
-            <span className='absolute text-white p-6 text-3xl shadow-text'>{title}</span>
+            <Image alt={title} src={headerImage} fill
+                style={{ objectFit: 'cover' }}
+                className='opacity-50'
+                placeholder='blur'
+                blurDataURL='/bg_image.jpg' />
+            <div className="leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
+                {title}
+            </div>
        </div>
  )
 }
--- a/themes/matery/components/WordCount.js
+++ b/themes/matery/components/WordCount.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { useEffect } from 'react'

 /**
@@ -5,6 +6,7 @@ import { useEffect } from 'react'
 * @returns
 */
 export default function WordCount() {
+  const { locale } = useGlobal()
  useEffect(() => {
    countWords()
  })
@@ -12,13 +14,13 @@ export default function WordCount() {
  return <span id='wordCountWrapper' className='flex gap-3 font-light'>
        <span className='flex whitespace-nowrap items-center'>
            <i className='pl-1 pr-2 fas fa-file-word' />
-            <span>文章字数</span>&nbsp;
+            <span>{locale.COMMON.WORD_COUNT}</span>&nbsp;
            <span id='wordCount'>0</span>
        </span>
        <span className='flex whitespace-nowrap items-center'>
            <i className='mr-1 fas fa-clock' />
-            <span>阅读时长:</span>
-            <span id='readTime'>0</span>分钟
+            <span></span>
+            <span id='readTime'>0</span>&nbsp;{locale.COMMON.MINUTE}
        </span>
    </span>
 }