Upload 699 files

.dockerignore

@@ -0,0 +1 @@
+.next*

.env.local

@@ -0,0 +1,174 @@
+# 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
+NEXT_PUBLIC_VERSION=4.2.4
+
+
+# 可在此添加环境变量，去掉最左边的（# ）注释即可
+# Notion页面ID,必须
+# NOTION_PAGE_ID=097e5f674880459d8e1b4407758dc4fb
+
+# 非必须
+# NEXT_PUBLIC_PSEUDO_STATIC=
+# NEXT_PUBLIC_REVALIDATE_SECOND=  
+# NEXT_PUBLIC_THEME=matery
+# NEXT_PUBLIC_THEME_SWITCH=
+# NEXT_PUBLIC_LANG=
+# NEXT_PUBLIC_APPEARANCE=
+# NEXT_PUBLIC_APPEARANCE_DARK_TIME=
+# NEXT_PUBLIC_GREETING_WORDS=
+# NEXT_PUBLIC_CUSTOM_MENU=
+# NEXT_PUBLIC_AUTHOR=
+# NEXT_PUBLIC_BIO=
+# NEXT_PUBLIC_LINK=
+# NEXT_PUBLIC_KEYWORD=
+# NEXT_PUBLIC_CONTACT_EMAIL=
+# NEXT_PUBLIC_CONTACT_WEIBO=
+# NEXT_PUBLIC_CONTACT_TWITTER= 
+# NEXT_PUBLIC_CONTACT_GITHUB=
+# NEXT_PUBLIC_CONTACT_TELEGRAM=
+# NEXT_PUBLIC_CONTACT_LINKEDIN=
+# NEXT_PUBLIC_CONTACT_INSTAGRAM=
+# NEXT_PUBLIC_CONTACT_BILIBILI=
+# NEXT_PUBLIC_CONTACT_YOUTUBE=
+# NEXT_PUBLIC_FAVICON=
+# NEXT_PUBLIC_FONT_STYLE=
+# NEXT_PUBLIC_FONT_URL=
+# NEXT_PUBLIC_FONT_SANS=
+# NEXT_PUBLIC_FONT_SERIF=
+# NEXT_PUBLIC_FONT_AWESOME_PATH=
+# NEXT_PUBLIC_PRISM_THEME_PREFIX_PATH=  
+# NEXT_PUBLIC_PRISM_THEME_SWITCH=
+# NEXT_PUBLIC_PRISM_THEME_LIGHT_PATH=   
+# NEXT_PUBLIC_PRISM_THEME_DARK_PATH=
+# NEXT_PUBLIC_CODE_MAC_BAR=
+# NEXT_PUBLIC_CODE_LINE_NUMBERS=  
+# NEXT_PUBLIC_CODE_COLLAPSE=
+# NEXT_PUBLIC_CODE_COLLAPSE_EXPAND_DEFAULT=
+# NEXT_PUBLIC_MERMAID_CDN=
+# NEXT_PUBLIC_QR_CODE_CDN=
+# NEXT_PUBLIC_BACKGROUND_LIGHT=   
+# NEXT_PUBLIC_BACKGROUND_DARK=
+# NEXT_PUBLIC_SUB_PATH=
+# NEXT_PUBLIC_POST_SHARE_BAR=
+# NEXT_PUBLIC_POST_SHARE_SERVICES=
+# NEXT_PUBLIC_POST_URL_PREFIX=  
+# NEXT_PUBLIC_POST_LIST_STYLE=
+# NEXT_PUBLIC_POST_PREVIEW=
+# NEXT_PUBLIC_POST_RECOMMEND_COUNT=
+# NEXT_PUBLIC_POSTS_PER_PAGE=
+# NEXT_PUBLIC_POST_SORT_BY=
+# NEXT_PUBLIC_ALGOLIA_APP_ID=
+# ALGOLIA_ADMIN_APP_KEY=
+# NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_APP_KEY=    
+# NEXT_PUBLIC_ALGOLIA_INDEX=
+# NEXT_PUBLIC_PREVIEW_CATEGORY_COUNT=  
+# NEXT_PUBLIC_PREVIEW_TAG_COUNT=
+# NEXT_PUBLIC_POST_DISABLE_GALLERY_CLICK=   
+# NEXT_PUBLIC_FIREWORKS=
+# NEXT_PUBLIC_FIREWORKS_COLOR=
+# NEXT_PUBLIC_SAKURA=
+# NEXT_PUBLIC_NEST=
+# NEXT_PUBLIC_FLUTTERINGRIBBON=
+# NEXT_PUBLIC_RIBBON=
+# NEXT_PUBLIC_STARRY_SKY=
+# NEXT_PUBLIC_CHATBASE_ID=
+# NEXT_PUBLIC_WEB_WHIZ_ENABLED=
+# NEXT_PUBLIC_WEB_WHIZ_BASE_URL=
+# NEXT_PUBLIC_WEB_WHIZ_CHAT_BOT_ID=  
+# NEXT_PUBLIC_WIDGET_PET=
+# NEXT_PUBLIC_WIDGET_PET_LINK=
+# NEXT_PUBLIC_WIDGET_PET_SWITCH_THEME=
+# NEXT_PUBLIC_MUSIC_PLAYER=
+# NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE=
+# NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY=    
+# NEXT_PUBLIC_MUSIC_PLAYER_LRC_TYPE=
+# NEXT_PUBLIC_MUSIC_PLAYER_CDN_URL=
+# NEXT_PUBLIC_MUSIC_PLAYER_ORDER=
+# NEXT_PUBLIC_MUSIC_PLAYER_AUDIO_LIST=
+# NEXT_PUBLIC_MUSIC_PLAYER_METING=
+# NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER=
+# NEXT_PUBLIC_MUSIC_PLAYER_METING_ID=
+# NEXT_PUBLIC_MUSIC_PLAYER_METING_LRC_TYPE=  
+# NEXT_PUBLIC_COMMENT_ARTALK_SERVER=
+# NEXT_PUBLIC_COMMENT_ARTALK_JS= 
+# NEXT_PUBLIC_COMMENT_ARTALK_CSS=   
+# NEXT_PUBLIC_COMMENT_ENV_ID=  
+# NEXT_PUBLIC_COMMENT_TWIKOO_COUNT_ENABLE=
+# NEXT_PUBLIC_COMMENT_TWIKOO_CDN_URL=
+# NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO=    
+# NEXT_PUBLIC_COMMENT_GISCUS_REPO=
+# NEXT_PUBLIC_COMMENT_GISCUS_REPO_ID=
+# NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID=
+# NEXT_PUBLIC_COMMENT_GISCUS_MAPPING=
+# NEXT_PUBLIC_COMMENT_GISCUS_REACTIONS_ENABLED=
+# NEXT_PUBLIC_COMMENT_GISCUS_EMIT_METADATA=
+# NEXT_PUBLIC_COMMENT_GISCUS_INPUT_POSITION=
+# NEXT_PUBLIC_COMMENT_GISCUS_LANG=     
+# NEXT_PUBLIC_COMMENT_GISCUS_LOADING=
+# NEXT_PUBLIC_COMMENT_GISCUS_CROSSORIGIN=
+# NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID=  
+# NEXT_PUBLIC_COMMENT_CUSDIS_HOST=
+# NEXT_PUBLIC_COMMENT_CUSDIS_SCRIPT_SRC=
+# NEXT_PUBLIC_COMMENT_GITALK_REPO=
+# NEXT_PUBLIC_COMMENT_GITALK_OWNER=    
+# NEXT_PUBLIC_COMMENT_GITALK_ADMIN=  
+# NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID=
+# NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET=
+# NEXT_PUBLIC_COMMENT_GITALK_JS_CDN_URL=
+# NEXT_PUBLIC_COMMENT_GITALK_CSS_CDN_URL=   
+# NEXT_PUBLIC_COMMENT_GITTER_ROOM=  
+# NEXT_PUBLIC_COMMENT_DAO_VOICE_ID=
+# NEXT_PUBLIC_COMMENT_TIDIO_ID=
+# NEXT_PUBLIC_VALINE_CDN=    
+# NEXT_PUBLIC_VALINE_ID=
+# NEXT_PUBLIC_VALINE_KEY=
+# NEXT_PUBLIC_VALINE_SERVER_URLS=
+# NEXT_PUBLIC_VALINE_PLACEHOLDER=
+# NEXT_PUBLIC_WALINE_SERVER_URL=
+# NEXT_PUBLIC_WALINE_RECENT=
+# NEXT_PUBLIC_WEBMENTION_ENABLE=
+# NEXT_PUBLIC_WEBMENTION_AUTH=
+# NEXT_PUBLIC_WEBMENTION_HOSTNAME=
+# NEXT_PUBLIC_TWITTER_USERNAME=
+# NEXT_PUBLIC_WEBMENTION_TOKEN= 
+# NEXT_PUBLIC_ANALYTICS_VERCEL=    
+# NEXT_PUBLIC_ANALYTICS_BUSUANZI_ENABLE=   
+# NEXT_PUBLIC_ANALYTICS_BAIDU_ID=  
+# NEXT_PUBLIC_ANALYTICS_CNZZ_ID=   
+# NEXT_PUBLIC_ANALYTICS_GOOGLE_ID=
+# NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER=
+# NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER=  
+# NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID=
+# NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION=     
+# NEXT_PUBLIC_SEO_BAIDU_SITE_VERIFICATION=    
+# NEXT_PUBLIC_ADSENSE_GOOGLE_ID=
+# NEXT_PUBLIC_ADSENSE_GOOGLE_TEST=  
+# NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_IN_ARTICLE=
+# NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_FLOW=
+# NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_NATIVE=     
+# NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_AUTO=  
+# NEXT_PUBLIC_WWAD_ID=    
+# NEXT_PUBLIC_WWADS_AD_BLOCK_DETECT=
+# NEXT_PUBLIC_NOTION_PROPERTY_PASSWORD=
+# NEXT_PUBLIC_NOTION_PROPERTY_TYPE=
+# NEXT_PUBLIC_NOTION_PROPERTY_TYPE_POST=
+# NEXT_PUBLIC_NOTION_PROPERTY_TYPE_PAGE=
+# NEXT_PUBLIC_NOTION_PROPERTY_TYPE_NOTICE=
+# NEXT_PUBLIC_NOTION_PROPERTY_TYPE_MENU=
+# NEXT_PUBLIC_NOTION_PROPERTY_TYPE_SUB_MENU=
+# NEXT_PUBLIC_NOTION_PROPERTY_TITLE=
+# NEXT_PUBLIC_NOTION_PROPERTY_STATUS=   
+# NEXT_PUBLIC_NOTION_PROPERTY_STATUS_PUBLISH=
+# NEXT_PUBLIC_NOTION_PROPERTY_STATUS_INVISIBLE=    
+# NEXT_PUBLIC_NOTION_PROPERTY_SUMMARY=  
+# NEXT_PUBLIC_NOTION_PROPERTY_SLUG=
+# NEXT_PUBLIC_NOTION_PROPERTY_CATEGORY=   
+# NEXT_PUBLIC_NOTION_PROPERTY_DATE=
+# NEXT_PUBLIC_NOTION_PROPERTY_TAGS=
+# NEXT_PUBLIC_NOTION_PROPERTY_ICON=
+# NEXT_PUBLIC_ENABLE_RSS=  
+# MAILCHIMP_LIST_ID=
+# MAILCHIMP_API_KEY=    
+# NEXT_PUBLIC_DEBUG=
+# ENABLE_CACHE=
+# VERCEL_ENV=
+# NEXT_PUBLIC_VERSION=

.eslintrc.js

