【持续更新】NotionNext 4.1 已上线， 更新历史。
Tangly
Tangly
编程爱好者
/互联网从业者
/知识分享博主
老唐博客

NotionNext 操作手册

Tangly - 2023-2-10 - 软件技术 / NotionNext
发布于:2023-2-10|最后更新: 2023-10-19|
category
tags
type
status
slug
date
summary
icon
password
 
💡
感谢您的访问，本文是旧版的NotionNext操作手册，请异步NotionNext文档中心获取最新版本的操作手册
 
👉 点击下方链接访问新版操作文档
NotionNext-快速免费建站 | NotionNext文档
无需服务器、即使是小白也能几分钟搭建自己的独立博客站～如果你在使用Notion这款神级笔记本的话，不妨来试试顺手建个网站🤣🤣🤣，这是一款基于NotionAPI的博客系统。
NotionNext-快速免费建站 | NotionNext文档
https://docs.tangly1024.com/about
NotionNext-快速免费建站 | NotionNext文档

前言

本文将做为NotionNext的功能使用说明，以及各类问题的汇总。
此文是提供给已经部署好NotionNext站点的用户阅读，如果您还没有自己的站点，请访问下文部署自己的站点:
NotionNext-轻松搭建Notion博客 | TANGLY’s BLOG
无需服务器、只需几分钟即可拥有自己的独立博客站～如果你在使用Notion这款神级笔记本的话，不妨来试试顺手建个网站🤣🤣🤣，这是一款基于NotionAPI的博客系统。
NotionNext-轻松搭建Notion博客 | TANGLY’s BLOG
https://tangly1024.com/article/notion-next#866036b6be8c414889da886ce60d6dfd
NotionNext-轻松搭建Notion博客 | TANGLY’s BLOG
 

如何开始写作？

将鼠标指向数据库表中的title这一栏，会浮现一个OPEN的按钮，点击即可查看编写文章；点击右上角的蓝色NEW按钮创建新文章。
notion image

Notion模板字段说明

