配置入门 | NotionNext帮助手册

如何配置站点

按照前面的教程部署成功后，后续您可以随时更新您的站点配置，诸如切换主题、开启音乐组件、开启评论插件、开启动画特效、修改网站字体等等。

配置方式分为三种，分别是：

在Notion笔记中修改

Github修改配置代码

Vercel环境变量添加配置

以下展开说明

1. 在Notion中修改

网站的图标、标题、描述、封面图将直接读取您的Notion模板

图标①、标题②、描述③及封面图④ 分别对应站点的作者头像、站点标题站点描述和封面大图。 — 图标①、标题②、描述③及封面图④ 分别对应站点的**作者头像**、**站点标题站点描述**和**封面大图**。

💡

在4.1 之前的版本（1.0 - 4.0）中，很多配置需要到配置文件或环境变量里改，这需要用户打开编辑器或者登录github，乃至登录vercel后台编辑环境变量。 4.1版本之后，支持在Notion中创建一个Config文档，并且随时可以在Notion中编辑配置文件。

使用Notion-Config

💡

在Notion中编辑一个文档，即可实时同步站点配置，开关功能等等，无需登录github、vercel或者服务器。

如何使用？

在您起初复制的这份数据库模板中，我后续更新了一个type为CONFIG的文档，文档中包含了一个数据表格，格式如下：

配置中心使用说明

1.仅 V4.1.0 之后的版本中支持该配置页面 2.此处配置的优先级最高，它将覆盖Vercel环境变量、覆盖blog.config.js。 3.您可以在blog.config.js以及各个主题的config.js中找到可加入的配置 4.并非所有配置都支持，例如NOTION_PAGE_ID就不支持在这里配置等

表格字段说明

表头字段	说明
启用	此项勾选后，配置会同步到NotionNext站点中
配置名	参阅环境变量的变量名，例如 `AUTHOR`
配置值	输入您的值例如作者名 `tangly1024` ，或者 `true` / `false`
配置备注	仅作为备忘说明使用
配置附件	如果配置的值是一张图片，可以在这里上传

复制模板

请您完整复制下面连接中的《配置中心》文档，即可支持NotionConfig功能。

Notion Blog

一个NotionNext搭建的博客

https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d&pvs=4

单击此文档左侧的六个点即可选中，按下Ctrl+C复制文档。然后在您的Notion模板页面中按下Ctrl+V粘贴即可。

2. 修改代码

💡

重要：站点的大部分配置都可以在您代码仓库的 blog.config.js 文件中找到；您只需修改对应的配置，Vercel将自动部署您Github仓库中的最新代码。

💡

若您更新到了NotionNext4.1之后的版本，您可以直接在Notion-Config文件中添加配置，它将直接覆盖blog.config.js中的配置。

配置方法：在您的github中找到此文件，点击右上角的编辑按钮，即可修改参数。

💡

每次修改代码后，Vercel自动创建一个部署任务以打包部署您的最新代码，且每次部署任务都有唯一的网址提供预览。

若编译成功：您的线上域名会更新为此次部署的最新版本。

若部署失败：例如代码格式错误、拼写错误，则这次部署则会作废，线上原先运行中的旧版网站不受任何影响。您可以查看后台部署日志找到错误原因。

附-如何获取部署日志

截图您的部署日志，向群友寻求帮助

在Vercel的后台看到您的每次部署记录(点击展开)

请截图部署的错误日志，错误信息越完整越好；

修改示例

以下示例修改了网站的默认作者

修改前

修改后

以下示例修改了当前网站的网址

修改前

修改后

💡

请将这项配置修改为您的站点域名，否则会影响分享和版权申明的功能使用

3. 在环境变量中配置

除了直接修改代码配置blog.config.js ，也可以在vercel后台添加环境变量；这样做的好处是减少对代码的改动，也避免了后续升级时代码发生冲突的概率。

💡

网站配置优先来自NotionConfig，其次环境变量，最后代码配置。

在blog.config.js 文件中可以看到类似 process.env.NEXT_PUBLIC_THEME 的格式，这意味着此类参数支持在Vercel中使用环境变量来配置。

网站优先读取环境变量配置、其次是文件中的配置。

💡

用后台环境变量配置的好处：有些敏感信息不适合直接在代码中修改，例如一些第三方插件的key，这时候推荐通过环境变量来配置。

Vercel环境变量如何操作 (点击展开教程)

项目主页点击Settings，并选择Environment Variables配置环境变量

找到Setting → Environment Variables

在Key中填写配置名称，Value中填写配置的值，如下图:

环境变量修改后，点击顶部Deployments标签，将列表中最上面的一条部署记录Redeploy即可（如下图）

修改示例

key	value	描述
NEXT_PUBLIC_AUTHOR	momo	将网站默认作者改名为momo
NEXT_PUBLIC_LINK	https://qq.com	将网站的默认网址改为https://qq.com （您在文章底部版权申明可看到修改后的效果）

如何知道key？

在blog.config.js文件中可以看到大量的配置项，配置项中的类似 process.env.NEXT_PUBLIC_THEME ；这样的结构中、加粗部分就是key的名字。例如以下配置表明当前的网站主题是next。

如果需要将主题变为 hexo，则可以添加如下环境变量:

key	value
NEXT_PUBLIC_THEME	hexo

获取key示例2

同样地，再以修改网站的联系邮箱地址为例，blog.config.js中修改邮箱地址的配置如下：

如果直接修改配置是这样的：

若不想修改文件，只改环境变量，则添加以下环境变量即可

key	value
NEXT_PUBLIC_CONTACT_EMAIL	[email protected]

VPS本地部署如何操作环境变量

若您不是用vercel托管，而是在自己的服务器上部署，则可以直接在项目更根录的 .env.local 文件中添加环境变量即可：

4. 不同主题的个性化配置

每个主题都有自己个性化的配置，例如Hexo这个主题首页有个专属的欢迎语

hi，我是一个程序员

这该如何更改？需要访问这个主题的说明文档，请参阅此文档教程的《⭐️主题配置》部分