@@ -0,0 +1,38 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true
+  },
+  extends: [
+    'plugin:react/recommended',
+    'plugin:@next/next/recommended',
+    'standard'
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 12,
+    sourceType: 'module'
+  },
+  plugins: [
+    'react',
+    'react-hooks'
+  ],
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
+  rules: {
+    semi: 0,
+    'react/no-unknown-property': 'off', // <style jsx>
+    'react/prop-types': 'off',
+    'space-before-function-paren': 0,
+    'react-hooks/rules-of-hooks': 'error' // Checks rules of Hooks
+  },
+  globals: {
+    React: true
+  }
+}

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+public/videos/video.mp4 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,52 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+# .env.local # 版本号放在此环境变量中
+.env.development.local
+.env.test.local
+.env.production.local
+.env
+
+# vercel
+.vercel
+
+# dev
+/data.json
+/pnpm-lock.yaml
+.idea
+.vscode
+
+
+# sitemap
+/public/robots.txt
+/public/sitemap.xml
+/public/rss/*
+
+
+# yarn
+package-lock.json
+# yarn.lock

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
+}

CONTRIBUTING.md

@@ -0,0 +1,52 @@
+# Contributing
+
+- [Setup](#setup)
+- [Creating new themes](#creating-new-themes)
+- [Adding localizations](#adding-localizations)
+
+Thanks for considering to contribute!
+
+## Setup
+
+To contribute to NotionNext, follow these steps:
+
+1. [Fork][fork] the repository to your GitHub account.
+2. Clone the repository to your device (or use something like Codespaces).
+3. Create a new branch in the repository.
+4. Make your modifications.
+5. Commit your modifications and push the branch.
+6. [Create a PR][pr] from the branch in your fork to NotionNext' `main` branch.
+
+This project is built with [Next.js][next.js] and `yarn` as the package manager.
+Here are some commands that you can use:
+
+- `yarn`: install dependencies
+- `yarn dev`: compile and hot-reload for development
+- `yarn build`: compile and minify for production
+- `yarn start`: serve the compiled build in production mode
+
+## Creating new themes
+
+If you want to submit your custom theme to NotionNext, copy a new folder in
+[`themes`][themes-dir] from [`example`][example]. The folder name  will be the
+theme's key. 
+
+## Adding localizations
+
+If your language is not yet supported by NotionNext, please contribute a
+localization! Follow these steps to add a new localization:
+
+1. Copy one of the [en-US.js][en-US.js] in [lang-dir][lang-dir] and rename the new
+   directory into your language's code ( e.g. `zh-CN.js`).
+2. Start translating the strings.
+3. Add your language config to [lang.js][lang.js]. 
+4. [Create a PR][pr] with your localization updates.
+
+[fork]: https://github.com/tangly1024/NotionNext/fork
+[pr]: https://github.com/tangly1024/NotionNext/compare
+[next.js]: https://github.com/vercel/next.js
+[themes-dir]: themes
+[example]: themes/example
+[lang-dir]: lib/lang
+[en-US.js]: lib/lang/en-US.js
+[lang.js]: lib/lang.js

Dockerfile

@@ -0,0 +1,27 @@
+ARG NOTION_PAGE_ID
+# Install dependencies only when needed
+FROM node:18-alpine3.18 AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json ./
+RUN yarn install --frozen-lockfile
+
+# Rebuild the source code only when needed
+FROM node:18-alpine3.18 AS builder
+ARG NOTION_PAGE_ID
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN yarn build
+
+ENV NODE_ENV production
+
+EXPOSE 7860
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+CMD ["yarn", "start"]

blog.config.js

@@ -0,0 +1,432 @@
+// 注: process.env.XX是Vercel的环境变量，配置方式见：https://docs.tangly1024.com/article/how-to-config-notion-next#c4768010ae7d44609b744e79e2f9959a
+const BLOG = {
+  // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
+  NOTION_PAGE_ID:
+        process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5',
+  PSEUDO_STATIC: process.env.NEXT_PUBLIC_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', // 当前主题，在themes文件夹下可找到所有支持的主题；主题名称就是文件夹名，例如 example,fukasawa,gitbook,heo,hexo,landing,matery,medium,next,nobelium,plog,simple
+  THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮
+  LANG: process.env.NEXT_PUBLIC_LANG || 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
+  SINCE: process.env.NEXT_SINCE || 2021, // e.g if leave this empty, current year will be used.
+  APPEARANCE: process.env.NEXT_PUBLIC_APPEARANCE || 'dark', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
+  APPEARANCE_DARK_TIME: process.env.NEXT_PUBLIC_APPEARANCE_DARK_TIME || 'false',   // [18, 6], // 夜间模式起至时间，false时关闭根据时间自动切换夜间模式
+
+  // 3.14.1版本后，欢迎语在此配置，英文逗号隔开 ,  即可支持多个欢迎语打字效果。
+  GREETING_WORDS: process.env.NEXT_PUBLIC_GREETING_WORDS || 'Hi，我是我, Hi，我就是我,Hi，我还是我,欢迎来到我的博客🎉',
+
+  CUSTOM_MENU: process.env.NEXT_PUBLIC_CUSTOM_MENU || false, // 支持Menu 类型，从3.12.0版本起，各主题将逐步支持灵活的二级菜单配置，替代了原来的Page类型，此配置是试验功能、默认关闭。
+
+  AUTHOR: process.env.NEXT_PUBLIC_AUTHOR || 'NotionNext', // 您的昵称 例如 tangly1024
+  BIO: process.env.NEXT_PUBLIC_BIO || '一个普通的干饭人🍚', // 作者简介
+  LINK: process.env.NEXT_PUBLIC_LINK || 'https://tangly1024.com', // 网站地址
+  KEYWORDS: process.env.NEXT_PUBLIC_KEYWORD || 'Notion, 博客', // 网站关键词 英文逗号隔开
+
+  // 社交链接，不需要可留空白，例如 CONTACT_WEIBO:''
+  CONTACT_EMAIL: process.env.NEXT_PUBLIC_CONTACT_EMAIL || '', // 邮箱地址 例如mail@tangly1024.com
+  CONTACT_WEIBO: process.env.NEXT_PUBLIC_CONTACT_WEIBO || '', // 你的微博个人主页
+  CONTACT_TWITTER: process.env.NEXT_PUBLIC_CONTACT_TWITTER || '', // 你的twitter个人主页
+  CONTACT_GITHUB: process.env.NEXT_PUBLIC_CONTACT_GITHUB || '', // 你的github个人主页 例如 https://github.com/tangly1024
+  CONTACT_TELEGRAM: process.env.NEXT_PUBLIC_CONTACT_TELEGRAM || '', // 你的telegram 地址 例如 https://t.me/tangly_1024
+  CONTACT_LINKEDIN: process.env.NEXT_PUBLIC_CONTACT_LINKEDIN || '', // 你的linkedIn 首页
+  CONTACT_INSTAGRAM: process.env.NEXT_PUBLIC_CONTACT_INSTAGRAM || '', // 您的instagram地址
+  CONTACT_BILIBILI: process.env.NEXT_PUBLIC_CONTACT_BILIBILI || '', // B站主页
+  CONTACT_YOUTUBE: process.env.NEXT_PUBLIC_CONTACT_YOUTUBE || '', // Youtube主页
+
+  NOTION_HOST: process.env.NEXT_PUBLIC_NOTION_HOST || 'https://www.notion.so', // Notion域名，您可以选择用自己的域名进行反向代理，如果不懂得什么是反向代理，请勿修改此项
+
+  BLOG_FAVICON: process.env.NEXT_PUBLIC_FAVICON || '/favicon.ico', // blog favicon 配置, 默认使用 /public/favicon.ico，支持在线图片，如 https://img.imesong.com/favicon.png
+
+  IMAGE_COMPRESS_WIDTH: process.env.NEXT_PUBLIC_IMAGE_COMPRESS_WIDTH || 800, // 图片压缩宽度默认值，作用于博客封面和文章内容 越小加载图片越快
+  IMAGE_ZOOM_IN_WIDTH: process.env.NEXT_PUBLIC_IMAGE_ZOOM_IN_WIDTH || 1200, // 文章图片点击放大后的画质宽度，不代表在网页中的实际展示宽度
+  RANDOM_IMAGE_URL: process.env.NEXT_PUBLIC_RANDOM_IMAGE_URL || '', // 随机图片API,如果未配置下面的关键字，主页封面，头像，文章封面图都会被替换为随机图片
+  RANDOM_IMAGE_REPLACE_TEXT: process.env.NEXT_PUBLIC_RANDOM_IMAGE_NOT_REPLACE_TEXT || 'images.unsplash.com', // 触发替换图片的 url 关键字(多个支持用英文逗号分开)，只有图片地址中包含此关键字才会替换为上方随机图片url
+  // eg: images.unsplash.com(notion图床的所有图片都会替换),如果你在 notion 里已经添加了一个随机图片 url，恰巧那个服务跑路或者挂掉，想一键切换所有配图可以将该 url 配置在这里
+  // 默认下会将你上传到 notion的主页封面图和头像也给替换，建议将主页封面图和头像放在其他图床，在 notion 里配置 link 即可。
+
+  // START ************网站字体*****************
+  // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
+  // 后面空格隔开的font-light的字体粗细，留空是默认粗细；参考 https://www.tailwindcss.cn/docs/font-weight
+  FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-sans font-light',
+  // 字体CSS 例如 https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css
+  FONT_URL: [
+    // 'https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css',
+    'https://fonts.googleapis.com/css?family=Bitter&display=swap',
+    'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&display=swap',
+    'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300&display=swap'
+  ],
+  // 无衬线字体 例如'"LXGW WenKai"'
+  FONT_SANS: [
+    // '"LXGW WenKai"',
+    '"PingFang SC"',
+    '-apple-system',
+    'BlinkMacSystemFont',
+    '"Hiragino Sans GB"',
+    '"Microsoft YaHei"',
+    '"Segoe UI Emoji"',
+    '"Segoe UI Symbol"',
+    '"Segoe UI"',
+    '"Noto Sans SC"',
+    'HarmonyOS_Regular',
+    '"Helvetica Neue"',
+    'Helvetica',
+    '"Source Han Sans SC"',
+    'Arial',
+    'sans-serif',
+    '"Apple Color Emoji"'
+  ],
+  // 衬线字体 例如'"LXGW WenKai"'
+  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: process.env.NEXT_PUBLIC_FONT_AWESOME_PATH || 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', // font-awesome 字体图标地址; 可选 /css/all.min.css ， https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css
+
+  // END ************网站字体*****************
+  CAN_COPY: process.env.NEXT_PUBLIC_CAN_COPY || true, // 是否允许复制页面内容 默认允许，如果设置为false、则全栈禁止复制内容。
+  CUSTOM_RIGHT_CLICK_CONTEXT_MENU: process.env.NEXT_PUBLIC_CUSTOM_RIGHT_CLICK_CONTEXT_MENU || true, // 自定义右键菜单，覆盖系统菜单
+  CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH: process.env.NEXT_PUBLIC_CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH || true,
+
+  // 自定义外部脚本，外部样式
+  CUSTOM_EXTERNAL_JS: ['https://cdn.jsdelivr.net/gh/no2y/jslib@main/lanterns/lanterns.min.js','https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js'], //  https://proxy.api.030101.xyz/ e.g. ['http://xx.com/script.js','http://xx.com/script.js']
+  CUSTOM_EXTERNAL_CSS: [''], // e.g. ['http://xx.com/style.css','http://xx.com/style.css']
+
+  // 侧栏布局 是否反转(左变右,右变左) 已支持主题: hexo next medium fukasawa example
+  LAYOUT_SIDEBAR_REVERSE: process.env.NEXT_PUBLIC_LAYOUT_SIDEBAR_REVERSE || false,
+
+  // 一个小插件展示你的facebook fan page~ @see https://tw.andys.pro/article/add-facebook-fanpage-notionnext
+  FACEBOOK_PAGE_TITLE: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_TITLE || null, // 邊欄 Facebook Page widget 的標題欄，填''則無標題欄 e.g FACEBOOK 粉絲團'
+  FACEBOOK_PAGE: process.env.NEXT_PUBLIC_FACEBOOK_PAGE || null, // Facebook Page 的連結 e.g https://www.facebook.com/tw.andys.pro
+  FACEBOOK_PAGE_ID: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_ID || '', // Facebook Page ID 來啟用 messenger 聊天功能
+  FACEBOOK_APP_ID: process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || '', // Facebook App ID 來啟用 messenger 聊天功能 获取: https://developers.facebook.com/
+
+  BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
+
+  // START********代码相关********
+  // PrismJs 代码相关
+  PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/',
+  PRISM_JS_AUTO_LOADER: 'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js',
+
+  // 代码主题 @see https://github.com/PrismJS/prism-themes
+  PRISM_THEME_PREFIX_PATH: process.env.NEXT_PUBLIC_PRISM_THEME_PREFIX_PATH || 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.css', // 代码块默认主题
+  PRISM_THEME_SWITCH: process.env.NEXT_PUBLIC_PRISM_THEME_SWITCH || true, // 是否开启浅色/深色模式代码主题切换； 开启后将显示以下两个主题
+  PRISM_THEME_LIGHT_PATH: process.env.NEXT_PUBLIC_PRISM_THEME_LIGHT_PATH || 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-solarizedlight.css', // 浅色模式主题
+  PRISM_THEME_DARK_PATH: process.env.NEXT_PUBLIC_PRISM_THEME_DARK_PATH || 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.min.css', // 深色模式主题
+
+  CODE_MAC_BAR: process.env.NEXT_PUBLIC_CODE_MAC_BAR || true, // 代码左上角显示mac的红黄绿图标
+  CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || false, // 是否显示行号
+  CODE_COLLAPSE: process.env.NEXT_PUBLIC_CODE_COLLAPSE || true, // 是否支持折叠代码框
+  CODE_COLLAPSE_EXPAND_DEFAULT: process.env.NEXT_PUBLIC_CODE_COLLAPSE_EXPAND_DEFAULT || true, // 折叠代码默认是展开状态
+
+  // END********代码相关********
+
+  // Mermaid 图表CDN
+  MERMAID_CDN: process.env.NEXT_PUBLIC_MERMAID_CDN || 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.2.4/mermaid.min.js', // CDN
+  // QRCodeCDN
+  QR_CODE_CDN: process.env.NEXT_PUBLIC_QR_CODE_CDN || 'https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js',
+
+  BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
+  BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'
+  SUB_PATH: '', // leave this empty unless you want to deploy in a folder
+
+  POST_SHARE_BAR_ENABLE: process.env.NEXT_PUBLIC_POST_SHARE_BAR || 'true', // 文章分享功能 ，将在底部显示一个分享条
+  POSTS_SHARE_SERVICES: process.env.NEXT_PUBLIC_POST_SHARE_SERVICES || 'link,wechat,qq,weibo,email,facebook,twitter,telegram,messenger,line,reddit,whatsapp,linkedin', // 分享的服務，按顺序显示,逗号隔开
+  // 所有支持的分享服务：link(复制链接),wechat(微信),qq,weibo(微博),email(邮件),facebook,twitter,telegram,messenger,line,reddit,whatsapp,linkedin,vkshare,okshare,tumblr,livejournal,mailru,viber,workplace,pocket,instapaper,hatena
+
+  POST_URL_PREFIX: process.env.NEXT_PUBLIC_POST_URL_PREFIX || 'article',
+  // POST类型文章的默认路径前缀，例如默认POST类型的路径是  /article/[slug]
+  // 如果此项配置为 '' 空， 则文章将没有前缀路径，使用场景： 希望文章前缀路径为 /post 的情况 支持多级
+  // 支援類似 WP 可自訂文章連結格式的功能：https://wordpress.org/documentation/article/customize-permalinks/，目前只先實作 %year%/%month%/%day%
+  // 例：如想連結改成前綴 article + 時間戳記，可變更為： 'article/%year%/%month%/%day%'
+
+  POST_LIST_STYLE: process.env.NEXT_PUBLIC_POST_LIST_STYLE || 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
+  POST_LIST_PREVIEW: process.env.NEXT_PUBLIC_POST_PREVIEW || 'false', //  是否在列表加载文章预览
+  POST_PREVIEW_LINES: 12, // 预览博客行数
+  POST_RECOMMEND_COUNT: 6, // 推荐文章数量
+  POSTS_PER_PAGE: 12, // post counts per page
+  POSTS_SORT_BY: process.env.NEXT_PUBLIC_POST_SORT_BY || 'notion', // 排序方式 'date'按时间,'notion'由notion控制
+
+  ALGOLIA_APP_ID: process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || null, // 在这里查看 https://dashboard.algolia.com/account/api-keys/
+  ALGOLIA_ADMIN_APP_KEY: process.env.ALGOLIA_ADMIN_APP_KEY || null, // 管理后台的KEY，不要暴露在代码中，在这里查看 https://dashboard.algolia.com/account/api-keys/
+  ALGOLIA_SEARCH_ONLY_APP_KEY: process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_APP_KEY || null, // 客户端搜索用的KEY
+  ALGOLIA_INDEX: process.env.NEXT_PUBLIC_ALGOLIA_INDEX || null, // 在Algolia中创建一个index用作数据库
+  //   ALGOLIA_RECREATE_DATA: process.env.ALGOLIA_RECREATE_DATA || process.env.npm_lifecycle_event === 'build', // 为true时重新构建索引数据; 默认在build时会构建
+
+  PREVIEW_CATEGORY_COUNT: 16, // 首页最多展示的分类数量，0为不限制
+  PREVIEW_TAG_COUNT: 16, // 首页最多展示的标签数量，0为不限制
+
+  POST_DISABLE_GALLERY_CLICK: process.env.NEXT_PUBLIC_POST_DISABLE_GALLERY_CLICK || false, // 画册视图禁止点击，方便在友链页面的画册插入链接
+
+  //   ********动态特效相关********
+  // 鼠标点击烟花特效
+  FIREWORKS: process.env.NEXT_PUBLIC_FIREWORKS || false, // 开关
+  // 烟花色彩，感谢 https://github.com/Vixcity 提交的色彩
+  FIREWORKS_COLOR: [
+    '255, 20, 97',
+    '24, 255, 146',
+    '90, 135, 255',
+    '251, 243, 140'
+  ],
+
+  // 樱花飘落特效
+  SAKURA: process.env.NEXT_PUBLIC_SAKURA || false, // 开关
+  // 漂浮线段特效
+  NEST: process.env.NEXT_PUBLIC_NEST || false, // 开关
+  // 动态彩带特效
+  FLUTTERINGRIBBON: process.env.NEXT_PUBLIC_FLUTTERINGRIBBON || false, // 开关
+  // 静态彩带特效
+  RIBBON: process.env.NEXT_PUBLIC_RIBBON || false, // 开关
+  // 星空雨特效 黑夜模式才会生效
+  STARRY_SKY: process.env.NEXT_PUBLIC_STARRY_SKY || false, // 开关
+
+  //   ********挂件组件相关********
+  // AI 文章摘要生成 @see https://docs_s.tianli0.top/
+  TianliGPT_CSS: process.env.NEXT_PUBLIC_TIANLI_GPT_CSS || 'https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.15.2/tianli_gpt.css',
+  TianliGPT_JS: process.env.NEXT_PUBLIC_TIANLI_GPT_JS || 'https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.15.2/tianli_gpt.js',
+  TianliGPT_KEY: process.env.NEXT_PUBLIC_TIANLI_GPT_KEY || '',
+
+  // Chatbase 是否显示chatbase机器人 https://www.chatbase.co/
+  CHATBASE_ID: process.env.NEXT_PUBLIC_CHATBASE_ID || 'p2_j9YrCgq7Bmj810MQNj',
+  // WebwhizAI 机器人 @see https://github.com/webwhiz-ai/webwhiz
+  WEB_WHIZ_ENABLED: process.env.NEXT_PUBLIC_WEB_WHIZ_ENABLED || false, // 是否显示
+  WEB_WHIZ_BASE_URL: process.env.NEXT_PUBLIC_WEB_WHIZ_BASE_URL || 'https://api.webwhiz.ai', // 可以自建服务器
+  WEB_WHIZ_CHAT_BOT_ID: process.env.NEXT_PUBLIC_WEB_WHIZ_CHAT_BOT_ID || null, // 在后台获取ID
+  DIFY_CHATBOT_ENABLED: process.env.NEXT_PUBLIC_DIFY_CHATBOT_ENABLED || false,
+  DIFY_CHATBOT_BASE_URL: process.env.NEXT_PUBLIC_DIFY_CHATBOT_BASE_URL || '',
+  DIFY_CHATBOT_TOKEN: process.env.NEXT_PUBLIC_DIFY_CHATBOT_TOKEN || '',
+  // 悬浮挂件
+  WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
+  WIDGET_PET_LINK:
+        process.env.NEXT_PUBLIC_WIDGET_PET_LINK ||
+        'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
+  WIDGET_PET_SWITCH_THEME: process.env.NEXT_PUBLIC_WIDGET_PET_SWITCH_THEME || true, // 点击宠物挂件切换博客主题
+
+  // 音乐播放插件
+  MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件
+  MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换，如果使用播放器，打开自动播放再隐藏，就会以类似背景音乐的方式播放，无法取消和暂停
+  MUSIC_PLAYER_AUTO_PLAY:
+        process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过自动播放时常不生效（移动设备不支持自动播放）
+  MUSIC_PLAYER_LRC_TYPE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_LRC_TYPE || '0', // 歌词显示类型，可选值： 3 | 1 | 0（0：禁用 lrc 歌词，1：lrc 格式的字符串，3：lrc 文件 url）（前提是有配置歌词路径，对 meting 无效）
+  MUSIC_PLAYER_CDN_URL:
+        process.env.NEXT_PUBLIC_MUSIC_PLAYER_CDN_URL ||
+        'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js',
+  MUSIC_PLAYER_ORDER: process.env.NEXT_PUBLIC_MUSIC_PLAYER_ORDER || 'list', // 默认播放方式，顺序 list，随机 random
+  MUSIC_PLAYER_AUDIO_LIST: [
+    // 示例音乐列表。除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/
+    {
+      name: '风を共に舞う気持ち',
+      artist: 'Falcom Sound Team jdk',
+      url: 'https://music.163.com/song/media/outer/url?id=731419.mp3',
+      cover:
+            'https://p2.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
+    },
+    {
+      name: '王都グランセル',
+      artist: 'Falcom Sound Team jdk',
+      url: 'https://music.163.com/song/media/outer/url?id=731355.mp3',
+      cover:
+            'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
+    }
+  ],
+  MUSIC_PLAYER_METING: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING || false, // 是否要开启 MetingJS，从平台获取歌单。会覆盖自定义的 MUSIC_PLAYER_AUDIO_LIST，更多配置信息：https://github.com/metowolf/MetingJS
+  MUSIC_PLAYER_METING_SERVER:
+        process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER || 'netease', // 音乐平台，[netease, tencent, kugou, xiami, baidu]
+  MUSIC_PLAYER_METING_ID:
+        process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_ID || '60198', // 对应歌单的 id
+  MUSIC_PLAYER_METING_LRC_TYPE:
+        process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_LRC_TYPE || '1', // 可选值： 3 | 1 | 0（0：禁用 lrc 歌词，1：lrc 格式的字符串，3：lrc 文件 url）
+
+  //   ********挂件组件相关********
+  // ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK
+
+  COMMENT_HIDE_SINGLE_TAB: process.env.NEXT_PUBLIC_COMMENT_HIDE_SINGLE_TAB || false, // Whether hide the tab when there's no tabs. 只有一个评论组件时是否隐藏切换组件的标签页
+
+  // artalk 评论插件
+  COMMENT_ARTALK_SERVER: process.env.NEXT_PUBLIC_COMMENT_ARTALK_SERVER || '', // ArtalkServert后端地址 https://artalk.js.org/guide/deploy.html
+  COMMENT_ARTALK_JS: process.env.NEXT_PUBLIC_COMMENT_ARTALK_JS || 'https://cdnjs.cloudflare.com/ajax/libs/artalk/2.5.5/Artalk.js', // ArtalkServert js cdn
+  COMMENT_ARTALK_CSS: process.env.NEXT_PUBLIC_COMMENT_ARTALK_CSS || 'https://cdnjs.cloudflare.com/ajax/libs/artalk/2.5.5/Artalk.css', // ArtalkServert css cdn
+
+  // twikoo
+  COMMENT_TWIKOO_ENV_ID: process.env.NEXT_PUBLIC_COMMENT_ENV_ID || '', // TWIKOO后端地址 腾讯云环境填envId；Vercel环境填域名，教程：https://tangly1024.com/article/notionnext-twikoo
+  COMMENT_TWIKOO_COUNT_ENABLE: process.env.NEXT_PUBLIC_COMMENT_TWIKOO_COUNT_ENABLE || false, // 博客列表是否显示评论数
+  COMMENT_TWIKOO_CDN_URL: process.env.NEXT_PUBLIC_COMMENT_TWIKOO_CDN_URL || 'https://cdn.staticfile.org/twikoo/1.6.17/twikoo.min.js', // twikoo客户端cdn
+
+  // utterance
+  COMMENT_UTTERRANCES_REPO:
+        process.env.NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO || '', // 你的代码仓库名， 例如我是 'tangly1024/NotionNext'； 更多文档参考 https://utteranc.es/
+
+  // giscus @see https://giscus.app/
+  COMMENT_GISCUS_REPO: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REPO || '', // 你的Github仓库名 e.g 'tangly1024/NotionNext'
+  COMMENT_GISCUS_REPO_ID: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REPO_ID || '', // 你的Github Repo ID e.g ( 設定完 giscus 即可看到 )
+  COMMENT_GISCUS_CATEGORY_ID:
+        process.env.NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID || '', // 你的Github Discussions 內的 Category ID ( 設定完 giscus 即可看到 )
+  COMMENT_GISCUS_MAPPING:
+        process.env.NEXT_PUBLIC_COMMENT_GISCUS_MAPPING || 'pathname', // 你的Github Discussions 使用哪種方式來標定文章, 預設 'pathname'
+  COMMENT_GISCUS_REACTIONS_ENABLED:
+        process.env.NEXT_PUBLIC_COMMENT_GISCUS_REACTIONS_ENABLED || '1', // 你的 Giscus 是否開啟文章表情符號 '1' 開啟 "0" 關閉 預設開啟
+  COMMENT_GISCUS_EMIT_METADATA:
+        process.env.NEXT_PUBLIC_COMMENT_GISCUS_EMIT_METADATA || '0', // 你的 Giscus 是否提取 Metadata '1' 開啟 '0' 關閉 預設關閉
+  COMMENT_GISCUS_INPUT_POSITION:
+        process.env.NEXT_PUBLIC_COMMENT_GISCUS_INPUT_POSITION || 'bottom', // 你的 Giscus 發表留言位置 'bottom' 尾部 'top' 頂部, 預設 'bottom'
+  COMMENT_GISCUS_LANG: process.env.NEXT_PUBLIC_COMMENT_GISCUS_LANG || 'zh-CN', // 你的 Giscus 語言 e.g 'en', 'zh-TW', 'zh-CN', 預設 'en'
+  COMMENT_GISCUS_LOADING:
+        process.env.NEXT_PUBLIC_COMMENT_GISCUS_LOADING || 'lazy', // 你的 Giscus 載入是否漸進式載入, 預設 'lazy'
+  COMMENT_GISCUS_CROSSORIGIN:
+        process.env.NEXT_PUBLIC_COMMENT_GISCUS_CROSSORIGIN || 'anonymous', // 你的 Giscus 可以跨網域, 預設 'anonymous'
+
+  COMMENT_CUSDIS_APP_ID: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID || '', // data-app-id 36位 see https://cusdis.com/
+  COMMENT_CUSDIS_HOST:
+        process.env.NEXT_PUBLIC_COMMENT_CUSDIS_HOST || 'https://cusdis.com', // data-host, change this if you're using self-hosted version
+  COMMENT_CUSDIS_SCRIPT_SRC:
+        process.env.NEXT_PUBLIC_COMMENT_CUSDIS_SCRIPT_SRC ||
+        '/js/cusdis.es.js', // change this if you're using self-hosted version
+
+  // gitalk评论插件 更多参考 https://gitalk.github.io/
+  COMMENT_GITALK_REPO: process.env.NEXT_PUBLIC_COMMENT_GITALK_REPO || '', // 你的Github仓库名，例如 'NotionNext'
+  COMMENT_GITALK_OWNER: process.env.NEXT_PUBLIC_COMMENT_GITALK_OWNER || '', // 你的用户名 e.g tangly1024
+  COMMENT_GITALK_ADMIN: process.env.NEXT_PUBLIC_COMMENT_GITALK_ADMIN || '', // 管理员用户名、一般是自己 e.g 'tangly1024'
+  COMMENT_GITALK_CLIENT_ID:
+        process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID || '', // e.g 20位ID ， 在gitalk后台获取
+  COMMENT_GITALK_CLIENT_SECRET:
+        process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET || '', // e.g 40位ID， 在gitalk后台获取
+  COMMENT_GITALK_DISTRACTION_FREE_MODE: false, // 类似facebook的无干扰模式
+  COMMENT_GITALK_JS_CDN_URL: process.env.NEXT_PUBLIC_COMMENT_GITALK_JS_CDN_URL || 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', // gitalk客户端 js cdn
+  COMMENT_GITALK_CSS_CDN_URL: process.env.NEXT_PUBLIC_COMMENT_GITALK_CSS_CDN_URL || 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css', // gitalk客户端 css cdn
+
+  COMMENT_GITTER_ROOM: process.env.NEXT_PUBLIC_COMMENT_GITTER_ROOM || '', // gitter聊天室 see https://gitter.im/ 不需要则留空
+  COMMENT_DAO_VOICE_ID: process.env.NEXT_PUBLIC_COMMENT_DAO_VOICE_ID || '', // DaoVoice http://dashboard.daovoice.io/get-started
+  COMMENT_TIDIO_ID: process.env.NEXT_PUBLIC_COMMENT_TIDIO_ID || '', // [tidio_id] -> //code.tidio.co/[tidio_id].js
+
+  COMMENT_VALINE_CDN: process.env.NEXT_PUBLIC_VALINE_CDN || 'https://unpkg.com/valine@1.5.1/dist/Valine.min.js',
+  COMMENT_VALINE_APP_ID: process.env.NEXT_PUBLIC_VALINE_ID || '', // Valine @see https://valine.js.org/quickstart.html 或 https://github.com/stonehank/react-valine#%E8%8E%B7%E5%8F%96app-id-%E5%92%8C-app-key
+  COMMENT_VALINE_APP_KEY: process.env.NEXT_PUBLIC_VALINE_KEY || '',
+  COMMENT_VALINE_SERVER_URLS: process.env.NEXT_PUBLIC_VALINE_SERVER_URLS || '', // 该配置适用于国内自定义域名用户, 海外版本会自动检测(无需手动填写) @see https://valine.js.org/configuration.html#serverURLs
+  COMMENT_VALINE_PLACEHOLDER:
+        process.env.NEXT_PUBLIC_VALINE_PLACEHOLDER || '抢个沙发吧~', // 可以搭配后台管理评论 https://github.com/DesertsP/Valine-Admin  便于查看评论，以及邮件通知，垃圾评论过滤等功能
+
+  COMMENT_WALINE_SERVER_URL: process.env.NEXT_PUBLIC_WALINE_SERVER_URL || '', // 请配置完整的Waline评论地址 例如 hhttps://preview-waline.tangly1024.com @see https://waline.js.org/guide/get-started.html
+  COMMENT_WALINE_RECENT: process.env.NEXT_PUBLIC_WALINE_RECENT || false, // 最新评论
+
+  // 此评论系统基于WebMention，细节可参考https://webmention.io
+  // 它是一个基于IndieWeb理念的开放式评论系统，下方COMMENT_WEBMENTION包含的属性皆需配置：
+  // ENABLE: 是否开启
+  // AUTH: Webmention使用的IndieLogin，可使用Twitter或Github个人页面连结
+  // HOSTNAME: Webmention绑定之网域，通常即为本站网址
+  // TWITTER_USERNAME: 评论显示区域需要的资讯
+  // TOKEN: Webmention的API token
+  COMMENT_WEBMENTION_ENABLE: process.env.NEXT_PUBLIC_WEBMENTION_ENABLE || false,
+  COMMENT_WEBMENTION_AUTH: process.env.NEXT_PUBLIC_WEBMENTION_AUTH || '',
+  COMMENT_WEBMENTION_HOSTNAME: process.env.NEXT_PUBLIC_WEBMENTION_HOSTNAME || '',
+  COMMENT_WEBMENTION_TWITTER_USERNAME: process.env.NEXT_PUBLIC_TWITTER_USERNAME || '',
+  COMMENT_WEBMENTION_TOKEN: process.env.NEXT_PUBLIC_WEBMENTION_TOKEN || '',
+
+  // <---- 评论插件
+
+  // ----> 站点统计
+  ANALYTICS_VERCEL: process.env.NEXT_PUBLIC_ANALYTICS_VERCEL || false, // vercel自带的统计 https://vercel.com/docs/concepts/analytics/quickstart https://github.com/tangly1024/NotionNext/issues/897
+  ANALYTICS_BUSUANZI_ENABLE: process.env.NEXT_PUBLIC_ANALYTICS_BUSUANZI_ENABLE || true, // 展示网站阅读量、访问数 see http://busuanzi.ibruce.info/
+  ANALYTICS_BAIDU_ID: process.env.NEXT_PUBLIC_ANALYTICS_BAIDU_ID || '', // e.g 只需要填写百度统计的id，[baidu_id] -> https://hm.baidu.com/hm.js?[baidu_id]
+  ANALYTICS_CNZZ_ID: process.env.NEXT_PUBLIC_ANALYTICS_CNZZ_ID || '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id]
+  ANALYTICS_GOOGLE_ID: process.env.NEXT_PUBLIC_ANALYTICS_GOOGLE_ID || '', // 谷歌Analytics的id e.g: G-XXXXXXXXXX
+
+  // 51la 站点统计 https://www.51.la/
+  ANALYTICS_51LA_ID: process.env.NEXT_PUBLIC_ANALYTICS_51LA_ID || '', // id，在51la后台获取 参阅 https://docs.tangly1024.com/article/notion-next-51-la
+  ANALYTICS_51LA_CK: process.env.NEXT_PUBLIC_ANALYTICS_51LA_CK || '', // ck，在51la后台获取
+
+  // Matomo 网站统计
+  MATOMO_HOST_URL: process.env.NEXT_PUBLIC_MATOMO_HOST_URL || '', // Matomo服务器地址，不带斜杠
+  MATOMO_SITE_ID: process.env.NEXT_PUBLIC_MATOMO_SITE_ID || '', // Matomo网站ID
+  // ACKEE网站访客统计工具
+  ANALYTICS_ACKEE_TRACKER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.com/tracker.js'
+  ANALYTICS_ACKEE_DATA_SERVER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.com , don't end with a slash
+  ANALYTICS_ACKEE_DOMAIN_ID: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '82e51db6-dec2-423a-b7c9-b4ff7ebb3302'
+
+  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_BAIDU_SITE_VERIFICATION:
+        process.env.NEXT_PUBLIC_SEO_BAIDU_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code
+
+  // 微软 Clarity 站点分析
+  CLARITY_ID: process.env.NEXT_PUBLIC_CLARITY_ID || null, // 只需要复制Clarity脚本中的ID部分，ID是一个十位的英文数字组合
+
+  // <---- 站点统计
+
+  // START---->营收相关
+
+  // 谷歌广告
+  ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx
+  ADSENSE_GOOGLE_TEST: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_TEST || false, // 谷歌广告ID测试模式，这种模式获取假的测试广告，用于开发 https://www.tangly1024.com/article/local-dev-google-adsense
+  ADSENSE_GOOGLE_SLOT_IN_ARTICLE: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_IN_ARTICLE || '3806269138', // Google AdScene>广告>按单元广告>新建文章内嵌广告 粘贴html代码中的data-ad-slot值
+  ADSENSE_GOOGLE_SLOT_FLOW: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_FLOW || '1510444138', // Google AdScene>广告>按单元广告>新建信息流广告
+  ADSENSE_GOOGLE_SLOT_NATIVE: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_NATIVE || '4980048999', // Google AdScene>广告>按单元广告>新建原生广告
+  ADSENSE_GOOGLE_SLOT_AUTO: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_AUTO || '8807314373', // Google AdScene>广告>按单元广告>新建展示广告 （自动广告）
+
+  // 万维广告
+  AD_WWADS_ID: process.env.NEXT_PUBLIC_WWAD_ID || null, // https://wwads.cn/ 创建您的万维广告单元ID
+  AD_WWADS_BLOCK_DETECT: process.env.NEXT_PUBLIC_WWADS_AD_BLOCK_DETECT || false, // 是否开启WWADS广告屏蔽插件检测,开启后会在广告位上以文字提示 @see https://github.com/bytegravity/whitelist-wwads
+
+  // END<----营收相关
+
+  // 自定义配置notion数据库字段名
+  NOTION_PROPERTY_NAME: {
+    password: process.env.NEXT_PUBLIC_NOTION_PROPERTY_PASSWORD || 'password',
+    type: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE || 'type', // 文章类型，
+    type_post: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_POST || 'Post', // 当type文章类型与此值相同时，为博文。
+    type_page: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_PAGE || 'Page', // 当type文章类型与此值相同时，为单页。
+    type_notice:
+          process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_NOTICE || 'Notice', // 当type文章类型与此值相同时，为公告。
+    type_menu: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_MENU || 'Menu', // 当type文章类型与此值相同���，为菜单。
+    type_sub_menu:
+          process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_SUB_MENU || 'SubMenu', // 当type文章类型与此值相同时，为子菜单。
+    title: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TITLE || 'title', // 文章标题
+    status: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS || 'status',
+    status_publish:
+          process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_PUBLISH || 'Published', // 当status状态值与此相同时为发布，可以为中文
+    status_invisible:
+          process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_INVISIBLE || 'Invisible', // 当status状态值与此相同时为隐藏发布，可以为中文 ， 除此之外其他页面状态不会显示在博客上
+    summary: process.env.NEXT_PUBLIC_NOTION_PROPERTY_SUMMARY || 'summary',
+    slug: process.env.NEXT_PUBLIC_NOTION_PROPERTY_SLUG || 'slug',
+    category: process.env.NEXT_PUBLIC_NOTION_PROPERTY_CATEGORY || 'category',
+    date: process.env.NEXT_PUBLIC_NOTION_PROPERTY_DATE || 'date',
+    tags: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TAGS || 'tags',
+    icon: process.env.NEXT_PUBLIC_NOTION_PROPERTY_ICON || 'icon'
+  },
+
+  // RSS订阅
+  ENABLE_RSS: process.env.NEXT_PUBLIC_ENABLE_RSS || true, // 是否开启RSS订阅功能
+  MAILCHIMP_LIST_ID: process.env.MAILCHIMP_LIST_ID || null, // 开启mailichimp邮件订阅 客户列表ID ，具体使用方法参阅文档
+  MAILCHIMP_API_KEY: process.env.MAILCHIMP_API_KEY || null, // 开启mailichimp邮件订阅 APIkey
+
+  // 作废配置
+  AVATAR: process.env.NEXT_PUBLIC_AVATAR || '/avatar.svg', // 作者头像，被notion中的ICON覆盖。若无ICON则取public目录下的avatar.png
+  TITLE: process.env.NEXT_PUBLIC_TITLE || 'NotionNext BLOG', // 站点标题 ，被notion中的页面标题覆盖；此处请勿留空白，否则服务器无法编译
+  HOME_BANNER_IMAGE:
+        process.env.NEXT_PUBLIC_HOME_BANNER_IMAGE || '/bg_image.jpg', // 首页背景大图, 会被notion中的封面图覆盖，若无封面图则会使用代码中的 /public/bg_image.jpg 文件
+  DESCRIPTION:
+        process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖
+
+  // 网站图片
+  IMG_LAZY_LOAD_PLACEHOLDER: process.env.NEXT_PUBLIC_IMG_LAZY_LOAD_PLACEHOLDER || 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==', // 懒加载占位图片地址，支持base64或url
+  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, // 文章图片是否自动添加阴影
+  IMG_COMPRESS_WIDTH: process.env.NEXT_PUBLIC_IMG_COMPRESS_WIDTH || 800, // Notion图片压缩宽度
+
+  // 开发相关
+  NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
+  DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮
+  ENABLE_CACHE: process.env.ENABLE_CACHE || process.env.npm_lifecycle_event === 'build' || process.env.npm_lifecycle_event === 'export', // 在打包过程中默认开启缓存，开发或运行时开启此功能意义不大。
+  isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)  isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
+  BUNDLE_ANALYZER: process.env.ANALYZE === 'true' || false, // 是否展示编译依赖内容与大小
+  VERSION: process.env.NEXT_PUBLIC_VERSION // 版本号
+}
+
+module.exports = BLOG

components/AOSAnimation.js

@@ -0,0 +1,12 @@
+import AOS from 'aos'
+import { isBrowser } from 'react-notion-x'
+
+/**
+ * 加载滚动动画
+ * https://michalsnik.github.io/aos/
+ */
+export default function AOSAnimation() {
+  if (isBrowser) {
+    AOS.init()
+  }
+}

