I tried to make configuration as easy as possible — All you really need to do to get started is edit rootNotionPageId.
我试图使配置尽可能简单 - 您真正需要做的就是编辑 rootNotionPageId 。
We recommend duplicating the default page as a starting point, but you can use any public notion page you want.
我们建议复制默认页面作为起点，但您可以使用任何您想要的公共概念页面。
Make sure your root Notion page is public and then copy the link to your clipboard. Extract the last part of the URL that looks like 7875426197cf461698809def95960ebf, which is your page's Notion ID.
In order to find your Notion workspace ID (optional), just load any of your site's pages into your browser and open up the developer console. There will be a global variable that you can access called block which is the Notion data for the current page. If you enter block.space_id, it will print out your page's workspace ID.
I recommend setting up a collection on your home page that contains all of your articles / projects / content. There are no structural constraints on your Notion workspace, however, so feel free to add content as you normally would in Notion.
The app defaults to slightly different URL paths in dev vs prod (though pasting any dev pathname into prod will work and vice-versa).
该应用程序默认在 dev 与 prod 中的 URL 路径略有不同（尽管将任何 dev 路径名粘贴到 prod 中都可以，反之亦然）。
In development, it will use /nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202 which is a slugified version of the page's title suffixed with its Notion ID. I've found that it's really useful to always have the Notion Page ID front and center during local development.
在开发中，它将使用 /nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202 ，它是页面标题的 slugified 版本，并带有其 Notion ID 后缀。我发现在本地开发过程中始终将概念页面 ID 放在前面和中间非常有用。
In production, it will use /nextjs-notion-blog which is a bit nicer as it gets rid of the extra ID clutter.
在生产中，它将使用 /nextjs-notion-blog ，这更好一点，因为它消除了额外的 ID 混乱。
The mapping of Notion ID to slugified page titles is done automatically as part of the build process.Notion ID 到 slugified
页面标题的映射是作为构建过程的一部分自动完成的。
Just keep in mind that if you plan on changing page titles over time, you probably want to make sure old links will still work, and we don't currently provide a solution for detecting old links aside from Next.js's built-in support for redirects.
You can override the default slug generation on a per-page basis by adding a Slug text property to your database. Any page which has a Slug property will use that as its slug.您可以通过向数据库添加 Slug 文本属性来覆盖每页的默认 slug 生成。任何具有 Slug 属性的页面都将使用它作为其 slug。
NOTE: if you have multiple pages in your workspace with the same slugified name, the app will throw an error letting you know that there are duplicate URL pathnames.
We use next/image to serve images efficiently, with preview images optionally generated via lqip-modern. This gives us extremely optimized image support for sexy smooth images.
Preview images are enabled by default, but they can be slow to generate, so if you want to disable them, set isPreviewImageSupportEnabled to false in site.config.ts.
If you want to cache generated preview images to speed up subsequent builds, you'll need to first set up an external Redis data store. To enable redis caching, set isRedisEnabled to true in site.config.ts and then set REDIS_HOST and REDIS_PASSWORD environment variables to point to your redis instance.
All CSS styles that customize Notion content are located in styles/notion.css. They mainly target global CSS classes exported by react-notion-x styles.css.
Every notion block gets its own unique classname, so you can target individual blocks like this:
每个概念块都有自己唯一的类名，因此您可以像这样定位单个块：
Dark Mode 深色模式
Dark mode is fully supported and can be toggled via the sun / moon icon in the footer.
完全支持深色模式，可以通过页脚中的太阳/月亮图标进行切换。
Automatic Social Images 自动社交图像
All Open Graph and social meta tags are generated from your Notion content, which makes social sharing look professional by default.
所有开放图谱和社交元标签都是从您的 Notion 内容生成的，这使得社交共享默认看起来很专业。
Social images are generated automatically using Vercel OG Image Generation. You can tweak the default React template for social images by editing api/social-images.tsx.社交图像是使用 Vercel OG Image Generation 自动生成的。您可以通过编辑 api/social-images.tsx 来调整社交图像的默认 React 模板。
You can view an example social image live in production here.您可以在此处查看正在生产中的社交图像示例。
Automatic Table of Contents自动目录
By default, every article page will have a table of contents displayed as an aside on desktop. It uses scrollspy logic to automatically update the current section as the user scrolls through your document, and makes it really easy to jump between different sections.
If a page has less than minTableOfContentsItems (default 3), the table of contents will be hidden. It is also hidden on the index page and if the browser window is too small.
This table of contents uses the same logic that Notion uses for its built-in Table of Contents block (see getPageTableOfContents for the underlying logic).
If you want to test your redis builds with GitHub Actions, then you'll need to edit the default build action to add REDIS_HOST and REDIS_PASSWORD. Here is an example from my personal branch. You'll also need to add these environment variables to your GitHub repo as repository secrets.
