提交

2026-05-14 07:26:52 +00:00 · 2023-04-24 11:06:01 +08:00
parent 1481a4a0b2 d15c463e90
commit 3e86cbfab7
137 changed files with 2600 additions and 1250 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.12.4
+NEXT_PUBLIC_VERSION=3.13.4
--- a/README.md
+++ b/README.md
@@ -28,11 +28,12 @@

 ## 我要如何开始？

-只需几分钟即可搭建您的个人站点，欢迎移步[我的博客](https://tangly1024.com/article/notion-next) 查看教程 
+只需几分钟即可搭建您的个人站点，查看教程 [教程说明](https://tangly1024.com/article/notion-next) 


 ## 致谢
 感谢Craig Hart发起的Nobelium项目
+
 <table><tr align="left">
  <td align="center"><a href="https://github.com/craigary" title="Craig Hart"><img src="https://avatars.githubusercontent.com/u/10571717" width="64px;"alt="Craig Hart"/></a><br/><a href="https://github.com/craigary" title="Craig Hart">Craig Hart</a></td>
 </tr></table>
@@ -41,62 +42,123 @@

 <table>
  <tr align="left">
-  <td align="center"><a href="https://github.com/tangly1024"><img src="https://avatars.githubusercontent.com/u/15920488" width="64px;"alt="tangly1024"/><br/><sub><b>tangly1024</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=tangly1024" title="Owner" >🎫 🔧 🎨 🐛</a></td> 
+  <td align="center">
+  <a href="https://github.com/tangly1024" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/15920488" width="64px;"alt="tangly1024"/><br/><sub><b>tangly1024</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=tangly1024" title="Owner" >🎫 🔧 🐛</a>
+  </td> 
    
-  <td align="center"><a href="https://github.com/uWayLu"><img src="https://avatars.githubusercontent.com/u/21689326" width="64px;" alt="uWayLu"/><br/><sub><b>uWayLu</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=uWayLu" title="uWayLu" >🔧 🐛</a></td>
+  <td align="center">
+    <a href="https://github.com/uWayLu"  style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/21689326" width="64px;" alt="uWayLu"/><br/><sub><b>uWayLu</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=uWayLu" title="uWayLu" >🔧 🐛</a>
+  </td>
    
-  <td align="center"><a href="https://github.com/txs"><img src="https://avatars.githubusercontent.com/u/554329" width="64px;" alt="txs"/><br/><sub><b>txs</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=txs" title="txs" >🔧 🐛</a></td>  
+  <td align="center">
+    <a href="https://github.com/txs" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/554329" width="64px;" alt="txs"/><br/><sub><b>txs</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=txs" title="txs" >🔧 🐛</a>
+  </td>

-  <td align="center"><a href="https://github.com/yuzhanglong"><img src="https://avatars.githubusercontent.com/u/56540811" width="64px;" alt="yuzhanglong"/><br/><sub><b>yuzhanglong</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=yuzhanglong" title="yuzhanglong" >🔧 🐛</a></td> 
+  <td align="center">
+    <a href="https://github.com/yuzhanglong" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/56540811" width="64px;" alt="yuzhanglong"/><br/><sub><b>yuzhanglong</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=yuzhanglong" title="yuzhanglong" >🔧 🐛</a>
+  </td> 
    
-  <td align="center"><a href="https://github.com/Hscpro"><img src="https://avatars.githubusercontent.com/u/13926044" width="64px;" alt="Hscpro"/><br/><sub><b>Hscpro</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=Hscpro" title="Hscpro" >🔧 🐛</a></td> 
+  <td align="center">
+    <a href="https://github.com/Hscpro" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/13926044" width="64px;" alt="Hscpro"/><br/><sub><b>Hscpro</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=Hscpro" title="Hscpro" >🔧 🐛</a>
+  </td> 
    
-  <td align="center"><a href="https://github.com/JensonMiao"><img src="https://avatars.githubusercontent.com/u/46488783" width="64px;" alt="JensonMiao"/><br/><sub><b>JensonMiao</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=JensonMiao" title="JensonMiao" >🔧 🐛</a></td> 
+  <td align="center">
+    <a href="https://github.com/JensonMiao" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/46488783" width="64px;" alt="JensonMiao"/><br/><sub><b>JensonMiao</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=JensonMiao" title="JensonMiao" >🔧 🐛</a>
+  </td> 
  
-  <td align="center"><a href="https://github.com/haixin1225"><img src="https://avatars.githubusercontent.com/u/28828438" width="64px;"  alt="haixin1225"/><br/><sub><b>haixin1225</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=haixin1225" title="haixin1225" >🔧 🐛</a></td>
+  <td align="center">
+    <a href="https://github.com/haixin1225" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/28828438" width="64px;"  alt="haixin1225"/><br/><sub><b>haixin1225</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=haixin1225" title="haixin1225" >🔧 🐛</a>
+  </td>

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

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

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

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

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

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

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

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

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

-  <td align="center"><a href="https://github.com/Pylogmon"><img src="https://avatars.githubusercontent.com/u/59004461" width="64px;"  alt="Pylogmon"/><br/><sub><b>派了个萌 </b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=Pylogmon" title="Pylogmon" >🔧 🐛</a></td>
+  <td align="center">
+    <a href="https://github.com/Pylogmon" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/59004461" width="64px;"  alt="Pylogmon"/><br/><sub><b>派了个萌 </b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=Pylogmon" title="Pylogmon" >🔧 🐛</a>
+  </td>
  
-  <td align="center"><a href="https://github.com/SkysCrystal"><img src="https://avatars.githubusercontent.com/u/49473463" width="64px;"  alt="SkysCrystal"/><br/><sub><b>Simon Shi</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=SkysCrystal" title="SkysCrystal" >🔧 🐛</a></td>
+  <td align="center">
+    <a href="https://github.com/SkysCrystal" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/49473463" width="64px;"  alt="SkysCrystal"/><br/><sub><b>Simon Shi</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=SkysCrystal" title="SkysCrystal" >🔧 🐛</a>
+  </td>
  
-  <td align="center"><a href="https://github.com/siygle"><img src="https://avatars.githubusercontent.com/u/173408" width="64px;"  alt="S.Y. Lee"/><br/><sub><b>S.Y. Lee</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=siygle" title="siygle" >🔧 🐛</a></td>
+  <td align="center">
+    <a href="https://github.com/siygle" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/173408" width="64px;"  alt="S.Y. Lee"/><br/><sub><b>S.Y. Lee</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=siygle" title="siygle" >🔧 🐛</a>
+  </td>

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

+  <td align="center">
+    <a href="https://github.com/cliouo" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/71540889" width="64px;"  alt="cliouo"/><br/><sub><b>cliouo</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=cliouo" title="cliouo" >🔧 🐛</a>
+  </td>
+  
+  <td align="center">
+    <a href="https://github.com/sudeakq" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/102792219" width="64px;"  alt="Sude Akgün"/><br/><sub><b>Sude Akgün</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=sudeakq" title="sudeakq" >🔧 🐛</a>
+  </td>

+  <td align="center">
+    <a href="https://github.com/fgprodigal" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/769910" width="64px;"  alt="Ray"/><br/><sub><b>Ray</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=fgprodigal" title="Ray" >🔧 🐛</a>
+  </td>
+
+  <td align="center">
+    <a href="https://github.com/hongzzz" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/25585061" width="64px;"  alt="Hongzzz"/><br/><sub><b>Hongzzz</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=hongzzz" title="hongzzz" >🔧 🐛</a>
+  </td>
 </tr>
 </table>

+
 ## 引用技术

 - **框架**: [Next.js](https://nextjs.org)
- **样式**: [Tailwind CSS](https://www.tailwindcss.cn/) 和 `@tailwindcss/jit` compiler
+- **样式**: [Tailwind CSS](https://www.tailwindcss.cn/)
 - **渲染**: [React-notion-x](https://github.com/NotionX/react-notion-x)
- **评论**: [Giscus](https://giscus.app/zh-CN), [Gitalk](https://gitalk.github.io), [Cusdis](https://cusdis.com), [Utterances](https://utteranc.es)
+- **评论**: [Twikoo](https://github.com/imaegoo/twikoo), [Giscus](https://giscus.app/zh-CN), [Gitalk](https://gitalk.github.io), [Cusdis](https://cusdis.com), [Utterances](https://utteranc.es)
 - **图标**: [Fontawesome](https://fontawesome.com/v6/icons/)


--- a/blog.config.js
+++ b/blog.config.js
@@ -1,7 +1,8 @@
 // 注: 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 || 'fb7bf0cd0563410e862e5ee67b8a8d33',
+  NOTION_PAGE_ID: 
+    process.env.NOTION_PAGE_ID || 'fb7bf0cd0563410e862e5ee67b8a8d33',
  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
@@ -9,7 +10,7 @@ const BLOG = {
  LANG: process.env.NEXT_PUBLIC_LANG || 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
  SINCE: 2022, // e.g if leave this empty, current year will be used.
  APPEARANCE: process.env.NEXT_PUBLIC_APPEARANCE || 'auto', // ['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 || 'Vixcity', // 您的昵称 例如 tangly1024
@@ -26,19 +27,44 @@ const BLOG = {

  // 网站字体
  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
+  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@500&display=swap',
-    'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500&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_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 字体图标地址

  // 自定义外部脚本，外部样式
@@ -57,9 +83,11 @@ const BLOG = {
  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_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
+  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', // 是否显示行号

@@ -86,7 +114,12 @@ const BLOG = {
  // 鼠标点击烟花特效
  FIREWORKS: process.env.NEXT_PUBLIC_FIREWORKS || true, // 开关
  // 烟花色彩，感谢 https://github.com/Vixcity 提交的色彩
-  FIREWORKS_COLOR: ['255, 20, 97', '24, 255, 146', '90, 135, 255', '251, 243, 140'],
+  FIREWORKS_COLOR: [
+    '255, 20, 97',
+    '24, 255, 146',
+    '90, 135, 255',
+    '251, 243, 140'
+  ],

  // 樱花飘落特效
  SAKURA: process.env.NEXT_PUBLIC_SAKURA || true, // 开关
@@ -104,7 +137,10 @@ 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-unitychan@1.0.5/assets/unitychan.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
+  WIDGET_PET_LINK: 
+    process.env.NEXT_PUBLIC_WIDGET_PET_LINK || 
+    'https://cdn.jsdelivr.net/npm/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
+  WIDGET_PET_SWITCH_THEME: false, // 点击宠物挂件切换博客主题
  // 好看的主题
  // https://cdn.jsdelivr.net/npm/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json
  // https://cdn.jsdelivr.net/npm/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json
@@ -113,33 +149,41 @@ const BLOG = {
  // https://cdn.jsdelivr.net/npm/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json
  // https://cdn.jsdelivr.net/npm/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
  // https://cdn.jsdelivr.net/npm/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
-  WIDGET_PET_SWITCH_THEME: false, // 点击宠物挂件切换博客主题

  // 音乐播放插件
  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_SHOW_LRC: process.env.NEXT_PUBLIC_MUSIC_PLAYER_SHOW_LRC || false, // 是否展示歌词（前提是有配置歌词路径，对 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_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/
+  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'
+      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'
+      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）
+  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

@@ -147,30 +191,43 @@ const BLOG = {
  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/
+  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_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

  // 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/ 不需要则留空
@@ -180,11 +237,27 @@ const BLOG = {
  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_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 || ''
+  },
+
  // <---- 评论插件

  // ----> 站点统计
@@ -193,11 +266,15 @@ 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

  // <---- 站点统计

@@ -210,11 +287,17 @@ const BLOG = {
    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_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文章类型与此值相同时，为子菜单。
+    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',
@@ -229,11 +312,13 @@ const BLOG = {
  // 作废配置
  AVATAR: process.env.NEXT_PUBLIC_AVATAR || '/avatar.svg', // 作者头像，被notion中的ICON覆盖。若无ICON则取public目录下的avatar.png
  TITLE: process.env.NEXT_PUBLIC_TITLE || 'VIXCITY 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 || '我的小破博客', // 站点描述，被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 || '我的小破博客', // 站点描述，被notion中的页面描述覆盖

  // 网站图片
-  IMG_URL_TYPE: process.env.NEXT_PUBLIC_IMG_TYPE || 'Notion', // ['Notion','AMAZON'] 站点图片前缀 默认 Notion:(https://notion.so/images/xx) ， AMAZON(https://s3.us-west-2.amazonaws.com/xxx)
+  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, // 文章图片是否自动添加阴影

  // 开发相关
--- a/components/Collapse.js
+++ b/components/Collapse.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useImperativeHandle } from 'react'

 /**
 * 折叠面板组件，支持水平折叠、垂直折叠
@@ -6,12 +6,27 @@ import React from 'react'
 * @returns
 */
 const Collapse = props => {
-  const collapseRef = React.useRef(null)
+  const { collapseRef } = props
+  const ref = React.useRef(null)
  const type = props.type || 'vertical'
+
+  useImperativeHandle(collapseRef, () => {
+    return {
+      /**
+       * 当子元素高度变化时，可调用此方法更新折叠组件的高度
+       * @param {*} param0
+       */
+      updateCollapseHeight: ({ height, increase }) => {
+        ref.current.style.height = ref.current.scrollHeight
+        ref.current.style.height = 'auto'
+      }
+    }
+  })
+
  /**
-   * 折叠
-   * @param {*} element
-   */
+     * 折叠
+     * @param {*} element
+     */
  const collapseSection = element => {
    const sectionHeight = element.scrollHeight
    const sectionWidth = element.scrollWidth
@@ -34,9 +49,9 @@ const Collapse = props => {
  }

  /**
-   * 展开
-   * @param {*} element
-   */
+     * 展开
+     * @param {*} element
+     */
  const expandSection = element => {
    const sectionHeight = element.scrollHeight
    const sectionWidth = element.scrollWidth
@@ -58,22 +73,20 @@ const Collapse = props => {
    clearTimeout(clearTime)
  }

-  const updateHeight = () => {
-    collapseRef.current.style.height = 'auto'
-  }
-
-  React.useEffect(() => {
+  useEffect(() => {
    if (props.isOpen) {
-      expandSection(collapseRef.current)
+      expandSection(ref.current)
    } else {
-      collapseSection(collapseRef.current)
+      collapseSection(ref.current)
    }
+    // 通知父组件高度变化
+    props?.onHeightChange && props.onHeightChange({ height: ref.current.scrollHeight, increase: props.isOpen })
  }, [props.isOpen])

  return (
-    <div ref={collapseRef} onClick={updateHeight} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={'overflow-hidden duration-200 ' + props.className }>
-      {props.children}
-    </div>
+        <div ref={ref} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={'overflow-hidden duration-200 ' + props.className}>
+            {props.children}
+        </div>
  )
 }
 Collapse.defaultProps = { isOpen: false }
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -43,6 +43,12 @@ const GiscusComponent = dynamic(
  },
  { ssr: false }
 )
+const WebMentionComponent = dynamic(
+  () => {
+    return import('@/components/WebMention')
+  },
+  { ssr: false }
+)

 const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
  ssr: false
@@ -100,6 +106,10 @@ const Comment = ({ frontMatter }) => {
        {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
          <GitalkComponent frontMatter={frontMatter}/>
        </div>)}
+
+        {BLOG.COMMENT_WEBMENTION.ENABLE && (<div key='WebMention'>
+          <WebMentionComponent frontMatter={frontMatter} className="px-2" />
+        </div>)}
      </Tabs>
    </div>
  )
--- a/components/CommonHead.js
+++ b/components/CommonHead.js
@@ -44,6 +44,16 @@ const CommonHead = ({ meta, children }) => {
      <meta name="twitter:description" content={description} />
      <meta name="twitter:title" content={title} />

+      {BLOG.COMMENT_WEBMENTION.ENABLE && (
+        <>
+          <link rel="webmention" href={`https://webmention.io/${BLOG.COMMENT_WEBMENTION.HOSTNAME}/webmention`} />
+          <link rel="pingback" href={`https://webmention.io/${BLOG.COMMENT_WEBMENTION.HOSTNAME}/xmlrpc`} />
+        </>
+      )}
+      {BLOG.COMMENT_WEBMENTION.ENABLE && BLOG.COMMENT_WEBMENTION.AUTH !== '' && (
+        <link href={BLOG.COMMENT_WEBMENTION.AUTH} rel="me" />
+      )}
+
      {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <meta name="referrer" content="no-referrer-when-downgrade" />}
      {meta?.type === 'Post' && (
        <>
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -13,7 +13,7 @@ const DarkModeButton = (props) => {
    htmlElement.classList?.add(newStatus ? 'dark' : 'light')
  }

-  return <div className={'text-white z-10 duration-200 text-xl py-2 ' + props.className}>
+  return <div className={'dark:text-gray-200 z-10 duration-200 text-xl py-2 ' + props.className}>
    <i id='darkModeButton' className={`hover:scale-125 cursor-pointer transform duration-200 fas ${isDarkMode ? 'fa-sun' : 'fa-moon'}`}
       onClick={handleChangeDarkMode} />
  </div>
--- a/components/FlutteringRibbon.js
+++ b/components/FlutteringRibbon.js
@@ -1,10 +1,21 @@
 /* eslint-disable */
 import React from 'react'
-
+const  id = 'canvasFlutteringRibbon'
 export const FlutteringRibbon = () => {
+     const destroyRibbon = ()=>{
+    const ribbon = document.getElementById(id)
+      if(ribbon && ribbon.parentNode){
+        ribbon.parentNode.removeChild(ribbon)
+      }
+  }
+  
  React.useEffect(() => {
    createFlutteringRibbon()
+        return () => destroyRibbon()
+
  }, [])
+    return <></>
+
 }

 /**
@@ -125,6 +136,7 @@ function createFlutteringRibbon() {
          init: function () {
            try {
              ;(this._canvas = document.createElement('canvas')),
+                (this._canvas.id = id),
                (this._canvas.style.display = 'block'),
                (this._canvas.style.position = 'fixed'),
                (this._canvas.style.margin = '0'),
--- a/components/Nest.js
+++ b/components/Nest.js
@@ -1,10 +1,19 @@
 /* eslint-disable */
-import React from 'react'
-
+import { useEffect } from 'react'
+const id = 'canvasNestCreated'
 export const Nest = () => {
-  React.useEffect(() => {
+  const destroyNest = ()=>{
+      const nest = document.getElementById(id)
+      if(nest && nest.parentNode){
+        nest.parentNode.removeChild(nest)
+      }
+  }
+
+  useEffect(() => {
    createNest()
+    return () => destroyNest()
  }, [])
+  return <></>
 }

 /**
@@ -65,7 +74,7 @@ function createNest() {
      m(o)
  }
  var i = document.createElement('canvas')
-  i.id = 'canvasNestCreated'
+  i.id = id
  var a = (function () {
      const t = e
      return {
--- a/components/NotionIcon.js
+++ b/components/NotionIcon.js
@@ -8,10 +8,10 @@ const NotionIcon = ({ icon }) => {
    return <></>
  }

-  if (icon.startsWith('http')) {
+  if (icon.startsWith('http') || icon.startsWith('data:')) {
    //   return <Image src={icon} width={30} height={30}/>
    //   eslint-disable-next-line @next/next/no-img-element
-    return <img src={icon} className='w-8 float-left mr-1'/>
+    return <img src={icon} className='w-8 inline mr-1'/>
  }

  return <span className='mr-1'>{icon}</span>
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -1,7 +1,7 @@
 import { NotionRenderer } from 'react-notion-x'
 import dynamic from 'next/dynamic'
-import mediumZoom from '@fisch0920/medium-zoom'
-import React from 'react'
+// import mediumZoom from '@fisch0920/medium-zoom'
+import React, { useEffect } from 'react'
 import { isBrowser } from '@/lib/utils'
 import { Code } from 'react-notion-x/build/third-party/code'
 import TweetEmbed from 'react-tweet-embed'
@@ -42,16 +42,16 @@ const Tweet = ({ id }) => {
 }

 const NotionPage = ({ post, className }) => {
-  const zoom = isBrowser() && mediumZoom({
-    container: '.notion-viewport',
-    background: 'rgba(0, 0, 0, 0.2)',
-    scrollOffset: 200,
-    margin: getMediumZoomMargin()
-  })
+//   const zoom = isBrowser() && mediumZoom({
+//     container: '.notion-viewport',
+//     background: 'rgba(0, 0, 0, 0.2)',
+//     scrollOffset: 200,
+//     margin: getMediumZoomMargin()
+//   })

-  const zoomRef = React.useRef(zoom ? zoom.clone() : null)
+  //   const zoomRef = React.useRef(zoom ? zoom.clone() : null)

-  React.useEffect(() => {
+  useEffect(() => {
    setTimeout(() => {
      if (window.location.hash) {
        const tocNode = document.getElementById(window.location.hash.substring(1))
@@ -64,18 +64,18 @@ const NotionPage = ({ post, className }) => {
    setTimeout(() => {
      if (isBrowser()) {
        // 将相册gallery下的图片加入放大功能
-        const imgList = document.querySelectorAll('.notion-collection-card-cover img')
-        if (imgList && zoomRef.current) {
-          for (let i = 0; i < imgList.length; i++) {
-            (zoomRef.current).attach(imgList[i])
-          }
-        }
+        // const imgList = document.querySelectorAll('.notion-collection-card-cover img')
+        // if (imgList && zoomRef.current) {
+        //   for (let i = 0; i < imgList.length; i++) {
+        //     (zoomRef.current).attach(imgList[i])
+        //   }
+        // }

-        // 相册图片点击不跳转
-        const cards = document.getElementsByClassName('notion-collection-card')
-        for (const e of cards) {
-          e.removeAttribute('href')
-        }
+        // 相册图片禁止跳转页面，改为放大图片功能功能
+        // const cards = document.getElementsByClassName('notion-collection-card')
+        // for (const e of cards) {
+        //   e.removeAttribute('href')
+        // }
      }
    }, 800)
  }, [])
@@ -84,7 +84,7 @@ const NotionPage = ({ post, className }) => {
    return <>{post?.summary || ''}</>
  }

-  return <div id='container' className={`font-medium mx-auto ${className}`}>
+  return <div id='container' className={`mx-auto ${className}`}>
    <NotionRenderer
      recordMap={post.blockMap}
      mapPageUrl={mapPageUrl}
@@ -113,22 +113,22 @@ const mapPageUrl = id => {
  return '/' + id.replace(/-/g, '')
 }

-function getMediumZoomMargin() {
-  const width = window.innerWidth
+// function getMediumZoomMargin() {
+//   const width = window.innerWidth

-  if (width < 500) {
-    return 8
-  } else if (width < 800) {
-    return 20
-  } else if (width < 1280) {
-    return 30
-  } else if (width < 1600) {
-    return 40
-  } else if (width < 1920) {
-    return 48
-  } else {
-    return 72
-  }
-}
+//   if (width < 500) {
+//     return 8
+//   } else if (width < 800) {
+//     return 20
+//   } else if (width < 1280) {
+//     return 30
+//   } else if (width < 1600) {
+//     return 40
+//   } else if (width < 1920) {
+//     return 48
+//   } else {
+//     return 72
+//   }
+// }

 export default NotionPage
--- a/components/Player.js
+++ b/components/Player.js
@@ -5,7 +5,7 @@ const Player = () => {
  const [player, setPlayer] = React.useState()
  const ref = React.useRef(null)

-  const showLrc = JSON.parse(BLOG.MUSIC_PLAYER_SHOW_LRC)
+  const lrcType = JSON.parse(BLOG.MUSIC_PLAYER_LRC_TYPE)
  const playerVisible = JSON.parse(BLOG.MUSIC_PLAYER_VISIBLE)
  const autoPlay = JSON.parse(BLOG.MUSIC_PLAYER_AUTO_PLAY)

@@ -16,7 +16,7 @@ const Player = () => {
      setPlayer(new window.APlayer({
        container: ref.current,
        fixed: true,
-        showlrc: showLrc,
+        lrcType: lrcType,
        autoplay: autoPlay,
        order: BLOG.MUSIC_PLAYER_ORDER,
        audio: BLOG.MUSIC_PLAYER_AUDIO_LIST
--- a/components/Ribbon.js
+++ b/components/Ribbon.js
@@ -1,10 +1,20 @@
 /* eslint-disable */
-import React from 'react'
+import { useEffect } from 'react'
+const id = 'canvasRibbon'

 export const Ribbon = () => {
-  React.useEffect(() => {
+ const destroyRibbon = ()=>{
+    const ribbon = document.getElementById(id)
+      if(ribbon && ribbon.parentNode){
+        ribbon.parentNode.removeChild(ribbon)
+      }
+  }
+  
+  useEffect(() => {
    createRibbon()
+    return () => destroyRibbon()
  }, [])
+  return <></>
 }

 /**
@@ -29,6 +39,7 @@ function createRibbon() {
      a = window.innerWidth,
      l = window.innerHeight,
      d = e.s
+    i.id= id
    let r, s
    const u = Math
    let h = 0
--- a/components/Sakura.js
+++ b/components/Sakura.js
@@ -1,10 +1,19 @@
 /* eslint-disable */
-import React from 'react'
-
+import { useEffect } from 'react'
+const id = 'canvas_sakura'
 export const Sakura = () => {
-  React.useEffect(() => {
+  const destroySakura = ()=>{
+    const sakura = document.getElementById(id)
+    if(sakura && sakura.parentNode){
+      sakura.parentNode.removeChild(sakura)
+    }
+  }
+      
+  useEffect(() => {
    createSakura({})
+    return () => destroySakura()
  }, [])
+  return <></>
 }

 /**
@@ -129,7 +138,7 @@ function createSakura() {
      'style',
      'position: fixed;left: 0;top: 0;pointer-events: none;'
    )
-    canvas.setAttribute('id', 'canvas_sakura')
+    canvas.setAttribute('id', id)
    document.getElementsByTagName('body')[0].appendChild(canvas)
    cxt = canvas.getContext('2d')
    var sakuraList = new SakuraList()
@@ -165,15 +174,12 @@ function createSakura() {
      stop = requestAnimationFrame(asd)
    }
  }
-  window.onresize = function () {
-    var canvasSnow = document.getElementById('canvas_snow')
-  }
  img.onload = function () {
    startSakura()
  }
  function stopp() {
    if (staticx) {
-      var child = document.getElementById('canvas_sakura')
+      var child = document.getElementById(id)
      child.parentNode.removeChild(child)
      window.cancelAnimationFrame(stop)
      staticx = false
--- a/components/SideBarDrawer.js
+++ b/components/SideBarDrawer.js
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import React from 'react'
+import { useEffect } from 'react'

 /**
 * 侧边栏抽屉面板，可以从侧面拉出
@@ -8,7 +8,7 @@ import React from 'react'
 */
 const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
  const router = useRouter()
-  React.useEffect(() => {
+  useEffect(() => {
    const sideBarDrawerRouteListener = () => {
      switchSideDrawerVisible(false)
    }
@@ -37,8 +37,8 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
    }
  }

-  return <div id='sidebar-wrapper' className={' block md:hidden ' + className }>
-    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0 w-56' : '-ml-60 max-w-side'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
+  return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
+    <div id="sidebar-drawer" className={`${isOpen ? 'ml-0 w-60 visible' : '-ml-60 max-w-side invisible'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
      {children}
    </div>

--- a/components/StarrySky.js
+++ b/components/StarrySky.js
@@ -7,7 +7,7 @@ export const StarrySky = () => {
  }, [])
  return (
    <div className="relative">
-      <canvas id="starry-sky-vixcity" className="fixed pointer-events-none"></canvas>
+      <canvas id="starry-sky-vixcity" style={{zIndex:1}} className="top-0 fixed pointer-events-none"></canvas>
    </div>
  )
 }
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -16,7 +16,7 @@ export function ThemeSwitch() {
  return (<>
        <Draggable>
            <div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
-                <div className="p-2 flex items-center">
+                <div className="py-2 flex items-center text-sm">
                    <i className='fas fa-arrows cursor-move px-2' />
                    {/* <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div> */}
                    <select value={theme} onChange={onSelectChange} name="cars" className='text-white bg-black uppercase cursor-pointer'>
--- a/components/WalineComponent.js
+++ b/components/WalineComponent.js
@@ -29,6 +29,7 @@ const WalineComponent = (props) => {
        serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
        lang: BLOG.lang,
        reaction: true,
+        dark: 'html.dark',
        emoji: [
          '//npm.elemecdn.com/@waline/emojis@1.1.0/tieba',
          '//npm.elemecdn.com/@waline/emojis@1.1.0/weibo',
--- a/components/WebMention.js
+++ b/components/WebMention.js
@@ -0,0 +1,173 @@
+import BLOG from '@/blog.config'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import Image from 'next/image'
+
+/**
+ * 评论插件
+ * @param issueTerm
+ * @param layout
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const WebmentionCount = ({ target }) => {
+  const initialCounts = {
+    count: 0,
+    type: {
+      like: 0,
+      mention: 0,
+      reply: 0,
+      repost: 0
+    }
+  }
+  const [counts, setCounts] = useState(initialCounts)
+  const fetchCounts = async (target) => {
+    const responseData = await fetch(`https://webmention.io/api/count.json?target=${encodeURIComponent(target)}`)
+    return (responseData.json) ? await responseData.json() : responseData
+  }
+  useEffect(() => {
+    async function getCounts() {
+      const responseCounts = await fetchCounts(target)
+      setCounts(responseCounts)
+    }
+    getCounts()
+  }, [target])
+
+  return (
+    <div className='webmention-counts'>
+      {counts
+        ? (
+          <div className='counts'>
+            <span>
+              <span className='count'>{counts.type.like || 0}</span>Likes
+            </span>
+            <span>
+              <span className='count'>{counts.type.reply || 0}</span>Replies
+            </span>
+            <span>
+              <span className='count'>
+                {(counts.type.repost || 0) + (counts.type.mention || 0)}
+              </span>
+              Mentions
+            </span>
+          </div>
+          )
+        : (
+            <p>Failed to fetch Webmention counts</p>
+          )
+      }
+    </div>
+  )
+}
+
+const Avatar = ({ author }) => (
+  <a className='avatar-wrapper' href={author.url} key={author.name}>
+    <Image
+      className="avatar"
+      src={author.photo}
+      alt={author.name}
+      fill
+      sizes="(max-width: 768px) 100vw,
+              (max-width: 1200px) 50vw,
+              33vw"
+    />
+  </a>
+)
+
+const WebmentionReplies = ({ target }) => {
+  const [mentions, setMentions] = useState([])
+  const fetchMentions = async (target) =>
+    fetch(
+      `https://webmention.io/api/mentions.jf2?per-page=500&target=${encodeURIComponent(target)}&token=${BLOG.COMMENT_WEBMENTION.TOKEN}`
+    ).then((response) => (response.json ? response.json() : response))
+  useEffect(() => {
+    async function getMentions() {
+      const responseMentions = await fetchMentions(target)
+      if (responseMentions.children) {
+        setMentions(responseMentions.children)
+      }
+    }
+
+    getMentions()
+  }, [target])
+
+  const distinctMentions = [
+    ...new Map(mentions.map((item) => [item.author.url, item])).values()
+  ].sort((a, b) => new Date(a['wm-received']) - new Date(b['wm-received']))
+
+  const replies = mentions.filter(
+    (mention) => 'in-reply-to' in mention && 'content' in mention
+  )
+
+  return (
+    <div>
+      <p>
+        {distinctMentions.length > 0
+          ? `Already ${distinctMentions.length} people liked, shared or talked about this article:`
+          : 'Be the first one to share this article!'}
+      </p>
+      <div className='webmention-avatars'>
+        {distinctMentions.map((reply) => (
+          <Avatar key={reply.author.name} author={reply.author} />
+        ))}
+      </div>
+      {replies && replies.length
+        ? (
+          <div className='webmention-replies'>
+            <h4>Replies</h4>
+            <ul className='replies'>
+              {replies.map((reply) => (
+                <li className='reply' key={reply.content.text}>
+                  <div>
+                    <Avatar key={reply.author.name} author={reply.author} />
+                  </div>
+                  <div className='text'>
+                    <p className='reply-author-name'>{reply.author.name}</p>
+                    <p className='reply-content'>{reply.content.text}</p>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+          )
+        : null}
+    </div>
+  )
+}
+
+const WebMentionBlock = ({ frontMatter }) => {
+  const router = useRouter()
+  const url = `https://${BLOG.COMMENT_WEBMENTION.HOSTNAME}${router.asPath}`
+  const tweet = `${frontMatter.title} by @${BLOG.COMMENT_WEBMENTION.TWITTER_USERNAME} ${url}`
+
+  return (
+    <div className='webmention-block'>
+      <h1 className='webmention-header'>
+        powered by <a href="https://webmention.io" target='_blank' rel='noreferrer'>WebMention.io</a>
+      </h1>
+      <div className='webmention-block-intro'>
+        You can{' '}
+        <a
+          target="_blank"
+          id='tweet-post-url'
+          href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(tweet)}`}
+          rel="noopener noreferrer"
+        >tweet this post</a>{' '}
+        or{' '}
+        <a
+          target='_blank'
+          id='tweet-discuss-url'
+          href={`https://www.twitter.com/search?q=${url}`}
+          rel='noopener noreferrer'
+        >discuss it on Twitter</a>
+        , the comments will show up here.
+      </div>
+      <div className='webmention-info'>
+        <WebmentionCount target={url} />
+        <WebmentionReplies target={url} />
+      </div>
+    </div>
+  )
+}
+
+export default WebMentionBlock
--- a/lib/global.js
+++ b/lib/global.js
@@ -1,9 +1,10 @@
 import { generateLocaleDict, initLocale } from './lang'
 import { createContext, useContext, useEffect, useState } from 'react'
-import Router from 'next/router'
+import Router, { useRouter } from 'next/router'
 import BLOG from '@/blog.config'
 import { initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme'
 import { ALL_THEME } from '@/themes'
+import NProgress from 'nprogress'

 const GlobalContext = createContext()

@@ -19,6 +20,7 @@ export function GlobalContextProvider({ children }) {
  const [theme, setTheme] = useState(BLOG.THEME)
  const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark')
  const [onLoading, changeLoadingState] = useState(false)
+  const router = useRouter()

  useEffect(() => {
    initLocale(lang, locale, updateLang, updateLocale)
@@ -26,13 +28,25 @@ export function GlobalContextProvider({ children }) {
    initTheme(theme, changeTheme)
  }, [])

-  Router.events.on('routeChangeStart', (...args) => {
-    changeLoadingState(true)
-  })
+  useEffect(() => {
+    const handleStart = (url) => {
+      NProgress.start()
+      changeLoadingState(true)
+    }
+    const handleStop = () => {
+      NProgress.done()
+      changeLoadingState(false)
+    }

-  Router.events.on('routeChangeComplete', (...args) => {
-    changeLoadingState(false)
-  })
+    router.events.on('routeChangeStart', handleStart)
+    router.events.on('routeChangeError', handleStop)
+    router.events.on('routeChangeComplete', handleStop)
+    return () => {
+      router.events.off('routeChangeStart', handleStart)
+      router.events.off('routeChangeComplete', handleStop)
+      router.events.off('routeChangeError', handleStop)
+    }
+  }, [router])

  function switchTheme() {
    const currentIndex = ALL_THEME.indexOf(theme)
--- a/lib/lang.js
+++ b/lib/lang.js
@@ -2,7 +2,8 @@ import zhCN from './lang/zh-CN'
 import enUS from './lang/en-US'
 import zhHK from './lang/zh-HK'
 import zhTW from './lang/zh-TW'
-import frFR from '@/lib/lang/fr-FR'
+import frFR from './lang/fr-FR'
+import trTR from './lang/tr-TR'
 import cookie from 'react-cookies'
 import { getQueryVariable, isBrowser, mergeDeep } from './utils'

@@ -11,7 +12,8 @@ const lang = {
  'zh-CN': zhCN,
  'zh-HK': zhHK,
  'zh-TW': zhTW,
-  'fr-FR': frFR
+  'fr-FR': frFR,
+  'tr-TR': trTR
 }

 export default lang
@@ -37,6 +39,9 @@ export function generateLocaleDict(langString) {
    case 'fr-fr':
      userLocale = lang['fr-FR']
      break
+    case 'tr-tr':
+      userLocale = lang['tr-TR']
+      break
    default:
      userLocale = lang['en-US']
  }
--- a/lib/lang/tr-TR.js
+++ b/lib/lang/tr-TR.js
@@ -0,0 +1,57 @@
+export default {
+  LOCALE: 'tr-TR',
+  NAV: {
+    INDEX: 'Blog',
+    RSS: 'RSS',
+    SEARCH: 'Ara',
+    ABOUT: 'Hakkımızda',
+    MAIL: 'E-Mail',
+    ARCHIVE: 'Arşiv'
+  },
+  COMMON: {
+    MORE: 'Daha Fazla',
+    NO_MORE: 'Daha Fazla Yok',
+    LATEST_POSTS: 'Son Postlar',
+    TAGS: 'Etiketler',
+    NO_TAG: 'Etiket Yok',
+    CATEGORY: 'Kategori',
+    SHARE: 'Paylaş',
+    SCAN_QR_CODE: 'QR Kod Ekran',
+    URL_COPIED: 'URL kopyalandı!',
+    TABLE_OF_CONTENTS: 'Katalog',
+    RELATE_POSTS: 'İlgili Gönderiler',
+    COPYRIGHT: 'Copyright',
+    AUTHOR: 'Yazar',
+    URL: 'URL',
+    POSTS: 'Gönderiler',
+    ARTICLE: 'Başlık',
+    VISITORS: 'Ziyaretçiler',
+    VIEWS: 'Görüntülemeler',
+    COPYRIGHT_NOTICE:
+      'Bu blogda yer alan tüm yazılar, özel açıklamalar dışında, BY-NC-SA anlaşmasını kabul etmektedir. Lütfen kaynak belirtiniz!',
+    RESULT_OF_SEARCH: 'Sonuçlar Bulundu',
+    ARTICLE_DETAIL: 'Makale Detayları',
+    PASSWORD_ERROR: 'Şifre Hatası!',
+    ARTICLE_LOCK_TIPS: 'Lütfen Şifrenizi Giriniz:',
+    SUBMIT: 'Gönder',
+    POST_TIME: 'Yazılan',
+    LAST_EDITED_TIME: 'Son düzenlenen',
+    RECENT_COMMENTS: 'Son Yorumlar',
+    DEBUG_OPEN: 'Hata Ayıklama',
+    DEBUG_CLOSE: 'Kapat',
+    THEME_SWITCH: 'Temayı Değiştir',
+    ANNOUNCEMENT: 'Duyuru'
+  },
+  PAGINATION: {
+    PREV: 'Önceki',
+    NEXT: 'Sonraki'
+  },
+  SEARCH: {
+    ARTICLES: 'Makale Ara',
+    TAGS: 'Araştır'
+  },
+  POST: {
+    BACK: 'Geri',
+    TOP: 'Yukarı'
+  }
+}
--- a/lib/notion/getNotion.js
+++ b/lib/notion/getNotion.js
@@ -4,6 +4,11 @@ import formatDate from '../formatDate'
 import { getPostBlocks } from './getPostBlocks'
 import { defaultMapImageUrl } from 'react-notion-x'

+/**
+ * 根据页面ID获取内容
+ * @param {*} pageId
+ * @returns
+ */
 export async function getNotion(pageId) {
  const blockMap = await getPostBlocks(pageId, 'slug')
  if (!blockMap) {
--- a/lib/notion/getNotionData.js
+++ b/lib/notion/getNotionData.js
@@ -95,6 +95,11 @@ function getCustomNav({ allPages }) {
  return customNav
 }

+/**
+ * 获取自定义菜单
+ * @param {*} allPages
+ * @returns
+ */
 function getCustomMenu({ collectionData }) {
  const menuPages = collectionData.filter(post => (post.type === BLOG.NOTION_PROPERTY_NAME.type_menu || post.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu) && post.status === 'Published')
  const menus = []
@@ -215,15 +220,14 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {

  // 文章计数
  let postCount = 0
+  // 查找所有的Post和Page
  const allPages = collectionData.filter(post => {
-    if (post.type === 'Post' && post.status === 'Published') {
+    if (post.type === BLOG.NOTION_PROPERTY_NAME.type_post && post.status === BLOG.NOTION_PROPERTY_NAME.status_publish) {
      postCount++
    }
-    return post &&
-            post.type &&
-            (post.type === 'Post' || post.type === 'Page') &&
-            (post.status === 'Published' || post.status === 'Invisible') &&
-            (!post.slug.startsWith('http'))
+    return post && post?.slug &&
+     (!post?.slug?.startsWith('http')) &&
+     (post?.status === 'Invisible' || post?.status === 'Published')
  })

  // Sort by date
@@ -241,7 +245,7 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
  const siteInfo = getBlogInfo({ collection, block })
  const customNav = getCustomNav({ allPages: collectionData.filter(post => post.type === 'Page' && post.status === 'Published') })
  // 新的菜单
-  const customMenu = getCustomMenu({ collectionData })
+  const customMenu = await getCustomMenu({ collectionData })
  const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 5 })

  return {
--- a/lib/notion/getPostBlocks.js
+++ b/lib/notion/getPostBlocks.js
@@ -3,6 +3,13 @@ import { NotionAPI } from 'notion-client'
 import { getDataFromCache, setDataToCache } from '@/lib/cache/cache_manager'
 import { deepClone, delay } from '../utils'

+/**
+ * 获取文章内容
+ * @param {*} id
+ * @param {*} from
+ * @param {*} slice
+ * @returns
+ */
 export async function getPostBlocks(id, from, slice) {
  const cacheKey = 'page_block_' + id
  let pageBlock = await getDataFromCache(cacheKey)
@@ -71,6 +78,13 @@ function filterPostBlocks(id, pageBlock, slice) {
      delete clonePageBlock?.block[i]
      continue
    }
+    // 当BlockId等于PageId时移除
+    if (b?.value?.id === id) {
+      // 此block含有敏感信息
+      delete b?.value?.properties
+      continue
+    }
+
    count++
    // 处理 c++、c#、汇编等语言名字映射
    if (b?.value?.type === 'code') {
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -51,7 +51,7 @@ export function isPreferDark() {
    // 系统深色模式或时间是夜间时，强行置为夜间模式
    const date = new Date()
    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-    return prefersDarkMode || (date.getHours() >= 18 || date.getHours() < 6)
+    return prefersDarkMode || (BLOG.APPEARANCE_DARK_TIME && (date.getHours() >= BLOG.APPEARANCE_DARK_TIME[0] || date.getHours() < BLOG.APPEARANCE_DARK_TIME[1]))
  }
  return false
 }
--- a/next.config.js
+++ b/next.config.js
@@ -13,7 +13,8 @@ module.exports = withBundleAnalyzer({
      'avatars.githubusercontent.com',
      'images.unsplash.com',
      'source.unsplash.com',
-      'p1.qhimg.com'
+      'p1.qhimg.com',
+      'webmention.io'
    ]
  },
  // 默认将feed重定向至 /public/rss/feed.xml
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "notion-next",
-  "version": "3.12.4",
+  "version": "3.13.4",
  "homepage": "https://github.com/tangly1024/NotionNext.git",
  "license": "MIT",
  "repository": {
@@ -41,6 +41,7 @@
    "next": "^13.1.1",
    "notion-client": "6.15.6",
    "notion-utils": "6.15.6",
+    "nprogress": "^0.2.0",
    "preact": "^10.5.15",
    "prism-themes": "1.9.0",
    "qrcode.react": "^1.0.1",
@@ -54,7 +55,7 @@
    "react-share": "^4.4.0",
    "react-tweet-embed": "~2.0.0",
    "smoothscroll-polyfill": "^0.4.4",
-    "twikoo": "1.6.9",
+    "twikoo": "^1.6.16",
    "typed.js": "^2.0.12",
    "use-ackee": "^3.0.0",
    "valine": "^1.4.18"
--- a/pages/[...slug].js
+++ b/pages/[...slug].js
@@ -49,7 +49,7 @@ const Slug = props => {
          })
        }
      }
-    }, 8 * 1000) // 404时长
+    }, 8 * 1000) // 404时长 8秒
    const meta = { title: `${props?.siteInfo?.title || BLOG.TITLE} | loading`, image: siteInfo?.pageCover || BLOG.HOME_BANNER_IMAGE }
    return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
  }
@@ -114,25 +114,31 @@ export async function getStaticProps({ params: { slug } }) {
  }
  const from = `slug-props-${fullSlug}`
  const props = await getGlobalNotionData({ from })
+  // 在列表内查找文章
  props.post = props.allPages.find((p) => {
    return p.slug === fullSlug || p.id === idToUuid(fullSlug)
  })

-  if (!props.post) {
+  // 处理非列表内文章的内信息
+  if (!props?.post) {
    const pageId = slug.slice(-1)[0]
-    if (pageId.length < 32) {
-      return { props, revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND) }
-    }
-    const post = await getNotion(pageId)
-    if (post) {
+    if (pageId.length >= 32) {
+      const post = await getNotion(pageId)
      props.post = post
-    } else {
-      return { props, revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND) }
    }
-  } else {
-    props.post.blockMap = await getPostBlocks(props.post.id, 'slug')
  }

+  // 无法获取文章
+  if (!props?.post) {
+    return { props, revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND) }
+  }
+
+  // 文章内容加载
+  if (!props?.posts?.blockMap) {
+    props.post.blockMap = await getPostBlocks(props.post.id, from)
+  }
+
+  // 推荐关联文章处理
  const allPosts = props.allPages.filter(page => page.type === 'Post' && page.status === 'Published')
  if (allPosts && allPosts.length > 0) {
    const index = allPosts.indexOf(props.post)
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -4,6 +4,7 @@ import dynamic from 'next/dynamic'

 import 'animate.css'
 import '@/styles/globals.css'
+import '@/styles/nprogress.css'

 // core styles shared by all of react-notion-x (required)
 import 'react-notion-x/src/styles.css'
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -11,13 +11,13 @@ class MyDocument extends Document {

  render() {
    return (
-      <Html lang={BLOG.LANG} className='test'>
+      <Html lang={BLOG.LANG}>
        <Head>
          <link rel='icon' href='/favicon.ico' />
          <CommonScript />
        </Head>

-        <body className={`${BLOG.FONT_STYLE} tracking-wider bg-day dark:bg-night`}>
+        <body className={`${BLOG.FONT_STYLE} font-light bg-day dark:bg-night`}>
            <Main />
            <NextScript />
        </body>
--- a/public/css/theme-hexo.css
+++ b/public/css/theme-hexo.css
@@ -0,0 +1,25 @@
+/*  菜单下划线动画 */
+#theme-hexo .menu-link {
+    text-decoration: none;
+    background-image: linear-gradient(#928CEE, #928CEE);
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    background-size: 0 2px;
+    transition: background-size 100ms ease-in-out;
+}
+ 
+#theme-hexo .menu-link:hover {
+    background-size: 100% 2px;
+    color: #928CEE;
+}
+
+/* 设置了从上到下的渐变黑色 */
+#theme-hexo .header-cover::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    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%);
+}
--- a/public/css/theme-matery.css
+++ b/public/css/theme-matery.css
@@ -0,0 +1,11 @@
+
+/* 设置了从上到下的渐变黑色 */
+#theme-matery .header-cover::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    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%);
+}
--- a/public/css/theme-simple.css
+++ b/public/css/theme-simple.css
@@ -17,7 +17,7 @@


 /*  菜单下划线动画 */
-.menu-link {
+#theme-simple .menu-link {
    text-decoration: none;
    background-image: linear-gradient(#dd3333, #dd3333);
    background-repeat: no-repeat;
@@ -26,7 +26,7 @@
    transition: background-size 100ms ease-in-out;
 }
 
-.menu-link:hover {
+#theme-simple .menu-link:hover {
    background-size: 100% 2px;
    color: #dd3333;
 }
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -181,20 +181,6 @@ nav {
  margin: -0.125em 0.25em;
 }

-
-/* waline评论插件夜间适配 */
-.wl-panel{
-  @apply dark:bg-black dark:border-gray-800
-}
-
-.wl-input,.wl-editor{
-  @apply dark:focus-within:bg-gray-900 dark:text-gray-200
-}
-
-.wl-meta > span {
-  @apply dark:bg-gray-800 !important
-}
-
 /* 固定两行 */
 .text-line-2 {
    overflow : hidden;
@@ -215,11 +201,105 @@ nav {
 }

 .next #announcement-content *{
- font-size:10px !important;
+ font-size:12px !important;
 line-height:1.5 !important;
 }

 /* twikoo 评论区超链接样式 */
 .tk-main a {
   @apply text-blue-700
+}
+
+/* Webmention style */
+.webmention-block {
+  background: rgba(0, 116, 222, .2);
+  padding: 1rem 2rem;
+  border-radius: 5px;
+}
+
+.webmention-header {
+  font-style: italic;
+  font-weight: 700;
+  font-size: 16px;
+  margin-bottom: .5rem;
+}
+
+.webmention-block-intro a {
+  color: #0000EE;
+  text-decoration: underline;
+}
+
+.webmention {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.webmention-counts {
+  padding: 16px 0;
+  font-weight: bold;
+}
+
+.webmention-counts .count {
+  font-weight: bold;
+  margin-right: .2rem;
+}
+
+/* .webmention-counts .counts > span {
+  margin-right: .8rem;
+} */
+.webmention-counts .counts>span:not(:last-child):after {
+  content: " • ";
+}
+
+a.avatar-wrapper {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  position: relative;
+}
+
+.webmention-avatars .avatar-wrapper {
+  margin-right: -8px;
+}
+
+.avatar {
+  border-radius: 50%;
+  margin: 0;
+  border: 3px solid rgba(0, 116, 222, .5);
+}
+
+.replies {
+  margin: 0;
+  padding: 0;
+}
+
+.reply {
+  list-style: none;
+  display: flex;
+  position: relative;
+  padding: 0;
+  align-items: flex-start;
+  margin-top: .6rem;
+}
+
+.reply p {
+  margin: 0;
+}
+
+.reply .text {
+  margin-left: 1rem;
+  font-size: 14px;
+}
+
+.reply-author-name {
+  font-weight: 500;
+}
+
+.p-4-lines {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -1,5 +1,5 @@
 :root {
-  --fg-color: rgb(0, 0, 0); 
+  --fg-color: rgb(0, 0, 0);
  --fg-color-0: rgba(55, 53, 47, 0.09);
  --fg-color-1: rgba(55, 53, 47, 0.16);
  --fg-color-2: rgba(55, 53, 47, 0.4);
@@ -68,7 +68,7 @@
 }

 .notion {
-  font-size: 17px;
+  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-color);
  caret-color: var(--fg-color);
@@ -584,12 +584,12 @@ summary > .notion-h {
 .notion-page-link {
  display: flex;
  color: var(--fg-color);
-  text-decoration: none;
+  text-decoration: underline;
  width: 100%;
  height: 30px;
  margin: 1px 0;
  transition: background 120ms ease-in 0s;
-  pointer-events: none;
+  /* pointer-events: none; */
 }

 .notion-page-link:hover {
@@ -655,10 +655,11 @@ svg.notion-page-icon {

 .notion-list-disc {
  list-style-type: disc;
-  padding-inline-start: 1.7em;
+  padding-inline-start: 1.4em;
  margin-top: 0;
  margin-bottom: 0;
 }
+
 .notion-list-numbered {
  list-style-type: decimal;
  padding-inline-start: 1.6em;
@@ -709,10 +710,11 @@ svg.notion-page-icon {
 }

 .notion-asset-wrapper img {
-  width: 100%;
+  width: 90%;
  /* height: 100%; */
  height: auto !important;
  max-height: 100%;
+  margin: auto;
 }

 .notion-asset-wrapper iframe {
@@ -723,6 +725,7 @@ svg.notion-page-icon {
 .notion-text {
  width: 100%;
  white-space: pre-wrap;
+  line-height: 1.5rem !important;
  word-break: break-word;
  padding: 3px 2px !important;
  margin: 1px 0 !important;
@@ -753,7 +756,7 @@ pre[class*='language-'] {
 code[class*='language-'] {
  background: unset !important;
 }
-  
+
 .notion-code {
  padding: 30px 16px 30px 20px;
  border-bottom-right-radius: 0.5rem;
@@ -1408,7 +1411,7 @@ code[class*='language-'] {
 }

 .notion-collection-card{
-  cursor: default !important;
+  /* cursor: default !important; */
 }

 .notion-collection-card-property .notion-link {
@@ -1623,6 +1626,7 @@ code[class*='language-'] {

 .notion-collection-card-cover .lazy-image-wrapper {
  padding: 0 !important;
+  z-index: 20;
  height: 100%;
 }

@@ -1932,7 +1936,7 @@ svg + .notion-page-title-text {
 }

 ::selection {
-    @apply bg-blue-500 text-gray-50 !important; 
+    @apply bg-blue-500 text-gray-50 !important;
 }

 .dark img{
@@ -2017,4 +2021,4 @@ code.language-mermaid {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
-}
+}
--- a/styles/nprogress.css
+++ b/styles/nprogress.css
@@ -0,0 +1,84 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
--- a/themes/example/LayoutBase.js
+++ b/themes/example/LayoutBase.js
@@ -7,6 +7,7 @@ import { Title } from './components/Title'
 import { SideBar } from './components/SideBar'
 import JumpToTopButton from './components/JumpToTopButton'
 import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
 /**
 * 基础布局 采用左右两侧布局，移动端使用顶部导航栏

@@ -15,6 +16,14 @@ import BLOG from '@/blog.config'
 */
 const LayoutBase = props => {
  const { children, meta } = props
+  const { onLoading } = useGlobal()
+
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-screen flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
+
  return (
        <div id='theme-example' className='dark:text-gray-300  bg-white dark:bg-black'>
            <CommonHead meta={meta} />
@@ -31,7 +40,7 @@ const LayoutBase = props => {

                <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative container mx-auto justify-center md:flex items-start py-8 px-2'}>

-                    <div className='w-full max-w-3xl xl:px-14 lg:px-4 '>{children}</div>
+                    <div className='w-full max-w-3xl xl:px-14 lg:px-4 '> {onLoading ? LoadingCover : children}</div>

                    <SideBar {...props} />

--- a/themes/example/components/BlogListPage.js
+++ b/themes/example/components/BlogListPage.js
@@ -42,7 +42,7 @@ export const BlogListPage = props => {
                        </p>
                            {/* 搜索结果 */}
                        {p.results && (
-                            <p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                            <p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
                            {p.results.map(r => (
                                <span key={r}>{r}</span>
                            ))}
--- a/themes/example/components/MenuItemDrop.js
+++ b/themes/example/components/MenuItemDrop.js
@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  return <li className='cursor-pointer' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+
+        {!hasSubMenu &&
+            <div className="rounded px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light">
+                <Link href={link?.to} >
+                    {link?.icon && <i className={link?.icon} />} {link?.name}
+                    {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
+                </Link>
+            </div>
+        }
+
+        {hasSubMenu &&
+            <div className='rounded px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light'>
+                {link?.icon && <i className={link?.icon} />} {link?.name}
+                <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+            </div>
+        }
+
+        {/* 子菜单 */}
+        {hasSubMenu && <ul className={`${show ? 'visible opacity-100  top-12' : 'invisible opacity-0 top-10'} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
+            {link.subMenus.map(sLink => {
+              return <li key={sLink.id} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-2'>
+                    <Link href={sLink.to}>
+                    <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
+                    </Link>
+                </li>
+            })}
+        </ul>}
+
+    </li>
+}
--- a/themes/example/components/Nav.js
+++ b/themes/example/components/Nav.js
@@ -1,6 +1,7 @@
+import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
 import CONFIG_EXAMPLE from '../config_example'
+import { MenuItemDrop } from './MenuItemDrop'

 /**
 * 菜单导航
@@ -8,8 +9,9 @@ import CONFIG_EXAMPLE from '../config_example'
 * @returns
 */
 export const Nav = (props) => {
-  const { customNav } = props
+  const { customNav, customMenu } = props
  const { locale } = useGlobal()
+
  let links = [
    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_EXAMPLE.MENU_SEARCH },
    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_EXAMPLE.MENU_ARCHIVE },
@@ -21,26 +23,25 @@ export const Nav = (props) => {
    links = links.concat(customNav)
  }

+  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
  return (
        <nav className="w-full bg-white md:pt-0 px-6 relative z-20 border-t border-b border-gray-light dark:border-hexo-black-gray dark:bg-black">
            <div className="container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
-                <div className="w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
-                    {links.map(link => {
-                      if (link.show) {
-                        return link && <Link
-                                href={link.to}
-                                key={link.to}
-                                className="px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light">
-                                {link.name}
-                            </Link>
-                      } else {
-                        return null
-                      }
-                    })}
-                </div>
-                <div className="w-full md:w-1/3 text-center md:text-right">
+                <ul className="w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
+                    {/* {links.map(link => <NormalMenuItem key={link?.id} link={link}/>)} */}
+                    {links.map(link => <MenuItemDrop key={link?.id} link={link} />)}
+                </ul>
+                {/* <div className="w-full md:w-1/3 text-center md:text-right"> */}
                    {/* <!-- extra links --> */}
-                </div>
+                {/* </div> */}
            </div>
        </nav>
  )
--- a/themes/example/components/NormalMenuItem.js
+++ b/themes/example/components/NormalMenuItem.js
@@ -0,0 +1,14 @@
+import Link from 'next/link'
+
+/**
+ * 旧的普通菜单
+ * @param {*} props
+ * @returns
+ */
+export const NormalMenuItem = (props) => {
+  const { link } = props
+  return link?.show && <Link href={link.to} key={link.to}
+        className="px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light">
+        {link.name}
+    </Link>
+}
--- a/themes/fukasawa/LayoutBase.js
+++ b/themes/fukasawa/LayoutBase.js
@@ -4,6 +4,7 @@ import AsideLeft from './components/AsideLeft'
 import Live2D from '@/components/Live2D'
 import BLOG from '@/blog.config'
 import { isBrowser, loadExternalResource } from '@/lib/utils'
+import { useGlobal } from '@/lib/global'

 /**
 * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -20,28 +21,35 @@ import { isBrowser, loadExternalResource } from '@/lib/utils'
 * @constructor
 */
 const LayoutBase = (props) => {
-  const {
-    children,
-    headerSlot,
-    meta
-  } = props
+  const { children, headerSlot, meta } = props
  const leftAreaSlot = <Live2D/>

  if (isBrowser()) {
    loadExternalResource('/css/theme-fukasawa.css', 'css')
  }

+  const { onLoading } = useGlobal()
+
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-screen flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
+
  return (<div id='theme-fukasawa' >
    <CommonHead meta={meta} />
    <TopNav {...props}/>
+
    <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}>
      <AsideLeft {...props} slot={leftAreaSlot}/>
-      <main id='wrapper' className='relative flex w-full py-8 justify-center'>
-        <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative z-10'>
+
+      <main id='wrapper' className='relative flex w-full py-8 justify-center z-10'>
+        <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative'>
          <div> {headerSlot} </div>
-          <div>{children}</div>
+          <div> {onLoading ? LoadingCover : children} </div>
        </div>
      </main>
+
    </div>

  </div>)
--- a/themes/fukasawa/components/AsideLeft.js
+++ b/themes/fukasawa/components/AsideLeft.js
@@ -1,6 +1,6 @@
 import Logo from './Logo'
 import GroupCategory from './GroupCategory'
-import GroupMenu from './GroupMenu'
+import { MenuList } from './MenuList'
 import GroupTag from './GroupTag'
 import SearchInput from './SearchInput'
 import SiteInfo from './SiteInfo'
@@ -11,12 +11,12 @@ import DarkModeButton from '@/components/DarkModeButton'
 function AsideLeft (props) {
  const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo } = 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-10'>
+  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'>
    <Logo {...props}/>

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

    <section className='flex flex-col text-gray-600'>
--- a/themes/fukasawa/components/Catalog.js
+++ b/themes/fukasawa/components/Catalog.js
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import { useGlobal } from '@/lib/global'
@@ -12,61 +12,60 @@ import { useGlobal } from '@/lib/global'
 const Catalog = ({ toc }) => {
  const { locale } = useGlobal()

+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = useState(null)
+
  // 监听滚动事件
-  React.useEffect(() => {
-    window.addEventListener('scroll', actionSectionScrollSpy)
+  useEffect(() => {
+    const throttleMs = 200
+    const actionSectionScrollSpy = throttle(() => {
+      const sections = document.getElementsByClassName('notion-h')
+      let prevBBox = null
+      let currentSectionId = activeSection
+      for (let i = 0; i < sections.length; ++i) {
+        const section = sections[i]
+        if (!section || !(section instanceof Element)) continue
+        if (!currentSectionId) {
+          currentSectionId = section.getAttribute('data-id')
+        }
+        const bbox = section.getBoundingClientRect()
+        const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+        const offset = Math.max(150, prevHeight / 4)
+        // GetBoundingClientRect returns values relative to viewport
+        if (bbox.top - offset < 0) {
+          currentSectionId = section.getAttribute('data-id')
+          prevBBox = bbox
+          continue
+        }
+        // No need to continue loop, if last element has been detected
+        break
+      }
+      setActiveSection(currentSectionId)
+      const index = toc?.findIndex(obj => uuidToId(obj.id) === currentSectionId)
+      tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+    }, throttleMs)
+
    actionSectionScrollSpy()
+    window.addEventListener('scroll', actionSectionScrollSpy)
    return () => {
      window.removeEventListener('scroll', actionSectionScrollSpy)
    }
-  }, [])
+  }, [toc])

  // 目录自动滚动
  const tRef = useRef(null)
-  const tocIds = []
-
-  // 同步选中目录事件
-  const [activeSection, setActiveSection] = React.useState(null)
-  const throttleMs = 200
-  const actionSectionScrollSpy = React.useCallback(throttle(() => {
-    const sections = document.getElementsByClassName('notion-h')
-    let prevBBox = null
-    let currentSectionId = activeSection
-    for (let i = 0; i < sections.length; ++i) {
-      const section = sections[i]
-      if (!section || !(section instanceof Element)) continue
-      if (!currentSectionId) {
-        currentSectionId = section.getAttribute('data-id')
-      }
-      const bbox = section.getBoundingClientRect()
-      const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
-      const offset = Math.max(150, prevHeight / 4)
-      // GetBoundingClientRect returns values relative to viewport
-      if (bbox.top - offset < 0) {
-        currentSectionId = section.getAttribute('data-id')
-        prevBBox = bbox
-        continue
-      }
-      // No need to continue loop, if last element has been detected
-      break
-    }
-    setActiveSection(currentSectionId)
-    const index = tocIds.indexOf(currentSectionId) || 0
-    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
-  }, throttleMs))

  // 无目录就直接返回空
-  if (!toc || toc.length < 1) {
+  if (!toc || toc?.length < 1) {
    return <></>
  }

-  return <div>
+  return <div id='catalog'>
    <div className='w-full dark:text-gray-300 mb-2'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
-    <div className='overflow-y-auto max-h-96 overscroll-none scroll-hidden' ref={tRef}>
-      <nav className='h-full font-sans text-black'>
+    <div className='h-96'>
+      <nav ref={tRef} className='h-full overflow-y-auto overscroll-none scroll-hidden font-sans text-black'>
        {toc.map((tocItem) => {
          const id = uuidToId(tocItem.id)
-          tocIds.push(id)
          return (
            <a
              key={id}
--- a/themes/fukasawa/components/GroupMenu.js
+++ b/themes/fukasawa/components/GroupMenu.js
@@ -1,51 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useGlobal } from '@/lib/global'
-import CONFIG_FUKA from '../config_fuka'
-
-function GroupMenu ({ customNav }) {
-  const { locale } = useGlobal()
-  const router = useRouter()
-
-  let links = [
-    { name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_FUKA.MENU_CATEGORY },
-    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_FUKA.MENU_TAG },
-    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_FUKA.MENU_ARCHIVE },
-    { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_FUKA.MENU_SEARCH }
-  ]
-
-  if (customNav) {
-    links = links.concat(customNav)
-  }
-
-  return (
-    <nav id='nav' className='font-sans text-sm'>
-        {links.map(link => {
-          if (link.show) {
-            const selected = (router.pathname === link.to) || (router.asPath === link.to)
-            return (
-              <Link
-                key={`${link.to}`}
-                title={link.to}
-                href={link.to}
-                className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
-                    (selected ? 'text-black' : ' ')}>
-
-                <div className='my-auto items-center justify-center flex '>
-                  <div className={ 'hover:text-black'}>{link.name}</div>
-                </div>
-                {link.slot}
-
-              </Link>
-            )
-          } else {
-            return null
-          }
-        })}
-      </nav>
-  )
-}
-
-export default GroupMenu
--- a/themes/fukasawa/components/MenuItemCollapse.js
+++ b/themes/fukasawa/components/MenuItemCollapse.js
@@ -0,0 +1,62 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = (props) => {
+  const { link } = props
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  const [isOpen, changeIsOpen] = useState(false)
+
+  const router = useRouter()
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+
+  const toggleShow = () => {
+    changeShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+
+  return <>
+        <div className={ (selected ? 'bg-gray-600 text-white hover:text-white' : 'hover:text-gray-600') + ' px-5 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'} onClick={toggleShow} >
+
+            {!hasSubMenu && <Link href={link?.to} className='dark:text-gray-200 py-2 w-full my-auto items-center justify-between flex  '>
+                <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
+            </Link>}
+
+            {hasSubMenu && <div
+                onClick={hasSubMenu ? toggleOpenSubMenu : null}
+                className="py-2 font-extralight flex justify-between cursor-pointer  dark:text-gray-200 no-underline tracking-widest">
+                <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
+                <div className='inline-flex items-center '><i className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i></div>
+            </div>}
+        </div>
+
+        {/* 折叠子菜单 */}
+        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+            {link.subMenus.map(sLink => {
+              return <div key={sLink.id} className='whitespace-nowrap dark:text-gray-200
+              not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100
+              font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
+                    <Link href={sLink.to}>
+                        <div><div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />{sLink.title}</div>
+                    </Link>
+                </div>
+            })}
+        </Collapse>}
+    </>
+}
--- a/themes/fukasawa/components/MenuItemDrop.js
+++ b/themes/fukasawa/components/MenuItemDrop.js
@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  return <li onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)}
+        className='relative py-1 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center '>
+
+        {!hasSubMenu &&
+            <Link href={link?.to} className='w-full my-auto items-center justify-between flex ' >
+                <div><div className={`${link.icon} text-center w-4 mr-2`} />{link.name}</div>
+                {link.slot}
+            </Link>}
+
+        {hasSubMenu &&
+            <div className='w-full my-auto items-center justify-between flex '>
+                <div><div className={`${link.icon} text-center w-4 mr-2`} />{link.name}</div>
+                {link.slot}
+                {hasSubMenu && <div className='text-right'><i className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i></div>}
+            </div>}
+
+        {/* 子菜单 */}
+        {hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-52' : 'invisible opacity-0 left-40'} py-1 absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
+            {link?.subMenus?.map(sLink => {
+              return <li key={sLink.id}>
+                    <Link href={sLink.to} className='my-auto py-1 px-2 items-center justify-start flex text-gray-500 dark:text-gray-300 hover:text-black  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>
+                        {sLink.icon && <i className={`${sLink.icon} w-4 text-center `} />}
+                        <div className={'ml-2 whitespace-nowrap'}>{sLink.name}</div>
+                        {sLink.slot}
+                    </Link>
+                </li>
+            })}
+        </ul>}
+
+    </li>
+}
--- a/themes/fukasawa/components/MenuItemNormal.js
+++ b/themes/fukasawa/components/MenuItemNormal.js
@@ -0,0 +1,24 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export const MenuItemNormal = props => {
+  const { link } = props
+  const router = useRouter()
+  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+  if (!link || !link.show) {
+    return null
+  }
+  return <Link
+        key={`${link.to}`}
+        title={link.to}
+        href={link.to}
+        className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
+            (selected ? 'text-black' : ' ')}>
+
+        <div className='my-auto items-center justify-center flex '>
+            <div className={'hover:text-black'}>{link.name}</div>
+        </div>
+        {link.slot}
+
+    </Link>
+}
--- a/themes/fukasawa/components/MenuList.js
+++ b/themes/fukasawa/components/MenuList.js
@@ -0,0 +1,42 @@
+import { useGlobal } from '@/lib/global'
+import CONFIG_FUKA from '../config_fuka'
+import BLOG from '@/blog.config'
+import { MenuItemDrop } from './MenuItemDrop'
+import { MenuItemCollapse } from './MenuItemCollapse'
+
+export const MenuList = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { name: locale.NAV.INDEX, to: '/' || '/', show: true },
+    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_FUKA.MENU_CATEGORY },
+    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_FUKA.MENU_TAG },
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_FUKA.MENU_ARCHIVE },
+    { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_FUKA.MENU_SEARCH }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (<>
+        <nav id='nav-pc' className='hidden md:block font-sans text-sm z-20'>
+            {links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
+        </nav>
+        <nav id='nav-mobile' className='block md:hidden font-sans text-sm z-20 pb-1'>
+            {links?.map(link => <MenuItemCollapse key={link?.id} link={link} onHeightChange={props.onHeightChange}/>)}
+        </nav>
+    </>
+
+  )
+}
--- a/themes/fukasawa/components/TopNav.js
+++ b/themes/fukasawa/components/TopNav.js
@@ -1,6 +1,6 @@
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import Collapse from '@/components/Collapse'
-import GroupMenu from './GroupMenu'
+import { MenuList } from './MenuList'
 import Logo from './Logo'
 import SearchInput from './SearchInput'

@@ -11,6 +11,7 @@ import SearchInput from './SearchInput'
 */
 const TopNav = props => {
  const [isOpen, changeShow] = useState(false)
+  const collapseRef = useRef(null)

  const toggleMenuOpen = () => {
    changeShow(!isOpen)
@@ -20,9 +21,9 @@ const TopNav = props => {

    {/* 导航栏 */}
    <div id='sticky-nav' className={'relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'}>
-      <Collapse type='vertical' isOpen={isOpen}>
+      <Collapse type='vertical' isOpen={isOpen} collapseRef={collapseRef}>
        <div className='py-1 px-5'>
-          <GroupMenu {...props} />
+          <MenuList {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
          <SearchInput {...props} />
        </div>
      </Collapse>
--- a/themes/hexo/LayoutArchive.js
+++ b/themes/hexo/LayoutArchive.js
@@ -17,7 +17,8 @@ export const LayoutArchive = (props) => {
      }, 300)
    }
  }, [])
-  return <LayoutBase {...props} >
+
+  return <LayoutBase {...props} className='pt-8'>
    <Card className='w-full'>
    <div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
        {Object.keys(archivePosts).map(archiveTitle => (
--- a/themes/hexo/LayoutBase.js
+++ b/themes/hexo/LayoutBase.js
@@ -11,6 +11,7 @@ import LoadingCover from './components/LoadingCover'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
+import { isBrowser, loadExternalResource } from '@/lib/utils'

 const FacebookPage = dynamic(
  () => {
@@ -61,6 +62,9 @@ const LayoutBase = props => {
    return () => document.removeEventListener('scroll', scrollListener)
  }, [])

+  if (isBrowser()) {
+    loadExternalResource('/css/theme-hexo.css', 'css')
+  }
  return (
    <div id='theme-hexo'>
      <CommonHead meta={meta} siteInfo={siteInfo}/>
@@ -70,11 +74,8 @@ const LayoutBase = props => {
      {headerSlot}

      <main id="wrapper" className="bg-hexo-background-gray dark:bg-black w-full py-8 md:px-8 lg:px-24 min-h-screen relative">
-        <div
-          id="container-inner"
-          className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'}
-        >
-          <div className="w-full max-w-4xl h-full">
+        <div id="container-inner" className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
+          <div className={'w-full max-w-4xl h-full ' + props.className}>
            {onLoading ? <LoadingCover /> : children}
          </div>
          <SideRight {...props} slot={rightAreaSlot} />
--- a/themes/hexo/LayoutCategory.js
+++ b/themes/hexo/LayoutCategory.js
@@ -5,7 +5,7 @@ import BLOG from '@/blog.config'

 export const LayoutCategory = props => {
  const { category } = props
-  return <LayoutBase {...props}>
+  return <LayoutBase {...props} className='mt-8'>
        <div className="cursor-pointer text-lg px-5 py-1 mb-2 font-light hover:text-indigo-700 dark:hover:text-indigo-400 transform dark:text-white">
            <i className="mr-1 far fa-folder-open" />
            {category}
--- a/themes/hexo/LayoutCategoryIndex.js
+++ b/themes/hexo/LayoutCategoryIndex.js
@@ -7,7 +7,7 @@ export const LayoutCategoryIndex = props => {
  const { categoryOptions } = props
  const { locale } = useGlobal()
  return (
-    <LayoutBase {...props}>
+    <LayoutBase {...props} className='mt-8'>
      <Card className="w-full min-h-screen">
        <div className="dark:text-gray-200 mb-5 mx-3">
          <i className="mr-4 fas fa-th" />
--- a/themes/hexo/LayoutPage.js
+++ b/themes/hexo/LayoutPage.js
@@ -2,7 +2,7 @@ import BlogPostListPage from './components/BlogPostListPage'
 import LayoutBase from './LayoutBase'

 export const LayoutPage = (props) => {
-  return <LayoutBase {...props}>
+  return <LayoutBase {...props} className='mt-8'>
      <BlogPostListPage {...props}/>
  </LayoutBase>
 }
--- a/themes/hexo/LayoutSearch.js
+++ b/themes/hexo/LayoutSearch.js
@@ -38,7 +38,7 @@ export const LayoutSearch = props => {
    }, 100)
  })
  return (
-      <LayoutBase {...props} currentSearch={currentSearch}>
+      <LayoutBase {...props} currentSearch={currentSearch} className='pt-8'>
          {!currentSearch && <>
              <div className="my-6 px-2">
                  <SearchInput cRef={cRef} {...props} />
--- a/themes/hexo/LayoutSlug.js
+++ b/themes/hexo/LayoutSlug.js
@@ -46,7 +46,7 @@ export const LayoutSlug = props => {
      showTag={false}
      floatSlot={floatSlot}
    >
-      <div className="w-full lg:hover:shadow lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
+      <div className="w-full lg:hover:shadow lg:border rounded-t-xl lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article">
        {lock && <ArticleLock validPassword={validPassword} />}

        {!lock && <div id="container" className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 ">
--- a/themes/hexo/LayoutTag.js
+++ b/themes/hexo/LayoutTag.js
@@ -11,7 +11,7 @@ export const LayoutTag = (props) => {
  })

  return (
-      <LayoutBase {...props}>
+      <LayoutBase {...props} className='mt-8'>
            {tag && (
                <div className="cursor-pointer px-3 py-2 mb-2 font-light hover:text-indigo-700 dark:hover:text-indigo-400 transform dark:text-white">
                    <Link
--- a/themes/hexo/LayoutTagIndex.js
+++ b/themes/hexo/LayoutTagIndex.js
@@ -7,7 +7,7 @@ export const LayoutTagIndex = props => {
  const { tagOptions } = props
  const { locale } = useGlobal()
  return (
-    <LayoutBase {...props}>
+    <LayoutBase {...props} className='mt-8'>
      <Card className='w-full'>
        <div className="dark:text-gray-200 mb-5 ml-4">
          <i className="mr-4 fas fa-tag" />
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -10,53 +10,41 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
  if (post && !post.page_cover && CONFIG_HEXO.POST_LIST_COVER_DEFAULT) {
    post.page_cover = siteInfo?.pageCover
  }
-  const showPageCover = CONFIG_HEXO.POST_LIST_COVER && post?.page_cover
-  const delay = (index % 2) * 200
+  const showPageCover = CONFIG_HEXO.POST_LIST_COVER && post?.page_cover && !showPreview
+  //   const delay = (index % 2) * 200

  return (
-    <div
-        data-aos="fade-up"
-        data-aos-duration="200"
-        data-aos-delay={delay}
-        data-aos-once="true"
-        data-aos-anchor-placement="top-bottom"
-        key={post.id}
-        className={`flex md:flex-row flex-col-reverse ${CONFIG_HEXO.POST_LIST_IMG_CROSSOVER ? 'even:md:flex-row-reverse' : ''}
-        w-full justify-between overflow-hidden
-        border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>

-        {/* 文字内容 */}
-        <BlogPostCardInfo index={index} post={post} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary}/>
+        <div
+            className={`${CONFIG_HEXO.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`}
+        >
+            <div
+                data-aos="fade-up"
+                data-aos-easing="ease-in-out"
+                data-aos-duration="800"
+                data-aos-once="false"
+                data-aos-anchor-placement="top-bottom"
+                id='blog-post-card'
+                key={post.id}
+                className={`md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${CONFIG_HEXO.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
+                    overflow-hidden border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>

-         {/* 图片封面 */}
-        {showPageCover && !showPreview && post?.page_cover && (
-           <div className="h-auto md:w-5/12">
-                <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
-                    {/* <img
-                        src={post?.page_cover}
-                        alt={post.title}
-                        loading='lazy'
-                        className="w-full relative cursor-pointer object-cover duration-200 hover:scale-125 "
-                    /> */}
-                    <div className='bg-center bg-cover md:h-full h-52' style={{ backgroundImage: `url('${post?.page_cover}')` }}/>
+                {/* 文字内容 */}
+                <BlogPostCardInfo index={index} post={post} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary} />
+
+                {/* 图片封面 */}
+                {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}')` }} />
+                        </Link>
+                    </div>
+                )}

-                    {/* <div className='relative w-full h-full'>
-                    <Image
-                     className='hover:scale-125 transition cursor-pointer duration-500'
-                     src={post?.page_cover}
-                     alt={post.title}
-                     quality={30}
-                     placeholder='blur'
-                     blurDataURL='/bg_image.jpg'
-                     style={{ objectFit: 'cover' }}
-                     fill/>
-                    </div> */}
-                </Link>
            </div>
-        )}

-    </div>
+        </div>
+
  )
 }

--- a/themes/hexo/components/BlogPostCardInfo.js
+++ b/themes/hexo/components/BlogPostCardInfo.js
@@ -9,7 +9,7 @@ import TagItemMini from './TagItemMini'
 * @returns
 */
 export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary }) => {
-  return <div className={`h-56 flex flex-col justify-between lg:p-6 p-4 md:max-h-60 ${showPageCover ? 'md:w-7/12 w-full ' : 'w-full'}`}>
+  return <div className={`flex flex-col justify-between lg:p-6 p-4  ${showPageCover && !showPreview ? 'md:w-7/12 w-full h-56 md:max-h-60 ' : 'w-full '}`}>

       <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="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 px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
        {children}
    </section>
  </div>
--- a/themes/hexo/components/Collapse.js
+++ b/themes/hexo/components/Collapse.js
@@ -1,43 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-
-const Collapse = props => {
-  const { id, className } = props
-  const collapseRef = useRef(null)
-  const collapseSection = element => {
-    const sectionHeight = element.scrollHeight
-    const currentHeight = element.style.height
-    if (currentHeight === '0px') {
-      return
-    }
-    requestAnimationFrame(function () {
-      element.style.height = sectionHeight + 'px'
-      requestAnimationFrame(function () {
-        element.style.height = 0 + 'px'
-      })
-    })
-  }
-  const expandSection = element => {
-    const sectionHeight = element.scrollHeight
-    element.style.height = sectionHeight + 'px'
-    const clearTime = setTimeout(() => {
-      element.style.height = 'auto'
-    }, 400)
-    clearTimeout(clearTime)
-  }
-  useEffect(() => {
-    const element = collapseRef.current
-    if (props.isOpen) {
-      expandSection(element)
-    } else {
-      collapseSection(element)
-    }
-  }, [props.isOpen])
-  return (
-    <div id={id} ref={collapseRef} style={{ height: '0px' }} className={'overflow-hidden duration-200 ' + className}>
-      {props.children}
-    </div>
-  )
-}
-Collapse.defaultProps = { isOpen: false }
-
-export default Collapse
--- a/themes/hexo/components/Header.js
+++ b/themes/hexo/components/Header.js
@@ -83,23 +83,14 @@ const Header = props => {
  }, throttleMs))

  return (
-        <header
-            id="header"
-            className="w-full h-screen bg-black text-white relative"
-        >
-            <div className={`w-full h-full ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'fixed' : ''}`}>
-                {/* <Image src={siteInfo.pageCover} fill
-                    style={{ objectFit: 'cover' }}
-                    className='opacity-70'
-                    placeholder='blur'
-                    blurDataURL='/bg_image.jpg' /> */}
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img src={siteInfo.pageCover} className='h-full w-full object-cover opacity-70 ' />
-            </div>
+        <header id="header" style={{ zIndex: 1 }} className="w-full h-screen relative" >

-            <div className="absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
-                <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
-                <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
+            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
+                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'>
                    <span id='typed' />
                </div>

--- a/themes/hexo/components/HeaderArticle.js
+++ b/themes/hexo/components/HeaderArticle.js
@@ -19,10 +19,16 @@ export default function HeaderArticle({ post, siteInfo }) {
  return (
    <div
      id="header"
-      className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn"
+      className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn z-10"
      style={{ backgroundImage: headerImage }}
    >
-      <header className="animate__slideInDown animate__animated bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
+      <header id='article-header-cover'
+            data-aos="fade-down"
+            data-aos-duration="300"
+            data-aos-once="true"
+            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 ">
--- a/themes/hexo/components/MenuButtonGroupTop.js
+++ b/themes/hexo/components/MenuButtonGroupTop.js
@@ -1,48 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { useGlobal } from '@/lib/global'
-import CONFIG_HEXO from '../config_hexo'
-
-const MenuButtonGroupTop = (props) => {
-  const { customNav } = props
-  const { locale } = useGlobal()
-
-  let links = [
-    { icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG_HEXO.MENU_INDEX },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE }
-    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
-    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG }
-  ]
-
-  if (customNav) {
-    links = links.concat(customNav)
-  }
-
-  return (
-    <nav id='nav' className='leading-8 flex justify-center  font-light w-full'>
-      {links.map(link => {
-        if (link.show) {
-          return (
-            <Link
-              key={`${link.to}`}
-              title={link.to}
-              href={link.to}
-              target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
-              className={'py-1.5 my-1 px-3  text-base justify-center items-center cursor-pointer'}>
-
-              <div className='w-full flex text-sm items-center justify-center hover:scale-125 duration-200 transform'>
-                <i className={`${link.icon} mr-1`}/>
-                <div className='text-center'>{link.name}</div>
-              </div>
-
-            </Link>
-          )
-        } else {
-          return null
-        }
-      })}
-    </nav>
-  )
-}
-export default MenuButtonGroupTop
--- a/themes/hexo/components/MenuGroupCard.js
+++ b/themes/hexo/components/MenuGroupCard.js
@@ -17,7 +17,7 @@ const MenuGroupCard = (props) => {
  ]

  return (
-    <nav id='nav' className='leading-8 flex justify-center   w-full'>
+    <nav id='nav' className='leading-8 flex justify-center  dark:text-gray-200 w-full'>
        {links.map(link => {
          if (link.show) {
            return (
--- a/themes/hexo/components/MenuItemCollapse.js
+++ b/themes/hexo/components/MenuItemCollapse.js
@@ -0,0 +1,54 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  const [isOpen, changeIsOpen] = useState(false)
+
+  const toggleShow = () => {
+    changeShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  return <>
+        <div className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray' onClick={toggleShow} >
+            {!hasSubMenu && <Link
+                href={link?.to}
+                className="font-extralight  flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1">
+                <span className=' transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
+            </Link>}
+            {hasSubMenu && <div
+                onClick={hasSubMenu ? toggleOpenSubMenu : null}
+                className="font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1">
+                <span className='transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
+                <i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
+            </div>}
+        </div>
+
+        {/* 折叠子菜单 */}
+        {hasSubMenu && <Collapse isOpen={isOpen}>
+            {link.subMenus.map(sLink => {
+              return <div key={sLink.id} className='dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  py-3 pr-6'>
+                    <Link href={sLink.to}>
+                        <span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
+                    </Link>
+                </div>
+            })}
+        </Collapse>}
+    </>
+}
--- a/themes/hexo/components/MenuItemDrop.js
+++ b/themes/hexo/components/MenuItemDrop.js
@@ -0,0 +1,41 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+
+        {!hasSubMenu &&
+            <Link
+                href={link?.to}
+                className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
+                {link?.icon && <i className={link?.icon}/>} {link?.name}
+                {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
+            </Link>}
+
+        {hasSubMenu && <>
+            <div className='cursor-pointer font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
+                {link?.icon && <i className={link?.icon}/>} {link?.name}
+                <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
+            </div>
+        </>}
+
+        {/* 子菜单 */}
+        {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block  `}>
+            {link.subMenus.map(sLink => {
+              return <li key={sLink.id} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-2'>
+                    <Link href={sLink.to}>
+                    <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
+                    </Link>
+                </li>
+            })}
+        </ul>}
+
+    </div>
+}
--- a/themes/hexo/components/MenuList.js
+++ b/themes/hexo/components/MenuList.js
@@ -1,52 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useGlobal } from '@/lib/global'
-import CONFIG_HEXO from '../config_hexo'
-
-const MenuList = (props) => {
-  const { postCount, customNav } = props
-  const { locale } = useGlobal()
-  const router = useRouter()
-  const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
-
-  let links = [
-    { icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH }
-  ]
-  if (customNav) {
-    links = links.concat(customNav)
-  }
-
-  return (
-    <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-300 '>
-      {links.map(link => {
-        if (link && link.show) {
-          const selected = (router.pathname === link.to) || (router.asPath === link.to)
-          return (
-            <Link
-              key={`${link.to}`}
-              title={link.to}
-              href={link.to}
-              className={'py-1.5 px-5 text-base justify-between hover:bg-indigo-400 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
-                (selected ? 'bg-gray-200 text-black' : ' ')}>
-
-              <div className='my-auto items-center justify-center flex '>
-                <i className={`${link.icon} w-4 text-center`} />
-                <div className={'ml-4'}>{link.name}</div>
-              </div>
-              {link.slot}
-
-            </Link>
-          );
-        } else {
-          return null
-        }
-      })}
-    </nav>
-  );
-}
-export default MenuList
--- a/themes/hexo/components/MenuListSide.js
+++ b/themes/hexo/components/MenuListSide.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
+import { MenuItemCollapse } from './MenuItemCollapse'
+import CONFIG_HEXO from '../config_hexo'
+
+export const MenuListSide = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG }
+  ]
+
+  if (customNav) {
+    links = customNav.concat(links)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+        <nav>
+            {/* {links.map(link => <MenuItemNormal key={link?.id} link={link} />)} */}
+            {links?.map(link => <MenuItemCollapse key={link?.id} link={link} />)}
+        </nav>
+  )
+}
--- a/themes/hexo/components/MenuListTop.js
+++ b/themes/hexo/components/MenuListTop.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG_HEXO from '../config_hexo'
+import BLOG from '@/blog.config'
+import { MenuItemDrop } from './MenuItemDrop'
+
+export const MenuListTop = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG_HEXO.MENU_INDEX },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE }
+    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
+    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (<>
+        <nav id='nav-mobile' className='leading-8 justify-center font-light w-full flex'>
+            {links?.map(link => link && link.show && <MenuItemDrop key={link?.id} link={link} />)}
+        </nav>
+    </>)
+}
--- a/themes/hexo/components/SideBar.js
+++ b/themes/hexo/components/SideBar.js
@@ -0,0 +1,34 @@
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import MenuGroupCard from './MenuGroupCard'
+import { MenuListSide } from './MenuListSide'
+
+/**
+ * 侧边抽屉
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBar = (props) => {
+  const { siteInfo } = props
+  const router = useRouter()
+  return (
+        <div id='side-bar'>
+            <div className="h-52 w-full flex justify-center">
+                <div>
+                    <div onClick={() => { router.push('/') }}
+                        className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100  transform duration-200 cursor-pointer'>
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
+                    </div>
+                    <MenuGroupCard {...props} />
+                </div>
+            </div>
+            <hr className=' border-dashed'/>
+            <MenuListSide {...props} />
+        </div>
+  )
+}
+
+export default SideBar
--- a/themes/hexo/components/SideBarDrawer.js
+++ b/themes/hexo/components/SideBarDrawer.js
@@ -0,0 +1,51 @@
+import { useRouter } from 'next/router'
+import React from 'react'
+
+/**
+ * 侧边栏抽屉面板，可以从侧面拉出
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
+  const router = useRouter()
+  React.useEffect(() => {
+    const sideBarDrawerRouteListener = () => {
+      switchSideDrawerVisible(false)
+    }
+    router.events.on('routeChangeComplete', sideBarDrawerRouteListener)
+    return () => {
+      router.events.off('routeChangeComplete', sideBarDrawerRouteListener)
+    }
+  }, [router.events])
+
+  // 点击按钮更改侧边抽屉状态
+  const switchSideDrawerVisible = (showStatus) => {
+    if (showStatus) {
+      onOpen && onOpen()
+    } else {
+      onClose && onClose()
+    }
+    const sideBarDrawer = window.document.getElementById('sidebar-drawer')
+    const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
+
+    if (showStatus) {
+      sideBarDrawer.classList.replace('-mr-72', 'mr-0')
+      sideBarDrawerBackground.classList.replace('hidden', 'block')
+    } else {
+      sideBarDrawer.classList.replace('mr-0', '-mr-72')
+      sideBarDrawerBackground.classList.replace('block', 'hidden')
+    }
+  }
+
+  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`}>
+      {children}
+    </div>
+
+    {/* 背景蒙版 */}
+    <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }}
+      className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
+  </div>
+}
+export default SideBarDrawer
--- a/themes/hexo/components/SideRight.js
+++ b/themes/hexo/components/SideRight.js
@@ -25,7 +25,7 @@ export default function SideRight(props) {

  const { locale } = useGlobal()
  return (
-    <div className={'space-y-4 lg:w-80 lg:pt-0 px-2 pt-4'}>
+    <div id='sideRight' className={'space-y-4 lg:w-80 lg:pt-0 px-2 pt-4'}>
      <InfoCard {...props} />
      {CONFIG_HEXO.WIDGET_ANALYTICS && <AnalyticsCard {...props} />}

--- a/themes/hexo/components/SocialButton.js
+++ b/themes/hexo/components/SocialButton.js
@@ -27,9 +27,9 @@ const SocialButton = () => {
      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
        <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
      </a>}
-      <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+      {BLOG.ENABLE_RSS && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
        <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>
+      </a>}
    </div>
  </div>
 }
--- a/themes/hexo/components/TopNav.js
+++ b/themes/hexo/components/TopNav.js
@@ -2,14 +2,14 @@ import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import CategoryGroup from './CategoryGroup'
-import Collapse from './Collapse'
 import Logo from './Logo'
 import SearchDrawer from './SearchDrawer'
 import TagGroups from './TagGroups'
-import MenuButtonGroupTop from './MenuButtonGroupTop'
-import MenuList from './MenuList'
+import { MenuListTop } from './MenuListTop'
 import { useRouter } from 'next/router'
 import throttle from 'lodash.throttle'
+import SideBar from './SideBar'
+import SideBarDrawer from './SideBarDrawer'

 let windowTop = 0

@@ -31,6 +31,10 @@ const TopNav = props => {
    changeShow(!isOpen)
  }

+  const toggleSideBarClose = () => {
+    changeShow(false)
+  }
+
  // 监听滚动
  useEffect(() => {
    scrollTrigger()
@@ -63,7 +67,7 @@ const TopNav = props => {
      nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
    }

-    const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight * 2)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
+    const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
    if (!showNav) {
      nav && nav.classList.replace('top-0', '-top-20')
      windowTop = scrollS
@@ -129,7 +133,7 @@ const TopNav = props => {
        <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />

        {/* 导航栏 */}
-        <div id='sticky-nav' className={'top-0  duration-200 transition-all  shadow-none fixed bg-none dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform border-transparent dark:border-transparent'}>
+        <div id='sticky-nav' style={{ backdropFilter: 'blur(3px)' }} className={'top-0 duration-300 transition-all  shadow-none fixed bg-none dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform border-transparent dark:border-transparent'}>
            <div className='w-full flex justify-between items-center px-4 py-2'>
                <div className='flex'>
                    <Logo {...props} />
@@ -137,19 +141,18 @@ const TopNav = props => {

                {/* 右侧功能 */}
                <div className='mr-1 justify-end items-center '>
-                    <div className='hidden lg:flex'> <MenuButtonGroupTop {...props} /></div>
+                    <div className='hidden lg:flex'> <MenuListTop {...props} /></div>
                    <div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
                        {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
                    </div>
                </div>
            </div>
-
-            <Collapse type='vertical' isOpen={isOpen} className='shadow-xl'>
-                <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 px-5 lg:hidden '>
-                    <MenuList {...props} />
-                </div>
-            </Collapse>
        </div>
+
+        {/* 折叠侧边栏 */}
+        <SideBarDrawer isOpen={isOpen} onClose={toggleSideBarClose}>
+            <SideBar {...props} />
+        </SideBarDrawer>
    </div>)
 }

--- a/themes/hexo/config_hexo.js
+++ b/themes/hexo/config_hexo.js
@@ -13,9 +13,11 @@ const CONFIG_HEXO = {
  MENU_SEARCH: true, // 显示搜索

  POST_LIST_COVER: true, // 列表显示文章封面
+  POST_LIST_COVER_HOVER_ENLARGE: false, // 列表鼠标悬停放大
+
  POST_LIST_COVER_DEFAULT: true, // 封面为空时用站点背景做默认封面
  POST_LIST_SUMMARY: true, // 文章摘要
-  POST_LIST_PREVIEW: true, // 读取文章预览
+  POST_LIST_PREVIEW: false, // 读取文章预览
  POST_LIST_IMG_CROSSOVER: true, // 博客列表图片左右交错

  ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
--- a/themes/matery/LayoutBase.js
+++ b/themes/matery/LayoutBase.js
@@ -10,6 +10,7 @@ import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import FloatDarkModeButton from './components/FloatDarkModeButton'
 import throttle from 'lodash.throttle'
+import { isBrowser, loadExternalResource } from '@/lib/utils'

 /**
 * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -36,6 +37,10 @@ const LayoutBase = props => {
    return () => document.removeEventListener('scroll', scrollListener)
  }, [])

+  if (isBrowser()) {
+    loadExternalResource('/css/theme-matery.css', 'css')
+  }
+
  return (
        <div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">

--- a/themes/matery/components/BlogPostCard.js
+++ b/themes/matery/components/BlogPostCard.js
@@ -11,7 +11,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
  if (post && !post.page_cover) {
    post.page_cover = siteInfo?.pageCover
  }
-  const showPageCover = CONFIG_MATERY.POST_LIST_COVER && !showPreview && post?.page_cover
+  const showPageCover = CONFIG_MATERY.POST_LIST_COVER && post?.page_cover
  const delay = (index % 3) * 300
  return (
      <div
--- a/themes/matery/components/BlogPostListPage.js
+++ b/themes/matery/components/BlogPostListPage.js
@@ -21,7 +21,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
      <div id="container" className='w-full'>
        <div className='pt-6'></div>
        {/* 文章列表 */}
-        <div className="px-4 pt-4 flex flex-wrap pb-24" >
+        <div className="pt-4 flex flex-wrap pb-24" >
          {posts.map(post => (
           <div key={post.id} className='xl:w-1/3 md:w-1/2 w-full p-4'> <BlogPostCard index={posts.indexOf(post)} post={post} siteInfo={siteInfo} /></div>
          ))}
--- a/themes/matery/components/BlogPostListScroll.js
+++ b/themes/matery/components/BlogPostListScroll.js
@@ -57,7 +57,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_MA
    return <div id='container' ref={targetRef} className='w-full'>

      {/* 文章列表 */}
-      <div className="px-4 pt-4 flex flex-wrap pb-24" >
+      <div className="pt-4 flex flex-wrap pb-24" >
        {postsToShow.map(post => (
            <div key={post.id} className='xl:w-1/3 md:w-1/2 w-full p-4'>
            <BlogPostCard index={posts.indexOf(post)} post={post} siteInfo={siteInfo} />
--- a/themes/matery/components/Collapse.js
+++ b/themes/matery/components/Collapse.js
@@ -1,75 +0,0 @@
-import React from 'react'
-
-/**
- * 折叠面板组件，支持水平折叠、垂直折叠
- * @param {type:['horizontal','vertical'],isOpen} props
- * @returns
- */
-const Collapse = props => {
-  const collapseRef = React.useRef(null)
-  const type = props.type || 'vertical'
-  const collapseSection = element => {
-    const sectionHeight = element.scrollHeight
-    const sectionWidth = element.scrollWidth
-
-    requestAnimationFrame(function () {
-      switch (type) {
-        case 'horizontal':
-          element.style.width = sectionWidth + 'px'
-          requestAnimationFrame(function () {
-            element.style.width = 0 + 'px'
-          })
-          break
-        case 'vertical':
-          element.style.height = sectionHeight + 'px'
-          requestAnimationFrame(function () {
-            element.style.height = 0 + 'px'
-          })
-      }
-    })
-  }
-
-  /**
-   * 展开
-   * @param {*} element
-   */
-  const expandSection = element => {
-    const sectionHeight = element.scrollHeight
-    const sectionWidth = element.scrollWidth
-    let clearTime = 0
-    switch (type) {
-      case 'horizontal':
-        element.style.width = sectionWidth + 'px'
-        clearTime = setTimeout(() => {
-          element.style.width = 'auto'
-        }, 400)
-        break
-      case 'vertical':
-        element.style.height = sectionHeight + 'px'
-        clearTime = setTimeout(() => {
-          element.style.height = 'auto'
-        }, 400)
-    }
-
-    clearTimeout(clearTime)
-  }
-
-  React.useEffect(() => {
-    const element = collapseRef.current
-    if (props.isOpen) {
-      expandSection(element)
-    } else {
-      collapseSection(element)
-    }
-  }, [props.isOpen])
-
-  return (
-    <div ref={collapseRef} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }}
-       className={'overflow-hidden duration-200 fixed z-50 ' + props.className }>
-      {props.children}
-    </div>
-  )
-}
-Collapse.defaultProps = { isOpen: false }
-
-export default Collapse
--- a/themes/matery/components/Header.js
+++ b/themes/matery/components/Header.js
@@ -86,18 +86,9 @@ const Header = props => {

  return (
        <header
-            id="header"
-            className="md:bg-fixed w-full h-screen bg-black text-white relative"
+            id="header" style={{ zIndex: 1 }}
+            className=" w-full h-screen bg-black text-white relative"
        >
-            <div className='w-full h-full absolute'>
-                {/* <Image src={siteInfo.pageCover} fill
-                    style={{ objectFit: 'cover' }}
-                    className='opacity-70'
-                    placeholder='blur'
-                    blurDataURL='/bg_image.jpg' /> */}
-                     {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img src={siteInfo.pageCover} className='h-full w-full object-cover opacity-70 ' />
-            </div>

            <div className="absolute flex flex-col h-full items-center justify-center w-full ">
                <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
@@ -110,6 +101,9 @@ const Header = props => {
                </div>
            </div>

+            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
+                className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG_MATERY.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>
+
        </header>
  )
 }
--- a/themes/matery/components/HeaderArticle.js
+++ b/themes/matery/components/HeaderArticle.js
@@ -21,7 +21,7 @@ export default function HeaderArticle({ post, siteInfo }) {
                    className='opacity-50'
                    placeholder='blur'
                    blurDataURL='/bg_image.jpg' />
-            <span className='absolute text-white p-6 text-3xl'>{title}</span>
+            <span className='absolute text-white p-6 text-3xl shadow-text'>{title}</span>
        </div>
  )
 }
--- a/themes/matery/components/MenuButtonGroupTop.js
+++ b/themes/matery/components/MenuButtonGroupTop.js
@@ -1,47 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { useGlobal } from '@/lib/global'
-import CONFIG_MATERY from '../config_matery'
-
-const MenuButtonGroupTop = (props) => {
-  const { customNav } = props
-  const { locale } = useGlobal()
-
-  let links = [
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MATERY.MENU_SEARCH },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
-  ]
-
-  if (customNav) {
-    links = customNav.concat(links)
-  }
-
-  return (
-    <nav id='nav' className='leading-8 flex justify-center  font-light w-full'>
-      {links.map(link => {
-        if (link.show) {
-          return (
-            <Link
-              key={`${link.to}`}
-              title={link.to}
-              href={link.to}
-              target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
-              className={'py-1.5 my-1 px-3  text-base justify-center items-center cursor-pointer'}>
-
-              <div className='w-full flex text-sm items-center justify-center hover:scale-125 duration-200 transform'>
-                <i className={`${link.icon} mr-1`}/>
-                <div className='text-center'>{link.name}</div>
-              </div>
-
-            </Link>
-          )
-        } else {
-          return null
-        }
-      })}
-    </nav>
-  )
-}
-export default MenuButtonGroupTop
--- a/themes/matery/components/MenuItemCollapse.js
+++ b/themes/matery/components/MenuItemCollapse.js
@@ -0,0 +1,61 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+  const router = useRouter()
+
+  const [isOpen, changeIsOpen] = useState(false)
+
+  const toggleShow = () => {
+    changeShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+
+  return <>
+        <div onClick={toggleShow} className={'py-2 px-5 duration-300 text-base justify-between hover:bg-indigo-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
+            (selected ? 'bg-indigo-500 text-white ' : ' text-black dark:text-white ')}>
+
+            {!hasSubMenu && <Link href={link?.to}>
+                <div className='my-auto items-center justify-between flex '>
+                    {link.icon && <i className={`${link.icon} w-4 mr-6 text-center`} />}
+                    <div >{link.name}</div>
+                </div>
+                {link.slot}
+            </Link>}
+
+            {hasSubMenu && <div onClick={hasSubMenu ? toggleOpenSubMenu : null} className='my-auto items-center w-full justify-between flex '>
+                <div className=''><i className={`${link.icon} w-4 mr-6 text-center`} />{link?.name}</div>
+                <i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i>
+            </div>}
+        </div>
+
+        {/* 折叠子菜单 */}
+        {hasSubMenu && <Collapse isOpen={isOpen}>
+            {link.subMenus.map(sLink => {
+              return <div key={sLink.id} className='cursor-pointer whitespace-nowrap dark:text-gray-200  w-full font-extralight dark:bg-black text-left px-5 justify-start bg-gray-100  hover:bg-indigo-700 hover:text-white dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
+                    <Link href={sLink.to}>
+                        <span className='text-sm'><i className={`${sLink.icon} w-4 mr-3 text-center`} />{sLink.title}</span>
+                    </Link>
+                </div>
+            })}
+        </Collapse>}
+    </>
+}
--- a/themes/matery/components/MenuItemDrop.js
+++ b/themes/matery/components/MenuItemDrop.js
@@ -0,0 +1,41 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+
+        {!hasSubMenu &&
+            <Link
+                href={link?.to}
+                className="font-sans menu-link pl-2 pr-4  no-underline tracking-widest pb-1">
+                {link?.icon && <i className={link?.icon} />} {link?.name}
+                {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
+            </Link>}
+
+        {hasSubMenu && <>
+            <div className='cursor-pointer font-sans menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
+                {link?.icon && <i className={link?.icon} />} {link?.name}
+                <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
+            </div>
+        </>}
+
+        {/* 子菜单 */}
+        {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block  `}>
+            {link.subMenus.map(sLink => {
+              return <li key={sLink.id} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-2'>
+                    <Link href={sLink.to}>
+                        <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
+                    </Link>
+                </li>
+            })}
+        </ul>}
+
+    </div>
+}
--- a/themes/matery/components/MenuItemNormal.js
+++ b/themes/matery/components/MenuItemNormal.js
@@ -0,0 +1,24 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export const MenuItemNormal = props => {
+  const router = useRouter()
+
+  const { link } = props
+  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+
+  return <Link
+    key={link.to}
+    title={link.to}
+    href={link.to}
+    className={'py-2 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
+     (selected ? 'bg-indigo-500 text-white ' : ' text-black dark:text-white ')}>
+
+    <div className='my-auto items-center justify-between flex '>
+        <i className={`${link.icon} w-4 ml-3 mr-6 text-center`} />
+        <div >{link.name}</div>
+    </div>
+    {link.slot}
+
+</Link>
+}
--- a/themes/matery/components/MenuListSide.js
+++ b/themes/matery/components/MenuListSide.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG_MATERY from '../config_matery'
+import BLOG from '@/blog.config'
+import { MenuItemCollapse } from './MenuItemCollapse'
+
+export const MenuListSide = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MATERY.MENU_SEARCH },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
+  ]
+
+  if (customNav) {
+    links = customNav.concat(links)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+        <nav>
+            {/* {links.map(link => <MenuItemNormal key={link?.id} link={link} />)} */}
+            {links?.map(link => <MenuItemCollapse key={link?.id} link={link} />)}
+        </nav>
+  )
+}
--- a/themes/matery/components/MenuListTop.js
+++ b/themes/matery/components/MenuListTop.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG_MATERY from '../config_matery'
+import { MenuItemDrop } from './MenuItemDrop'
+import BLOG from '@/blog.config'
+
+export const MenuListTop = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MATERY.MENU_SEARCH },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
+  ]
+
+  if (customNav) {
+    links = customNav.concat(links)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+    <nav id='nav' className='leading-8 flex justify-center  font-light w-full'>
+      {links?.map(link => <MenuItemDrop key={link?.id} link={link}/>)}
+    </nav>
+  )
+}
--- a/themes/matery/components/SideBar.js
+++ b/themes/matery/components/SideBar.js
@@ -1,34 +1,18 @@
 import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import CONFIG_MATERY from '../config_matery'
+import { MenuListSide } from './MenuListSide'

 /**
- * 标签组
+ * 侧边抽屉
 * @param tags
 * @param currentTag
 * @returns {JSX.Element}
 * @constructor
 */
 const SideBar = (props) => {
-  const { siteInfo, customNav } = props
-  const { locale } = useGlobal()
-  const router = useRouter()
-
-  const defaultLinks = [
-    { icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
-  ]
-  let links = [].concat(defaultLinks)
-  if (customNav) {
-    links = defaultLinks.concat(customNav)
-  }
+  const { siteInfo } = props

  return (
-      <div id='side-bar' className=''>
+      <div id='side-bar'>
          <div className="mh-48 w-full bg-indigo-700">
              <div className='mx-5 pt-6 pb-2'>
                  {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -37,32 +21,7 @@ const SideBar = (props) => {
                  <div className='text-xs my-1 text-gray-300'>{siteInfo?.description}</div>
              </div>
          </div>
-          <nav>
-              {links.map(link => {
-                if (link && link.show) {
-                  const selected = (router.pathname === link.to) || (router.asPath === link.to)
-                  return (
-                      <Link
-                          key={link.to}
-                          title={link.to}
-                          href={link.to}
-                          target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
-                          className={'py-2 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
-                           (selected ? 'bg-indigo-500 text-white ' : ' text-black dark:text-white ')}>
-
-                          <div className='my-auto items-center justify-between flex '>
-                              <i className={`${link.icon} w-4 ml-3 mr-6 text-center`} />
-                              <div >{link.name}</div>
-                          </div>
-                          {link.slot}
-
-                      </Link>
-                  )
-                } else {
-                  return <></>
-                }
-              })}
-          </nav>
+          <MenuListSide {...props} />
      </div>
  )
 }
--- a/themes/matery/components/SocialButton.js
+++ b/themes/matery/components/SocialButton.js
@@ -27,9 +27,9 @@ const SocialButton = () => {
      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
        <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
      </a>}
-      <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+      {BLOG.ENABLE_RSS && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
        <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>
+      </a>}
    </div>
  </div>
 }
--- a/themes/matery/components/TopNav.js
+++ b/themes/matery/components/TopNav.js
@@ -5,7 +5,7 @@ import CategoryGroup from './CategoryGroup'
 import Logo from './Logo'
 import SearchDrawer from './SearchDrawer'
 import TagGroups from './TagGroups'
-import MenuButtonGroupTop from './MenuButtonGroupTop'
+import { MenuListTop } from './MenuListTop'
 import SideBarDrawer from '@/components/SideBarDrawer'
 import SideBar from './SideBar'
 import throttle from 'lodash.throttle'
@@ -35,12 +35,12 @@ const TopNav = props => {
      if (navTransparent) {
        nav && nav.classList.replace('bg-indigo-700', 'bg-none')
        nav && nav.classList.replace('text-black', 'text-white')
-        nav && nav.classList.replace('drop-shadow-xl', 'shadow-none')
+        nav && nav.classList.replace('shadow-xl', 'shadow-none')
        nav && nav.classList.replace('dark:bg-hexo-black-gray', 'transparent')
      } else {
        nav && nav.classList.replace('bg-none', 'bg-indigo-700')
        nav && nav.classList.replace('text-white', 'text-black')
-        nav && nav.classList.replace('shadow-none', 'drop-shadow-xl')
+        nav && nav.classList.replace('shadow-none', 'shadow-xl')
        nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
      }

@@ -129,7 +129,7 @@ const TopNav = props => {
      <div id='top-nav'>
            <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />
            {/* 导航栏 */}
-            <div id='sticky-nav' className={'flex justify-center top-0 shadow-black shadow-none fixed bg-none dark:bg-hexo-black-gray text-gray-200 w-full z-30 transform transition-all duration-200'}>
+            <div id='sticky-nav' className={'flex justify-center top-0 shadow-none fixed bg-none dark:bg-hexo-black-gray text-gray-200 w-full z-30 transform transition-all duration-200'}>
                <div className='w-full max-w-6xl flex justify-between items-center px-4 py-2'>
                    {/* 左侧功能 */}
                    <div className='justify-start items-center block lg:hidden '>
@@ -144,7 +144,7 @@ const TopNav = props => {

                    {/* 右侧功能 */}
                    <div className='mr-1 justify-end items-center '>
-                        <div className='hidden lg:flex'> <MenuButtonGroupTop {...props} /></div>
+                        <div className='hidden lg:flex'> <MenuListTop {...props} /></div>
                        <div className='block lg:hidden'><Link href={'/search'} passHref>
                            <i className='fas fa-search' />
                        </Link></div>
--- a/themes/matery/config_matery.js
+++ b/themes/matery/config_matery.js
@@ -3,6 +3,7 @@ const CONFIG_MATERY = {
  HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字

  HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
+  HOME_NAV_BACKGROUND_IMG_FIXED: false, // 首页背景图滚动时是否固定，true 则滚动时图片不懂； false则随鼠标滚动

  // 菜单配置
  MENU_CATEGORY: true, // 显示分类
--- a/themes/medium/LayoutArchive.js
+++ b/themes/medium/LayoutArchive.js
@@ -8,7 +8,7 @@ export const LayoutArchive = props => {
  return (
    <LayoutBase {...props}>
      <div className="mb-10 pb-20 md:py-12 py-3  min-h-full">
-        {Object.keys(archivePosts).map(archiveTitle => (
+        {Object.keys(archivePosts)?.map(archiveTitle => (
          <div key={archiveTitle}>
            <div
              className="pt-16 pb-4 text-3xl dark:text-gray-300"
@@ -17,7 +17,7 @@ export const LayoutArchive = props => {
              {archiveTitle}
            </div>
            <ul>
-              {archivePosts[archiveTitle].map(post => (
+              {archivePosts[archiveTitle]?.map(post => (
                <li
                  key={post.id}
                  className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
--- a/themes/medium/LayoutBase.js
+++ b/themes/medium/LayoutBase.js
@@ -25,31 +25,41 @@ const LayoutBase = props => {
  const { locale } = useGlobal()
  const router = useRouter()
  const [tocVisible, changeTocVisible] = useState(false)
+  const { onLoading } = useGlobal()
+
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-screen flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>

  return (
        <ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
+            <CommonHead meta={meta} />
+
            <div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
-                <CommonHead meta={meta} />

                <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
                    {/* 桌面端左侧菜单 */}
                    {/* <LeftMenuBar/> */}

                    <div id='container-inner' className='w-full relative z-10'>
-                        {/* 移动端顶部菜单 */}
+                        {/* 顶部导航栏 */}
                        <TopNavBar {...props} />
-                        <div className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
+
+                        <div id='container-inner' className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
                            {slotTop}
-                            {children}
+
+                            {onLoading ? LoadingCover : children}

                            {/* 回顶按钮 */}
                            <div
-                              data-aos="fade-up"
-                              data-aos-duration="300"
-                              data-aos-once="false"
-                              data-aos-anchor-placement="top-center"
-                              className='fixed xl:right-80 right-2 mr-10 bottom-24 hidden lg:block z-20'>
-                              <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }}/>
+                                data-aos="fade-up"
+                                data-aos-duration="300"
+                                data-aos-once="false"
+                                data-aos-anchor-placement="top-center"
+                                className='fixed xl:right-80 right-2 mr-10 bottom-24 hidden lg:block z-20'>
+                                <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
                            </div>
                        </div>

@@ -73,6 +83,7 @@ const LayoutBase = props => {
                    </div>
                </main>

+                {/* 移动端底部导航栏 */}
                <BottomMenuBar {...props} className='block md:hidden' />
            </div>
        </ThemeGlobalMedium.Provider>
--- a/themes/medium/LayoutTagIndex.js
+++ b/themes/medium/LayoutTagIndex.js
@@ -13,7 +13,7 @@ export const LayoutTagIndex = props => {
          {locale.COMMON.TAGS}:
        </div>
        <div id="tags-list" className="duration-200 flex flex-wrap">
-          {tagOptions.map(tag => {
+          {tagOptions?.map(tag => {
            return (
              <div key={tag.name} className="p-2">
                <TagItemMini key={tag.name} tag={tag} />
--- a/themes/medium/components/ArticleAround.js
+++ b/themes/medium/components/ArticleAround.js
@@ -28,5 +28,5 @@ export default function ArticleAround ({ prev, next }) {

      </Link>
    </section>
-  );
+  )
 }
--- a/Show More
+++ b/Show More