一分钟内搭建个人link

中文 | 英文

演示： 点击此处查看演示网站

我的网站 点击此处查看我的网站

1. 在你的Notion中复制这个模板，获取Notion页面ID，如下所示： Notion 模板 ID 为 292e44db817d4cafb370287e59a63b93?pvs=4
2. 复制这个仓库到你的vps或者github
3. 在 site.config.ts 中编辑值Notion id 📝，将Notion页面ID更改为你的ID，
4. 直接导入vercel部署，或者在vps上部署

Next.js 和 Notion 集成的终极入门套件。

简介

通过 react-notion-x、Next.js 和 Vercel，这个仓库汇聚了我的个人博客和作品集。

功能

• 快速设置：只需编辑一个 配置文件 🛠
• 通过 react-notion-x 深度集成 Notion
• 技术栈：Next.js、TypeScript、React ⚙
• 性能和SEO优化 🚀
• 自动生成社交图像 🖼
• 干净的URL 🌐
• 动态目录 📚
• 深色模式支持 🌒
• 用于快速搜索的CMD+K / CMD+P 🔍
• 移动响应式 📱

入门

配置在 site.config.ts 中处理。

1. 复制或克隆这个仓库 🍴
2. 编辑 site.config.ts 中的值 📝
3. 运行 npm install 📦
4. 用于本地测试的 npm run dev 🖥
5. 用于推送到 Vercel 的 npm run deploy 🚀

对于 rootNotionPageId，使用你的公共 Notion 页面 URL 的最后一部分。更多说明在仓库中。

URL 方案

该应用程序在开发和生产中采用不同的URL路径，尽管任何开发路径都可以在生产中使用，反之亦然。

• 开发：URL采用 /nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202 的形式，是一个附加了Notion ID的slugified标题，对于快速ID引用非常有用。

• 生产：URL更干净，如 /nextjs-notion-blog，省略了ID。

URL映射在构建期间自动发生。如果更改标题，请确保旧链接仍然可用。Next.js 的 重定向 可以帮助，但我们不提供内置的旧链接检测。

有关详细信息，请参阅 mapPageUrl 和 getCanonicalPageId。

可以使用Notion数据库中的Slug文本属性定义自定义slug。

⚠️ 跨页面重复的slug会触发错误。

图像优化

默认情况下启用预览图像。要禁用，请在 site.config.ts 中将 isPreviewImageSupportEnabled 设置为 false。

Redis 缓存

为了更快地加载预览图像，请在 site.config.ts 中将 isRedisEnabled 设置为 true 以

启用Redis缓存。在 .env 文件中定义 REDIS_HOST 和 REDIS_PASSWORD。

REDIS_HOST='TODO' REDIS_PASSWORD='TODO'

推荐的Redis提供商：Redis Labs（提供免费计划）。

预览图像和Redis缓存是可选的；如果不需要，请在配置中禁用。

自定义样式

用于Notion内容的CSS位于 styles/notion.css，目标是来自 react-notion-x 的 styles.css 中的类。

对于特定的Notion块：

.notion-block-260baa77f1e1428b97fb14ac99c7c385 { display: none; }

深色主题

<p align="center">
  <img src="Light_Mode_URL" width="45%">
  &nbsp; &nbsp; &nbsp; &nbsp;
  <img src="Dark_Mode_URL" width="45%">
</p>

支持深色模式；点击页脚中的太阳/月亮图标。