小唐笔记
分享编程技术与记录生活
Search
NotionNext 操作手册
NotionNext 操作手册
category
技术工具
tags
NotionNext
type
Post
slug
notion-next-guide
summary
介绍NotionNext的所有功能和常见问题说明
status
Published
date
Feb 10, 2023
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数据库中，每条数据都将有以下属性🤔：
数据库的每一列有不同的功能； type： 这条数据的类型 ，有 notice(公告)、post(文章)、page(单页)、menu(菜单)、submenu(子菜单)这几种类型。 slug ，根据数据类型，有不同的作用：
  1. 在菜单(Menu\SubMenu)中表示跳转到哪个页面， 在文章中表示这篇文章在博客中的访问地址、也可以是外链。通常以左斜杆开头： /test-menu对应访问 → https://站点域名/testmenu。也可以设置成完整的外链，例如https://tangly1024.com 。
  1. 在单页中（Page）, 表示这个页面在站点根目录的文件名。不要以左斜杆开头: 例如 test-page → 对应 https://站点域名/test-page。
  1. 在博文中(Post)，也表示文件路径，但是博文会自动添加一个前缀。例如: test-post 则可以通过 https://域名/article/test-post 访问到这个博客，这里的article是默认配置的前缀。
💡
Notion有着非常灵活的编辑能力，我十分建议您先阅读《Notion快捷键》这篇文章

一、如何配置站点

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

1. 在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中使用环境变量来配置。
      • NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5',
THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 默认主题
  • 网站优先读取环境变量配置、其次是文件中的配置。
      • 💡
      用后台环境变量配置的好处：有些敏感信息不适合直接在代码中修改，例如一些第三方插件的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 文件中添加环境变量即可：
# 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
NEXT_PUBLIC_VERSION=3.12.2

二、配置说明

1. 站点信息