components/Ackee.js

@@ -0,0 +1,85 @@
+'use strict'
+
+import { useEffect } from 'react'
+import { loadExternalResource } from '@/lib/utils'
+import { useRouter } from 'next/router'
+import { siteConfig } from '@/lib/config'
+const Ackee = () => {
+  const router = useRouter()
+  const server = siteConfig('ANALYTICS_ACKEE_DATA_SERVER')
+  const domainId = siteConfig('ANALYTICS_ACKEE_DOMAIN_ID')
+
+  // 或者使用其他依赖数组，根据需要执行 handleAckee
+  useEffect(() => {
+    handleAckeeCallback()
+  }, [router])
+
+  // handleAckee 函数
+  const handleAckeeCallback = () => {
+    handleAckee(
+      router.asPath,
+      {
+        server: server,
+        domainId: domainId
+      },
+      {
+        /*
+                 * Enable or disable tracking of personal data.
+                 * We recommend to ask the user for permission before turning this option on.
+                 */
+        detailed: true,
+        /*
+                * Enable or disable tracking when on localhost.
+                */
+        ignoreLocalhost: false,
+        /*
+                * Enable or disable the tracking of your own visits.
+                * This is enabled by default, but should be turned off when using a wildcard Access-Control-Allow-Origin header.
+                * Some browsers strictly block third-party cookies. The option won't have an impact when this is the case.
+                */
+        ignoreOwnVisits: false
+      }
+    )
+  }
+
+  return null
+}
+
+export default Ackee
+
+/**
+ * Function to use Ackee.
+ * Creates an instance once and a new record every time the pathname changes.
+ * Safely no-ops during server-side rendering.
+ * @param {?String} pathname - Current path.
+ * @param {Object} environment - Object containing the URL of the Ackee server and the domain id.
+ * @param {?Object} options - Ackee options.
+ */
+const handleAckee = async function (pathname, environment, options = {}) {
+  await loadExternalResource(siteConfig('ANALYTICS_ACKEE_TRACKER'), 'js')
+  const ackeeTracker = window.ackeeTracker
+
+  const instance = ackeeTracker?.create(environment.server, options)
+
+  if (instance == null) {
+    console.warn('Skipped record creation because useAckee has been called in a non-browser environment')
+    return
+  }
+
+  const hasPathname = (
+    pathname != null && pathname !== ''
+  )
+
+  if (hasPathname === false) {
+    console.warn('Skipped record creation because useAckee has been called without pathname')
+    return
+  }
+
+  const attributes = ackeeTracker?.attributes(options.detailed)
+  const url = new URL(pathname, location)
+
+  return instance.record(environment.domainId, {
+    ...attributes,
+    siteLocation: url.href
+  }).stop
+}

components/AdBlockDetect.js

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+
+/**
+ * 检测广告插件
+ * @returns
+ */
+export default function AdBlockDetect() {
+  useEffect(() => {
+    // 如果检测到广告屏蔽插件
+    function ABDetected() {
+      if (!document) {
+        return
+      }
+      const wwadsCns = document.getElementsByClassName('wwads-cn')
+      if (wwadsCns && wwadsCns.length > 0) {
+        for (const wwadsCn of wwadsCns) {
+          wwadsCn.insertAdjacentHTML('beforeend', "<style>.wwads-horizontal,.wwads-vertical{background-color:#f4f8fa;padding:5px;min-height:120px;margin-top:20px;box-sizing:border-box;border-radius:3px;font-family:sans-serif;display:flex;min-width:150px;position:relative;overflow:hidden;}.wwads-horizontal{flex-wrap:wrap;justify-content:center}.wwads-vertical{flex-direction:column;align-items:center;padding-bottom:32px}.wwads-horizontal a,.wwads-vertical a{text-decoration:none}.wwads-horizontal .wwads-img,.wwads-vertical .wwads-img{margin:5px}.wwads-horizontal .wwads-content,.wwads-vertical .wwads-content{margin:5px}.wwads-horizontal .wwads-content{flex:130px}.wwads-vertical .wwads-content{margin-top:10px}.wwads-horizontal .wwads-text,.wwads-content .wwads-text{font-size:14px;line-height:1.4;color:#0e1011;-webkit-font-smoothing:antialiased}.wwads-horizontal .wwads-poweredby,.wwads-vertical .wwads-poweredby{display:block;font-size:11px;color:#a6b7bf;margin-top:1em}.wwads-vertical .wwads-poweredby{position:absolute;left:10px;bottom:10px}.wwads-horizontal .wwads-poweredby span,.wwads-vertical .wwads-poweredby span{transition:all 0.2s ease-in-out;margin-left:-1em}.wwads-horizontal .wwads-poweredby span:first-child,.wwads-vertical .wwads-poweredby span:first-child{opacity:0}.wwads-horizontal:hover .wwads-poweredby span,.wwads-vertical:hover .wwads-poweredby span{opacity:1;margin-left:0}.wwads-horizontal .wwads-hide,.wwads-vertical .wwads-hide{position:absolute;right:-23px;bottom:-23px;width:46px;height:46px;border-radius:23px;transition:all 0.3s ease-in-out;cursor:pointer;}.wwads-horizontal .wwads-hide:hover,.wwads-vertical .wwads-hide:hover{background:rgb(0 0 0 /0.05)}.wwads-horizontal .wwads-hide svg,.wwads-vertical .wwads-hide svg{position:absolute;left:10px;top:10px;fill:#a6b7bf}.wwads-horizontal .wwads-hide:hover svg,.wwads-vertical .wwads-hide:hover svg{fill:#3E4546}</style><a href='https://wwads.cn/page/whitelist-wwads' class='wwads-img' target='_blank' rel='nofollow'><img src='https://creatives-1301677708.file.myqcloud.com/images/placeholder/wwads-friendly-ads.png' width='130'></a><div class='wwads-content'><a href='https://wwads.cn/page/whitelist-wwads' class='wwads-text' target='_blank' rel='nofollow'>为了本站的长期运营，请将我们的网站加入广告拦截器的白名单，感谢您的支持！</a><a href='https://wwads.cn/page/end-user-privacy' class='wwads-poweredby' title='万维广告 ～ 让广告更优雅，且有用' target='_blank'><span>万维</span><span>广告</span></a></div><a class='wwads-hide' onclick='parentNode.remove()' title='隐藏广告'><svg xmlns='http://www.w3.org/2000/svg' width='6' height='7'><path d='M.879.672L3 2.793 5.121.672a.5.5 0 11.707.707L3.708 3.5l2.12 2.121a.5.5 0 11-.707.707l-2.12-2.12-2.122 2.12a.5.5 0 11-.707-.707l2.121-2.12L.172 1.378A.5.5 0 01.879.672z'></path></svg></a>")
+        }
+      }
+    };
+
+    // check document ready
+    function docReady(t) {
+      document.readyState === 'complete' ||
+      document.readyState === 'interactive'
+        ? setTimeout(t, 1)
+        : document.addEventListener('DOMContentLoaded', t)
+    }
+
+    // check if wwads' fire function was blocked after document is ready with 3s timeout (waiting the ad loading)
+    docReady(function () {
+      setTimeout(function () {
+        if (window._AdBlockInit === undefined) {
+          ABDetected()
+        }
+      }, 3000)
+    })
+  }, [])
+  return null
+}

components/AlgoliaSearchModal.js

