NotionNext 操作手册
2023-2-10
| 2023-5-29
0  |  0 分钟
category
tags
type
status
slug
date
summary
icon
password

前言

💡
文章目前还在加紧施工中,尽情期待更多内容。
本文将做为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类型有效)
可以参考:图标库地址
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中使用环境变量来配置。
    • NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 默认主题
  • 网站优先读取环境变量配置、其次是文件中的配置。
    • 💡
      用后台环境变量配置的好处:有些敏感信息不适合直接在代码中修改,例如一些第三方插件的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 文件中添加环境变量即可:
# 环境变量 @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: '', // 邮箱 例如 [email protected] 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(点击展开说明)
使用上方的在线工具,上传图片,即可生成 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 中自定义字体 , 以下我用霞鹜文楷作为替换字体的示例。
// 网站字体 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/[email protected]/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
 

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

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/[email protected]/plugins/autoloader/prism-autoloader.min.js', PRISM_JS_PATH: 'https://npm.elemecdn.com/[email protected]/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配置评论插件-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.宠物挂件

待完善
// 悬浮挂件 WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件 WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/[email protected]/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
/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,我是一个程序员”等字样如何修改
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站点:

六、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、增加新特性,请参考此篇文章进行更新:
 
软件技术
  • NotionNext
  • NotionNext部署-Vercel版本NotionNext 更新日志
    • Twikoo
    • Waline
    • Giscus
    • Cusdis
    目录