可以添加网站的社交地址，站点域名，作者信息，以及默认主题。
添加联系方式后，将在Hexo、Next主题下显示一排联系方式按钮。
AUTHOR: 'tangly1024', // 作者
BIO: '一个普通的干饭人🍚', // 作者简介
LINK: 'https://tangly1024.com', // 网站地址
KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开
THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题  ['next','hexo',"fukasawa','medium','nobelium','simple']

// 社交链接，不需要可留空白，例如 CONTACT_WEIBO:''
CONTACT_EMAIL: '', // 邮箱 例如 mail@tangly1024.com
CONTACT_WEIBO: '', // 你的微博个人主页
CONTACT_TWITTER: '', // 你的twitter个人主页
CONTACT_GITHUB: '', // 你的github个人主页 例如 https://github.com/tangly1024
CONTACT_TELEGRAM: '', // 你的telegram 地址 例如 https://t.me/tangly_1024
CONTACT_LINKEDIN: '', // 你的LinkedIn 首页
notion image
在图中，我添加了github、telegram、邮件这三种联系方式，最后一个是rss的订阅图标
 

如何修改默认主题？

可以改变上述配置中THEME这一项的值；示例如下：
  • 方法1：改动github中的源代码：
      • THEME: process.env.NEXT_PUBLIC_THEME || 'hexo', // 锁定默认主题为hexo
  • 方法2: 在vercel后台添加环境变量: NEXT_PUBLIC_THEME
      • 添加环境变量后记得在Deployment中重新部署
      添加环境变量后记得在Deployment中重新部署

站点多语言

修改blog.config.js 的 LANG 即可切换站点的默认语言，
LANG: 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
💡
目前已支持的语言有 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 中自定义字体 ， 以下我用霞鹜文楷作为替换字体的示例。
// 网站字体
  FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-serif', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
  FONT_URL: [// 字体CSS
    'https://fonts.googleapis.com/css?family=Bitter&display=swap', // Bitter 用作英文数字的字体
    'https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css'
  ],
  FONT_SANS: [// 无衬线字体
    'Bitter', '"LXGW WenKai"','"PingFang SC"', '-apple-system', 'BlinkMacSystemFont', '"Hiragino Sans GB"',
    '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Segoe UI"', '"Noto Sans SC"', 'HarmonyOS_Regular',
    '"Microsoft YaHei"', '"Helvetica Neue"', 'Helvetica', '"Source Han Sans SC"',
    'Arial', 'sans-serif', '"Apple Color Emoji"'],
  FONT_SERIF: [// 衬线字体 
    'Bitter', '"LXGW WenKai"','"Noto Serif SC"', 'SimSun', '"Times New Roman"', 'Times', 'serif',
    '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Apple Color Emoji"'],
💡
注意，如果字体名称中间有空格，则要用双引号包装，对比如下： 无空格的字体：’Bitter’ 有空格的字体: '"LXGW WenKai"'

3. 代码风格

默认代码主题风格是 prism-a11y-dark，如下图
notion image
您可以自行修改blog.config.js->62行 -> PRISM_THEME_PATH
PRISM_THEME_PATH: 'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
支持的配置列表： 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 即可
      // 自定义外部脚本，外部样式
CUSTOM_EXTERNAL_JS: [''], // e.g. ['http://xx.com/script.js','http://xx.com/script.js']
CUSTOM_EXTERNAL_CSS: [''], // e.g. ['http://xx.com/style.css','http://xx.com/style.css']
  • 方法二：内部自定义
❓
若引入js和css不能满足您的需求？试试参考《NotionNext二次开发手册》进行自定义开发。

5. 文章路径

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

6. Notion字段名自定义

可以让你的Notion模板变成中文的表头和中文的下拉框。
// 自定义配置notion数据库字段名
NOTION_PROPERTY_NAME: {
  password: process.env.NEXT_PUBLIC_NOTION_PROPERTY_PASSWORD || 'password',
  type: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE || 'type', // 文章类型，
  type_post: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_POST || 'Post', // 当type文章类型与此值相同时，为博文。
  type_page: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_PAGE || 'Page', // 当type文章类型与此值相同时，为单页。
  type_notice: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_NOTICE || 'Notice', // 当type文章类型与此值相同时，为公告。
  title: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TITLE || 'title', // 文章标题
  status: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS || 'status',
  status_publish: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_PUBLISH || 'Published', // 当status状态值与此相同时为发布，可以为中文
  status_invisible: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_INVISIBLE || 'Invisible', // 当status状态值与此相同时为隐藏发布，可以为中文 ， 除此之外其他页面状态不会显示在博客上
  summary: process.env.NEXT_PUBLIC_NOTION_PROPERTY_SUMMARY || 'summary',
  slug: process.env.NEXT_PUBLIC_NOTION_PROPERTY_SLUG || 'slug',
  category: process.env.NEXT_PUBLIC_NOTION_PROPERTY_CATEGORY || 'category',
  date: process.env.NEXT_PUBLIC_NOTION_PROPERTY_DATE || 'date',
  tags: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TAGS || 'tags',
  icon: process.env.NEXT_PUBLIC_NOTION_PROPERTY_ICON || 'icon'
},

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结尾，看上去会更像一个静态页面。
PSEUDO_STATIC: false, // 伪静态路径，开启后所有文章URL都以 .html 结尾。
NEXT_REVALIDATE_SECOND: process.env.NEXT_PUBLIC_REVALIDATE_SECOND || 5, // 更新内容缓存间隔 单位(秒)；即每个页面有5秒的纯静态期、此期间无论多少次访问都不会抓取notion数据；调大该值有助于节省Vercel资源、同时提升访问速率，但也会使文章更新有延迟。

9. 其它样式

博客列表展现形式
您可以选择，使用按钮分页，还是滚动鼠标无限加载分页；
设置每页展示的文章数量。
设置在列表页是否展示文章内容，还是只是展示标题和摘要。
POST_LIST_STYLE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
POST_LIST_PREVIEW: process.env.NEXT_PUBLIC_POST_PREVIEW || 'false', //  是否在列表加载文章预览
POSTS_PER_PAGE: 12, // post counts per page
博客列表排序
POSTS_SORT_BY: 'notion', // 排序方式 'date'按时间,'notion'由notion控制
代码渲染样式
// PrismJs 代码相关
PRISM_JS_AUTO_LOADER: 'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js',
PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/',
PRISM_THEME_PATH: 'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
CODE_MAC_BAR: true, // 代码左上角显示mac的红黄绿图标
CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 是否显示行号
修改 PRISM_THEME_PATH 参数 可以更换主题风格，可以访问prism-themes主页获取可选的主题。
修改 CODE_MAC_BAR 参数可以控制代码左上角是否显示 红黄绿三个图标，模仿mac的样式。
修改CODE_LINE_NUMBERS值为true，则代码最左侧将显示行号。（显示行号后代码将禁用横向滚动）
notion image
左右布局颠倒
hexo主题下默认排版是：文章显示在左，站点信息显示在右，通过修改 LAYOUT_SIDEBAR_REVERSE 为true，将排版调整为 文章显示在右，站点信息显示在左
// 侧栏布局 是否反转(左变右,右变左) 已支持主题: hexo next medium fukasawa example
LAYOUT_SIDEBAR_REVERSE: false,
鼠标点击特效
// 鼠标点击烟花特效
FIREWORKS: process.env.NEXT_PUBLIC_FIREWORKS || false, // 开关
// 烟花色彩，感谢 https://github.com/Vixcity 提交的色彩
FIREWORKS_COLOR: ['255, 20, 97', '24, 255, 146', '90, 135, 255', '251, 243, 140'],
动态背景特效
// 樱花飘落特效
SAKURA: process.env.NEXT_PUBLIC_SAKURA || false, // 开关

// 漂浮线段特效
NEST: process.env.NEXT_PUBLIC_NEST || false, // 开关

// 动态彩带特效
FLUTTERINGRIBBON: process.env.NEXT_PUBLIC_FLUTTERINGRIBBON || false, // 开关
// 静态彩带特效
RIBBON: process.env.NEXT_PUBLIC_RIBBON || false, // 开关

// 星空雨特效 黑夜模式才会生效
STARRY_SKY: process.env.NEXT_PUBLIC_STARRY_SKY || false, // 开关

三、外部插件

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.宠物挂件

待完善
// 悬浮挂件
WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题

3. 音乐播放插件

待完善
// 音乐播放插件
  MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件
  MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换，如果使用播放器，打开自动播放再隐藏，就会以类似背景音乐的方式播放，无法取消和暂停
  MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过自动播放时常不生效（移动设备不支持自动播放）
  MUSIC_PLAYER_SHOW_LRC: process.env.NEXT_PUBLIC_MUSIC_PLAYER_SHOW_LRC || false, // 是否展示歌词（前提是有配置歌词路径，对 meting 无效）
  MUSIC_PLAYER_CDN_URL: process.env.NEXT_PUBLIC_MUSIC_PLAYER_CDN_URL || 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js',
  MUSIC_PLAYER_ORDER: 'list', // 默认播放方式，顺序 list，随机 random
  MUSIC_PLAYER_AUDIO_LIST: [ // 示例音乐列表。除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/
    {
      name: '风を共に舞う気持ち',
      artist: 'Falcom Sound Team jdk',
      url: 'https://music.163.com/song/media/outer/url?id=731419.mp3',
      cover: 'https://p2.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
    },
    {
      name: '王都グランセル',
      artist: 'Falcom Sound Team jdk',
      url: 'https://music.163.com/song/media/outer/url?id=731355.mp3',
      cover: 'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
    }
  ],
  MUSIC_PLAYER_METING: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING || false, // 是否要开启 MetingJS，从平台获取歌单。会覆盖自定义的 MUSIC_PLAYER_AUDIO_LIST，更多配置信息：https://github.com/metowolf/MetingJS
  MUSIC_PLAYER_METING_SERVER: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER || 'netease', // 音乐平台，[netease, tencent, kugou, xiami, baidu]
  MUSIC_PLAYER_METING_ID: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_ID || '60198', // 对应歌单的 id
  MUSIC_PLAYER_METING_LRC_TYPE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_LRC_TYPE || '1', // 可选值： 3 | 1 | 0（0：禁用 lrc 歌词，1：lrc 格式的字符串，3：lrc 文件 url）

4. 站点统计

待完善
// ----> 站点统计
ANALYTICS_BUSUANZI_ENABLE: true, // 展示网站阅读量、访问数 see http://busuanzi.ibruce.info/
ANALYTICS_BAIDU_ID: process.env.NEXT_PUBLIC_ANALYTICS_BAIDU_ID || '', // e.g 只需要填写百度统计的id，[baidu_id] -> https://hm.baidu.com/hm.js?[baidu_id]
ANALYTICS_CNZZ_ID: process.env.NEXT_PUBLIC_ANALYTICS_CNZZ_ID || '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id]
ANALYTICS_GOOGLE_ID: process.env.NEXT_PUBLIC_ANALYTICS_GOOGLE_ID || '', // 谷歌Analytics的id e.g: G-XXXXXXXXXX

ANALYTICS_ACKEE_TRACKER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.net/tracker.js'
ANALYTICS_ACKEE_DATA_SERVER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.net , don't end with a slash
ANALYTICS_ACKEE_DOMAIN_ID: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'

SEO_GOOGLE_SITE_VERIFICATION: process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code

5. 谷歌广告嵌入

待完善
ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx

四、主题配置

💡
blog.config.js 是整个站点信息的配置。除此之外，每个主题还有各自的配置文件，便于您更细致地定制自己的风格。
主题配置文件位置

Hexo主题

❓
hexo主题首页下的“Hi，我是一个程序员”等字样如何修改
HOME_BANNER_ENABLE: true,
HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字

HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮

// 菜单配置
MENU_CATEGORY: true, // 显示分类
MENU_TAG: true, // 显示标签
MENU_ARCHIVE: true, // 显示归档
MENU_SEARCH: true, // 显示搜索

POST_LIST_COVER: true, // 列表显示文章封面
POST_LIST_COVER_DEFAULT: true, // 封面为空时用站点背景做默认封面
POST_LIST_SUMMARY: true, // 文章摘要
POST_LIST_PREVIEW: true, // 读取文章预览
POST_LIST_IMG_CROSSOVER: true, // 博客列表图片左右交错

ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
ARTICLE_COPYRIGHT: true, // 显示文章版权声明
ARTICLE_RECOMMEND: true, // 文章关联推荐

WIDGET_LATEST_POSTS: true, // 显示最新文章卡
WIDGET_ANALYTICS: false, // 显示统计卡
WIDGET_TO_TOP: true,
WIDGET_TO_COMMENT: true, // 跳到评论区
WIDGET_DARK_MODE: true, // 夜间模式
WIDGET_TOC: true // 移动端悬浮目录

Next主题

const CONFIG_NEXT = {

  HOME_BANNER: false, // 首页是否显示大图及标语 [true,false]
  HOME_BANNER_Strings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字

  NAV_TYPE: 'normal', // ['fixed','autoCollapse','normal'] 分别是固定屏幕顶部并始终显示、固定屏幕顶部且滚动时隐藏，不固定屏幕顶部

  POST_LIST_COVER: false, // 文章列表显示封面图
  POST_LIST_PREVIEW: true, // 显示文章预览
  POST_LIST_SUMMARY: false, // 显示用户自定义摘要，有预览时优先只展示预览

  POST_HEADER_IMAGE_VISIBLE: false, // 文章详情页是否显示封面图

  // 右侧组件
  RIGHT_BAR: true, // 是否显示右侧栏
  RIGHT_LATEST_POSTS: true, // 右侧栏最新文章
  RIGHT_CATEGORY_LIST: true, // 右侧边栏文章分类列表
  RIGHT_TAG_LIST: true, // 右侧边栏标签分类列表
  RIGHT_AD: false, // 右侧广告

  // 菜单
  MENU_HOME: true, // 显示首页
  MENU_CATEGORY: true, // 显示分类
  MENU_TAG: true, // 显示标签
  MENU_ARCHIVE: true, // 显示归档
  MENU_SEARCH: true, // 显示搜索

  WIDGET_TO_TOP: true, // 是否显示回顶
  WIDGET_TO_BOTTOM: false, // 显示回底
  WIDGET_DARK_MODE: false, // 显示日间/夜间模式切换
  WIDGET_TOC: true, // 移动端显示悬浮目录

  ARTICLE_SHARE: false, // 文章分享功能
  ARTICLE_RELATE_POSTS: true, // 相关文章推荐
  ARTICLE_COPYRIGHT: true // 文章版权声明

}

Simple主题

const CONFIG_SIMPLE = {

  LOGO_IMG: '/Logo.webp',
  TOP_BAR: true, // 显示顶栏
  TOP_BAR_CONTENT: process.env.NEXT_PUBLIC_THEME_SIMPLE_TOP_TIPS || '',
  LOGO_DESCRIPTION: process.env.NEXT_PUBLIC_THEME_SIMPLE_LOGO_DESCRIPTION || '<div>编程爱好者<br/>/互联网从业者<br/>/知识分享博主</div>',

  AUTHOR_LINK: process.env.NEXT_PUBLIC_AUTHOR_LINK || '#',

  // 菜单配置
  MENU_CATEGORY: true, // 显示分类
  MENU_TAG: true, // 显示标签
  MENU_ARCHIVE: true, // 显示归档
  MENU_SEARCH: true // 显示搜索
}

Medium主题

const CONFIG_MEDIUM = {

  // Style
  RIGHT_PANEL_DARK: process.env.NEXT_PUBLIC_MEDIUM_RIGHT_DARK || false, // 右侧面板深色模式

  POST_LIST_COVER: true, // 文章列表显示图片封面
  POST_LIST_PREVIEW: true, // 列表显示文章预览
  POST_LIST_CATEGORY: true, // 列表显示文章分类
  POST_LIST_TAG: true, // 列表显示文章标签

  POST_DETAIL_CATEGORY: true, // 文章显示分类
  POST_DETAIL_TAG: true, // 文章显示标签

  // 菜单
  MENU_CATEGORY: true, // 显示分类
  MENU_TAG: true, // 显示标签
  MENU_ARCHIVE: true, // 显示归档
  MENU_SEARCH: true, // 显示搜索

  // Widget
  WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
  WIDGET_TO_TOP: true // 跳回顶部
}

五、绑定个性域名

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
 
Relate Posts :
  • NotionNext
    • NotionNext部署-Vercel版本NotionNext 部署-VPS本地部署
    Table of Contents
    0%