@@ -0,0 +1,230 @@
+import { useState, useImperativeHandle, useRef } from 'react'
+import algoliasearch from 'algoliasearch'
+import replaceSearchResult from '@/components/Mark'
+import Link from 'next/link'
+import { useGlobal } from '@/lib/global'
+import throttle from 'lodash/throttle'
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 结合 Algolia 实现的弹出式搜索框
+ * 打开方式 cRef.current.openSearch()
+ * https://www.algolia.com/doc/api-reference/search-api-parameters/
+ */
+export default function AlgoliaSearchModal({ cRef }) {
+  const [searchResults, setSearchResults] = useState([])
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [page, setPage] = useState(0)
+  const [keyword, setKeyword] = useState(null)
+  const [totalPage, setTotalPage] = useState(0)
+  const [totalHit, setTotalHit] = useState(0)
+  const [useTime, setUseTime] = useState(0)
+
+  /**
+     * 对外暴露方法
+     */
+  useImperativeHandle(cRef, () => {
+    return {
+      openSearch: () => {
+        setIsModalOpen(true)
+      }
+    }
+  })
+
+  const client = algoliasearch(siteConfig('ALGOLIA_APP_ID'), siteConfig('ALGOLIA_SEARCH_ONLY_APP_KEY'))
+  const index = client.initIndex(siteConfig('ALGOLIA_INDEX'))
+
+  /**
+   * 搜索
+   * @param {*} query
+   */
+  const handleSearch = async (query, page) => {
+    setKeyword(query)
+    setPage(page)
+    setSearchResults([])
+    setUseTime(0)
+    setTotalPage(0)
+    setTotalHit(0)
+    if (!query || query === '') {
+      return
+    }
+
+    try {
+      const res = await index.search(query, { page, hitsPerPage: 10 })
+      const { hits, nbHits, nbPages, processingTimeMS } = res
+      setUseTime(processingTimeMS)
+      setTotalPage(nbPages)
+      setTotalHit(nbHits)
+      setSearchResults(hits)
+
+      const doms = document.getElementById('search-wrapper').getElementsByClassName('replace')
+
+      setTimeout(() => {
+        replaceSearchResult({
+          doms,
+          search: query,
+          target: {
+            element: 'span',
+            className: 'text-blue-600 border-b border-dashed'
+          }
+        })
+      }, 150)
+    } catch (error) {
+      console.error('Algolia search error:', error)
+    }
+  }
+
+  const throttledHandleSearch = useRef(throttle(handleSearch, 300)) // 设置节流延迟时间
+
+  // 修改input的onChange事件处理函数
+  const handleInputChange = (e) => {
+    const query = e.target.value
+    throttledHandleSearch.current(query, 0)
+  }
+
+  /**
+   * 切换页码
+   * @param {*} page
+   */
+  const switchPage = (page) => {
+    throttledHandleSearch.current(keyword, page)
+  }
+
+  /**
+   * 关闭弹窗
+   */
+  const closeModal = () => {
+    setIsModalOpen(false)
+  }
+
+  if (!siteConfig('ALGOLIA_APP_ID')) {
+    return <></>
+  }
+
+  return (
+    <div
+      id="search-wrapper"
+      className={`${
+        isModalOpen ? 'opacity-100' : 'invisible opacity-0 pointer-events-none'
+      } z-30 fixed h-screen w-screen left-0 top-0 mt-12 flex items-start justify-center`}
+    >
+      {/* 模态框 */}
+      <div
+        className={`${
+          isModalOpen ? 'opacity-100' : 'invisible opacity-0 translate-y-10'
+        } flex flex-col justify-between w-full min-h-[10rem] max-w-xl dark:bg-hexo-black-gray dark:border-gray-800 bg-white dark:bg- p-5 rounded-lg z-50 shadow border hover:border-blue-600 duration-300 transition-all `}
+      >
+        <div className="flex justify-between items-center">
+          <div className="text-2xl text-blue-600 font-bold">搜索</div>
+          <div>
+            <i
+              className="text-gray-600 fa-solid fa-xmark p-1 cursor-pointer hover:text-blue-600"
+              onClick={closeModal}
+            ></i>
+          </div>
+        </div>
+
+        <input
+          type="text"
+          placeholder="在这里输入搜索关键词..."
+          onChange={e => handleInputChange(e)}
+          className="text-black dark:text-gray-200 bg-gray-50 dark:bg-gray-600 outline-blue-500 w-full px-4 my-2 py-1 mb-4 border rounded-md"
+        />
+
+        {/* 标签组 */}
+        <div className="mb-4">
+          <TagGroups />
+        </div>
+
+        <ul>
+          {searchResults.map(result => (
+            <li key={result.objectID} className="replace my-2">
+              <a
+                href={`${siteConfig('SUB_PATH', '')}/${result.slug}`}
+                className="font-bold hover:text-blue-600 text-black dark:text-gray-200"
+              >
+                {result.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+
+        <Pagination totalPage={totalPage} page={page} switchPage={switchPage} />
+        <div>
+          {totalHit > 0 && (
+            <div>
+              共搜索到 {totalHit} 条结果，用时 {useTime} 毫秒
+            </div>
+          )}
+        </div>
+        <div className="text-gray-600 mt-2">
+          <span>
+            <i className="fa-brands fa-algolia"></i> Algolia 提供搜索服务
+          </span>{' '}
+        </div>
+      </div>
+
+      {/* 遮罩 */}
+      <div
+        onClick={closeModal}
+        className="z-30 fixed top-0 left-0 w-full h-full flex items-center justify-center glassmorphism"
+      />
+    </div>
+  )
+}
+
+/**
+ * 标签组
+ */
+function TagGroups(props) {
+  const { tagOptions } = useGlobal()
+  //  获取tagOptions数组前十个
+  const firstTenTags = tagOptions?.slice(0, 10)
+
+  return <div id='tags-group' className='dark:border-gray-700 space-y-2'>
+            {
+                firstTenTags?.map((tag, index) => {
+                  return <Link passHref
+                        key={index}
+                        href={`/tag/${encodeURIComponent(tag.name)}`}
+                        className={'cursor-pointer inline-block whitespace-nowrap'}>
+                        <div className={' flex items-center text-black dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-yellow-600 hover:scale-110 hover:text-white rounded-lg px-2 py-0.5 duration-150 transition-all'}>
+                            <div className='text-lg'>{tag.name} </div>{tag.count ? <sup className='relative ml-1'>{tag.count}</sup> : <></>}
+                        </div>
+
+                    </Link>
+                })
+            }
+        </div>
+}
+
+/**
+ * 分页
+ * @param {*} param0
+ */
+function Pagination(props) {
+  const { totalPage, page, switchPage } = props
+  if (totalPage <= 0) {
+    return <></>
+  }
+  const pagesElement = []
+
+  for (let i = 0; i < totalPage; i++) {
+    const selected = page === i
+    pagesElement.push(getPageElement(i, selected, switchPage))
+  }
+  return <div className='flex space-x-1 w-full justify-center py-1'>
+        {pagesElement.map(p => p)}
+  </div>
+}
+
+/**
+ * 获取分页按钮
+ * @param {*} i
+ * @param {*} selected
+ */
+function getPageElement(i, selected, switchPage) {
+  return <div onClick={() => switchPage(i)} className={`${selected ? 'font-bold text-white bg-blue-600 rounded' : 'hover:text-blue-600 hover:font-bold'} text-center cursor-pointer  w-6 h-6 `}>
+    {i + 1}
+  </div>
+}

components/Artalk.js

@@ -0,0 +1,37 @@
+import { siteConfig } from '@/lib/config'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+
+/**
+ * Artalk 自托管评论系统 @see https://artalk.js.org/
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const Artalk = ({ siteInfo }) => {
+  const artalkCss = siteConfig('COMMENT_ARTALK_CSS')
+  const artalkServer = siteConfig('COMMENT_ARTALK_SERVER')
+  const artalkLocale = siteConfig('LANG')
+  const site = siteConfig('TITLE')
+
+  useEffect(() => {
+    initArtalk()
+  }, [])
+
+  const initArtalk = async () => {
+    await loadExternalResource(artalkCss, 'css')
+    window?.Artalk?.init({
+      server: artalkServer, // 后端地址
+      el: '#artalk', // 容器元素
+      locale: artalkLocale,
+      //   pageKey: '/post/1', // 固定链接 (留空自动获取)
+      //   pageTitle: '关于引入 Artalk 的这档子事', // 页面标题 (留空自动获取)
+      site: site // 你的站点名
+    })
+  }
+  return (
+        <div id="artalk"></div>
+  )
+}
+
+export default Artalk

components/Busuanzi.js

@@ -0,0 +1,26 @@
+import busuanzi from '@/lib/busuanzi'
+import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'
+// import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+let path = ''
+
+export default function Busuanzi () {
+  const { theme } = useGlobal()
+  const router = useRouter()
+  router.events.on('routeChangeComplete', (url, option) => {
+    if (url !== path) {
+      path = url
+      busuanzi.fetch()
+    }
+  })
+
+  // 更换主题时更新
+  useEffect(() => {
+    if (theme) {
+      busuanzi.fetch()
+    }
+  }, [theme])
+  return null
+}

components/ChatBase.js

@@ -0,0 +1,19 @@
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 这是一个嵌入组件，可以在任意位置全屏显示您的chat-base对话框
+ * 暂时没有页面引用
+ * 因为您可以直接用内嵌网页的方式放入您的notion中 https://www.chatbase.co/chatbot-iframe/${siteConfig('CHATBASE_ID')}
+ */
+export default function ChatBase() {
+  if (!siteConfig('CHATBASE_ID')) {
+    return <></>
+  }
+
+  return <iframe
+        src={`https://www.chatbase.co/chatbot-iframe/${siteConfig('CHATBASE_ID')}`}
+        width="100%"
+        style={{ height: '100%', minHeight: '700px' }}
+        frameborder="0"
+    ></iframe>
+}

components/Collapse.js

@@ -0,0 +1,96 @@
+import { useEffect, useImperativeHandle, useRef } from 'react'
+
+/**
+ * 折叠面板组件，支持水平折叠、垂直折叠
+ * @param {type:['horizontal','vertical'],isOpen} props
+ * @returns
+ */
+const Collapse = props => {
+  const { collapseRef } = props
+  const ref = useRef(null)
+  const type = props.type || 'vertical'
+
+  useImperativeHandle(collapseRef, () => {
+    return {
+      /**
+       * 当子元素高度变化时，可调用此方法更新折叠组件的高度
+       * @param {*} param0
+       */
+      updateCollapseHeight: ({ height, increase }) => {
+        if (props.isOpen) {
+          ref.current.style.height = ref.current.scrollHeight
+          ref.current.style.height = 'auto'
+        }
+      }
+    }
+  })
+
+  /**
+     * 折叠
+     * @param {*} element
+     */
+  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)
+  }
+
+  useEffect(() => {
+    if (props.isOpen) {
+      expandSection(ref.current)
+    } else {
+      collapseSection(ref.current)
+    }
+    // 通知父组件高度变化
+    props?.onHeightChange && props.onHeightChange({ height: ref.current.scrollHeight, increase: props.isOpen })
+  }, [props.isOpen])
+
+  return (
+        <div ref={ref} style={type === 'vertical' ? { height: '0px', willChange: 'height' } : { width: '0px', willChange: 'width' }} className={`${props.className || ''} overflow-hidden duration-200 `}>
+            {props.children}
+        </div>
+  )
+}
+Collapse.defaultProps = { isOpen: false }
+
+export default Collapse

components/Comment.js

@@ -0,0 +1,138 @@
+import dynamic from 'next/dynamic'
+import Tabs from '@/components/Tabs'
+import { isBrowser, isSearchEngineBot } from '@/lib/utils'
+import { useRouter } from 'next/router'
+import Artalk from './Artalk'
+import { siteConfig } from '@/lib/config'
+
+const WalineComponent = dynamic(
+  () => {
+    return import('@/components/WalineComponent')
+  },
+  { ssr: false }
+)
+
+const CusdisComponent = dynamic(
+  () => {
+    return import('@/components/CusdisComponent')
+  },
+  { ssr: false }
+)
+
+const TwikooCompenent = dynamic(
+  () => {
+    return import('@/components/Twikoo')
+  },
+  { ssr: false }
+)
+
+const GitalkComponent = dynamic(
+  () => {
+    return import('@/components/Gitalk')
+  },
+  { ssr: false }
+)
+const UtterancesComponent = dynamic(
+  () => {
+    return import('@/components/Utterances')
+  },
+  { ssr: false }
+)
+const GiscusComponent = dynamic(
+  () => {
+    return import('@/components/Giscus')
+  },
+  { ssr: false }
+)
+const WebMentionComponent = dynamic(
+  () => {
+    return import('@/components/WebMention')
+  },
+  { ssr: false }
+)
+
+const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
+  ssr: false
+})
+
+/**
+ * 评论组件
+ * @param {*} param0
+ * @returns
+ */
+const Comment = ({ siteInfo, frontMatter, className }) => {
+  const router = useRouter()
+
+  const COMMENT_ARTALK_SERVER = siteConfig('COMMENT_ARTALK_SERVER')
+  const COMMENT_TWIKOO_ENV_ID = siteConfig('COMMENT_TWIKOO_ENV_ID')
+  const COMMENT_WALINE_SERVER_URL = siteConfig('COMMENT_WALINE_SERVER_URL')
+  const COMMENT_VALINE_APP_ID = siteConfig('COMMENT_VALINE_APP_ID')
+  const COMMENT_GISCUS_REPO = siteConfig('COMMENT_GISCUS_REPO')
+  const COMMENT_CUSDIS_APP_ID = siteConfig('COMMENT_CUSDIS_APP_ID')
+  const COMMENT_UTTERRANCES_REPO = siteConfig('COMMENT_UTTERRANCES_REPO')
+  const COMMENT_GITALK_CLIENT_ID = siteConfig('COMMENT_GITALK_CLIENT_ID')
+  const COMMENT_WEBMENTION_ENABLE = siteConfig('COMMENT_WEBMENTION_ENABLE')
+
+  if (isSearchEngineBot()) {
+    return null
+  }
+
+  // 当连接中有特殊参数时跳转到评论区
+  if (isBrowser && ('giscus' in router.query || router.query.target === 'comment')) {
+    setTimeout(() => {
+      const url = router.asPath.replace('?target=comment', '')
+      history.replaceState({}, '', url)
+      document?.getElementById('comment')?.scrollIntoView({ block: 'start', behavior: 'smooth' })
+    }, 1000)
+  }
+
+  if (!frontMatter) {
+    return <>Loading...</>
+  }
+
+  return (
+        <div key={frontMatter?.id} id='comment' className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}>
+            <Tabs>
+                {COMMENT_ARTALK_SERVER && (<div key='Artalk'>
+                    <Artalk />
+                </div>)}
+
+                {COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
+                    <TwikooCompenent />
+                </div>)}
+
+                {COMMENT_WALINE_SERVER_URL && (<div key='Waline'>
+                    <WalineComponent />
+                </div>)}
+
+                {COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
+                    <ValineComponent path={frontMatter.id} />
+                </div>)}
+
+                {COMMENT_GISCUS_REPO && (
+                    <div key="Giscus">
+                        <GiscusComponent className="px-2" />
+                    </div>
+                )}
+
+                {COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
+                    <CusdisComponent frontMatter={frontMatter} />
+                </div>)}
+
+                {COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
+                    <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
+                </div>)}
+
+                {COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
+                    <GitalkComponent frontMatter={frontMatter} />
+                </div>)}
+
+                {COMMENT_WEBMENTION_ENABLE && (<div key='WebMention'>
+                    <WebMentionComponent frontMatter={frontMatter} className="px-2" />
+                </div>)}
+            </Tabs>
+        </div>
+  )
+}
+
+export default Comment

components/CusdisComponent.js

@@ -0,0 +1,37 @@
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { loadExternalResource } from '@/lib/utils'
+import { siteConfig } from '@/lib/config'
+
+const CusdisComponent = ({ frontMatter }) => {
+  const router = useRouter()
+  const { isDarkMode, lang } = useGlobal()
+  const src = siteConfig('COMMENT_CUSDIS_SCRIPT_SRC')
+  const i18nForCusdis = siteConfig('LANG').toLowerCase().indexOf('zh') === 0 ? siteConfig('LANG').toLowerCase() : siteConfig('LANG').toLowerCase().substring(0, 2)
+  const langCDN = siteConfig('COMMENT_CUSDIS_LANG_SRC', `https://cusdis.com/js/widget/lang/${i18nForCusdis}.js`)
+
+  //   处理cusdis主题
+  useEffect(() => {
+    loadCusdis()
+  }, [isDarkMode, lang])
+
+  const loadCusdis = async () => {
+    await loadExternalResource(langCDN, 'js')
+    await loadExternalResource(src, 'js')
+
+    window?.CUSDIS?.initial()
+  }
+
+  return <div id="cusdis_thread"
+        lang={lang.toLowerCase()}
+        data-host={siteConfig('COMMENT_CUSDIS_HOST')}
+        data-app-id={siteConfig('COMMENT_CUSDIS_APP_ID')}
+        data-page-id={frontMatter.id}
+        data-page-url={siteConfig('LINK') + router.asPath}
+        data-page-title={frontMatter.title}
+        data-theme={isDarkMode ? 'dark' : 'light'}
+    ></div>
+}
+
+export default CusdisComponent

components/CustomContextMenu.js

@@ -0,0 +1,204 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState, useRef, useLayoutEffect } from 'react'
+import { useGlobal } from '@/lib/global'
+import { saveDarkModeToCookies, THEMES } from '@/themes/theme'
+import useWindowSize from '@/hooks/useWindowSize'
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 自定义右键菜单
+ * @param {*} props
+ * @returns
+ */
+export default function CustomContextMenu(props) {
+  const [position, setPosition] = useState({ x: '0px', y: '0px' })
+  const [show, setShow] = useState(false)
+  const { isDarkMode, updateDarkMode, locale } = useGlobal()
+  const menuRef = useRef(null)
+  const windowSize = useWindowSize()
+  const [width, setWidth] = useState(0)
+  const [height, setHeight] = useState(0)
+
+  const { latestPosts } = props
+  const router = useRouter()
+  /**
+   * 随机跳转文章
+   */
+  function handleJumpToRandomPost() {
+    const randomIndex = Math.floor(Math.random() * latestPosts.length)
+    const randomPost = latestPosts[randomIndex]
+    router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
+  }
+
+  useLayoutEffect(() => {
+    setWidth(menuRef.current.offsetWidth)
+    setHeight(menuRef.current.offsetHeight)
+  }, [])
+
+  useEffect(() => {
+    const handleContextMenu = (event) => {
+      event.preventDefault()
+      // 计算点击位置加菜单宽高是否超出屏幕，如果超出则贴边弹出
+      const x = (event.clientX < windowSize.width - width) ? event.clientX : windowSize.width - width
+      const y = (event.clientY < windowSize.height - height) ? event.clientY : windowSize.height - height
+      setPosition({ y: `${y}px`, x: `${x}px` })
+      setShow(true)
+    }
+
+    const handleClick = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setShow(false)
+      }
+    }
+
+    window.addEventListener('contextmenu', handleContextMenu)
+    window.addEventListener('click', handleClick)
+
+    return () => {
+      window.removeEventListener('contextmenu', handleContextMenu)
+      window.removeEventListener('click', handleClick)
+    }
+  }, [windowSize])
+
+  function handleBack() {
+    window.history.back()
+  }
+
+  function handleForward() {
+    window.history.forward()
+  }
+
+  function handleRefresh() {
+    window.location.reload()
+  }
+
+  function handleScrollTop() {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+    setShow(false)
+  }
+
+  function handleCopyLink() {
+    const url = window.location.href
+    navigator.clipboard.writeText(url)
+      .then(() => {
+        console.log('页面地址已复制')
+      })
+      .catch((error) => {
+        console.error('复制页面地址失败:', error)
+      })
+    setShow(false)
+  }
+
+  /**
+  * 切换主题
+  */
+  function handleChangeTheme() {
+    const randomTheme = THEMES[Math.floor(Math.random() * THEMES.length)] // 从THEMES数组中 随机取一个主题
+    const query = router.query
+    query.theme = randomTheme
+    router.push({ pathname: router.pathname, query })
+  }
+
+  /**
+   * 复制内容
+   */
+  function handleCopy() {
+    const selectedText = document.getSelection().toString();
+    if (selectedText) {
+      const tempInput = document.createElement('input');
+      tempInput.value = selectedText;
+      document.body.appendChild(tempInput);
+      tempInput.select();
+      document.execCommand('copy');
+      document.body.removeChild(tempInput);
+      // alert("Text copied: " + selectedText);
+    } else {
+      // alert("Please select some text first.");
+    }
+
+    setShow(false)
+  }
+
+  function handleChangeDarkMode() {
+    const newStatus = !isDarkMode
+    saveDarkModeToCookies(newStatus)
+    updateDarkMode(newStatus)
+    const htmlElement = document.getElementsByTagName('html')[0]
+    htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
+    htmlElement.classList?.add(newStatus ? 'dark' : 'light')
+  }
+
+  return (
+        <div
+            ref={menuRef}
+            style={{ top: position.y, left: position.x }}
+            className={`${show ? '' : 'invisible opacity-0'} select-none transition-opacity duration-200 fixed z-50`}
+        >
+
+            {/* 菜单内容 */}
+            <div className='rounded-xl w-52 dark:hover:border-yellow-600 bg-white dark:bg-[#040404] dark:text-gray-200 dark:border-gray-600 p-3 border drop-shadow-lg flex-col duration-300 transition-colors'>
+                {/* 顶部导航按钮 */}
+                <div className='flex justify-between'>
+                    <i onClick={handleBack} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-left"></i>
+                    <i onClick={handleForward} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-right"></i>
+                    <i onClick={handleRefresh} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-rotate-right"></i>
+                    <i onClick={handleScrollTop} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-up"></i>
+                </div>
+
+                <hr className='my-2 border-dashed' />
+
+                {/* 跳转导航按钮 */}
+                <div className='w-full px-2'>
+
+                    <div onClick={handleJumpToRandomPost} title={locale.MENU.WALK_AROUND} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
+                        <i className="fa-solid fa-podcast mr-2" />
+                        <div className='whitespace-nowrap'>{locale.MENU.WALK_AROUND}</div>
+                    </div>
+
+                    <Link href='/category' title={locale.MENU.CATEGORY} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
+                        <i className="fa-solid fa-square-minus mr-2" />
+                        <div className='whitespace-nowrap'>{locale.MENU.CATEGORY}</div>
+                    </Link>
+
+                    <Link href='/tag' title={locale.MENU.TAGS} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
+                        <i className="fa-solid fa-tag mr-2" />
+                        <div className='whitespace-nowrap'>{locale.MENU.TAGS}</div>
+                    </Link>
+
+                </div>
+
+                <hr className='my-2 border-dashed' />
+
+                {/* 功能按钮 */}
+                <div className='w-full px-2'>
+
+                    {siteConfig('CAN_COPY') && (
+                         <div onClick={handleCopy} title={locale.MENU.COPY} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
+                         <i className="fa-solid fa-copy mr-2" />
+                         <div className='whitespace-nowrap'>{locale.MENU.COPY}</div>
+                     </div>
+                    )}
+
+                    <div onClick={handleCopyLink} title={locale.MENU.SHARE_URL} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
+                        <i className="fa-solid fa-arrow-up-right-from-square mr-2" />
+                        <div className='whitespace-nowrap'>{locale.MENU.SHARE_URL}</div>
+                    </div>
+
+                    <div onClick={handleChangeDarkMode} title={isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
+                        {isDarkMode ? <i className="fa-regular fa-sun mr-2" /> : <i className="fa-regular fa-moon mr-2" />}
+                        <div className='whitespace-nowrap'> {isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE}</div>
+                    </div>
+                    {siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH') && (
+                    <div onClick={handleChangeTheme} title={locale.MENU.THEME_SWITCH} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
+                        <i className="fa-solid fa-palette mr-2" />
+                        <div className='whitespace-nowrap'>{locale.MENU.THEME_SWITCH}</div>
+                    </div>
+                    )}
+
+                </div>
+
+            </div>
+        </div >
+  )
+}

