diff --git a/.env.local b/.env.local index 48bf046f..61bd04c0 100644 --- a/.env.local +++ b/.env.local @@ -1,2 +1,2 @@ # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables -NEXT_PUBLIC_VERSION=3.6.1 \ No newline at end of file +NEXT_PUBLIC_VERSION=3.6.3 \ No newline at end of file diff --git a/blog.config.js b/blog.config.js index 2e5028e1..4497b3d3 100644 --- a/blog.config.js +++ b/blog.config.js @@ -1,29 +1,26 @@ // 注: process.env.XX是Vercel的环境变量，配置方式见：https://docs.tangly1024.com/zh/features/personality const BLOG = { + // Important page_id！！！Duplicate Template from https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5 + NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', + PSEUDO_STATIC: true, // 伪静态路径，开启后所有文章URL都以 .html 结尾。 + NEXT_REVALIDATE_SECOND: 5, // 更新内容缓存间隔 单位(秒)；即每个页面有5秒的纯静态期、此期间无论多少次访问都不会抓取notion数据；调大该值有助于节省Vercel资源、同时提升访问速率，但也会使文章更新有延迟。 + THEME: process.env.NEXT_PUBLIC_THEME || 'hexo', // 主题， 支持 ['next','hexo',"fukasawa','medium','example'] @see https://preview.tangly1024.com + THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮 + LANG: 'zh-CN', // e.g 'zh-CN','en-US' see /lib/lang.js for more. + SINCE: 2021, // e.g if leave this empty, current year will be used. + APPEARANCE: 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式 + AUTHOR: 'tangly1024', // 作者 BIO: '一个普通的干饭人🍚', // 作者简介 LINK: 'https://tangly1024.com', // 网站地址 KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开 - NOTION_PAGE_ID: - process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5 - NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public - DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮 - - // 一个小插件展示你的facebook fan page~ @see https://tw.andys.pro/article/add-facebook-fanpage-notionnext - FACEBOOK_PAGE_TITLE: - process.env.NEXT_PUBLIC_FACEBOOK_PAGE_TITLE || null, // 邊欄 Facebook Page widget 的標題欄，填''則無標題欄 e.g FACEBOOK 粉絲團' - FACEBOOK_PAGE: - process.env.NEXT_PUBLIC_FACEBOOK_PAGE || null, // Facebook Page 的連結 e.g https://www.facebook.com/tw.andys.pro - FACEBOOK_PAGE_ID: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_ID || '', // Facebook Page ID 來啟用 messenger 聊天功能 - FACEBOOK_APP_ID: process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || '', // Facebook App ID 來啟用 messenger 聊天功能 获取: https://developers.facebook.com/ - - THEME: process.env.NEXT_PUBLIC_THEME || 'hexo', // 主题， 支持 ['next','hexo',"fukasawa','medium','example'] @see https://preview.tangly1024.com - THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮 - LANG: 'zh-CN', // e.g 'zh-CN','en-US' see /lib/lang.js for more. - HOME_BANNER_IMAGE: './bg_image.jpg', // 首页背景大图，默认文件：/public/bg_image.jpg 。会被Notion中的封面图覆盖。 - SINCE: 2021, // e.g if leave this empty, current year will be used. - BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX - APPEARANCE: 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式 + // 社交链接，不需要可留空白，例如 CONTACT_WEIBO:'' + CONTACT_EMAIL: 'mail@tangly1024.com', // 邮箱 + CONTACT_WEIBO: '', // 你的微博个人主页 + CONTACT_TWITTER: '', // 你的twitter个人主页 + CONTACT_GITHUB: 'https://github.com/tangly1024', // 你的github个人主页 + CONTACT_TELEGRAM: 'https://t.me/tangly_1024', // 你的telegram 地址 例如 https://t.me/tangly_1024 + CONTACT_LINKEDIN: '', // 你的linkedIn 首页 // 自定义字体示例： 请先将 CUSTOM_FONT 改为 true， 并将 CUSTOM_FONT_URL 改为你的字体CSS地址，同时在 CUSTOM_FONT_SANS 与 CUSTOM_FONT_SERIF 中指定你的 fontfamily CUSTOM_FONT: true, // 是否使用自定义字体 @@ -31,15 +28,25 @@ const BLOG = { CUSTOM_FONT_SANS: ['LXGW WenKai'], // 自定义无衬线字体 CUSTOM_FONT_SERIF: ['LXGW WenKai'], // 自定义衬线字体 + // 一个小插件展示你的facebook fan page~ @see https://tw.andys.pro/article/add-facebook-fanpage-notionnext + FACEBOOK_PAGE_TITLE: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_TITLE || null, // 邊欄 Facebook Page widget 的標題欄，填''則無標題欄 e.g FACEBOOK 粉絲團' + FACEBOOK_PAGE: process.env.NEXT_PUBLIC_FACEBOOK_PAGE || null, // Facebook Page 的連結 e.g https://www.facebook.com/tw.andys.pro + FACEBOOK_PAGE_ID: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_ID || '', // Facebook Page ID 來啟用 messenger 聊天功能 + FACEBOOK_APP_ID: process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || '', // Facebook App ID 來啟用 messenger 聊天功能 获取: https://developers.facebook.com/ + + BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX + // 图标库CDN(可以直接改版本号） FONT_AWESOME_PATH: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/6.2.0/css/all.min.css', + // PrismJs CDN + PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/', BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc BACKGROUND_DARK: '#000000', // use hex value, don't forget '#' SUB_PATH: '', // leave this empty unless you want to deploy in a folder POST_URL_PREFIX: process.env.NEXT_PUBLIC_POST_URL_PREFIX || 'article', // POST类型文章的默认路径前缀，例如默认POST类型的路径是 /article/[slug] - // 如果此项配置为 '' 空， 则文章将没有前缀路径，使用场景： 希望 文章前缀路径为 /post 的情况 支持多级 + // 如果此项配置为 '' 空， 则文章将没有前缀路径，使用场景： 希望文章前缀路径为 /post 的情况 支持多级 POST_LIST_STYLE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载 POST_LIST_PREVIEW: process.env.NEXT_PUBLIC_POST_PREVIEW || 'false', // 是否在列表加载文章预览 @@ -51,22 +58,12 @@ const BLOG = { PREVIEW_CATEGORY_COUNT: 16, // 首页最多展示的分类数量，0为不限制 PREVIEW_TAG_COUNT: 16, // 首页最多展示的标签数量，0为不限制 - // 社交链接，不需要可留空白，例如 CONTACT_WEIBO:'' - CONTACT_EMAIL: 'mail@tangly1024.com', // 邮箱 - CONTACT_WEIBO: '', // 你的微博个人主页 - CONTACT_TWITTER: '', // 你的twitter个人主页 - CONTACT_GITHUB: 'https://github.com/tangly1024', // 你的github个人主页 - CONTACT_TELEGRAM: 'https://t.me/tangly_1024', // 你的telegram 地址 例如 https://t.me/tangly_1024 - CONTACT_LINKEDIN: '', // 你的linkedIn 首页 - - // 鼠标点击烟花特效 FIREWORKS: process.env.NEXT_PUBLIC_FIREWORKS || false, // 鼠标点击烟花特效 // 悬浮挂件 WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件 - WIDGET_PET_LINK: - 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models + WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题 // 评论互动 可同时开启多个支持 GISCUS CUSDIS UTTERRANCES GITALK @@ -74,40 +71,27 @@ const BLOG = { // giscus @see https://giscus.app/ COMMENT_GISCUS_REPO: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REPO || '', // 你的Github仓库名 e.g 'tangly1024/NotionNext' COMMENT_GISCUS_REPO_ID: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REPO_ID || '', // 你的Github Repo ID e.g ( 設定完 giscus 即可看到 ) - COMMENT_GISCUS_CATEGORY_ID: - process.env.NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID || '', // 你的Github Discussions 內的 Category ID ( 設定完 giscus 即可看到 ) - COMMENT_GISCUS_MAPPING: - process.env.NEXT_PUBLIC_COMMENT_GISCUS_MAPPING || 'pathname', // 你的Github Discussions 使用哪種方式來標定文章, 預設 'pathname' - COMMENT_GISCUS_REACTIONS_ENABLED: - process.env.NEXT_PUBLIC_COMMENT_GISCUS_REACTIONS_ENABLED || '1', // 你的 Giscus 是否開啟文章表情符號 '1' 開啟 "0" 關閉 預設開啟 - COMMENT_GISCUS_EMIT_METADATA: - process.env.NEXT_PUBLIC_COMMENT_GISCUS_EMIT_METADATA || '0', // 你的 Giscus 是否提取 Metadata '1' 開啟 '0' 關閉 預設關閉 - COMMENT_GISCUS_INPUT_POSITION: - process.env.NEXT_PUBLIC_COMMENT_GISCUS_INPUT_POSITION || 'bottom', // 你的 Giscus 發表留言位置 'bottom' 尾部 'top' 頂部, 預設 'bottom' + COMMENT_GISCUS_CATEGORY_ID: process.env.NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID || '', // 你的Github Discussions 內的 Category ID ( 設定完 giscus 即可看到 ) + COMMENT_GISCUS_MAPPING: process.env.NEXT_PUBLIC_COMMENT_GISCUS_MAPPING || 'pathname', // 你的Github Discussions 使用哪種方式來標定文章, 預設 'pathname' + COMMENT_GISCUS_REACTIONS_ENABLED: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REACTIONS_ENABLED || '1', // 你的 Giscus 是否開啟文章表情符號 '1' 開啟 "0" 關閉 預設開啟 + COMMENT_GISCUS_EMIT_METADATA: process.env.NEXT_PUBLIC_COMMENT_GISCUS_EMIT_METADATA || '0', // 你的 Giscus 是否提取 Metadata '1' 開啟 '0' 關閉 預設關閉 + COMMENT_GISCUS_INPUT_POSITION: process.env.NEXT_PUBLIC_COMMENT_GISCUS_INPUT_POSITION || 'bottom', // 你的 Giscus 發表留言位置 'bottom' 尾部 'top' 頂部, 預設 'bottom' COMMENT_GISCUS_LANG: process.env.NEXT_PUBLIC_COMMENT_GISCUS_LANG || 'zh-CN', // 你的 Giscus 語言 e.g 'en', 'zh-TW', 'zh-CN', 預設 'en' - COMMENT_GISCUS_LOADING: - process.env.NEXT_PUBLIC_COMMENT_GISCUS_LOADING || 'lazy', // 你的 Giscus 載入是否漸進式載入, 預設 'lazy' - COMMENT_GISCUS_CROSSORIGIN: - process.env.NEXT_PUBLIC_COMMENT_GISCUS_CROSSORIGIN || 'anonymous', // 你的 Giscus 可以跨網域, 預設 'anonymous' + COMMENT_GISCUS_LOADING: process.env.NEXT_PUBLIC_COMMENT_GISCUS_LOADING || 'lazy', // 你的 Giscus 載入是否漸進式載入, 預設 'lazy' + COMMENT_GISCUS_CROSSORIGIN: process.env.NEXT_PUBLIC_COMMENT_GISCUS_CROSSORIGIN || 'anonymous', // 你的 Giscus 可以跨網域, 預設 'anonymous' COMMENT_CUSDIS_APP_ID: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID || '', // data-app-id 36位 see https://cusdis.com/ - COMMENT_CUSDIS_HOST: - process.env.NEXT_PUBLIC_COMMENT_CUSDIS_HOST || 'https://cusdis.com', // data-host, change this if you're using self-hosted version - COMMENT_CUSDIS_SCRIPT_SRC: - process.env.NEXT_PUBLIC_COMMENT_CUSDIS_SCRIPT_SRC || - 'https://cusdis.com/js/cusdis.es.js', // change this if you're using self-hosted version + COMMENT_CUSDIS_HOST: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_HOST || 'https://cusdis.com', // data-host, change this if you're using self-hosted version + COMMENT_CUSDIS_SCRIPT_SRC: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_SCRIPT_SRC || 'https://cusdis.com/js/cusdis.es.js', // change this if you're using self-hosted version - COMMENT_UTTERRANCES_REPO: - process.env.NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO || '', // 你的代码仓库名， 例如我是 'tangly1024/NotionNext'； 更多文档参考 https://utteranc.es/ + COMMENT_UTTERRANCES_REPO: process.env.NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO || '', // 你的代码仓库名， 例如我是 'tangly1024/NotionNext'； 更多文档参考 https://utteranc.es/ // gitalk评论插件 更多参考 https://gitalk.github.io/ COMMENT_GITALK_REPO: process.env.NEXT_PUBLIC_COMMENT_GITALK_REPO || '', // 你的Github仓库名，例如 'NotionNext' COMMENT_GITALK_OWNER: process.env.NEXT_PUBLIC_COMMENT_GITALK_OWNER || '', // 你的用户名 e.g tangly1024 COMMENT_GITALK_ADMIN: process.env.NEXT_PUBLIC_COMMENT_GITALK_ADMIN || '', // 管理员用户名、一般是自己 e.g 'tangly1024' - COMMENT_GITALK_CLIENT_ID: - process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID || '', // e.g 20位ID ， 在gitalk后台获取 - COMMENT_GITALK_CLIENT_SECRET: - process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET || '', // e.g 40位ID， 在gitalk后台获取 + COMMENT_GITALK_CLIENT_ID: process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID || '', // e.g 20位ID ， 在gitalk后台获取 + COMMENT_GITALK_CLIENT_SECRET: process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET || '', // e.g 40位ID， 在gitalk后台获取 COMMENT_GITALK_DISTRACTION_FREE_MODE: false, // 类似facebook的无干扰模式 COMMENT_GITTER_ROOM: process.env.NEXT_PUBLIC_COMMENT_GITTER_ROOM || '', // gitter聊天室 see https://gitter.im/ 不需要则留空 @@ -128,16 +112,13 @@ const BLOG = { ANALYTICS_CNZZ_ID: process.env.NEXT_PUBLIC_ANALYTICS_CNZZ_ID || '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id] ANALYTICS_GOOGLE_ID: process.env.NEXT_PUBLIC_ANALYTICS_GOOGLE_ID || '', // 谷歌Analytics的id e.g: G-XXXXXXXXXX - ANALYTICS_ACKEE_TRACKER: - process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.net/tracker.js' - ANALYTICS_ACKEE_DATA_SERVER: - process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.net , don't end with a slash - ANALYTICS_ACKEE_DOMAIN_ID: - process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b' + ANALYTICS_ACKEE_TRACKER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.net/tracker.js' + ANALYTICS_ACKEE_DATA_SERVER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.net , don't end with a slash + ANALYTICS_ACKEE_DOMAIN_ID: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b' - SEO_GOOGLE_SITE_VERIFICATION: - process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code + SEO_GOOGLE_SITE_VERIFICATION: process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code + // 谷歌广告 ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx // 自定义配置notion数据库字段名 @@ -154,13 +135,16 @@ const BLOG = { icon: process.env.NEXT_PUBLIC_NOTION_PROPERTY_ICON || 'icon' }, - ENABLE_CACHE: process.env.ENABLE_CACHE || false, // 开启缓存 会将Notion数据缓存在内存中，稍微提升访问速度，但要更新内容需要多次刷新页面 - - AVATAR: '/avatar.png', // 作者头像，被notion中的ICON覆盖。如果没有ICON则取public目录下的avatar.png + // 作废配置 + AVATAR: '/avatar.png', // 作者头像，被notion中的ICON覆盖。若无ICON则取public目录下的avatar.png TITLE: process.env.NEXT_PUBLIC_TITLE || 'NotionNext BLOG', // 站点标题 ，被notion中的页面标题覆盖 - DESCRIPTION: - process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖 + HOME_BANNER_IMAGE: './bg_image.jpg', // 首页背景大图, 会被notion中的封面图覆盖，若无封面图则会使用代码中的 /public/bg_image.jpg 文件 + DESCRIPTION: process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖 + // 开发相关 + NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public + DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮 + ENABLE_CACHE: process.env.ENABLE_CACHE || false, // 开启缓存会将Notion数据缓存在内存中，通常在开发调试中使用，正式部署开启此功能意义不大。 isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables) isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables) VERSION: process.env.NEXT_PUBLIC_VERSION // 版本号 } diff --git a/components/Busuanzi.js b/components/Busuanzi.js index 12e592d8..fec41e5f 100644 --- a/components/Busuanzi.js +++ b/components/Busuanzi.js @@ -4,26 +4,23 @@ import { useGlobal } from '@/lib/global' // import { useRouter } from 'next/router' import React from 'react' +let path = '' + export default function Busuanzi () { const { theme } = useGlobal() - const router = useRouter() - - // 切换文章时更新 - React.useEffect(() => { - const busuanziRouteChange = url => { + const Router = useRouter() + Router.events.on('routeChangeComplete', (url, option) => { + if (url !== path) { + path = url busuanzi.fetch() } - router.events.on('routeChangeComplete', busuanziRouteChange) - return () => { - router.events.off('routeChangeComplete', busuanziRouteChange) - } - }, [router.events]) + }) // 更换主题时更新 React.useEffect(() => { if (theme) { busuanzi.fetch() } - }) + }, [theme]) return null } diff --git a/components/NotionPage.js b/components/NotionPage.js index e195e24d..8739917f 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -1,47 +1,11 @@ import { NotionRenderer } from 'react-notion-x' import dynamic from 'next/dynamic' -// import mediumZoom from 'medium-zoom' import mediumZoom from '@fisch0920/medium-zoom' import React from 'react' import { isBrowser } from '@/lib/utils' import Image from 'next/image' import Link from 'next/link' import { Code } from 'react-notion-x/build/third-party/code' -// import { Pdf } from 'react-notion-x/build/third-party/pdf' -// import { Equation } from 'react-notion-x/build/third-party/equation' - -import 'prismjs/components/prism-bash.js' -import 'prismjs/components/prism-markup-templating.js' -import 'prismjs/components/prism-markup.js' -import 'prismjs/components/prism-c.js' -import 'prismjs/components/prism-cpp.js' -import 'prismjs/components/prism-csharp.js' -import 'prismjs/components/prism-docker.js' -import 'prismjs/components/prism-java.js' -import 'prismjs/components/prism-js-templates.js' -import 'prismjs/components/prism-coffeescript.js' -import 'prismjs/components/prism-diff.js' -import 'prismjs/components/prism-git.js' -import 'prismjs/components/prism-go.js' -import 'prismjs/components/prism-graphql.js' -import 'prismjs/components/prism-handlebars.js' -import 'prismjs/components/prism-less.js' -import 'prismjs/components/prism-makefile.js' -import 'prismjs/components/prism-markdown.js' -import 'prismjs/components/prism-objectivec.js' -import 'prismjs/components/prism-ocaml.js' -import 'prismjs/components/prism-python.js' -import 'prismjs/components/prism-reason.js' -import 'prismjs/components/prism-rust.js' -import 'prismjs/components/prism-sass.js' -import 'prismjs/components/prism-scss.js' -import 'prismjs/components/prism-solidity.js' -import 'prismjs/components/prism-sql.js' -import 'prismjs/components/prism-stylus.js' -import 'prismjs/components/prism-swift.js' -import 'prismjs/components/prism-wasm.js' -import 'prismjs/components/prism-yaml.js' -import 'prismjs/components/prism-r.js' const Equation = dynamic(() => import('react-notion-x/build/third-party/equation').then(async (m) => { diff --git a/components/PrismMac.js b/components/PrismMac.js index 1aab0ddc..687bf666 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -3,32 +3,35 @@ import Prism from 'prismjs' import 'prismjs/plugins/toolbar/prism-toolbar' import 'prismjs/plugins/show-language/prism-show-language' import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard' -// import 'prismjs/plugins/autoloader/prism-autoloader' import 'prismjs/plugins/line-numbers/prism-line-numbers' import 'prismjs/plugins/line-numbers/prism-line-numbers.css' - +// 所有语言的prismjs 使用autoloader引入 +import 'prismjs/plugins/autoloader/prism-autoloader' // mermaid图 import mermaid from 'mermaid' -import { useGlobal } from '@/lib/global' -import { useRouter } from 'next/router' +import BLOG from '@/blog.config' /** * @author https://github.com/txs/ * @returns */ const PrismMac = () => { - const router = useRouter() - const { isDarkMode } = useGlobal() - const scrollTop = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop - React.useEffect(() => { renderPrismMac() - window.scrollTo(0, scrollTop) - router.events.on('routeChangeComplete', renderPrismMac) - return () => { - router.events.off('routeChangeComplete', renderPrismMac) - } - }, [isDarkMode]) + + // 折叠代码行号bug + const observer = new MutationObserver(mutationsList => { + for (const m of mutationsList) { + if (m.target.nodeName === 'DETAILS') { + const preCode = m.target.querySelector('pre.notion-code') + if (preCode) { + Prism.plugins.lineNumbers.resize(preCode) + } + } + } + }) + observer.observe(document.querySelector('#container'), { attributes: true, subtree: true }) + }, []) return <> } @@ -36,14 +39,6 @@ function renderPrismMac() { const container = document?.getElementById('container-inner') const codeToolBars = container?.getElementsByClassName('code-toolbar') - if (codeToolBars) { - Array.from(codeToolBars).forEach(item => { - const codeBlocks = item.getElementsByTagName('pre') - if (codeBlocks.length === 0) { - item.remove() - } - }) - } // Add line numbers const codeBlocks = container?.getElementsByTagName('pre') if (codeBlocks) { @@ -56,33 +51,37 @@ function renderPrismMac() { } // 支持 Mermaid - const mermaids = document.querySelectorAll('.notion-code .language-mermaid') - if (mermaids) { - for (const e of mermaids) { - e.parentElement.classList.remove('code-toolbar') - const chart = e.firstChild.textContent - if (e.firstElementChild) { - e.parentElement.remove() - continue - } - if (chart) { - e.parentElement.innerHTML = `
${chart}
` + const mermaidPres = document.querySelectorAll('pre.notion-code.language-mermaid') + if (mermaidPres) { + for (const e of mermaidPres) { + const chart = e.querySelector('code').textContent + if (chart && !e.querySelector('.mermaid')) { + const m = document.createElement('div') + m.className = 'mermaid' + m.innerHTML = chart + e.appendChild(m) } } } const mermaidsSvg = document.querySelectorAll('.mermaid') if (mermaidsSvg) { + let needLoad = false for (const e of mermaidsSvg) { if (e?.firstChild?.nodeName !== 'svg') { - mermaid.contentLoaded() + needLoad = true } } + if (needLoad) { + mermaid.contentLoaded() + } } // 重新渲染之前检查所有的多余text try { + // setup autoloader + Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH Prism.highlightAll() } catch (err) { console.log('代码渲染', err) diff --git a/components/WalineComponent.js b/components/WalineComponent.js index 2bff99f1..00ee3242 100644 --- a/components/WalineComponent.js +++ b/components/WalineComponent.js @@ -3,28 +3,34 @@ import { init } from '@waline/client' import BLOG from '@/blog.config' import { useRouter } from 'next/router' +const path = '' +let waline = null /** * @see https://waline.js.org/guide/get-started.html * @param {*} props * @returns */ const WalineComponent = (props) => { - const walineInstanceRef = React.useRef(null) const containerRef = React.createRef() const router = useRouter() const updateWaline = url => { - walineInstanceRef.current?.update(props) + if (url !== path && waline) { + waline.update(props) + } } React.useEffect(() => { - walineInstanceRef.current = init({ - ...props, - el: containerRef.current, - serverURL: BLOG.COMMENT_WALINE_SERVER_URL - }) - router.events.on('routeChangeComplete', updateWaline) + if (!waline) { + waline = init({ + ...props, + el: containerRef.current, + serverURL: BLOG.COMMENT_WALINE_SERVER_URL + }) + } + // 跳转评论 + router.events.on('routeChangeComplete', updateWaline) const anchor = window.location.hash if (anchor) { // 选择需要观察变动的节点 @@ -54,7 +60,8 @@ const WalineComponent = (props) => { } return () => { - walineInstanceRef.current?.destroy() + waline.destroy() + waline = null router.events.off('routeChangeComplete', updateWaline) } }, []) diff --git a/lib/busuanzi.js b/lib/busuanzi.js index df0564c4..9255485a 100644 --- a/lib/busuanzi.js +++ b/lib/busuanzi.js @@ -55,7 +55,7 @@ bszCaller = { const fetch = () => { bszTag && bszTag.hides() bszCaller.fetch('//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback', function (t) { - // console.log('不蒜子请求结果',t) + // console.log('不蒜子',t) bszTag.texts(t), bszTag.shows() }) } diff --git a/lib/notion/getNotionData.js b/lib/notion/getNotionData.js index 3da64da3..d76499b8 100644 --- a/lib/notion/getNotionData.js +++ b/lib/notion/getNotionData.js @@ -224,8 +224,7 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) { post.type && (post.type === 'Post' || post.type === 'Page') && (post.status === 'Published' || post.status === 'Invisible') - } - ) + }) // Sort by date if (BLOG.POSTS_SORT_BY === 'date') { diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js index 1eced850..7c1cdb4f 100644 --- a/lib/notion/getPageProperties.js +++ b/lib/notion/getPageProperties.js @@ -76,6 +76,13 @@ export default async function getPageProperties(id, block, schema, authToken, ta properties.slug = (properties.slug ?? properties.id) } + // 开启伪静态路径 + if (BLOG.PSEUDO_STATIC) { + if (!properties.slug.endsWith('.html')) { + properties.slug += '.html' + } + } + properties.createdTime = formatDate(new Date(value.created_time).toString(), BLOG.LANG) properties.lastEditedTime = formatDate(new Date(value?.last_edited_time).toString(), BLOG.LANG) properties.fullWidth = value.format?.page_full_width ?? false @@ -87,25 +94,25 @@ export default async function getPageProperties(id, block, schema, authToken, ta }) || [] delete properties.content return properties - - // 从Block获取封面图;优先取PageCover，否则取内容图片 - function getImageUrl(imgObj, blockVal) { - if (!imgObj) { - return null - } - if (imgObj.startsWith('/')) { - return 'https://www.notion.so' + imgObj // notion内部图片转相对路径为绝对路径 - } - - if (imgObj.startsWith('http')) { - // 判断如果是notion上传的图片要拼接访问token - const u = new URL(imgObj) - if (u.pathname.startsWith('/secure.notion-static.com') && u.hostname.endsWith('.amazonaws.com')) { - return defaultMapImageUrl(imgObj, blockVal) // notion上传的图片需要转换请求地址 - } - } - - // 其他图片链接 或 emoji - return imgObj - } +} + +// 从Block获取封面图;优先取PageCover，否则取内容图片 +function getImageUrl(imgObj, blockVal) { + if (!imgObj) { + return null + } + if (imgObj.startsWith('/')) { + return 'https://www.notion.so' + imgObj // notion内部图片转相对路径为绝对路径 + } + + if (imgObj.startsWith('http')) { + // 判断如果是notion上传的图片要拼接访问token + const u = new URL(imgObj) + if (u.pathname.startsWith('/secure.notion-static.com') && u.hostname.endsWith('.amazonaws.com')) { + return defaultMapImageUrl(imgObj, blockVal) // notion上传的图片需要转换请求地址 + } + } + + // 其他图片链接 或 emoji + return imgObj } diff --git a/lib/notion/getPostBlocks.js b/lib/notion/getPostBlocks.js index 685e8d46..53715d36 100644 --- a/lib/notion/getPostBlocks.js +++ b/lib/notion/getPostBlocks.js @@ -72,7 +72,7 @@ function filterPostBlocks(id, pageBlock, slice) { continue } count++ - // 处理 c++ 和 c#两种语言 + // 处理 c++、c#、汇编等语言名字映射 if (b?.value?.type === 'code') { if (b?.value?.properties?.language?.[0][0] === 'C++') { b.value.properties.language[0][0] = 'cpp' @@ -80,6 +80,9 @@ function filterPostBlocks(id, pageBlock, slice) { if (b?.value?.properties?.language?.[0][0] === 'C#') { b.value.properties.language[0][0] = 'csharp' } + if (b?.value?.properties?.language?.[0][0] === 'Assembly') { + b.value.properties.language[0][0] = 'asm6502' + } } delete b?.role diff --git a/next.config.js b/next.config.js index 50e4c1c8..f2a86bc5 100644 --- a/next.config.js +++ b/next.config.js @@ -17,6 +17,14 @@ module.exports = withBundleAnalyzer({ 'images.unsplash.com' ] }, + async rewrites() { + return [ + { + source: '/:path*.html', + destination: '/:path*' + } + ] + }, async headers() { return [ { diff --git a/package.json b/package.json index 2f5be0dc..a09fc887 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "notion-next", - "version": "3.6.1", + "version": "3.6.3", "homepage": "https://github.com/tangly1024/NotionNext.git", "license": "MIT", "repository": { @@ -40,7 +40,7 @@ "notion-client": "6.15.6", "notion-utils": "6.15.6", "preact": "^10.5.15", - "prism-themes": "^1.9.0", + "prism-themes": "1.9.0", "qrcode.react": "^1.0.1", "react": "17.0.2", "react-cookies": "^0.1.1", diff --git a/pages/[...slug].js b/pages/[...slug].js index 63eb5e51..b16fff72 100644 --- a/pages/[...slug].js +++ b/pages/[...slug].js @@ -24,6 +24,7 @@ const Slug = props => { const [lock, setLock] = React.useState(post?.password && post?.password !== '') React.useEffect(() => { + changeLoadingState(false) if (post?.password && post?.password !== '') { setLock(true) } else { @@ -32,7 +33,6 @@ const Slug = props => { }, [post]) if (!post) { - changeLoadingState(true) setTimeout(() => { if (isBrowser()) { const article = document.getElementById('container') @@ -47,8 +47,6 @@ const Slug = props => { return } - changeLoadingState(false) - /** * 验证文章密码 * @param {*} result @@ -97,8 +95,13 @@ export async function getStaticPaths() { } export async function getStaticProps({ params: { slug } }) { - // slug 是个数组 - const fullSlug = slug.join('/') + let fullSlug = slug.join('/') + console.log('[读取Notion]', fullSlug) + if (BLOG.PSEUDO_STATIC) { + if (!fullSlug.endsWith('.html')) { + fullSlug += '.html' + } + } const from = `slug-props-${fullSlug}` const props = await getGlobalNotionData({ from }) props.post = props.allPages.find((p) => { @@ -108,13 +111,13 @@ export async function getStaticProps({ params: { slug } }) { if (!props.post) { const pageId = slug.slice(-1)[0] if (pageId.length < 32) { - return { props, revalidate: 1 } + return { props, revalidate: BLOG.NEXT_REVALIDATE_SECOND } } const post = await getNotion(pageId) if (post) { props.post = post } else { - return { props, revalidate: 1 } + return { props, revalidate: BLOG.NEXT_REVALIDATE_SECOND } } } else { props.post.blockMap = await getPostBlocks(props.post.id, 'slug') @@ -132,7 +135,7 @@ export async function getStaticProps({ params: { slug } }) { delete props.allPages return { props, - revalidate: 1 + revalidate: BLOG.NEXT_REVALIDATE_SECOND } } diff --git a/pages/archive/index.js b/pages/archive/index.js index 6e8f115a..f60d9f77 100644 --- a/pages/archive/index.js +++ b/pages/archive/index.js @@ -2,6 +2,7 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData' import React from 'react' import { useGlobal } from '@/lib/global' import * as ThemeMap from '@/themes' +import BLOG from '@/blog.config' const ArchiveIndex = props => { const { theme, locale } = useGlobal() @@ -26,7 +27,7 @@ export async function getStaticProps() { return { props, - revalidate: 1 + revalidate: BLOG.NEXT_REVALIDATE_SECOND } } diff --git a/pages/category/[category]/index.js b/pages/category/[category]/index.js index a6c4f1af..363b97a0 100644 --- a/pages/category/[category]/index.js +++ b/pages/category/[category]/index.js @@ -52,7 +52,7 @@ export async function getStaticProps({ params: { category } }) { return { props, - revalidate: 1 + revalidate: BLOG.NEXT_REVALIDATE_SECOND } } diff --git a/pages/category/[category]/page/[page].js b/pages/category/[category]/page/[page].js index 122d48f5..3360cd70 100644 --- a/pages/category/[category]/page/[page].js +++ b/pages/category/[category]/page/[page].js @@ -47,7 +47,7 @@ export async function getStaticProps({ params: { category, page } }) { return { props, - revalidate: 1 + revalidate: BLOG.NEXT_REVALIDATE_SECOND } } diff --git a/pages/category/index.js b/pages/category/index.js index bb219bb5..f06f4bb0 100644 --- a/pages/category/index.js +++ b/pages/category/index.js @@ -3,6 +3,7 @@ import React from 'react' import { useGlobal } from '@/lib/global' import * as ThemeMap from '@/themes' import { getAllCategories } from '@/lib/notion/getAllCategories' +import BLOG from '@/blog.config' /** * 分类首页 @@ -30,6 +31,6 @@ export async function getStaticProps() { delete props.categoryOptions return { props, - revalidate: 1 + revalidate: BLOG.NEXT_REVALIDATE_SECOND } } diff --git a/pages/index.js b/pages/index.js index 067b9a32..b985b7ef 100644 --- a/pages/index.js +++ b/pages/index.js @@ -44,7 +44,7 @@ export async function getStaticProps() { meta, ...props }, - revalidate: 5 + revalidate: BLOG.NEXT_REVALIDATE_SECOND } } diff --git a/pages/page/[page].js b/pages/page/[page].js index 3162250b..4a2ae8cc 100644 --- a/pages/page/[page].js +++ b/pages/page/[page].js @@ -56,7 +56,7 @@ export async function getStaticProps({ params: { page } }) { return { props, - revalidate: 1 + revalidate: BLOG.NEXT_REVALIDATE_SECOND } } diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js index f26b77ea..aa163d3a 100644 --- a/pages/search/[keyword]/index.js +++ b/pages/search/[keyword]/index.js @@ -48,7 +48,7 @@ export async function getStaticProps({ params: { keyword } }) { props.keyword = keyword return { props, - revalidate: 1 + revalidate: BLOG.NEXT_REVALIDATE_SECOND } } diff --git a/pages/search/[keyword]/page/[page].js b/pages/search/[keyword]/page/[page].js index 6d4cf070..92b14f75 100644 --- a/pages/search/[keyword]/page/[page].js +++ b/pages/search/[keyword]/page/[page].js @@ -45,7 +45,7 @@ export async function getStaticProps({ params: { keyword, page } }) { props.page = page return { props, - revalidate: 1 + revalidate: BLOG.NEXT_REVALIDATE_SECOND } } diff --git a/pages/search/index.js b/pages/search/index.js index d562d627..d7d000eb 100644 --- a/pages/search/index.js +++ b/pages/search/index.js @@ -2,6 +2,7 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData' import { useGlobal } from '@/lib/global' import { useRouter } from 'next/router' import * as ThemeMap from '@/themes' +import BLOG from '@/blog.config' const Search = props => { const { posts, siteInfo } = props @@ -58,7 +59,7 @@ export async function getStaticProps() { props.posts = allPosts return { props, - revalidate: 1 + revalidate: BLOG.NEXT_REVALIDATE_SECOND } } diff --git a/pages/tag/[tag]/index.js b/pages/tag/[tag]/index.js index ca52f8f1..29f904a2 100644 --- a/pages/tag/[tag]/index.js +++ b/pages/tag/[tag]/index.js @@ -43,7 +43,7 @@ export async function getStaticProps({ params: { tag } }) { props.tag = tag return { props, - revalidate: 1 + revalidate: BLOG.NEXT_REVALIDATE_SECOND } } diff --git a/pages/tag/[tag]/page/[page].js b/pages/tag/[tag]/page/[page].js index ffd2efb0..f62c2330 100644 --- a/pages/tag/[tag]/page/[page].js +++ b/pages/tag/[tag]/page/[page].js @@ -38,7 +38,7 @@ export async function getStaticProps({ params: { tag, page } }) { delete props.allPages return { props, - revalidate: 1 + revalidate: BLOG.NEXT_REVALIDATE_SECOND } } diff --git a/pages/tag/index.js b/pages/tag/index.js index 93965586..6b6f2aba 100644 --- a/pages/tag/index.js +++ b/pages/tag/index.js @@ -3,6 +3,7 @@ import React from 'react' import { useGlobal } from '@/lib/global' import * as ThemeMap from '@/themes' import { getAllTags } from '@/lib/notion' +import BLOG from '@/blog.config' /** * 标签首页 @@ -31,7 +32,7 @@ export async function getStaticProps() { delete props.tagOptions return { props, - revalidate: 1 + revalidate: BLOG.NEXT_REVALIDATE_SECOND } } diff --git a/styles/notion.css b/styles/notion.css index 1e64a28d..adf92a8c 100644 --- a/styles/notion.css +++ b/styles/notion.css @@ -929,7 +929,7 @@ svg.notion-page-icon { .notion-toggle { padding: 3px 2px; - max-width: 100%; + width: 100%; } .notion-toggle > summary { cursor: pointer; @@ -1945,4 +1945,37 @@ pre[class*='language-'] { .notion-asset-wrapper-pdf > div { display: block !important; +} + +::selection { + @apply bg-blue-500 text-gray-50 !important; +} + +.dark img{ + @apply opacity-80 +} + +.dark #live2d { + @apply opacity-80 +} + +/* https://github.com/kchen0x */ +.notion-quote { + display: block; + border-radius: 5px; + border-color: var(--notion-blue); + border-left-color: var(--notion-blue); + background-color: var(--notion-blue_background_co); + width: 100%; + white-space: pre-wrap; + word-break: break-word; + border-left: 10px solid; + padding: 0.2em 0.9em; + margin: 6px 0; + font-size: 1em; + /* color: var(--notion-gray); */ +} + +.notion-asset-wrapper-pdf>div{ + width:unset!important } \ No newline at end of file diff --git a/styles/prism-mac-style.css b/styles/prism-mac-style.css index da5d7fdf..ff2472a7 100644 --- a/styles/prism-mac-style.css +++ b/styles/prism-mac-style.css @@ -4,6 +4,7 @@ .code-toolbar { position: relative; box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4); + padding-bottom: 0 !important; @apply mb-8 mt-4 pt-6 w-full rounded-lg bg-black } @@ -26,16 +27,6 @@ margin-top: -0.1rem; } -pre[class*='language-'].line-numbers { - position: relative; - padding: 3px; /*修改*/ - padding-left: 3.8em; - counter-reset: linenumber; - max-height: 400px; /*修改*/ - background: black; - border: none; -} - .notion-code > code[class*='language-'], pre[class*='language-'] { background: black; @@ -70,10 +61,14 @@ pre[class*='language-'] { } pre[class*="language-mermaid"] { - background: transparent !important; - @apply dark:bg-gray-200 !important; + @apply bg-gray-50 dark:bg-gray-200 !important; } -.line-numbers-rows > span { - height:auto !important; +/* mermaid 原文隐藏 */ +code.language-mermaid { + display:none +} + +pre.notion-code.line-numbers{ + margin-bottom: 0 !important } \ No newline at end of file diff --git a/themes/medium/LayoutSlug.js b/themes/medium/LayoutSlug.js index f9242af0..e0c52b84 100644 --- a/themes/medium/LayoutSlug.js +++ b/themes/medium/LayoutSlug.js @@ -9,6 +9,8 @@ import { ArticleLock } from './components/ArticleLock' export const LayoutSlug = props => { const { post, lock, validPassword } = props + const { locale } = useGlobal() + if (!post) { return { post.content = Object.keys(post.blockMap.block) post.toc = getPageTableOfContents(post, post.blockMap) } - const { locale } = useGlobal() const slotRight = post?.toc && post?.toc?.length > 3 && (
diff --git a/themes/medium/components/ArticleDetail.js b/themes/medium/components/ArticleDetail.js index 48630d47..5e6c4da5 100644 --- a/themes/medium/components/ArticleDetail.js +++ b/themes/medium/components/ArticleDetail.js @@ -19,55 +19,58 @@ export const ArticleDetail = props => { locale.LOCALE ) return
-

{post?.title}

-
- - <> - {/* eslint-disable-next-line @next/next/no-img-element */} - + {/* title */} +

{post?.title}

-
- {BLOG.AUTHOR} -
- - -
{date}
-
- {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime} -
-
- -   - -
-
- {/* Notion文章主体 */} -
- {post && ()} -
+ {/* meta */} +
+
+ {date} + | + {post.lastEditedTime} +
+ + +
+
+ +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + -
- {/* 文章内嵌广告 */} - -
-
-
- {CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && } -
- {CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => )} -
-
- {post.type === 'Post' && } - -
-
+
+ {BLOG.AUTHOR} +
+
+ + + {/* Notion文章主体 */} +
+ {post && ()} +
+ +
+ {/* 文章内嵌广告 */} + +
+
+
+ {CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && } +
+ {CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => )} +
+
+ {post.type === 'Post' && } + +
+
} diff --git a/themes/medium/components/GroupMenu.js b/themes/medium/components/GroupMenu.js index 534f2c78..6ec027ab 100644 --- a/themes/medium/components/GroupMenu.js +++ b/themes/medium/components/GroupMenu.js @@ -9,18 +9,18 @@ function GroupMenu ({ customNav }) { const router = useRouter() let links = [ - { name: locale.NAV.INDEX, to: '/' || '/', show: true }, + // { name: locale.NAV.INDEX, to: '/' || '/', show: true }, { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MEDIUM.MENU_CATEGORY }, { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG }, - { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE }, - { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH } + { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE } + // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH } ] if (customNav) { links = links.concat(customNav) } - return