Notion数据库中，每条数据都将有以下属性🤔：
属性
必填
说明
备注
title
是
文章标题
ㅤ
status
是
发布状态
（仅当状态为Published 时会被 展示）
type
是
页面类型 (博文Post / 单页(Page)
单页不会在博文列表显示 。
summary
否
内容摘要
搜索和简略显示会用到
date
否
发布日期
在V3.3.9之前的版本此项为必填。
category
否
文章分类
可以自定义
tags
否
文章标签
可多个，建议不要太多
slug
否
文章短路径
(每篇文章唯一，请勿 重复）
icon
否
菜单栏图标(仅当Page/Menu类型有效)
可以参考：图标库地址
password
否
文章加锁
需要输入密码才允许访问
 
💡
Notion有着非常灵活的编辑能力，我十分建议您先阅读《Notion快捷键》这篇文章

一、如何配置站点

💡
首次部署成功后，不需要每次都重新导入Vercel。您可以在笔记或Github代码中快速更新您的站点，诸如切换主题、开启音乐组件、开启评论插件、开启动画特效、修改网站字体等等。

1. 在Notion中修改

在Notion页面中，以下四个元素将会直接同步到网页作为站点信息：
Notion元素
站点信息
图标①
作者头像
标题②
站点标题
描述③
站点描述
封面图④
封面大图
 
图标①、标题②、描述③及封面图④ 分别对应站点的作者头像、站点标题、站点描述和封面大图。
图标①、标题②、描述③及封面图④ 分别对应站点的作者头像、站点标题、站点描述和封面大图。
 

关于网站图片

如何修改网站的头像
notion image
如何修改每篇文章的封面图
notion image
💡
注意！网站图片的大小直接影响整个站点的访问性能。建议在保证图片清晰可见的前提下，尽可能压缩文件大小。建议调整图片尺寸并进行压缩，最好能转换成webp格式后上传。

2. 在Github中修改

 
💡
重要：站点的大部分配置都可以在blog.config.js文件中找到； 您只需修改对应的配置，Vercel将自动部署您Github仓库中的最新代码。
配置方法：在您的github中找到此文件，点击右上角的编辑按钮，可以任意修改参数。
notion image
💡
每次修改代码后，Vercel自动创建一个部署任务以打包部署您的最新代码，且每次部署任务都有唯一的网址提供预览。
可以在Vercel的后台看到您的每次部署记录(点击展开)
notion image
如果遇到问题，请截图部署的错误日志，向群友寻求帮助
notion image
  • 若编译成功：您的线上域名会更新为此次部署的最新版本。
  • 若部署失败：例如代码格式错误、拼写错误，则这次部署则会作废，线上原先运行中的旧版网站不受任何影响。您可以查看后台部署日志找到错误原因。

3. 在环境变量中配置(推荐)

除了直接修改blog.config.js ，可以在vercel后台添加环境变量；这样做的好处是减少对代码的改动，也避免了后续升级时代码发生冲突的概率。
  • 在blog.config.js 文件中可以看到类似 process.env.NEXT_PUBLIC_THEME 的格式，这意味着此类参数支持在Vercel中使用环境变量来配置。
    • 网站优先读取环境变量配置、其次是文件中的配置。
        • 💡
        用后台环境变量配置的好处：有些敏感信息不适合直接在代码中修改，例如一些第三方插件的key，这时候推荐通过环境变量来配置。
    Vercel环境变量如何操作（点击展开)
    1. 项目主页点击Settings，并选择Environment Variables配置环境变量
        2. notion image
    1. 找到Setting → Environment Variables
        2. notion image
    1. 在Key中填写配置名称，Value中填写配置的值，如下图:
        2. notion image
    1. 修改完环境变量，回到项目的Deployments下，将最新的部署记录Redeploy
        2. notion image
     
    VPS本地部署如何操作环境变量？
    直接在项目更目录的 .env.local 文件中添加环境变量即可：

    二、配置说明

    1. 站点信息

    可以添加网站的社交地址，站点域名，作者信息，以及默认主题。
    添加联系方式后，将在Hexo、Next主题下显示一排联系方式按钮。
    notion image
    在图中，我添加了github、telegram、邮件这三种联系方式，最后一个是rss的订阅图标
     

    如何修改默认主题？

    可以改变上述配置中THEME这一项的值；示例如下：
    • 方法1：改动github中的源代码：
      • 方法2: 在vercel后台添加环境变量: NEXT_PUBLIC_THEME
          • 添加环境变量后记得在Deployment中重新部署
          添加环境变量后记得在Deployment中重新部署

      站点多语言

      修改blog.config.js 的 LANG 即可切换站点的默认语言，
      💡
      目前已支持的语言有 en-US、zh-CN、zh-HK、zh-TW、fr-FR、tr-TR、ja-JP；您也可以随时向项目发起PR、提交或完善更多的语言翻译。 您也可以直接在站点链接后拼接语言参数，在线体验多语言： 例如： https://preview.tangly1024.com/?lang=en-US

      浏览器站点图标

      要修改站点在浏览器中的图标，替换 /public 文件夹里的  favicon.ico 文件即可。
      notion image
       
      notion image
       
      ❓如何制作您的icon（点击展开说明）
      favicon制作
      favicon在线制作,icon制作,网站图标,网站图标制作,ico图标制作
      favicon制作
      https://tool.lu/favicon/
      favicon制作
      使用上方的在线工具，上传图片，即可生成 ICO文件，您可以自行选择满意的分辨率，我这里选的是48x48：
      notion image
      下载后，请将ico重命名为favicon.ico
      ❓如何在Github中替换文件 (点击展开说明)
      1. 在项目中点击public目录
          2. notion image
      1. 在public目录中点击右上角 Add file ,再在下拉框中选择 Upload files
          2. notion image
      1. 在上传页面中点击choose your files 上传您的图标
          2. notion image
          ⚠️
          请先将文件重命名为favicon.ico
          notion image
          ✅
          最后点击 Commit changes 提交这次上传。
           
       

      2. 网页字体

      系统预设Google的Noto Sans字体，您也可以在blog.config.js 中自定义字体 ， 以下我用霞鹜文楷作为替换字体的示例。
      💡
      注意，如果字体名称中间有空格，则要用双引号包装，对比如下： 无空格的字体：’Bitter’ 有空格的字体: '"LXGW WenKai"'

      3. 代码风格

      默认代码主题风格是 prism-a11y-dark，如下图
      notion image
      您可以自行修改blog.config.js->62行 -> PRISM_THEME_PATH
      支持的配置列表： https://npm.elemecdn.com/prism-themes/themes/ 预览代码主题： https://github.com/PrismJS/prism-themes
       

      4. 自定义样式、自定义脚本

      您可以自行决定站点的样式和执行的脚本，NotionNext支持两种方式引入您的css 和 js ：
      • 方法一：外部文件引入
          • blog.config.js 中 配置:CUSTOM_EXTERNAL_JS 和CUSTOM_EXTERNAL_CSS 即可
      • 方法二：内部自定义
      ❓
      若引入js和css不能满足您的需求？试试参考《NotionNext二次开发手册》进行自定义开发。

      5. 文章路径

      Notion中支持添加 Post和 Page两种类型文章，其中 Post 类型的文章将被显示在博客列表中。
      文章的访问地址默认是 http://[域名]/article/[slug] ， slug值默认为页面的ID，可以在notion中手动指定。
      如果您不希望文章中间有 article ，可以再 配置文件中修改POST_URL_PREFIX的值，
      💡
      示例：
      • 如果值为空，则文章路径为 http://[域名]/[slug]
        • 如果为post，则文章路径为 http://[域名]/post/[slug]

          6. Notion字段名自定义

          可以让你的Notion模板变成中文的表头和中文的下拉框。

          7. 自定义菜单（二级菜单）

          在V3.13.0版本起，所有版本支持自定义菜单，效果如下：
          notion image
          notion image
          请访问以下链接获取配置帮助：
          NotionNext二级菜单使用说明 | TANGLY’s BLOG
          NotionNext 3.13.0上线，支持更灵活的菜单配置
          NotionNext二级菜单使用说明 | TANGLY’s BLOG
          https://tangly1024.com/article/notion-next-secondary-menu
          NotionNext二级菜单使用说明 | TANGLY’s BLOG

          8. 伪静态

          💡
          网站使用NextJS开发，用户访问到的页面本身就是静态页面。
          NotionNext会将页面缓存一定的时间，超过此时间后，NotionNext会从Notion同步最新的文章内容。缓存时间通过修改NEXT_REVALIDATE_SECOND 配置。
          另外，将 PSEUDO_STATIC 的值修改为 true后，页面的地址最后会以.html结尾，看上去会更像一个静态页面。

          9. 其它样式

          博客列表展现形式
          您可以选择，使用按钮分页，还是滚动鼠标无限加载分页；
          设置每页展示的文章数量。
          设置在列表页是否展示文章内容，还是只是展示标题和摘要。
          博客列表排序
          代码渲染样式
          修改 PRISM_THEME_PATH 参数 可以更换主题风格，可以访问prism-themes主页获取可选的主题。
          修改 CODE_MAC_BAR 参数可以控制代码左上角是否显示 红黄绿三个图标，模仿mac的样式。
          修改CODE_LINE_NUMBERS值为true，则代码最左侧将显示行号。（显示行号后代码将禁用横向滚动）
          notion image
          左右布局颠倒
          hexo主题下默认排版是：文章显示在左，站点信息显示在右，通过修改 LAYOUT_SIDEBAR_REVERSE 为true，将排版调整为 文章显示在右，站点信息显示在左
          鼠标点击特效
          动态背景特效

          三、外部插件

          1. 评论插件

          站点支持多种评论插件，阅读以下文章获取帮助。
          NotionNext如何添加评论插件 | TANGLY's BLOG
          NotionNext添加Cusdis/Giscus/Gitalk/Utterance的步骤教程
          NotionNext如何添加评论插件 | TANGLY's BLOG
          https://tangly1024.com/article/notion-next-comment-plugin
          NotionNext如何添加评论插件 | TANGLY's BLOG
          NotionNext配置评论插件-Valine/Waline | TANGLY's BLOG
          Valine和Waline都是 基于LeanCloud 的 快速、简洁的评论系统，理论上支持但不限于静态博客。 Waline 是从 Valine 衍生的带后端评论系统，可以看作是Valine的升级版，具备更多Valine不支持的功能，两者的数据结构是可以兼容的，你甚至可以同时安装Valine和Waline，两者的评论互通。 两个插件均要借助LeanCloud提供的云函数，云数据存储等功能，对于普通开发者来说免费版已经足够使用。 1.请先登录或注册 LeanCloud, 进入控制台后点击左下角创建应用： 2.进入刚刚创建的应用，选择左下角的设置>应用Key，查看你的APP ID和APP Key。 获取上述的 appId、 appKey等参数后，就可以直接在NotionNext（版本≥3.3.9）中激活valine了， 如果不想使用Valine可以直接跳到文章下一节《Waline部署》部分。 在NotionNext的Vercel环境变量中配置以下内容： NEXT_PUBLIC_VALINE_SERVER_URLS NEXT_PUBLIC_VALINE_PLACEHOLDER 环境变量配置示例： NEXT_PUBLIC_VALINE_SERVER_URLS 说明 此参数选填，在应用内部会尝试自动获取，如果发现获取失败，请手动提供配置，配置方法： 在LeanCloud刚创建的应用中，选择左下角的 设置> 应用Key，找到 Request 域名 第一行： 注意，需要手动在域名前加上 https:// 否则会无法访问valine评论。 安全域名（可选） 点击展开 leanCloud支持设置自己的 安全域名 ，设置后，仅列表中配置的域名才可以访问你的服务。例如我只在博客中用到valine服务，那么我的安全域名只需要配置为 https://tangly1024.com。 部署valine后台（可选）点击展开 valine没有自带后台，可以借助 Valine-Admin 几分钟就可以部署一个管理后台，支持行评论的查看、删除，以及邮件通知，垃圾评论过滤等功能。部署方式不在此文赘述，可以请参阅 官方文档中的"云引擎一键部署 "部分.
          NotionNext配置评论插件-Valine/Waline | TANGLY's BLOG
          https://tangly1024.com/article/notionnext-valine
          NotionNext配置评论插件-Valine/Waline | TANGLY's BLOG
          NotionNext配置评论插件Twikoo | TANGLY's BLOG
          经评论区网友推荐，我开始使用 Twikoo，Twikoo是一个简洁、安全、免费的静态网站评论系统，基于 腾讯云开发 。一番体验，发现Twikoo真的很强大，目前我决定用它作为主要评论插件。 Twikoo支持支持即时通知反垃圾插件、隐私设置等功能，无需另外登录后台，并且配置方式也十分方便，在页面评论区就可以直接管理评论、配置插件。 Twikoo支持一键导入valine评论数据，您可以很方便地迁移评论数据。 在最新版本中 NotionNext已经 支持该评论插件，配置 方法很简单： 在Vercel后台添加一个环境变量 NEXT_PUBLIC_COMMENT_ENV_ID ; 值为您部署好的 twikoo 后台地址。以我的举例： 借助vercel，您可以非常快速地部署自己的twikoo后台，用于储存评论数据。 twikoo的后台数据存储是基于MongoDB数据库的，我们可以先注册创建一个免费的在线MongoDB数据库。 创建MongoDB数据库 1.注册账号 创建数据库 这里下方要设置一个允许访问该数据库的IP地址，推荐设置0.0.0.0，即所有地址都允许访问，毕竟我也不知道自己会用什么ip访问这个数据库。 2.获取数据库连接地址 Vercel一键部署 点击Create将twikoo的代码拷入您的仓库 配置MongoDB数据库地址 添加一个配置 MONGODB_URI 环境变量即可，其值为上一步获得的MongoDB连接地址，注意将链接中MONGODB的密码 替换成您设置的。 上述部署完成后，您将获得一个vercel的twikoo后台页面，您可以选择像我一样映射成二级域名 将您的twikoo后台地址配置在NotionNext的后台，并redeploy即可。 到此完成~ 点击右下角的小齿轮即可配置您的管理员密码、并进行更多的功能设置。赶快体验吧~ 可以访问官方文档获取安装部署帮助，并且查看Twikoo的更多特性。 NotionNext支持多种评论插件，可访问以下文章获得帮助：
          NotionNext配置评论插件Twikoo | TANGLY's BLOG
          https://tangly1024.com/article/notionnext-twikoo
          NotionNext配置评论插件Twikoo | TANGLY's BLOG

          2.宠物挂件

          待完善

          3. 音乐播放插件

          待完善

          4. 站点统计

          待完善

          5. 谷歌广告嵌入

          待完善

          四、主题配置

          💡
          blog.config.js 是整个站点信息的配置。除此之外，每个主题还有各自的配置文件，便于您更细致地定制自己的风格。
          主题配置文件位置
          主题
          配置文件位置
          Hexo
          /themes/hexo/config_hexo.js
          Next
          /themes/next/config_next.js
          Fukasawa
          /themes/fukasawa/config_fuka.js
          Matery
          /themes/matery/config_matery.js
          Medium
          /themes/medium/config_medium.js
          Nobelium
          /themes/nobelium/config_nobelium.js
          Example
          /themes/example/config_examplejs
          Simple
          /themes/simple/config_simple.js

          Hexo主题

          ❓
          hexo主题首页下的“Hi，我是一个程序员”等字样如何修改

          Next主题

          Simple主题

          Medium主题

          五、绑定个性域名

          vercel为您的站点提供一个 免费的*.vercel.app 域名，但vercel的官方域名在大陆被墙，推荐您绑定自己的域名。
          参考以下文章，您可以快速地将自己的域名解析到Vercel站点:
          Vercel应用绑定自己的域名 | 小唐笔记📒
          首先需要在域名服务商处购买域名，可以选择Namesilo、Freenom、Godaddy、阿里云、腾讯云等任意平台。并在域名服务商后台添加一条CNAME转发进行解析，CNAME值为 cname.vervel-dns.com 。 CF具有Worker.js、全球无限CDN流量、网站防火墙、DDoS等特性，我个人比较喜欢将域名解析交给CloudFlare管理 。 ...
          Vercel应用绑定自己的域名 | 小唐笔记📒
          https://tangly1024.com/article/vercel-domain
          Vercel应用绑定自己的域名 | 小唐笔记📒

          六、Notion隐私安全

          您共享的Notion页，他人只有查看权限，除非你手动开启编辑和评论的权限。
          另外，若您不希望别人访问到你的源Notion页面，可选择关闭Noton页面共享，然后通过Notion的access_token进行数据访问。
          notion image

          七、附录

          如果您想完全自定义自己的主题，或想参与NotionNext的开发，可以参考此文章：
          NotionNext二次开发手册 | TANGLY's BLOG
          NotionNext项目支持大量的自定义配置，方便您的个性化； blog.config.js 文件中可以修改站点的基础信息、主题、评论插件等核心配置 每个主题下都有一个配置文件config_[theme].js，以便用户配置自己的页面个性化。 在3.9.4的版本后，项目支持用户自己编写js样式和css脚本，引入脚本有两种方式： 用这两种方式引入脚本，即使本机上没有安装nodejs等开发环境，也可以直接在浏览器控制台中编写调试，js和css样式文件将被自动引入。 若您想更多地自定义自己的主题，例如新增组件等等，除了用上述的脚本引入意外。可以选择在github上 发起issue ，提出改进页面的建议。 当然，您完全可以自己修改代码进行二次开发。本文便是针对小白的一篇开发手册，遵循此步骤n您可以尝试自己修改网站的样式。 您的电脑上需要有一个开发环境NodeJs、以及代码编辑器VSCode， NodeJS 运行环境 安装步骤 windows操作系统下，在官网下载安装最新版的NodeJs即可 VsCode 编辑器 安装下载 设置中文 下载您的代码 安装Github Desktop 点击Sign in to Github登录，或者skip this step 稍后登录都可以 下载代码 用vscode打开项目 打开项目文件 安装项目依赖的组件 点击 菜单栏的终端，并选择 新建终端，然后在新建的终端窗口中输入安装启动脚本： npm install -g yarn --registry=https://registry.npm.taobao.org yarn install 启动项目 只需一个命令 yarn dev # 执行后vscode中会显示 yarn
          NotionNext二次开发手册 | TANGLY's BLOG
          https://tangly1024.com/article/how-to-develop-with-notion-next
          NotionNext二次开发手册 | TANGLY's BLOG
          项目不定期会修复bug、增加新特性，请参考此篇文章进行更新：
          NotionNext更新指南 | TANGLY’s BLOG
          当NotionNext发布新版后，如何更新你的项目？
          NotionNext更新指南 | TANGLY’s BLOG
          https://tangly1024.com/article/how-to-update-notionnext
          NotionNext更新指南 | TANGLY’s BLOG
           
          NotionNext部署-Vercel版本NotionNext 部署-VPS本地部署
          • Twikoo
          • Giscus
          • Cusdis