components/DarkModeButton.js

@@ -0,0 +1,27 @@
+import { useGlobal } from '@/lib/global'
+import { Moon, Sun } from './HeroIcons'
+import { useImperativeHandle } from 'react'
+
+/**
+ * 深色模式按钮
+ */
+const DarkModeButton = (props) => {
+  const { cRef, className } = props
+  const { isDarkMode, toggleDarkMode } = useGlobal()
+
+  /**
+   * 对外暴露方法
+   */
+  useImperativeHandle(cRef, () => {
+    return {
+      handleChangeDarkMode: () => {
+        toggleDarkMode()
+      }
+    }
+  })
+
+  return <div onClick={toggleDarkMode} className={`${className || ''} flex justify-center dark:text-gray-200 text-gray-800`}>
+        <div id='darkModeButton' className=' hover:scale-110 cursor-pointer transform duration-200 w-5 h-5'> {isDarkMode ? <Sun /> : <Moon />}</div>
+    </div>
+}
+export default DarkModeButton

components/DebugPanel.js

@@ -0,0 +1,128 @@
+import { useEffect, useState } from 'react'
+import Select from './Select'
+import { useGlobal } from '@/lib/global'
+import { THEMES } from '@/themes/theme'
+import { useRouter } from 'next/router'
+import { siteConfigMap } from '@/lib/config'
+import { getQueryParam } from '@/lib/utils'
+
+/**
+ *
+ * @returns 调试面板
+ */
+const DebugPanel = () => {
+  const [show, setShow] = useState(false)
+  const { theme, switchTheme, locale } = useGlobal()
+  const router = useRouter()
+  const currentTheme = getQueryParam(router.asPath, 'theme') || theme
+  const [siteConfig, updateSiteConfig] = useState({})
+
+  // 主题下拉框
+  const themeOptions = THEMES?.map(t => ({ value: t, text: t }))
+
+  useEffect(() => {
+    updateSiteConfig(Object.assign({}, siteConfigMap()))
+  }, [])
+
+  function toggleShow() {
+    setShow(!show)
+  }
+
+  function handleChangeDebugTheme() {
+    switchTheme()
+  }
+
+  function handleUpdateDebugTheme(newTheme) {
+    const query = { ...router.query, theme: newTheme }
+    router.push({ pathname: router.pathname, query })
+  }
+
+  function filterResult(text) {
+    switch (text) {
+      case 'true':
+        return <span className='text-green-500'>true</span>
+      case 'false':
+        return <span className='text-red-500'>false</span>
+      case '':
+        return '-'
+    }
+    return text
+  }
+
+  return (
+        <>
+            {/* 调试按钮 */}
+            <div>
+                <div
+                    style={{ writingMode: 'vertical-lr' }}
+                    className={`bg-black text-xs text-white shadow-2xl p-1.5 rounded-l-xl cursor-pointer ${show ? 'right-96' : 'right-0'} fixed bottom-72 duration-200 z-50`}
+                    onClick={toggleShow}
+                >
+                    {show
+                      ? <i className="fas fa-times">&nbsp;{locale.COMMON.DEBUG_CLOSE}</i>
+                      : <i className="fas fa-tools">&nbsp;{locale.COMMON.DEBUG_OPEN}</i>}
+                </div>
+            </div>
+
+            {/* 调试侧拉抽屉 */}
+            <div
+                className={` ${show ? 'shadow-card w-96 right-0 ' : '-right-96 invisible w-0'} overflow-y-scroll h-full p-5 bg-white fixed bottom-0 z-50 duration-200`}
+            >
+                <div className="flex justify-between space-x-1 my-5">
+                    <div className='flex'>
+                        <Select
+                            label={locale.COMMON.THEME_SWITCH}
+                            value={currentTheme}
+                            options={themeOptions}
+                            onChange={handleUpdateDebugTheme}
+                        />
+                        <div className="p-2 cursor-pointer" onClick={handleChangeDebugTheme}>
+                            <i className="fas fa-sync" />
+                        </div>
+                    </div>
+
+                    <div className='p-2'>
+                        <i className='fas fa-times' onClick={toggleShow}/>
+                    </div>
+                </div>
+
+                <div>
+                    {/* <div>
+                        <div className="font-bold w-18 border-b my-2">
+                            主题配置{`config_${debugTheme}.js`}:
+                        </div>
+                        <div className="text-xs">
+                            {Object.keys(themeConfig).map(k => (
+                                <div key={k} className="justify-between flex py-1">
+                                    <span className="bg-indigo-500 p-0.5 rounded text-white mr-2">
+                                        {k}
+                                    </span>
+                                    <span className="whitespace-nowrap">
+                                        {filterResult(themeConfig[k] + '')}
+                                    </span>
+                                </div>
+                            ))}
+                        </div>
+                    </div> */}
+                    <div className="font-bold w-18 border-b my-2">
+                        站点配置[blog.config.js]
+                    </div>
+                    <div className="text-xs">
+                        {siteConfig && Object.keys(siteConfig).map(k => (
+                            <div key={k} className="justify-between flex py-1">
+                                <span className="bg-blue-500 p-0.5 rounded text-white mr-2">
+                                    {k}
+                                </span>
+                                <span className="whitespace-nowrap">
+                                    {filterResult(siteConfig[k] + '')}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+            </div>
+        </>
+  )
+}
+export default DebugPanel

components/DifyChatbot.js

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { siteConfig } from '@/lib/config';
+
+export default function DifyChatbot() {
+  useEffect(() => {
+    // 这里使用 siteConfig() 函数调用来获取配置值
+    if (!siteConfig('DIFY_CHATBOT_ENABLED')) {
+      return;
+    }
+
+    // 配置 DifyChatbot，同样需要调用 siteConfig() 获取相应的配置值
+    window.difyChatbotConfig = {
+      token: siteConfig('DIFY_CHATBOT_TOKEN'),
+      baseUrl: siteConfig('DIFY_CHATBOT_BASE_URL')
+    };
+
+    // 加载 DifyChatbot 脚本
+    const script = document.createElement('script');
+    script.src = `${siteConfig('DIFY_CHATBOT_BASE_URL')}/embed.min.js`; // 注意调用 siteConfig()
+    script.id = siteConfig('DIFY_CHATBOT_TOKEN'); // 注意调用 siteConfig()
+    script.defer = true;
+    document.body.appendChild(script);
+
+    return () => {
+      // 在组件卸载时清理 script 标签
+      const existingScript = document.getElementById(siteConfig('DIFY_CHATBOT_TOKEN')); // 注意调用 siteConfig()
+      if (existingScript) document.body.removeChild(existingScript);
+    };
+  }, []); // 注意依赖数组为空，意味着脚本将仅在加载页面时执行一次
+
+  return null;
+}

components/DisableCopy.js

@@ -0,0 +1,21 @@
+import { siteConfig } from '@/lib/config'
+import { useEffect } from 'react'
+
+/**
+ * 禁止用户拷贝文章的插件
+ */
+export default function DisableCopy() {
+  useEffect(() => {
+    if (!JSON.parse(siteConfig('CAN_COPY'))) {
+      // 全栈添加禁止复制的样式
+      document.getElementsByTagName('html')[0].classList.add('forbid-copy')
+      // 监听复制事件
+      document.addEventListener('copy', function (event) {
+        event.preventDefault() // 阻止默认复制行为
+        alert('抱歉，本网页内容不可复制！')
+      })
+    }
+  }, [])
+
+  return null
+}

components/Draggable.js

@@ -0,0 +1,150 @@
+import { useRef, useEffect, useState } from 'react'
+/**
+ * 可拖拽组件
+ */
+
+export const Draggable = (props) => {
+  const { children } = props
+  const draggableRef = useRef(null)
+  const rafRef = useRef(null)
+  const [moving, setMoving] = useState(false)
+  let currentObj, offsetX, offsetY
+
+  useEffect(() => {
+    const draggableElements = document.getElementsByClassName('draggable')
+
+    // 标准化鼠标事件对象
+    function e(event) { // 定义事件对象标准化函数
+      if (!event) { // 兼容IE浏览器
+        event = window.event
+        event.target = event.srcElement
+        event.layerX = event.offsetX
+        event.layerY = event.offsetY
+      }
+      // 移动端
+      if (event.type === 'touchstart' || event.type === 'touchmove') {
+        event.clientX = event.touches[0].clientX
+        event.clientY = event.touches[0].clientY
+      }
+
+      event.mx = event.pageX || event.clientX + document.body.scrollLeft
+      // 计算鼠标指针的x轴距离
+      event.my = event.pageY || event.clientY + document.body.scrollTop
+      // 计算鼠标指针的y轴距离
+
+      return event // 返回标准化的事件对象
+    }
+
+    // 定义鼠标事件处理函数
+    // document.pointerdown = start
+    document.onmousedown = start
+    document.ontouchstart = start
+
+    function start (event) { // 按下鼠标时，初始化处理
+      if (!draggableElements) return
+      event = e(event)// 获取标准事件对象
+
+      for (const drag of draggableElements) {
+        // 判断鼠标点击的区域是否是拖拽框内
+        if (inDragBox(event, drag)) {
+          currentObj = drag.firstElementChild
+        }
+      }
+      if (currentObj) {
+        if (event.type === 'touchstart') {
+          event.preventDefault() // 阻止默认的滚动行为
+          document.documentElement.style.overflow = 'hidden' // 防止页面一起滚动
+        }
+
+        setMoving(true)
+        offsetX = event.mx - currentObj.offsetLeft
+        offsetY = event.my - currentObj.offsetTop
+
+        document.onmousemove = move// 注册鼠标移动事件处理函数
+        document.ontouchmove = move
+        document.onmouseup = stop// 注册松开鼠标事件处理函数
+        document.ontouchend = stop
+      }
+    }
+
+    function move(event) { // 鼠标移动处理函数
+      event = e(event)
+      rafRef.current = requestAnimationFrame(() => updatePosition(event))
+    }
+
+    const stop = (event) => {
+      event = e(event)
+      document.documentElement.style.overflow = 'auto' // 恢复默认的滚动行为
+      cancelAnimationFrame(rafRef.current)
+      setMoving(false)
+      currentObj = document.ontouchmove = document.ontouchend = document.onmousemove = document.onmouseup = null
+    }
+
+    const updatePosition = (event) => {
+      if (currentObj) {
+        const left = event.mx - offsetX
+        const top = event.my - offsetY
+        currentObj.style.left = left + 'px'
+        currentObj.style.top = top + 'px'
+        checkInWindow()
+      }
+    }
+
+    /**
+     * 鼠标是否在可拖拽区域内
+     * @param {*} event
+     * @returns
+     */
+    function inDragBox(event, drag) {
+      const { clientX, clientY } = event // 鼠标位置
+      const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = drag.firstElementChild // 窗口位置
+      const horizontal = clientX > offsetLeft && clientX < offsetLeft + offsetWidth
+      const vertical = clientY > offsetTop && clientY < offsetTop + offsetHeight
+
+      if (horizontal && vertical) {
+        return true
+      }
+
+      return false
+    }
+
+    /**
+     * 若超出窗口则吸附。
+     */
+    function checkInWindow() {
+      // 检查是否悬浮在窗口内
+      for (const drag of draggableElements) {
+        // 判断鼠标点击的区域是否是拖拽框内
+        const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = drag.firstElementChild
+        const { clientHeight, clientWidth } = document.documentElement
+        if (offsetTop < 0) {
+          drag.firstElementChild.style.top = 0
+        }
+        if (offsetTop > (clientHeight - offsetHeight)) {
+          drag.firstElementChild.style.top = clientHeight - offsetHeight + 'px'
+        }
+        if (offsetLeft < 0) {
+          drag.firstElementChild.style.left = 0
+        }
+        if (offsetLeft > (clientWidth - offsetWidth)) {
+          drag.firstElementChild.style.left = clientWidth - offsetWidth + 'px'
+        }
+      }
+    }
+
+    window.addEventListener('resize', checkInWindow)
+
+    return () => {
+      return () => {
+        window.removeEventListener('resize', checkInWindow)
+        cancelAnimationFrame(rafRef.current)
+      }
+    }
+  }, [])
+
+  return <div className={`draggable ${moving ? 'cursor-grabbing' : 'cursor-grab'} select-none`} ref={draggableRef}>
+     {children}
+  </div>
+}
+
+Draggable.defaultProps = { left: 0, top: 0 }

components/Equation.js

@@ -0,0 +1,29 @@
+import * as React from 'react'
+
+import Katex from '@/components/KatexReact'
+import { getBlockTitle } from 'notion-utils'
+
+const katexSettings = {
+  throwOnError: false,
+  strict: false
+}
+
+/**
+ * 数学公式
+ * @param {} param0
+ * @returns
+ */
+export const Equation = ({ block, math, inline = false, className, ...rest }) => {
+  math = math || getBlockTitle(block, null)
+  if (!math) return null
+
+  return (
+    <span
+      role='button'
+      tabIndex={0}
+      className={`notion-equation ${inline ? 'notion-equation-inline' : 'notion-equation-block'}`}
+    >
+      <Katex math={math} settings={katexSettings} {...rest} />
+    </span>
+  )
+}

components/ExternalPlugins.js

@@ -0,0 +1,290 @@
+import { siteConfig } from '@/lib/config'
+import dynamic from 'next/dynamic'
+import LA51 from './LA51'
+import WebWhiz from './Webwhiz'
+import TianLiGPT from './TianliGPT'
+import { GlobalStyle } from './GlobalStyle'
+
+import { CUSTOM_EXTERNAL_CSS, CUSTOM_EXTERNAL_JS, IMG_SHADOW } from '@/blog.config'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
+
+const TwikooCommentCounter = dynamic(() => import('@/components/TwikooCommentCounter'), { ssr: false })
+const DebugPanel = dynamic(() => import('@/components/DebugPanel'), { ssr: false })
+const ThemeSwitch = dynamic(() => import('@/components/ThemeSwitch'), { ssr: false })
+const Fireworks = dynamic(() => import('@/components/Fireworks'), { ssr: false })
+const Nest = dynamic(() => import('@/components/Nest'), { ssr: false })
+const FlutteringRibbon = dynamic(() => import('@/components/FlutteringRibbon'), { ssr: false })
+const Ribbon = dynamic(() => import('@/components/Ribbon'), { ssr: false })
+const Sakura = dynamic(() => import('@/components/Sakura'), { ssr: false })
+const StarrySky = dynamic(() => import('@/components/StarrySky'), { ssr: false })
+const DifyChatbot = dynamic(() => import('@/components/DifyChatbot'), { ssr: false });
+const Analytics = dynamic(() => import('@vercel/analytics/react').then(async (m) => { return m.Analytics }), { ssr: false })
+const MusicPlayer = dynamic(() => import('@/components/Player'), { ssr: false })
+const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
+const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
+const Busuanzi = dynamic(() => import('@/components/Busuanzi'), { ssr: false })
+const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr: false })
+const Messenger = dynamic(() => import('@/components/FacebookMessenger'), { ssr: false })
+const VConsole = dynamic(() => import('@/components/VConsole'), { ssr: false })
+const CustomContextMenu = dynamic(() => import('@/components/CustomContextMenu'), { ssr: false })
+const DisableCopy = dynamic(() => import('@/components/DisableCopy'), { ssr: false })
+const AdBlockDetect = dynamic(() => import('@/components/AdBlockDetect'), { ssr: false })
+const LoadingProgress = dynamic(() => import('@/components/LoadingProgress'), { ssr: false })
+const AosAnimation = dynamic(() => import('@/components/AOSAnimation'), { ssr: false })
+
+/**
+ * 各种插件脚本
+ * @param {*} props
+ * @returns
+ */
+const ExternalPlugin = (props) => {
+  const DISABLE_PLUGIN = siteConfig('DISABLE_PLUGIN')
+  const THEME_SWITCH = siteConfig('THEME_SWITCH')
+  const DEBUG = siteConfig('DEBUG')
+  const ANALYTICS_ACKEE_TRACKER = siteConfig('ANALYTICS_ACKEE_TRACKER')
+  const ANALYTICS_VERCEL = siteConfig('ANALYTICS_VERCEL')
+  const ANALYTICS_BUSUANZI_ENABLE = siteConfig('ANALYTICS_BUSUANZI_ENABLE')
+  const ADSENSE_GOOGLE_ID = siteConfig('ADSENSE_GOOGLE_ID')
+  const FACEBOOK_APP_ID = siteConfig('FACEBOOK_APP_ID')
+  const FACEBOOK_PAGE_ID = siteConfig('FACEBOOK_PAGE_ID')
+  const FIREWORKS = siteConfig('FIREWORKS')
+  const SAKURA = siteConfig('SAKURA')
+  const STARRY_SKY = siteConfig('STARRY_SKY')
+  const MUSIC_PLAYER = siteConfig('MUSIC_PLAYER')
+  const NEST = siteConfig('NEST')
+  const FLUTTERINGRIBBON = siteConfig('FLUTTERINGRIBBON')
+  const COMMENT_TWIKOO_COUNT_ENABLE = siteConfig('COMMENT_TWIKOO_COUNT_ENABLE')
+  const RIBBON = siteConfig('RIBBON')
+  const CUSTOM_RIGHT_CLICK_CONTEXT_MENU = siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU')
+  const CAN_COPY = siteConfig('CAN_COPY')
+  const WEB_WHIZ_ENABLED = siteConfig('WEB_WHIZ_ENABLED')
+  const AD_WWADS_BLOCK_DETECT = siteConfig('AD_WWADS_BLOCK_DETECT')
+  const CHATBASE_ID = siteConfig('CHATBASE_ID')
+  const COMMENT_DAO_VOICE_ID = siteConfig('COMMENT_DAO_VOICE_ID')
+  const AD_WWADS_ID = siteConfig('AD_WWADS_ID')
+  const COMMENT_TWIKOO_ENV_ID = siteConfig('COMMENT_TWIKOO_ENV_ID')
+  const COMMENT_TWIKOO_CDN_URL = siteConfig('COMMENT_TWIKOO_CDN_URL')
+  const COMMENT_ARTALK_SERVER = siteConfig('COMMENT_ARTALK_SERVER')
+  const COMMENT_ARTALK_JS = siteConfig('COMMENT_ARTALK_JS')
+  const COMMENT_TIDIO_ID = siteConfig('COMMENT_TIDIO_ID')
+  const COMMENT_GITTER_ROOM = siteConfig('COMMENT_GITTER_ROOM')
+  const ANALYTICS_BAIDU_ID = siteConfig('ANALYTICS_BAIDU_ID')
+  const ANALYTICS_CNZZ_ID = siteConfig('ANALYTICS_CNZZ_ID')
+  const ANALYTICS_GOOGLE_ID = siteConfig('ANALYTICS_GOOGLE_ID')
+  const MATOMO_HOST_URL = siteConfig('MATOMO_HOST_URL')
+  const MATOMO_SITE_ID = siteConfig('MATOMO_SITE_ID')
+  const ANALYTICS_51LA_ID = siteConfig('ANALYTICS_51LA_ID')
+  const ANALYTICS_51LA_CK = siteConfig('ANALYTICS_51LA_CK')
+  const DIFY_CHATBOT_ENABLED = siteConfig('DIFY_CHATBOT_ENABLED')
+  const TIANLI_KEY = siteConfig('TianliGPT_KEY')
+  const GLOBAL_JS = siteConfig('GLOBAL_JS')
+  const CLARITY_ID = siteConfig('CLARITY_ID')
+
+  // 自定义样式css和js引入
+  if (isBrowser) {
+    // 初始化AOS动画
+    // 静态导入本地自定义样式
+    loadExternalResource('/css/custom.css', 'css')
+    loadExternalResource('/js/custom.js', 'js')
+
+    // 自动添加图片阴影
+    if (IMG_SHADOW) {
+      loadExternalResource('/css/img-shadow.css', 'css')
+    }
+
+    // 导入外部自定义脚本
+    if (CUSTOM_EXTERNAL_JS && CUSTOM_EXTERNAL_JS.length > 0) {
+      for (const url of CUSTOM_EXTERNAL_JS) {
+        loadExternalResource(url, 'js')
+      }
+    }
+
+    // 导入外部自定义样式
+    if (CUSTOM_EXTERNAL_CSS && CUSTOM_EXTERNAL_CSS.length > 0) {
+      for (const url of CUSTOM_EXTERNAL_CSS) {
+        loadExternalResource(url, 'css')
+      }
+    }
+  }
+
+  if (DISABLE_PLUGIN) {
+    return null
+  }
+
+  return <>
+
+        {/* 全局样式嵌入 */}
+        <GlobalStyle/>
+
+        {THEME_SWITCH && <ThemeSwitch />}
+        {DEBUG && <DebugPanel />}
+        {ANALYTICS_ACKEE_TRACKER && <Ackee />}
+        {ANALYTICS_GOOGLE_ID && <Gtag />}
+        {ANALYTICS_VERCEL && <Analytics />}
+        {ANALYTICS_BUSUANZI_ENABLE && <Busuanzi />}
+        {ADSENSE_GOOGLE_ID && <GoogleAdsense />}
+        {FACEBOOK_APP_ID && FACEBOOK_PAGE_ID && <Messenger />}
+        {FIREWORKS && <Fireworks />}
+        {SAKURA && <Sakura />}
+        {STARRY_SKY && <StarrySky />}
+        {MUSIC_PLAYER && <MusicPlayer />}
+        {NEST && <Nest />}
+        {FLUTTERINGRIBBON && <FlutteringRibbon />}
+        {COMMENT_TWIKOO_COUNT_ENABLE && <TwikooCommentCounter {...props} />}
+        {RIBBON && <Ribbon />}
+        {DIFY_CHATBOT_ENABLED && <DifyChatbot />}
+        {CUSTOM_RIGHT_CLICK_CONTEXT_MENU && <CustomContextMenu {...props} />}
+        {!CAN_COPY && <DisableCopy />}
+        {WEB_WHIZ_ENABLED && <WebWhiz />}
+        {AD_WWADS_BLOCK_DETECT && <AdBlockDetect />}
+        {TIANLI_KEY && <TianLiGPT/>}
+        <VConsole />
+        <LoadingProgress />
+        <AosAnimation />
+        {ANALYTICS_51LA_ID && ANALYTICS_51LA_CK && <LA51/>}
+
+        {ANALYTICS_51LA_ID && ANALYTICS_51LA_CK && (<>
+            <script id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js" defer/>
+            {/* <script async dangerouslySetInnerHTML={{
+              __html: `
+                    LA.init({id:"${ANALYTICS_51LA_ID}",ck:"${ANALYTICS_51LA_CK}",hashMode:true,autoTrack:true})
+                    `
+            }} /> */}
+        </>)}
+
+        {/* 注入JS脚本 */}
+        {GLOBAL_JS && <script async dangerouslySetInnerHTML={{
+          __html: GLOBAL_JS
+        }} />}
+
+        {CHATBASE_ID && (<>
+            <script id={CHATBASE_ID} src="https://www.chatbase.co/embed.min.js" defer />
+            <script async dangerouslySetInnerHTML={{
+              __html: `
+                    window.chatbaseConfig = {
+                        chatbotId: "${CHATBASE_ID}",
+                        }
+                    `
+            }} />
+        </>)}
+
+        {CLARITY_ID && (<>
+          <script async dangerouslySetInnerHTML={{
+            __html: `
+                (function(c,l,a,r,i,t,y){
+                    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+                    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+                    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+                })(window, document, "clarity", "script", "${CLARITY_ID}");
+                `
+          }} />
+        </>)}
+
+        {COMMENT_DAO_VOICE_ID && (<>
+            {/* DaoVoice 反馈 */}
+            <script async dangerouslySetInnerHTML={{
+              __html: `
+              (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/daf1a94b.js","daovoice")
+              `
+            }}
+            />
+            <script async dangerouslySetInnerHTML={{
+              __html: `
+             daovoice('init', {
+                app_id: "${COMMENT_DAO_VOICE_ID}"
+              });
+              daovoice('update');
+              `
+            }}
+            />
+        </>)}
+
+        {AD_WWADS_ID && <script type="text/javascript" src="https://cdn.wwads.cn/js/makemoney.js" async></script>}
+
+        {COMMENT_TWIKOO_ENV_ID && <script defer src={COMMENT_TWIKOO_CDN_URL} />}
+
+        {COMMENT_ARTALK_SERVER && <script defer src={COMMENT_ARTALK_JS} />}
+
+        {COMMENT_TIDIO_ID && <script async src={`//code.tidio.co/${COMMENT_TIDIO_ID}.js`} />}
+
+        {/* gitter聊天室 */}
+        {COMMENT_GITTER_ROOM && (<>
+            <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer />
+            <script async dangerouslySetInnerHTML={{
+              __html: `
+            ((window.gitter = {}).chat = {}).options = {
+              room: '${COMMENT_GITTER_ROOM}'
+            };
+            `
+            }} />
+        </>)}
+
+        {/* 百度统计 */}
+        {ANALYTICS_BAIDU_ID && (
+            <script async
+                dangerouslySetInnerHTML={{
+                  __html: `
+          var _hmt = _hmt || [];
+          (function() {
+            var hm = document.createElement("script");
+            hm.src = "https://hm.baidu.com/hm.js?${ANALYTICS_BAIDU_ID}";
+            var s = document.getElementsByTagName("script")[0]; 
+            s.parentNode.insertBefore(hm, s);
+          })();
+          `
+                }}
+            />
+        )}
+
+        {/* 站长统计 */}
+        {ANALYTICS_CNZZ_ID && (
+            <script async
+                dangerouslySetInnerHTML={{
+                  __html: `
+          document.write(unescape("%3Cspan style='display:none' id='cnzz_stat_icon_${ANALYTICS_CNZZ_ID}'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D${ANALYTICS_CNZZ_ID}' type='text/javascript'%3E%3C/script%3E"));
+          `
+                }}
+            />
+        )}
+
+        {/* 谷歌统计 */}
+        {ANALYTICS_GOOGLE_ID && (<>
+            <script async
+                src={`https://www.googletagmanager.com/gtag/js?id=${ANALYTICS_GOOGLE_ID}`}
+            />
+            <script async
+                dangerouslySetInnerHTML={{
+                  __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', '${ANALYTICS_GOOGLE_ID}', {
+                  page_path: window.location.pathname,
+                });
+              `
+                }}
+            />
+        </>)}
+
+        {/* Matomo 统计 */}
+        {MATOMO_HOST_URL && MATOMO_SITE_ID && (
+            <script async dangerouslySetInnerHTML={{
+              __html: `
+              var _paq = window._paq = window._paq || [];
+              _paq.push(['trackPageView']);
+              _paq.push(['enableLinkTracking']);
+              (function() {
+                var u="//${MATOMO_HOST_URL}/";
+                _paq.push(['setTrackerUrl', u+'matomo.php']);
+                _paq.push(['setSiteId', '${MATOMO_SITE_ID}']);
+                var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+              })();
+            `
+            }} />
+        )}
+
+    </>
+}
+
+export default ExternalPlugin

components/ExternalScript.js

@@ -0,0 +1,29 @@
+'use client'
+
+import { isBrowser } from '@/lib/utils'
+
+/**
+ * 自定义外部 script
+ * 传入参数将转为 <script>标签。
+ * @returns
+ */
+const ExternalScript = (props) => {
+  const { src } = props
+  if (!isBrowser || !src) {
+    return null
+  }
+
+  const element = document.querySelector(`script[src="${src}"]`)
+  if (element) {
+    return null
+  }
+  const script = document.createElement('script')
+  Object.entries(props).forEach(([key, value]) => {
+    script.setAttribute(key, value)
+  })
+  document.head.appendChild(script)
+  console.log('加载外部脚本', props, script)
+  return null
+}
+
+export default ExternalScript

components/FacebookMessenger.js

@@ -0,0 +1,282 @@
+import { Component, useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { siteConfig } from '@/lib/config'
+
+export default function Messenger() {
+  const pageId = siteConfig('FACEBOOK_PAGE_ID')
+  const appId = siteConfig('FACEBOOK_APP_ID')
+  const language = siteConfig('LANG').replace('-', '_')
+
+  // 新增一个状态变量用于追踪是否已经滚动过
+  const [showMessenger, setShowMessenger] = useState(false);
+
+  const showTheComponent = () => {
+    window.removeEventListener('scroll', showTheComponent);
+    if (!showMessenger) {
+      setShowMessenger(true);
+    }
+  };
+
+  // 延时7秒，或页面滚动时加载该组件
+  useEffect(() => {
+    window.addEventListener('scroll', showTheComponent);
+    setTimeout(() => {
+      showTheComponent()
+    }, 7000);
+    return () => {
+      window.removeEventListener('scroll', showTheComponent);
+    };
+  }, []);
+
+  return <>
+        {showMessenger && <MessengerCustomerChat
+            pageId={pageId}
+            appId={appId}
+            language={language}
+            shouldShowDialog={true}
+        />}
+    </>
+}
+
+/**
+ * @see https://github.com/Yoctol/react-messenger-customer-chat
+ */
+class MessengerCustomerChat extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      fbLoaded: false,
+      shouldShowDialog: undefined
+    }
+  }
+
+  /**
+     * 初始化
+     */
+  componentDidMount() {
+    this.setFbAsyncInit()
+    this.reloadSDKAsynchronously()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.pageId !== this.props.pageId ||
+            prevProps.appId !== this.props.appId ||
+            prevProps.shouldShowDialog !== this.props.shouldShowDialog ||
+            prevProps.htmlRef !== this.props.htmlRef ||
+            prevProps.minimized !== this.props.minimized ||
+            prevProps.themeColor !== this.props.themeColor ||
+            prevProps.loggedInGreeting !== this.props.loggedInGreeting ||
+            prevProps.loggedOutGreeting !== this.props.loggedOutGreeting ||
+            prevProps.greetingDialogDisplay !== this.props.greetingDialogDisplay ||
+            prevProps.greetingDialogDelay !== this.props.greetingDialogDelay ||
+            prevProps.autoLogAppEvents !== this.props.autoLogAppEvents ||
+            prevProps.xfbml !== this.props.xfbml ||
+            prevProps.version !== this.props.version ||
+            prevProps.language !== this.props.language
+    ) {
+      this.setFbAsyncInit()
+      this.reloadSDKAsynchronously()
+    }
+  }
+
+  componentWillUnmount() {
+    if (window.FB !== undefined) {
+      window.FB.CustomerChat.hide()
+    }
+  }
+
+  /**
+     * 初始化
+     */
+  setFbAsyncInit() {
+    const { appId, autoLogAppEvents, xfbml, version } = this.props
+
+    window.fbAsyncInit = () => {
+      window.FB.init({
+        appId,
+        autoLogAppEvents,
+        xfbml,
+        version: `v${version}`
+      })
+
+      this.setState({ fbLoaded: true })
+    }
+  }
+
+  loadSDKAsynchronously() {
+    const { language } = this.props;
+    /* eslint-disable */
+        (function (d, s, id) {
+            var js,
+                fjs = d.getElementsByTagName(s)[0];
+            if (d.getElementById(id)) {
+                return;
+            }
+            js = d.createElement(s);
+            js.id = id;
+            js.src = `https://connect.facebook.net/${language}/sdk/xfbml.customerchat.js`;
+            fjs.parentNode.insertBefore(js, fjs);
+        })(document, 'script', 'facebook-jssdk');
+        /* eslint-enable */
+  }
+
+  removeFacebookSDK() {
+    removeElementByIds(['facebook-jssdk', 'fb-root'])
+
+    delete window.FB
+  }
+
+  reloadSDKAsynchronously() {
+    this.removeFacebookSDK()
+    this.loadSDKAsynchronously()
+  }
+
+  controlPlugin() {
+    const { shouldShowDialog } = this.props
+
+    if (shouldShowDialog) {
+      window.FB.CustomerChat.showDialog()
+    } else {
+      window.FB.CustomerChat.hideDialog()
+    }
+  }
+
+  subscribeEvents() {
+    const { onCustomerChatDialogShow, onCustomerChatDialogHide } = this.props
+
+    if (onCustomerChatDialogShow) {
+      window.FB.Event.subscribe(
+        'customerchat.dialogShow',
+        onCustomerChatDialogShow
+      )
+    }
+
+    if (onCustomerChatDialogHide) {
+      window.FB.Event.subscribe(
+        'customerchat.dialogHide',
+        onCustomerChatDialogHide
+      )
+    }
+  }
+
+  createMarkup() {
+    const {
+      pageId,
+      htmlRef,
+      minimized,
+      themeColor,
+      loggedInGreeting,
+      loggedOutGreeting,
+      greetingDialogDisplay,
+      greetingDialogDelay
+    } = this.props
+
+    const refAttribute = htmlRef !== undefined ? `ref="${htmlRef}"` : ''
+    const minimizedAttribute =
+            minimized !== undefined ? `minimized="${minimized}"` : ''
+    const themeColorAttribute =
+            themeColor !== undefined ? `theme_color="${themeColor}"` : ''
+    const loggedInGreetingAttribute =
+            loggedInGreeting !== undefined
+              ? `logged_in_greeting="${loggedInGreeting}"`
+              : ''
+    const loggedOutGreetingAttribute =
+            loggedOutGreeting !== undefined
+              ? `logged_out_greeting="${loggedOutGreeting}"`
+              : ''
+    const greetingDialogDisplayAttribute =
+            greetingDialogDisplay !== undefined
+              ? `greeting_dialog_display="${greetingDialogDisplay}"`
+              : ''
+    const greetingDialogDelayAttribute =
+            greetingDialogDelay !== undefined
+              ? `greeting_dialog_delay="${greetingDialogDelay}"`
+              : ''
+
+    return {
+      __html: `<div
+        class="fb-customerchat"
+        page_id="${pageId}"
+        ${refAttribute}
+        ${minimizedAttribute}
+        ${themeColorAttribute}
+        ${loggedInGreetingAttribute}
+        ${loggedOutGreetingAttribute}
+        ${greetingDialogDisplayAttribute}
+        ${greetingDialogDelayAttribute}
+      ></div>`
+    }
+  }
+
+  render() {
+    const { fbLoaded, shouldShowDialog } = this.state
+
+    if (fbLoaded && shouldShowDialog !== this.props.shouldShowDialog) {
+      document.addEventListener(
+        'DOMNodeInserted',
+        (event) => {
+          const element = event.target
+          if (
+            element.className &&
+                        typeof element.className === 'string' &&
+                        element.className.includes('fb_dialog')
+          ) {
+            this.controlPlugin()
+          }
+        },
+        false
+      )
+      this.subscribeEvents()
+    }
+    // Add a random key to rerender. Reference:
+    // https://stackoverflow.com/questions/30242530/dangerouslysetinnerhtml-doesnt-update-during-render
+    return <div key={Date()} dangerouslySetInnerHTML={this.createMarkup()} />
+  }
+}
+
+const removeElementByIds = (ids) => {
+  ids.forEach((id) => {
+    const element = document.getElementById(id)
+    if (element && element.parentNode) {
+      element.parentNode.removeChild(element)
+    }
+  })
+}
+
+MessengerCustomerChat.propTypes = {
+  pageId: PropTypes.string.isRequired,
+  appId: PropTypes.string,
+  shouldShowDialog: PropTypes.bool,
+  htmlRef: PropTypes.string,
+  minimized: PropTypes.bool,
+  themeColor: PropTypes.string,
+  loggedInGreeting: PropTypes.string,
+  loggedOutGreeting: PropTypes.string,
+  greetingDialogDisplay: PropTypes.oneOf(['show', 'hide', 'fade']),
+  greetingDialogDelay: PropTypes.number,
+  autoLogAppEvents: PropTypes.bool,
+  xfbml: PropTypes.bool,
+  version: PropTypes.string,
+  language: PropTypes.string,
+  onCustomerChatDialogShow: PropTypes.func,
+  onCustomerChatDialogHide: PropTypes.func
+}
+
+MessengerCustomerChat.defaultProps = {
+  appId: null,
+  shouldShowDialog: false,
+  htmlRef: undefined,
+  minimized: undefined,
+  themeColor: undefined,
+  loggedInGreeting: undefined,
+  loggedOutGreeting: undefined,
+  greetingDialogDisplay: undefined,
+  greetingDialogDelay: undefined,
+  autoLogAppEvents: true,
+  xfbml: true,
+  version: '11.0',
+  language: 'en_US',
+  onCustomerChatDialogShow: undefined,
+  onCustomerChatDialogHide: undefined
+}

