Tools
Apps
Post on: Jul 19, 2023Last edited: Jul 10, 2025Words 4668Read Time≈ 12 min
type
status
slug
tags
category
icon
password
summary

Notion+Nextjs建站

使用 NextJS + Notion API 实现的，支持多种部署方案的静态博客，无需服务器、零门槛搭建网站，为Notion和所有创作者设计。 (A static blog built with NextJS and Notion API, supporting multiple deployment options. No server required, zero threshold to set up a website. Designed for Notion and all creators.)
 
Notion 数据库 ID
NotionNext
作者是tangly(老唐)，1992年出生于中国福建，爱好编程和商业。2015年本科主修电气工程，因为兴趣自学编程，并有多年移动互联网开发经验，目前致力于海外游戏平台架构设计。
NotionNext主题预览：https://preview.tangly1024.com/
NotionNext部署：https://docs.tangly1024.com/article/vercel-deploy-notion-next
NotionNext模板：https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d
环境变量（Settings选择Environment Variables然后重新部署Redeploy）：https://github.com/tangly1024/NotionNext/blob/main/blog.config.js
 
NotionNext Post页面中，每篇文章都将有以下属性：
属性
必填
说明
备注
title
是
文章标题
标题不应过长，否则影响显示效果
status
是
发布状态
（仅当状态为Published 时会被 展示）
type
是
页面类型 (博文Post / 单页(Page)
单页不会在博文列表显示 。
summary
否
内容摘要
搜索和简略显示会用到
date
否
发布日期
在V3.3.9之前的版本此项为必填。
category
否
文章分类
可以自定义
tags
否
文章标签
可多个，建议不要太多
slug
否
文章短路径
(每篇文章唯一，请勿 重复）
icon
否
菜单栏图标(仅当Page类型有效)
可以参考：图标库地址
password
否
文章加锁
需要输入密码才允许访问
Tips
  • 无slug\category\tag\tittle文章；此文章的路径为notion页面id
  • summary是文章摘要，摘要内容可被用做搜索，预览。文章列表默认展示概要；若要在列表直接展示文章内容，可在blog.config.js中配置。
  • 状态Published页面显示。 状态Draft，页面不显示也不能被搜索。。invisible页面只能通过链接打开
  • password设置密码，但是没有意义，通过notion的分享页面可以看到全部内容及密码
  • 支持主题：'hexo','next',"fukasawa','medium','example','matery','gitbook','simple’
  • 支持 Waline\Giscus\Valine\GitTalk\Utterance\Cusdis\Twikoo六种评论插件，可以同时开启，点击评论区的Tab切换
  • 公告的排版，在notion中的文字默认居左对齐，但是在公告中显示时会默认居中。 notion image 如需调整，可以到主题下对应的 Announcement.js 中修改 公告的样式。
  • Menu,SubMenu 这两个类型本质只是菜单，唯一功能是跳转到slug指定的页面，指定页面可以是任意page\post\外链； 但Menu和SubMenu本身不应该放文章内容。
  • slug开头不要有空格，slug不要使用emoji
 

nobelium

是一个重庆人做的• Chongqing, China
地址：https://github.com/craigary/nobelium
环境变量：https://github.com/craigary/nobelium/blob/main/blog.config.js

nextjs-notion-starter-kit

地址：https://github.com/transitive-bullshit/nextjs-notion-starter-kit
修改配置（不能用环境变量）：https://github.com/transitive-bullshit/nextjs-notion-starter-kit/blob/main/site.config.ts
 

多级列表

  • 事物的必然性
  1. 事物按规律变化，也有一种不可避免的性质．这种性质就叫做必然性
    1. 事物的必然性，是事物本身的性质（我们反对宿命论的是其认为这一切是受神明的支配，而不是反对事物发展中存在的不可避免的性质的事实）
      1. 第三级别列表
      2. 第三级别列表
    2. 其决定于它自己本身发展的情况和周围的条件
      1. 第三级别列表
        1. 第三级别列表
 
💡
生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果只是对自己行动的嘉奖。
 

特殊段落

1.代码

其他更多语言

2.公式

  • 数学公式
    • 化学方程
    其他更多公式
     

    3. 图表

    4. PDF嵌入

    5.下载附件

    下载PDF附件.pdf
    469.5KB

    6. 照片集

    照片集
    照片标题1
    照片标题1
    照片标题2
    照片标题2

    7. 内嵌网页 embeds

     

    8.代办

    家庭
    洗衣
    做饭
    事业
    开会
    加班

    9. 同步块 sync-block

    Notion支持将不同页面的块进行同步，即 SyncBlock，以下是来自另一个页面的块：
    💡
    注意 ： 同步块的使用条件是源页面也要被开放共享 ，否则NotionNext将无权访问，页面上会被忽略渲染。
    notion image
     

    10.按钮动作

     
     

    Notion快捷键

    提示： cmd/ctrl 分别的是Mac系统上的 command 键以及Windows和Linux上的control 键

    常用的6个快捷键 📝

    • 按 cmd/ctrl + p 打开搜索框或访问一个最近的页面
    • 按 cmd/ctrl + [ 回前一个页面
    • 按 cmd/ctrl + ] 去后一个页面
    • 按 cmd/ctrl + n 创建一个新页面
    • 按 cmd/ctrl + shift + n 或 cmd/ctrl + click 打开一个新的Notion窗口
    • 按 cmd/ctrl + shift + l 切换夜间模式
    🤣 Emoji符号🎒
    如何在页面内快速地插入emoji表情，输入一个:+特定单词,例如:apple 就是🍎或者 :clapping 可以输出 👏 你也可以输入系统自带的Emoji表情，在Mac上按 ctrl + cmd + space 输入；在Windows上按 windows key + . 或 windows key + ; 输入

    Markdown 快捷键

    与markdown语法的使用方式一致，开始输入新的一行文字时、或在已存在的内容开头，输入以下内容：
    • 输入 # 然后按 空格键 创建一级标题
    • 输入 ## 然后按 空格键 创建二级子标题
    • 输入 ### 然后按 空格键 创建三级子标题
    • 输入 > 然后按 空格键 创建一个可折叠列表
    • 输入 " 然后按 空格键 创建一个引用文本
    • 输入 [] 可以创建一个TODO复选框
    • 输入 , , 或 + 然后按 空格键 将创建一个子弹列表.
    • 输入 1. 然后按 空格键 创建一个带数字编号的列表
    输入文字时，支持以下符号的转义:
    • 字体加粗：在你的文字左右两侧输入 *
    • 斜体：在你的文字左右两侧输入
    • 行内代码 : 文字左右两侧输入 `
    • 删除线 :文字左右两侧输入 ~

    创建和设计一个内容块

    • 按 enter 插入一行文本。
    • 按 shift + enter 在文本块内创建换行符。
    • 按 cmd/ctrl + shift + m 创建一个评论注释。
    • 键入 -- （连续三个破折号）以创建分割线。。
    • 在选中文字后，按 cmd/ctrl + b 变成粗体文字.
    • 选择文本后，按 cmd/ctrl + i 变成文本斜体.
    • 选中文本后，按 cmd/ctrl + u 添加下划线.
    • 选中文本后，按 cmd/ctrl + shift + s 出现 删除线.
    • 选择文本后，按 cmd/ctrl + k 添加链接. 您还可以将 URL 粘贴到所选文本上以使用 cmd/ctrl+v将文字转为一个链接
    • 选中文本后，按 cmd/ctrl + e 转为内联代码。
    • 按 tab 缩进和嵌套内容。 Note: 注意：每当您缩进时，就是将该块嵌套在其上方的块内。如果您选择父项，则其下的所有内容也将被选中。例如：
      • 块 1 ← 父块
        • 块 2 ← 块 1 内的嵌套块
    • 按 shift + tab 取消嵌套内容。
    • 在块的开头或结尾键入 /turn 以将其转换为不同类型的块。您会看到弹出的选项列表。
    • 在任何文本块的开头或结尾键入 /color 以更改其颜色或突出显示颜色。 (要删除颜色或突出显示，只需键入 /default.) 示例： /blue, /blue background
    数字组合快捷键cmd/ctrl + option/shift + [num] 
                            • 当你拖拽一个内容块时，按下 option/alt 键，可以复制这个块。

                            编辑和移动块

                            Notion 中的一切都是一个块 — 从一行文字（或段落）到一个图像或嵌入内容都是。以下快捷方式可让您在选择后编辑整个块。
                            • 按esc选择您当前所在的块。或清除选定的块。
                            • 按cmd/ctrl + a一次选择光标所在的块。
                            • 按空格键可以全屏打开所选图像。或者退出全屏。
                            • 按箭头键选择不同的块。
                            • 按住shift +向上/向下箭头键可以向上或向下扩展您的选择。
                            • 在 Mac 上使用cmd+shift+单击，在 Windows/Linux 上使用alt + shift + 单击以选择或取消选择整个块。
                            • 使用shift +单击选择另一个块和中间的所有块。
                            • 按退格键或删除键删除选定的块。
                            • 按cmd/ctrl + d复制您选择的块。
                            • 按Enter可编辑选定块内的任何文本（或在页面内打开页面）。
                            • 按cmd/ctrl + /编辑或更改一个或多个选定的块。
                              • 使用此快捷方式可以更改块的类型、颜色，或者编辑、复制或移动块。您会在弹出的菜单顶部看到一个文本框。只需键入您想要的操作、块或颜色：
                            notion image
                            • 在板视图中（Board View），选择多张卡片，然后使用cmd/ctrl + /一次性编辑它们。示例：以下是一次更改多个任务状态的方法。
                            notion image
                            • 按住cmd/ctrl + shift +箭头键来移动选定的块。
                            • 按cmd/ctrl + option/alt + t以展开或关闭切换列表中的所有切换。
                            • 按cmd/ctrl + shift + h应用您使用的最后一个文本或突出显示颜色。
                            • 按cmd/ctrl + enter修改您所在的当前块。 Modify 的意思是：
                              • 打开一个页面
                              • 选中或取消选中待办事项复选框
                              • 打开或关闭切换列表项
                              • 使嵌入或图像全屏

                            快捷键@命令

                            • 提及一个人 -键入@和另一个工作区成员的姓名，以引起他们对某事的注意。他们会得到通知。在评论和讨论中很有用。
                            • 提及页面 -在工作区中键入@和另一个页面的名称以创建指向它的链接。如果您更改页面名称，此链接也会自动更改。
                            • 提到一个日期 键入@并输入任何格式的日期（或“yesterday”，“today”和“tomorrow”，甚至“next Wednesday”）。可以快速引入一个日期，例如 Jul 20, 2023
                            • 添加提醒 -键入@remind后跟任何格式的日期（包括“昨天”、“今天”、“明天”等）。您可以单击出现的链接来调整您想要提醒的日期和确切时间。届时您会收到通知
                            • 行首才能使用@符号的功能，如果你仅仅是想输入@符号，按ESC撤销@指令菜单。

                            快捷键[[ 与 + 命令

                            • 链接页面 - 键入[[和工作区中另一个页面的名称以创建指向它的链接。如果您更改页面名称，此链接也会自动更改。
                            • 创建一个子页面- 键入[[和你想要的子页面嵌套的当前页面中的名称。使用光标或箭头键在出现的下拉菜单中选择+ 添加新子页面。
                            • 在其他地方创建一个新页面 - 键入[[和您要创建的页面的名称。使用光标或箭头键在出现的下拉列表中选择 ↗ Add new page in...，然后选择要添加该页面的页面或数据库。
                            提示：当您使用 [[ 时，下拉菜单将首先显示页面链接选项。当您使用 + 时，下拉菜单将首先显示页面创建选项。
                            • 创建子页面 -键入+和要嵌套在当前页面中的子页面的名称。使用光标或箭头键在出现的下拉菜单中选择+ 添加新子页面。
                            • 在其他地方创建一个新页面 -键入+和您要创建的页面的名称。使用光标或箭头键在出现的下拉列表中选择 ↗ Add new page in...，然后选择要添加该页面的页面或数据库。
                            • 链接页面 -在工作区中键入+和另一个页面的名称以创建指向它的链接。如果您更改页面名称，此链接也会自动更改。

                            快捷键/ 命令

                            在Notion中按/会显示一个完整的内容块菜单，您可以用鼠标从中选择插入一种类型的块。
                            你可以通过先按/然后输入您想要的块类型，来进一步快捷输入。以下是您的输入的类型名称：
                            基本斜线命令
                            • /text或/plain 创建一个新的文本块。
                            • /page创建一个新页面（并在您按下enter时自动打开它）。
                            • /bullet创建一个项目符号列表。
                            • /num创建一个编号列表。
                            • /todo创建带有复选框的待办事项列表。
                            • /toggle创建一个切换列表。
                            • /div创建一个浅灰色分隔线。
                            • quote创建一个较大文本的引用块。
                            • /h1或/#创建一个大标题。
                            • /h2或/##创建一个中等大小的标题。
                            • /h3或/###创建一个小标题。
                            • /link创建指向工作区中另一个页面的链接。
                            • esc清除/菜单。如果您只是想在写作中使用 / ，则非常方便。
                            行内内容
                            • /mention可让您提及工作区中的页面或人员
                            • /date或/reminder可让您向页面添加时间戳或提醒
                            • /equation可让您根据文本添加 TeX 公式
                            • /emoji 调出表情符号选择器
                            数据库
                            • /table-inline在当前页面内创建一个数据库表。
                            • /board-inline在当前页面内创建一个看板。
                            • /calendar-inline在当前页面内创建一个日历。
                            • /list-inline在当前页面内创建一个列表样式的数据库。
                            • /gallery-inline在当前页面内创建一个画廊。
                            • /timeline-inline在当前页面内创建一个时间线。
                            • 也可以使用full而不是inline创建上述任何内容，以在其自己的页面中自动打开该类型的数据库视图。例如：/table-full，/board-full
                            • /linked创建一个链接数据库——一个现有数据库的副本，您可以将其插入任何页面内嵌，并根据需要过滤或查看。有助于在同一页面上从同一数据库创建多个摘录。
                            插入多媒体
                            • /image将显示上传或嵌入图像的选项，或从Unsplash添加图像。
                            • /pdf允许您将 URL 粘贴到任何 PDF 中，以便它会在您的页面上内嵌显示。
                            • /book允许您将 URL 粘贴到任何网站以创建网络书签。像这样：
                            • /video允许您上传视频文件或嵌入来自 YouTube、Vimeo 等的视频。
                            • /audio允许您上传音频文件或嵌入来自 SoundCloud、Spotify 等的录音。
                            • /code创建一个代码块，您可以在其中编写和复制任何代码片段。
                            • /file允许您从计算机上传任何文件或创建嵌入。
                            其他高级内容
                            • /comment允许您在任何块上创建评论。
                            • /duplicate创建当前块的精确副本。
                            • /moveto允许您将该块移动到不同的页面。
                            • /delete删除当前块。
                            • /toc创建一个目录块。
                            • /bread插入一个面包屑菜单，显示当前页面在工作区中的位置。
                            • /math或/latex允许您使用TeX编写数学方程和符号。
                             

                            🤗 总结归纳

                             

                            📎 参考文章

                            • 一些引用
                            • 引用文章
                            Loading...
                            Emoji

                            😀Emoji

                            👨‍💻Developer
                            Car quality Issues 汽车质量问题

                            🚗Car quality Issues 汽车质量问题

                            🍾Lifestyle