折腾本腾
NotionNext 操作手册 | Tangly Blog
00 分钟
2023-6-3
2023-6-5
type
status
date
slug
summary
tags
category
icon
password
URL
前言如何开始写作？一、如何配置站点1. 在Notion中修改关于网站图片2. 在Github中修改3. 在环境变量中配置(推荐)二、配置说明1. 站点信息如何修改默认主题？站点多语言浏览器站点图标2. 网页字体3. 代码风格4. 自定义样式、自定义脚本5. 文章路径6. Notion字段名自定义7. 自定义菜单（二级菜单）8. 伪静态9. 其它样式三、外部插件1. 评论插件2.宠物挂件3. 音乐播放插件4. 站点统计5. 谷歌广告嵌入四、主题配置Hexo主题Next主题Simple主题Medium主题五、绑定个性域名六、Notion隐私安全七、附录
本文将做为NotionNext的功能使用说明，以及各类问题的汇总。
此文是提供给已经部署好NotionNext站点的用户阅读，如果您还没有自己的站点，请访问下文部署自己的站点:
NotionNext-轻松搭建Notion博客 | TANGLY’s BLOG无需服务器、只需几分钟即可拥有自己的独立博客站～如果你在使用Notion这款神级笔记本的话，不妨来试试顺手建个网站🤣🤣🤣，这是一款基于NotionAPI的博客系统。https://tangly1024.com/article/notion-next#866036b6be8c414889da886ce60d6dfd
notion image

如何开始写作？

将鼠标指向数据库表中的title这一栏，会浮现一个OPEN的按钮，点击即可查看编写文章；点击右上角的蓝色NEW按钮创建新文章。
notion image
💡
Notion有着非常灵活的编辑能力，我十分建议您先阅读《Notion快捷键》这篇文章

一、如何配置站点

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

1. 在Notion中修改

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

关于网站图片

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

2. 在Github中修改

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

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

除了直接修改blog.config.js ，可以在vercel后台添加环境变量；这样做的好处是减少对代码的改动，也避免了后续升级时代码发生冲突的概率。
  • 在blog.config.js 文件中可以看到类似 process.env.NEXT_PUBLIC_THEME 的格式，这意味着此类参数支持在Vercel中使用环境变量来配置。
    • 网站优先读取环境变量配置、其次是文件中的配置。

    二、配置说明

    1. 站点信息

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

    如何修改默认主题？

    可以改变上述配置中THEME这一项的值；示例如下：
    • 方法1：改动github中的源代码：
      • 方法2: 在vercel后台添加环境变量: NEXT_PUBLIC_THEME
          • notion image
          添加环境变量后记得在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

      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 ：
      • 方法二：内部自定义
      ❓
      若引入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 BLOGNotionNext 3.13.0上线，支持更灵活的菜单配置https://tangly1024.com/article/notion-next-secondary-menu
          notion image

          8. 伪静态

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

          9. 其它样式

          三、外部插件

          1. 评论插件

          站点支持多种评论插件，阅读以下文章获取帮助。
          NotionNext如何添加评论插件 | TANGLY's BLOGNotionNext添加Cusdis/Giscus/Gitalk/Utterance的步骤教程https://tangly1024.com/article/notion-next-comment-plugin
          NotionNext配置评论插件-Valine/Waline | TANGLY's BLOGValine和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 几分钟就可以部署一个管理后台，支持行评论的查看、删除，以及邮件通知，垃圾评论过滤等功能。部署方式不在此文赘述，可以请参阅 官方文档中的"云引擎一键部署 "部分.https://tangly1024.com/article/notionnext-valine
          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支持多种评论插件，可访问以下文章获得帮助：https://tangly1024.com/article/notionnext-twikoo

          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管理 。 ...https://tangly1024.com/article/vercel-domain

          六、Notion隐私安全

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

          七、附录

          如果您想完全自定义自己的主题，或想参与NotionNext的开发，可以参考此文章：
          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中会显示 yarnhttps://tangly1024.com/article/how-to-develop-with-notion-next
          项目不定期会修复bug、增加新特性，请参考此篇文章进行更新：
          NotionNext更新指南 | TANGLY’s BLOG当NotionNext发布新版后，如何更新你的项目？https://tangly1024.com/article/how-to-update-notionnext
          • Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
          Relate Posts :
          软件技术
          Tags：
          • NotionNext
          NotionNext部署-Vercel版本NotionNext 更新日志
          • Twikoo
          • Waline
          • Giscus
          • Cusdis
          上一篇
          NAS安装阿里云WebDAV并添加到本地目录
          下一篇
          教你搭建群晖OpenWrt软路由
          评论
          Loading...
          目录