components/FacebookPage.js

@@ -0,0 +1,34 @@
+import { siteConfig } from '@/lib/config'
+import { FacebookProvider, Page } from 'react-facebook'
+import { FacebookIcon } from 'react-share'
+
+/**
+ * facebook个人主页
+ * @returns
+ */
+const FacebookPage = () => {
+  if (!siteConfig('FACEBOOK_APP_ID') || !siteConfig('FACEBOOK_PAGE')) {
+    return <></>
+  }
+  return <div className="shadow-md hover:shadow-xl dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100 justify-center">
+    {siteConfig('FACEBOOK_PAGE') && (
+      <div className="flex items-center pb-2">
+        <a
+          href={siteConfig('FACEBOOK_PAGE')}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="p-1 pr-2 pt-0"
+        >
+          <FacebookIcon size={28} round />
+        </a>
+        <a href={siteConfig('FACEBOOK_PAGE')} rel="noopener noreferrer" target="_blank">
+          {siteConfig('FACEBOOK_PAGE_TITLE')}
+        </a>
+      </div>
+    )}
+    {siteConfig('FACEBOOK_APP_ID') && <FacebookProvider appId={siteConfig('FACEBOOK_APP_ID')}>
+      <Page href={siteConfig('FACEBOOK_PAGE')} tabs="timeline" />
+    </FacebookProvider>}
+  </div>
+}
+export default FacebookPage

components/Fireworks.js

@@ -0,0 +1,216 @@
+/**
+ * https://codepen.io/juliangarnier/pen/gmOwJX
+ * custom by hexo-theme-yun @YunYouJun
+ */
+import { useEffect } from 'react'
+import anime from 'animejs'
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 鼠标点击烟花特效
+ * @returns
+ */
+const Fireworks = () => {
+  const fireworksColor = siteConfig('FIREWORKS_COLOR')
+
+  useEffect(() => {
+    createFireworks({ colors: fireworksColor })
+  }, [])
+  return <canvas id='fireworks' className='fireworks'></canvas>
+}
+export default Fireworks
+
+/**
+   * 创建烟花
+   * @param config
+   */
+function createFireworks(config) {
+  const defaultConfig = {
+    colors: config?.colors,
+    numberOfParticules: 20,
+    orbitRadius: {
+      min: 50,
+      max: 100
+    },
+    circleRadius: {
+      min: 10,
+      max: 20
+    },
+    diffuseRadius: {
+      min: 50,
+      max: 100
+    },
+    animeDuration: {
+      min: 900,
+      max: 1500
+    }
+  }
+  config = Object.assign(defaultConfig, config)
+
+  let pointerX = 0
+  let pointerY = 0
+
+  // sky blue
+  const colors = config.colors
+
+  const canvasEl = document.querySelector('.fireworks')
+  const ctx = canvasEl.getContext('2d')
+
+  /**
+     * 设置画布尺寸
+     */
+  function setCanvasSize(canvasEl) {
+    canvasEl.width = window.innerWidth
+    canvasEl.height = window.innerHeight
+    canvasEl.style.width = `${window.innerWidth}px`
+    canvasEl.style.height = `${window.innerHeight}px`
+  }
+
+  /**
+     * update pointer
+     * @param {TouchEvent} e
+     */
+  function updateCoords(e) {
+    pointerX =
+        e.clientX ||
+        (e.touches[0] ? e.touches[0].clientX : e.changedTouches[0].clientX)
+    pointerY =
+        e.clientY ||
+        (e.touches[0] ? e.touches[0].clientY : e.changedTouches[0].clientY)
+  }
+
+  function setParticuleDirection(p) {
+    const angle = (anime.random(0, 360) * Math.PI) / 180
+    const value = anime.random(
+      config.diffuseRadius.min,
+      config.diffuseRadius.max
+    )
+    const radius = [-1, 1][anime.random(0, 1)] * value
+    return {
+      x: p.x + radius * Math.cos(angle),
+      y: p.y + radius * Math.sin(angle)
+    }
+  }
+
+  /**
+     * 在指定位置创建粒子
+     * @param {number} x
+     * @param {number} y
+     * @returns
+     */
+  function createParticule(x, y) {
+    const p = {
+      x,
+      y,
+      color: `rgba(${
+          colors[anime.random(0, colors.length - 1)]
+        },${
+          anime.random(0.2, 0.8)
+        })`,
+      radius: anime.random(config.circleRadius.min, config.circleRadius.max),
+      endPos: null,
+      draw() {}
+    }
+    p.endPos = setParticuleDirection(p)
+    p.draw = function() {
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
+      ctx.fillStyle = p.color
+      ctx.fill()
+    }
+    return p
+  }
+
+  function createCircle(x, y) {
+    const p = {
+      x,
+      y,
+      color: '#000',
+      radius: 0.1,
+      alpha: 0.5,
+      lineWidth: 6,
+      draw() {}
+    }
+    p.draw = function() {
+      ctx.globalAlpha = p.alpha
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
+      ctx.lineWidth = p.lineWidth
+      ctx.strokeStyle = p.color
+      ctx.stroke()
+      ctx.globalAlpha = 1
+    }
+    return p
+  }
+
+  function renderParticule(anim) {
+    for (let i = 0; i < anim.animatables.length; i++) { anim.animatables[i].target.draw() }
+  }
+
+  function animateParticules(x, y) {
+    const circle = createCircle(x, y)
+    const particules = []
+    for (let i = 0; i < config.numberOfParticules; i++) { particules.push(createParticule(x, y)) }
+
+    anime
+      .timeline()
+      .add({
+        targets: particules,
+        x(p) {
+          return p.endPos.x
+        },
+        y(p) {
+          return p.endPos.y
+        },
+        radius: 0.1,
+        duration: anime.random(
+          config.animeDuration.min,
+          config.animeDuration.max
+        ),
+        easing: 'easeOutExpo',
+        update: renderParticule
+      })
+      .add(
+        {
+          targets: circle,
+          radius: anime.random(config.orbitRadius.min, config.orbitRadius.max),
+          lineWidth: 0,
+          alpha: {
+            value: 0,
+            easing: 'linear',
+            duration: anime.random(600, 800)
+          },
+          duration: anime.random(1200, 1800),
+          easing: 'easeOutExpo',
+          update: renderParticule
+        },
+        0
+      )
+  }
+
+  const render = anime({
+    duration: Infinity,
+    update: () => {
+      ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
+    }
+  })
+
+  document.addEventListener(
+    'mousedown',
+    (e) => {
+      render.play()
+      updateCoords(e)
+      animateParticules(pointerX, pointerY)
+    },
+    false
+  )
+
+  setCanvasSize(canvasEl)
+  window.addEventListener(
+    'resize',
+    () => {
+      setCanvasSize(canvasEl)
+    },
+    false
+  )
+}

