category
tags
type
status
slug
date
summary
icon
password
 
💡
感谢您的访问,本文是旧版的NotionNext操作手册,请异步NotionNext文档中心获取最新版本的操作手册
 
👉 点击下方链接访问新版操作文档

前言

本文将做为NotionNext的功能使用说明,以及各类问题的汇总。
此文是提供给已经部署好NotionNext站点的用户阅读,如果您还没有自己的站点,请访问下文部署自己的站点:
 

如何开始写作?

将鼠标指向数据库表中的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
文章加锁
需要输入密码才允许访问
数据库的每一列有不同的功能; type: 这条数据的类型 ,有 notice公告、post文章、page单页、menu菜单、submenu子菜单这几种类型。 slug ,根据数据类型,有不同的作用:在菜单中表示跳转到哪个页面, 在文章中表示这篇文章在博客中的访问地址。 例如 一个类型为page的数据slug为test , 则可以通过 https://域名/test 访问到这个page;而一个类型为post的数据,slug为example,则可以通过 https://域名/article/example 访问到这个博客,同时您的首页列表中也会显示这条博客。
💡
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配置环境变量
      1. notion image
    1. 找到Setting → Environment Variables
      1. notion image
    1. 在Key中填写配置名称,Value中填写配置的值,如下图:
      1. notion image
    1. 修改完环境变量,回到项目的Deployments下,将最新的部署记录Redeploy
      1. 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(点击展开说明)
      使用上方的在线工具,上传图片,即可生成 ICO文件,您可以自行选择满意的分辨率,我这里选的是48x48:
      notion image
      下载后,请将ico重命名为favicon.ico
      ❓如何在Github中替换文件 (点击展开说明)
      1. 在项目中点击public目录
        1. notion image
      1. 在public目录中点击右上角 Add file ,再在下拉框中选择 Upload files
        1. notion image
      1. 在上传页面中点击choose your files 上传您的图标
        1. 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
       

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

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

      5. 文章路径

      Notion中支持添加 PostPage两种类型文章,其中 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

          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配置评论插件-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
          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

          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站点:

          六、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
          项目不定期会修复bug、增加新特性,请参考此篇文章进行更新: