icon
同步ID
status
date
sync
type
slug
summary
tags
category
url
本文介绍了一个使用Next.js和Vercel快速部署的Notion驱动的网站模板，该模板支持Notion作为CMS，具备快速设置、响应式设计、优化的页面速度、自动社交图像生成、自动目录、暗模式支持等功能。
github 关于notion项目少有的高star项目，这哥们除了这个项目，还有个notion api开发相关的项目，相当于骨灰级notion玩家了。
可惜的是，不知道为什么我两台电脑死活装不上依赖(sharp，对说的就是你），没法体验。从demo看，设计还是在线的。
关键功能
- 主要技术栈：采用Notion作为CMS，结合react-notion-x、Next.js和Vercel。
- 特点: 快速设置、Notion内容的全面支持、使用Next.js、TypeScript和React构建、优秀的页面加载速度、平滑的图片预览、自动社交图像、漂亮的URL、自动目录、暗模式支持、快速搜索、响应式设计、优化的Next.js和Vercel使用。
- 设置: 所有配置在中定义，需要最新版本的Node.js。包括克隆仓库、修改配置、安装依赖、本地测试和部署到Vercel。
- URL路径: 开发和生产环境中URL路径略有不同，开发时显示Notion页面ID，生产时更简洁。
- 预览图像: 使用和生成优化的图像，预览图像默认启用，可通过配置文件禁用。
- Redis: 可选的Redis缓存用于加速生成预览图像，需要设置环境变量。
- 样式: 自定义Notion内容的CSS样式位于，可以针对特定区块进行样式定制。
- 自动社交图像: 从Notion内容自动生成Open Graph和社交元标签，使用无头Chrome生成社交图像。
- 自动目录: 文章页面默认显示目录，使用scrollspy逻辑自动更新当前节。
- 分析: 可选的分析功能，如Fathom Analytics和PostHog Analytics，通过环境变量启用。
- 环境变量: 如果使用Redis、分析或其他需要环境变量的功能，需要在Vercel项目中添加它们。
更多配图
- 作者:notion2go
- 链接:https://notion2go.com/article/transitivebullsh
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。