components/FlipCard.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+
+/**
+ * 翻转组件
+ * @param {*} props
+ * @returns
+ */
+export default function FlipCard(props) {
+  const [isFlipped, setIsFlipped] = useState(false)
+
+  function handleCardFlip() {
+    setIsFlipped(!isFlipped)
+  }
+
+  return (
+        <div className={`flip-card ${isFlipped ? 'flipped' : ''}`} >
+            <div className={`flip-card-front ${props.className || ''}`} onMouseEnter={handleCardFlip}>
+                {props.frontContent}
+            </div>
+            <div className={`flip-card-back ${props.className || ''}`} onMouseLeave={handleCardFlip}>
+                {props.backContent}
+            </div>
+            <style jsx>{`
+          .flip-card {
+            width: 100%;
+            height: 100%;
+            display: inline-block;
+            position: relative;
+            transform-style: preserve-3d;
+            transition: transform 0.2s;
+          }
+          
+          .flip-card-front,
+          .flip-card-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+          }
+          
+          .flip-card-front {
+            z-index: 2;
+            transform: rotateY(0);
+          }
+          
+          .flip-card-back {
+            transform: rotateY(180deg);
+          }
+          
+          .flip-card.flipped {
+            transform: rotateY(180deg);
+          }
+        `}</style>
+        </div>
+  )
+}

components/FlutteringRibbon.js

@@ -0,0 +1,322 @@
+/* eslint-disable */
+import { useEffect } from 'react'
+const  id = 'canvasFlutteringRibbon'
+export const FlutteringRibbon = () => {
+     const destroyRibbon = ()=>{
+    const ribbon = document.getElementById(id)
+      if(ribbon && ribbon.parentNode){
+        ribbon.parentNode.removeChild(ribbon)
+      }
+  }
+  
+  useEffect(() => {
+    createFlutteringRibbon()
+        return () => destroyRibbon()
+
+  }, [])
+    return <></>
+}
+
+export default FlutteringRibbon
+
+
+/**
+ * 创建连接点
+ * @param config
+ */
+function createFlutteringRibbon() {
+  'object' == typeof window &&
+    (window.Ribbons = (function () {
+      const t = window,
+        i = document.body,
+        n = document.documentElement
+      var o = function () {
+        if (1 === arguments.length) {
+          if (Array.isArray(arguments[0])) {
+            const t = Math.round(o(0, arguments[0].length - 1))
+            return arguments[0][t]
+          }
+          return o(0, arguments[0])
+        }
+        return 2 === arguments.length
+          ? Math.random() * (arguments[1] - arguments[0]) + arguments[0]
+          : 0
+      }
+      const s = function (o) {
+          const s = Math.max(
+              0,
+              t.innerWidth || n.clientWidth || i.clientWidth || 0
+            ),
+            e = Math.max(
+              0,
+              t.innerHeight || n.clientHeight || i.clientHeight || 0
+            )
+          return {
+            width: s,
+            height: e,
+            ratio: s / e,
+            centerx: s / 2,
+            centery: e / 2,
+            scrollx:
+              Math.max(0, t.pageXOffset || n.scrollLeft || i.scrollLeft || 0) -
+              (n.clientLeft || 0),
+            scrolly:
+              Math.max(0, t.pageYOffset || n.scrollTop || i.scrollTop || 0) -
+              (n.clientTop || 0)
+          }
+        },
+        e = function (t, i) {
+          ;(this.x = 0), (this.y = 0), this.set(t, i)
+        }
+      e.prototype = {
+        constructor: e,
+        set: function (t, i) {
+          ;(this.x = t || 0), (this.y = i || 0)
+        },
+        copy: function (t) {
+          return (this.x = t.x || 0), (this.y = t.y || 0), this
+        },
+        multiply: function (t, i) {
+          return (this.x *= t || 1), (this.y *= i || 1), this
+        },
+        divide: function (t, i) {
+          return (this.x /= t || 1), (this.y /= i || 1), this
+        },
+        add: function (t, i) {
+          return (this.x += t || 0), (this.y += i || 0), this
+        },
+        subtract: function (t, i) {
+          return (this.x -= t || 0), (this.y -= i || 0), this
+        },
+        clampX: function (t, i) {
+          return (this.x = Math.max(t, Math.min(this.x, i))), this
+        },
+        clampY: function (t, i) {
+          return (this.y = Math.max(t, Math.min(this.y, i))), this
+        },
+        flipX: function () {
+          return (this.x *= -1), this
+        },
+        flipY: function () {
+          return (this.y *= -1), this
+        }
+      }
+      const h = function (t) {
+        ;(this._canvas = null),
+          (this._context = null),
+          (this._sto = null),
+          (this._width = 0),
+          (this._height = 0),
+          (this._scroll = 0),
+          (this._ribbons = []),
+          (this._options = {
+            colorSaturation: '80%',
+            colorBrightness: '60%',
+            colorAlpha: 0.65,
+            colorCycleSpeed: 6,
+            verticalPosition: 'center',
+            horizontalSpeed: 150,
+            ribbonCount: 5,
+            strokeSize: 5,
+            parallaxAmount: -0.5,
+            animateSections: !0
+          }),
+          (this._onDraw = this._onDraw.bind(this)),
+          (this._onResize = this._onResize.bind(this)),
+          (this._onScroll = this._onScroll.bind(this)),
+          this.setOptions(t),
+          this.init()
+      }
+      return (
+        (h.prototype = {
+          constructor: h,
+          setOptions: function (t) {
+            if ('object' == typeof t)
+              for (const i in t)
+                t.hasOwnProperty(i) && (this._options[i] = t[i])
+          },
+          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'),
+                (this._canvas.style.padding = '0'),
+                (this._canvas.style.border = '0'),
+                (this._canvas.style.outline = '0'),
+                (this._canvas.style.left = '0'),
+                (this._canvas.style.top = '0'),
+                (this._canvas.style.width = '100%'),
+                (this._canvas.style.height = '100%'),
+                (this._canvas.style['z-index'] = '0'),
+                (this._canvas.style['pointer-events'] = 'none'),
+                this._onResize(),
+                (this._context = this._canvas.getContext('2d')),
+                this._context.clearRect(0, 0, this._width, this._height),
+                (this._context.globalAlpha = this._options.colorAlpha),
+                window.addEventListener('resize', this._onResize),
+                window.addEventListener('scroll', this._onScroll),
+                document.body.appendChild(this._canvas)
+            } catch (t) {
+              return void console.warn('Canvas Context Error: ' + t.toString())
+            }
+            this._onDraw()
+          },
+          addRibbon: function () {
+            const t = Math.round(o(1, 9)) > 5 ? 'right' : 'left'
+            let i = 1e3
+            const n = 200,
+              s = 0 - n,
+              h = this._width + n
+            let a = 0,
+              r = 0
+            const l = 'right' === t ? s : h
+            let c = Math.round(o(0, this._height))
+            ;/^(top|min)$/i.test(this._options.verticalPosition)
+              ? (c = 0 + n)
+              : /^(middle|center)$/i.test(this._options.verticalPosition)
+              ? (c = this._height / 2)
+              : /^(bottom|max)$/i.test(this._options.verticalPosition) &&
+                (c = this._height - n)
+            const p = [],
+              _ = new e(l, c),
+              d = new e(l, c)
+            let u = null,
+              b = Math.round(o(0, 360)),
+              f = 0
+            for (; !(i <= 0); ) {
+              if (
+                (i--,
+                (a = Math.round(
+                  (1 * Math.random() - 0.2) * this._options.horizontalSpeed
+                )),
+                (r = Math.round(
+                  (1 * Math.random() - 0.5) * (0.25 * this._height)
+                )),
+                (u = new e()),
+                u.copy(d),
+                'right' === t)
+              ) {
+                if ((u.add(a, r), d.x >= h)) break
+              } else if ('left' === t && (u.subtract(a, r), d.x <= s)) break
+              p.push({
+                point1: new e(_.x, _.y),
+                point2: new e(d.x, d.y),
+                point3: u,
+                color: b,
+                delay: f,
+                dir: t,
+                alpha: 0,
+                phase: 0
+              }),
+                _.copy(d),
+                d.copy(u),
+                (f += 4),
+                (b += this._options.colorCycleSpeed)
+            }
+            this._ribbons.push(p)
+          },
+          _drawRibbonSection: function (t) {
+            if (t) {
+              if (t.phase >= 1 && t.alpha <= 0) return !0
+              if (t.delay <= 0) {
+                if (
+                  ((t.phase += 0.02),
+                  (t.alpha = 1 * Math.sin(t.phase)),
+                  (t.alpha = t.alpha <= 0 ? 0 : t.alpha),
+                  (t.alpha = t.alpha >= 1 ? 1 : t.alpha),
+                  this._options.animateSections)
+                ) {
+                  const i = 0.1 * Math.sin(1 + (t.phase * Math.PI) / 2)
+                  'right' === t.dir
+                    ? (t.point1.add(i, 0),
+                      t.point2.add(i, 0),
+                      t.point3.add(i, 0))
+                    : (t.point1.subtract(i, 0),
+                      t.point2.subtract(i, 0),
+                      t.point3.subtract(i, 0)),
+                    t.point1.add(0, i),
+                    t.point2.add(0, i),
+                    t.point3.add(0, i)
+                }
+              } else t.delay -= 0.5
+              const i = this._options.colorSaturation,
+                n = this._options.colorBrightness,
+                o =
+                  'hsla(' +
+                  t.color +
+                  ', ' +
+                  i +
+                  ', ' +
+                  n +
+                  ', ' +
+                  t.alpha +
+                  ' )'
+              this._context.save(),
+                0 !== this._options.parallaxAmount &&
+                  this._context.translate(
+                    0,
+                    this._scroll * this._options.parallaxAmount
+                  ),
+                this._context.beginPath(),
+                this._context.moveTo(t.point1.x, t.point1.y),
+                this._context.lineTo(t.point2.x, t.point2.y),
+                this._context.lineTo(t.point3.x, t.point3.y),
+                (this._context.fillStyle = o),
+                this._context.fill(),
+                this._options.strokeSize > 0 &&
+                  ((this._context.lineWidth = this._options.strokeSize),
+                  (this._context.strokeStyle = o),
+                  (this._context.lineCap = 'round'),
+                  this._context.stroke()),
+                this._context.restore()
+            }
+            return !1
+          },
+          _onDraw: function () {
+            for (let t = 0, i = this._ribbons.length; t < i; ++t)
+              this._ribbons[t] || this._ribbons.splice(t, 1)
+            this._context.clearRect(0, 0, this._width, this._height)
+            for (let t = 0; t < this._ribbons.length; ++t) {
+              const i = this._ribbons[t],
+                n = i.length
+              let o = 0
+              for (let t = 0; t < n; ++t) this._drawRibbonSection(i[t]) && o++
+              o >= n && (this._ribbons[t] = null)
+            }
+            this._ribbons.length < this._options.ribbonCount &&
+              this.addRibbon(),
+              requestAnimationFrame(this._onDraw)
+          },
+          _onResize: function (t) {
+            const i = s(t)
+            ;(this._width = i.width),
+              (this._height = i.height),
+              this._canvas &&
+                ((this._canvas.width = this._width),
+                (this._canvas.height = this._height),
+                this._context &&
+                  (this._context.globalAlpha = this._options.colorAlpha))
+          },
+          _onScroll: function (t) {
+            const i = s(t)
+            this._scroll = i.scrolly
+          }
+        }),
+        h
+      )
+    })())
+  new Ribbons({
+    colorSaturation: '60%',
+    colorBrightness: '50%',
+    colorAlpha: 0.5,
+    colorCycleSpeed: 5,
+    verticalPosition: 'random',
+    horizontalSpeed: 200,
+    ribbonCount: 3,
+    strokeSize: 0,
+    parallaxAmount: -0.2,
+    animateSections: !0
+  })
+}

components/FullScreenButton.js

@@ -0,0 +1,48 @@
+import { isBrowser } from '@/lib/utils'
+import React, { useState } from 'react'
+
+/**
+ * 全屏按钮
+ * @returns
+ */
+const FullScreenButton = () => {
+  const [isFullScreen, setIsFullScreen] = useState(false)
+
+  const handleFullScreenClick = () => {
+    if (!isBrowser) {
+      return
+    }
+    const element = document.documentElement
+    if (!isFullScreen) {
+      if (element.requestFullscreen) {
+        element.requestFullscreen()
+      } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen()
+      } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen()
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen()
+      }
+      setIsFullScreen(true)
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen()
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen()
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen()
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen()
+      }
+      setIsFullScreen(false)
+    }
+  }
+
+  return (
+      <button onClick={handleFullScreenClick} className='dark:text-gray-300'>
+        {isFullScreen ? '退出全屏' : <i className="fa-solid fa-expand"></i>}
+      </button>
+  )
+}
+
+export default FullScreenButton

components/Giscus.js

@@ -0,0 +1,33 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Giscus from '@giscus/react'
+
+/**
+ * Giscus评论 @see https://giscus.app/zh-CN
+ * Contribute by @txs https://github.com/txs/NotionNext/commit/1bf7179d0af21fb433e4c7773504f244998678cb
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const GiscusComponent = () => {
+  const { isDarkMode } = useGlobal()
+  const theme = isDarkMode ? 'dark' : 'light'
+
+  return (
+    <Giscus
+      repo={siteConfig('COMMENT_GISCUS_REPO')}
+      repoId={siteConfig('COMMENT_GISCUS_REPO_ID')}
+      categoryId={siteConfig('COMMENT_GISCUS_CATEGORY_ID')}
+      mapping={siteConfig('COMMENT_GISCUS_MAPPING')}
+      reactionsEnabled={siteConfig('COMMENT_GISCUS_REACTIONS_ENABLED')}
+      emitMetadata={siteConfig('COMMENT_GISCUS_EMIT_METADATA')}
+      theme={theme}
+      inputPosition={siteConfig('COMMENT_GISCUS_INPUT_POSITION')}
+      lang={siteConfig('COMMENT_GISCUS_LANG')}
+      loading={siteConfig('COMMENT_GISCUS_LOADING')}
+      crossorigin={siteConfig('COMMENT_GISCUS_CROSSORIGIN')}
+    />
+  )
+}
+
+export default GiscusComponent

components/Gitalk.js

@@ -0,0 +1,49 @@
+import { siteConfig } from '@/lib/config'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+
+/**
+ * gitalk评论插件
+ * @param {*} param0
+ * @returns
+ */
+const Gitalk = ({ frontMatter }) => {
+  const gitalkCSSCDN = siteConfig('COMMENT_GITALK_CSS_CDN_URL')
+  const gitalkJSCDN = siteConfig('COMMENT_GITALK_JS_CDN_URL')
+  const clientId = siteConfig('COMMENT_GITALK_CLIENT_ID')
+  const clientSecret = siteConfig('COMMENT_GITALK_CLIENT_SECRET')
+  const repo = siteConfig('COMMENT_GITALK_REPO')
+  const owner = siteConfig('COMMENT_GITALK_OWNER')
+  const admin = siteConfig('COMMENT_GITALK_ADMIN').split(',')
+  const distractionFreeMode = siteConfig('COMMENT_GITALK_DISTRACTION_FREE_MODE')
+
+  const loadGitalk = async() => {
+    await loadExternalResource(gitalkCSSCDN, 'css')
+    await loadExternalResource(gitalkJSCDN, 'js')
+    const Gitalk = window.Gitalk
+    if (!Gitalk) {
+      // 可以加入延时重试
+      console.warn('Gitalk 初始化失败')
+      return
+    }
+    const gitalk = new Gitalk({
+      clientID: clientId,
+      clientSecret: clientSecret,
+      repo: repo,
+      owner: owner,
+      admin: admin,
+      id: frontMatter.id, // Ensure uniqueness and length less than 50
+      distractionFreeMode: distractionFreeMode // Facebook-like distraction free mode
+    })
+
+    gitalk.render('gitalk-container')
+  }
+
+  useEffect(() => {
+    loadGitalk()
+  }, [])
+
+  return <div id="gitalk-container"></div>
+}
+
+export default Gitalk

components/GlobalHead.js

@@ -0,0 +1,194 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+
+/**
+ * 页面的Head头，通常有用于SEO
+ * @param {*} param0
+ * @returns
+ */
+const GlobalHead = (props) => {
+  const { children } = props
+  let url = siteConfig('PATH')?.length ? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}` : siteConfig('LINK')
+  let image
+  const meta = getSEOMeta(props, useRouter(), useGlobal())
+  if (meta) {
+    url = `${url}/${meta.slug}`
+    image = meta.image || '/bg_image.jpg'
+  }
+  const title = meta?.title || siteConfig('TITLE')
+  const description = meta?.description || siteConfig('DESCRIPTION')
+  const type = meta?.type || 'website'
+  const keywords = meta?.tags || siteConfig('KEYWORDS')
+  const lang = siteConfig('LANG').replace('-', '_') // Facebook OpenGraph 要 zh_CN 這樣的格式才抓得到語言
+  const category = meta?.category || siteConfig('KEYWORDS') // section 主要是像是 category 這樣的分類，Facebook 用這個來抓連結的分類
+
+  return (
+        <Head>
+            <title>{title}</title>
+            <meta name="theme-color" content={siteConfig('BACKGROUND_DARK')} />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0" />
+            <meta name="robots" content="follow, index" />
+            <meta charSet="UTF-8" />
+            {siteConfig('SEO_GOOGLE_SITE_VERIFICATION') && (
+                <meta
+                    name="google-site-verification"
+                    content={siteConfig('SEO_GOOGLE_SITE_VERIFICATION')}
+                />
+            )}
+            {siteConfig('SEO_BAIDU_SITE_VERIFICATION') && (<meta name="baidu-site-verification" content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')} />)}
+            <meta name="keywords" content={keywords} />
+            <meta name="description" content={description} />
+            <meta property="og:locale" content={lang} />
+            <meta property="og:title" content={title} />
+            <meta property="og:description" content={description} />
+            <meta property="og:url" content={url} />
+            <meta property="og:image" content={image} />
+            <meta property="og:site_name" content={siteConfig('TITLE')} />
+            <meta property="og:type" content={type} />
+            <meta name="twitter:card" content="summary_large_image" />
+            <meta name="twitter:description" content={description} />
+            <meta name="twitter:title" content={title} />
+
+            {siteConfig('COMMENT_WEBMENTION_ENABLE') && (
+                <>
+                    <link rel="webmention" href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/webmention`} />
+                    <link rel="pingback" href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/xmlrpc`} />
+                </>
+            )}
+
+            {siteConfig('COMMENT_WEBMENTION_ENABLE') && siteConfig('COMMENT_WEBMENTION_AUTH') !== '' && (
+                <link href={siteConfig('COMMENT_WEBMENTION_AUTH')} rel="me" />
+            )}
+
+            {JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && <meta name="referrer" content="no-referrer-when-downgrade" />}
+            {meta?.type === 'Post' && (
+                <>
+                    <meta
+                        property="article:published_time"
+                        content={meta.publishDay}
+                    />
+                    <meta property="article:author" content={siteConfig('AUTHOR')} />
+                    <meta property="article:section" content={category} />
+                    <meta property="article:publisher" content={siteConfig('FACEBOOK_PAGE')} />
+                </>
+            )}
+            {children}
+        </Head>
+  )
+}
+
+/**
+ * 获取SEO信息
+ * @param {*} props
+ * @param {*} router
+ */
+const getSEOMeta = (props, router, global) => {
+  const { locale } = global
+  const { post, tag, category, page } = props
+  const keyword = router?.query?.s
+
+  switch (router.route) {
+    case '/':
+      return {
+        title: `${siteConfig('TITLE')} | ${siteConfig('DESCRIPTION')}`,
+        description: siteConfig('DESCRIPTION'),
+        image: siteConfig('HOME_BANNER_IMAGE'),
+        slug: '',
+        type: 'website'
+      }
+    case '/archive':
+      return {
+        title: `${locale.NAV.ARCHIVE} | ${siteConfig('TITLE')}`,
+        description: siteConfig('DESCRIPTION'),
+        image: siteConfig('HOME_BANNER_IMAGE'),
+        slug: 'archive',
+        type: 'website'
+      }
+    case '/page/[page]':
+      return {
+        title: `${page} | Page | ${siteConfig('TITLE')}`,
+        description: siteConfig('DESCRIPTION'),
+        image: siteConfig('HOME_BANNER_IMAGE'),
+        slug: 'page/' + page,
+        type: 'website'
+      }
+    case '/category/[category]':
+      return {
+        title: `${category} | ${locale.COMMON.CATEGORY} | ${
+          siteConfig('TITLE') || ''
+        }`,
+        description: siteConfig('DESCRIPTION'),
+        slug: 'category/' + category,
+        image: siteConfig('HOME_BANNER_IMAGE'),
+        type: 'website'
+      }
+    case '/category/[category]/page/[page]':
+      return {
+        title: `${category} | ${locale.COMMON.CATEGORY} | ${
+              siteConfig('TITLE') || ''
+            }`,
+        description: siteConfig('DESCRIPTION'),
+        slug: 'category/' + category,
+        image: siteConfig('HOME_BANNER_IMAGE'),
+        type: 'website'
+      }
+    case '/tag/[tag]':
+    case '/tag/[tag]/page/[page]':
+      return {
+        title: `${tag} | ${locale.COMMON.TAGS} | ${siteConfig('TITLE')}`,
+        description: siteConfig('DESCRIPTION'),
+        image: siteConfig('HOME_BANNER_IMAGE'),
+        slug: 'tag/' + tag,
+        type: 'website'
+      }
+    case '/search':
+      return {
+        title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteConfig('TITLE')}`,
+        description: siteConfig('DESCRIPTION'),
+        image: siteConfig('HOME_BANNER_IMAGE'),
+        slug: 'search',
+        type: 'website'
+      }
+    case '/search/[keyword]':
+    case '/search/[keyword]/page/[page]':
+      return {
+        title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteConfig('TITLE')}`,
+        description: siteConfig('TITLE'),
+        image: siteConfig('HOME_BANNER_IMAGE'),
+        slug: 'search/' + (keyword || ''),
+        type: 'website'
+      }
+    case '/404':
+      return { title: `${siteConfig('TITLE')} | 页面找不到啦`, image: siteConfig('HOME_BANNER_IMAGE') }
+    case '/tag':
+      return {
+        title: `${locale.COMMON.TAGS} | ${siteConfig('TITLE')}`,
+        description: siteConfig('DESCRIPTION'),
+        image: siteConfig('HOME_BANNER_IMAGE'),
+        slug: 'tag',
+        type: 'website'
+      }
+    case '/category':
+      return {
+        title: `${locale.COMMON.CATEGORY} | ${siteConfig('TITLE')}`,
+        description: siteConfig('DESCRIPTION'),
+        image: siteConfig('HOME_BANNER_IMAGE'),
+        slug: 'category',
+        type: 'website'
+      }
+    default:
+      return {
+        title: post ? `${post?.title} | ${siteConfig('TITLE')}` : `${siteConfig('TITLE')} | loading`,
+        description: post?.summary,
+        type: post?.type,
+        slug: post?.slug,
+        image: post?.pageCoverThumbnail || siteConfig('HOME_BANNER_IMAGE'),
+        category: post?.category?.[0],
+        tags: post?.tags
+      }
+  }
+}
+
+export default GlobalHead

components/GlobalStyle.js

@@ -0,0 +1,20 @@
+/* eslint-disable react/no-unknown-property */
+
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 这里的css样式对全局生效
+ * 主题客制化css
+ * @returns
+ */
+const GlobalStyle = () => {
+  // 从NotionConfig中读取样式
+  const GLOBAL_CSS = siteConfig('GLOBAL_CSS')
+  return (<style jsx global>{`
+
+    ${GLOBAL_CSS}
+
+  `}</style>)
+}
+
+export { GlobalStyle }

components/GoogleAdsense.js

@@ -0,0 +1,92 @@
+import { siteConfig } from '@/lib/config'
+import { loadExternalResource } from '@/lib/utils'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+/**
+ * 初始化谷歌广告
+ * @returns
+ */
+export default function GoogleAdsense() {
+  const initGoogleAdsense = () => {
+    loadExternalResource(`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${siteConfig('ADSENSE_GOOGLE_ID')}`, 'js').then(url => {
+      setTimeout(() => {
+        const ads = document.getElementsByClassName('adsbygoogle')
+        const adsbygoogle = window.adsbygoogle
+        if (ads.length > 0) {
+          for (let i = 0; i <= ads.length; i++) {
+            try {
+              adsbygoogle.push(ads[i])
+            } catch (e) {
+
+            }
+          }
+        }
+      }, 100)
+    })
+  }
+
+  const router = useRouter()
+  useEffect(() => {
+    // 延迟3秒加载
+    setTimeout(() => {
+      initGoogleAdsense()
+    }, 3000)
+  }, [router])
+
+  return null
+}
+
+/**
+ * 文章内嵌广告单元
+ * 请在GoogleAdsense后台配置创建对应广告，并且获取相应代码
+ * 修改下面广告单元中的 data-ad-slot data-ad-format data-ad-layout-key(如果有)
+ * 添加 可以在本地调试
+ */
+const AdSlot = ({ type = 'show' }) => {
+  if (!siteConfig('ADSENSE_GOOGLE_ID')) {
+    return null
+  }
+  // 文章内嵌广告
+  if (type === 'in-article') {
+    return <ins className="adsbygoogle"
+            style={{ display: 'block', textAlign: 'center' }}
+            data-ad-layout="in-article"
+            data-ad-format="fluid"
+            data-adtest={siteConfig('ADSENSE_GOOGLE_TEST') ? 'on' : 'off'}
+            data-ad-client={siteConfig('ADSENSE_GOOGLE_ID')}
+            data-ad-slot={siteConfig('ADSENSE_GOOGLE_SLOT_IN_ARTICLE')}></ins>
+  }
+
+  // 信息流广告
+  if (type === 'flow') {
+    return <ins className="adsbygoogle"
+            data-ad-format="fluid"
+            data-ad-layout-key="-5j+cz+30-f7+bf"
+            style={{ display: 'block' }}
+            data-adtest={siteConfig('ADSENSE_GOOGLE_TEST') ? 'on' : 'off'}
+            data-ad-client={siteConfig('ADSENSE_GOOGLE_ID')}
+            data-ad-slot={siteConfig('ADSENSE_GOOGLE_SLOT_FLOW')}></ins>
+  }
+
+  // 原生广告
+  if (type === 'native') {
+    return <ins className="adsbygoogle"
+            style={{ display: 'block', textAlign: 'center' }}
+            data-ad-format="autorelaxed"
+            data-adtest={siteConfig('ADSENSE_GOOGLE_TEST') ? 'on' : 'off'}
+            data-ad-client={siteConfig('ADSENSE_GOOGLE_ID')}
+            data-ad-slot={siteConfig('ADSENSE_GOOGLE_SLOT_NATIVE')}></ins>
+  }
+
+  //  展示广告
+  return <ins className="adsbygoogle"
+        style={{ display: 'block' }}
+        data-ad-client={siteConfig('ADSENSE_GOOGLE_ID')}
+        data-adtest={siteConfig('ADSENSE_GOOGLE_TEST') ? 'on' : 'off'}
+        data-ad-slot={siteConfig('ADSENSE_GOOGLE_SLOT_AUTO')}
+        data-ad-format="auto"
+        data-full-width-responsive="true"></ins>
+}
+
+export { AdSlot }

components/Gtag.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+import * as gtag from '@/lib/gtag'
+
+const Gtag = () => {
+  const router = useRouter()
+  useEffect(() => {
+    const gtagRouteChange = url => {
+      gtag.pageview(url)
+    }
+    router.events.on('routeChangeComplete', gtagRouteChange)
+    return () => {
+      router.events.off('routeChangeComplete', gtagRouteChange)
+    }
+  }, [router.events])
+  return null
+}
+export default Gtag

components/HeroIcons.js

@@ -0,0 +1,100 @@
+/**
+ * @see https://heroicons.com/
+ * @returns
+ */
+
+export const Moon = () => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+    </svg>
+}
+
+export const Sun = () => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+    </svg>
+}
+
+export const Home = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+    </svg>
+}
+
+export const User = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+}
+
+export const ArrowPath = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+    </svg>
+}
+
+export const ChevronLeft = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+    </svg>
+}
+
+export const ChevronRight = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+    </svg>
+}
+
+export const ChevronDoubleLeft = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
+  </svg>
+}
+
+export const ChevronDoubleRight = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
+  </svg>
+}
+
+export const InformationCircle = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+    </svg>
+}
+
+export const HashTag = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5" />
+    </svg>
+}
+
+export const GlobeAlt = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
+    </svg>
+}
+
+export const ArrowRightCircle = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+}
+
+export const PlusSmall = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
+  </svg>
+}
+
+export const ArrowSmallRight = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
+  </svg>
+}
+
+export const ArrowSmallUp = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" />
+  </svg>
+}

components/KatexReact.js

@@ -0,0 +1,58 @@
+import KaTeX from 'katex'
+import { memo, useEffect, useState } from 'react'
+
+/**
+ * 数学公式
+ * @param {*} param0
+ * @returns
+ */
+const TeX = ({
+  children,
+  math,
+  block,
+  errorColor,
+  renderError,
+  settings,
+  as: asComponent,
+  ...props
+}) => {
+  const Component = asComponent || (block ? 'div' : 'span')
+  const content = (children ?? math)
+  const [state, setState] = useState({ innerHtml: '' })
+
+  useEffect(() => {
+    try {
+      const innerHtml = KaTeX.renderToString(content, {
+        displayMode: true,
+        errorColor,
+        throwOnError: !!renderError,
+        ...settings
+      })
+
+      setState({ innerHtml })
+    } catch (error) {
+      if (error instanceof KaTeX.ParseError || error instanceof TypeError) {
+        if (renderError) {
+          setState({ errorElement: renderError(error) })
+        } else {
+          setState({ innerHtml: error.message })
+        }
+      } else {
+        throw error
+      }
+    }
+  }, [block, content, errorColor, renderError, settings])
+
+  if ('errorElement' in state) {
+    return state.errorElement
+  }
+
+  return (
+    <Component
+      {...props}
+      dangerouslySetInnerHTML={{ __html: state.innerHtml }}
+    />
+  )
+}
+
+export default memo(TeX)

components/LA51.js

@@ -0,0 +1,18 @@
+import { siteConfig } from '@/lib/config'
+import { useEffect } from 'react'
+
+/**
+ * 51LA统计
+ */
+export default function LA51() {
+  const ANALYTICS_51LA_ID = siteConfig('ANALYTICS_51LA_ID')
+  const ANALYTICS_51LA_CK = siteConfig('ANALYTICS_51LA_CK')
+  useEffect(() => {
+    const LA = window.LA
+    if (LA) {
+      LA.init({ id: `${ANALYTICS_51LA_ID}`, ck: `${ANALYTICS_51LA_CK}`, hashMode: true, autoTrack: true })
+    }
+  }, [])
+
+  return <></>
+}

components/LazyImage.js

@@ -0,0 +1,98 @@
+import { siteConfig } from '@/lib/config'
+import Head from 'next/head'
+import React, { useEffect, useRef, useState } from 'react'
+
+/**
+ * 图片懒加载
+ * @param {*} param0
+ * @returns
+ */
+export default function LazyImage({
+  priority,
+  id,
+  src,
+  alt,
+  placeholderSrc,
+  className,
+  width,
+  height,
+  title,
+  onLoad,
+  style
+}) {
+  const imageRef = useRef(null)
+  const [imageLoaded, setImageLoaded] = useState(false)
+  if (!placeholderSrc) {
+    placeholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
+  }
+
+  const handleImageLoad = () => {
+    setImageLoaded(true)
+    if (typeof onLoad === 'function') {
+      onLoad() // 触发传递的onLoad回调函数
+    }
+  }
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const lazyImage = entry.target
+            lazyImage.src = src
+            observer.unobserve(lazyImage)
+          }
+        })
+      },
+      { rootMargin: '50px 0px' } // Adjust the rootMargin as needed to trigger the loading earlier or later
+    )
+
+    if (imageRef.current) {
+      observer.observe(imageRef.current)
+    }
+
+    return () => {
+      if (imageRef.current) {
+        observer.unobserve(imageRef.current)
+      }
+    }
+  }, [src])
+
+  // 动态添加width、height和className属性，仅在它们为有效值时添加
+  const imgProps = {
+    ref: imageRef,
+    src: imageLoaded ? src : placeholderSrc,
+    alt: alt,
+    onLoad: handleImageLoad
+  }
+
+  if (id) {
+    imgProps.id = id
+  }
+
+  if (title) {
+    imgProps.title = title
+  }
+
+  if (width && width !== 'auto') {
+    imgProps.width = width
+  }
+
+  if (height && height !== 'auto') {
+    imgProps.height = height
+  }
+  if (className) {
+    imgProps.className = className
+  }
+  if (style) {
+    imgProps.style = style
+  }
+  return (<>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img {...imgProps} />
+        {/* 预加载 */}
+        {priority && <Head>
+            <link rel='preload' as='image' src={src} />
+        </Head>}
+    </>)
+}

components/Live2D.js

@@ -0,0 +1,48 @@
+/* eslint-disable no-undef */
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { isMobile, loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+
+/**
+ * 网页动画
+ * @returns
+ */
+export default function Live2D() {
+  const { theme, switchTheme } = useGlobal()
+  const showPet = JSON.parse(siteConfig('WIDGET_PET'))
+  const petLink = siteConfig('WIDGET_PET_LINK')
+
+  useEffect(() => {
+    if (showPet && !isMobile()) {
+      Promise.all([
+        loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
+      ]).then((e) => {
+        if (typeof window?.loadlive2d !== 'undefined') {
+          // https://github.com/xiazeyu/live2d-widget-models
+          try {
+            loadlive2d('live2d', petLink)
+          } catch (error) {
+            console.error('读取PET模型', error)
+          }
+        }
+      })
+    }
+  }, [theme])
+
+  function handleClick() {
+    if (JSON.parse(siteConfig('WIDGET_PET_SWITCH_THEME'))) {
+      switchTheme()
+    }
+  }
+
+  if (!showPet) {
+    return <></>
+  }
+
+  return <canvas id="live2d" width="280" height="250" onClick={handleClick}
+        className="cursor-grab"
+        onMouseDown={(e) => e.target.classList.add('cursor-grabbing')}
+        onMouseUp={(e) => e.target.classList.remove('cursor-grabbing')}
+    />
+}

components/Loading.js

@@ -0,0 +1,13 @@
+
+/**
+ * 异步文件加载时的占位符
+ * @returns
+ */
+const Loading = (props) => {
+  return <div id="loading-container" className="-z-10 w-screen h-screen flex justify-center items-center fixed left-0 top-0">
+        <div id="loading-wrapper">
+            <div className="loading"> <i className="fas fa-spinner animate-spin text-3xl "/></div>
+        </div>
+    </div>
+}
+export default Loading

components/LoadingProgress.js

@@ -0,0 +1,29 @@
+import { useRouter } from 'next/router'
+import NProgress from 'nprogress'
+import { useEffect } from 'react'
+
+/**
+ * 出现页面加载进度条
+ */
+export default function LoadingProgress() {
+  const router = useRouter()
+  // 加载进度条
+  useEffect(() => {
+    const handleStart = (url) => {
+      NProgress.start()
+    }
+
+    const handleStop = () => {
+      NProgress.done()
+    }
+
+    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])
+}

components/Mark.js

@@ -0,0 +1,28 @@
+import { loadExternalResource } from '@/lib/utils'
+
+/**
+ * 将搜索结果的关键词高亮
+ */
+export default async function replaceSearchResult({ doms, search, target }) {
+  if (!doms || !search || !target) {
+    return
+  }
+
+  try {
+    await loadExternalResource('https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js', 'js')
+    const Mark = window.Mark
+    if (doms instanceof HTMLCollection) {
+      for (const container of doms) {
+        const re = new RegExp(search, 'gim')
+        const instance = new Mark(container)
+        instance.markRegExp(re, target)
+      }
+    } else {
+      const re = new RegExp(search, 'gim')
+      const instance = new Mark(doms)
+      instance.markRegExp(re, target)
+    }
+  } catch (error) {
+    console.error('markjs 加载失败', error)
+  }
+}

components/Nest.js

@@ -0,0 +1,124 @@
+/* eslint-disable */
+import { useEffect } from 'react'
+const id = 'canvasNestCreated'
+const Nest = () => {
+  const destroyNest = ()=>{
+      const nest = document.getElementById(id)
+      if(nest && nest.parentNode){
+        nest.parentNode.removeChild(nest)
+      }
+  }
+
+  useEffect(() => {
+    createNest()
+    return () => destroyNest()
+  }, [])
+  return <></>
+}
+
+export default Nest
+
+/**
+ * 创建连接点
+ * @param config
+ */
+function createNest() {
+  const e = document.getElementById('__next')
+  if(!e) return
+  function n(e, n, t) {
+    return e.getAttribute(n) || t
+  }
+  function t() {
+    ;(u = i.width =
+      window.innerWidth ||
+      document.documentElement.clientWidth ||
+      document.body.clientWidth),
+      (d = i.height =
+        window.innerHeight ||
+        document.documentElement.clientHeight ||
+        document.body.clientHeight)
+  }
+  function o() {
+    c.clearRect(0, 0, u, d)
+    const e = [s].concat(x)
+    let n, t, i, l, r, w
+    x.forEach(function (o) {
+      for (
+        o.x += o.xa,
+          o.y += o.ya,
+          o.xa *= o.x > u || o.x < 0 ? -1 : 1,
+          o.ya *= o.y > d || o.y < 0 ? -1 : 1,
+          c.fillRect(o.x - 0.5, o.y - 0.5, 1, 1),
+          t = 0;
+        t < e.length;
+        t++
+      )
+        (n = e[t]),
+          o !== n &&
+            null !== n.x &&
+            null !== n.y &&
+            ((l = o.x - n.x),
+            (r = o.y - n.y),
+            (w = l * l + r * r),
+            w < n.max &&
+              (n === s &&
+                w >= n.max / 2 &&
+                ((o.x -= 0.03 * l), (o.y -= 0.03 * r)),
+              (i = (n.max - w) / n.max),
+              c.beginPath(),
+              (c.lineWidth = i / 2),
+              (c.strokeStyle = 'rgba(' + a.c + ',' + (i + 0.2) + ')'),
+              c.moveTo(o.x, o.y),
+              c.lineTo(n.x, n.y),
+              c.stroke()))
+      e.splice(e.indexOf(o), 1)
+    }),
+      m(o)
+  }
+  var i = document.createElement('canvas')
+  i.id = id
+  var a = (function () {
+      const t = e
+      return {
+        z: n(t, 'zIndex', 0),
+        o: n(t, 'opacity', 0.7),
+        c: n(t, 'color', '0,0,0'),
+        n: n(t, 'count', 99)
+      }
+    })(),
+    c = i.getContext('2d')
+  let u, d
+  var m =
+    window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.oRequestAnimationFrame ||
+    window.msRequestAnimationFrame ||
+    function (e) {
+      window.setTimeout(e, 1e3 / 45)
+    }
+  const l = Math.random
+  var r,
+    s = { x: null, y: null, max: 2e4 }
+  ;(i.style.cssText =
+    'position:fixed;top:0;left:0;pointer-events:none;z-index:' + a.z + ';opacity:' + a.o),
+    (r = 'body'), e.appendChild(i),
+    t(),
+    (window.onresize = t),
+    (window.onmousemove = function (e) {
+      ;(e = e || window.event), (s.x = e.clientX), (s.y = e.clientY)
+    }),
+    (window.onmouseout = function () {
+      ;(s.x = null), (s.y = null)
+    })
+  for (var x = [], w = 0; a.n > w; w++) {
+    const e = l() * u,
+      n = l() * d,
+      t = 2 * l() - 1,
+      o = 2 * l() - 1
+    x.push({ x: e, y: n, xa: t, ya: o, max: 6e3 })
+  }
+  setTimeout(function () {
+    o()
+  }, 100)
+}

components/NotionIcon.js

@@ -0,0 +1,20 @@
+import LazyImage from './LazyImage'
+
+/**
+ * notion的图标icon
+ * 可能是emoji 可能是 svg 也可能是 图片
+ * @returns
+ */
+const NotionIcon = ({ icon }) => {
+  if (!icon) {
+    return <></>
+  }
+
+  if (icon.startsWith('http') || icon.startsWith('data:')) {
+    return <LazyImage src={icon} className='w-8 h-8 my-auto inline mr-1'/>
+  }
+
+  return <span className='mr-1'>{icon}</span>
+}
+
+export default NotionIcon