关于notion的使用方法补充type
status
date
slug
summary
tags
category
icon
password
1.🚀 Notion 嵌入 B 站视频：2 步搞定！（超简化版）
2.📝 NotionNext 4.5.4+ 关闭/显示文章评论教程
在新版 NotionNext 中，你可以通过 comment 属性 来控制每篇文章的评论显示状态。
1️⃣ 打开文章数据库
🔹 进入你存放文章的 Notion 数据库（表格、看板或画廊均可）。
2️⃣ 添加 comment 属性
➕ 在字段列表的最右侧，点击 + 添加属性
🏷️ 属性设置：
名称：comment
类型：选择 选择（Select）
⚙️ 添加选项：
Hide → 隐藏评论
Show → 显示评论
3️⃣ 设置文章评论状态
📄 打开某篇文章对应的数据库条目
🔽 找到 comment 字段下拉框，选择：
Hide → 页面评论区域隐藏
Show → 页面评论区域显示
✅ 这样，每篇文章就可以独立控制是否显示评论，无需修改其他配置。
3.NotionNext 宠物挂件修改教程
本文将详细介绍如何在 NotionNext 项目中修改宠物挂件，包括开启方式、源文件配置以及相关资源的获取与使用方法。以下教程基于 imuncle/live2d 仓库，并提供美化的步骤和注意事项，方便日后查看和操作。
🐾 开启宠物挂件
在 NotionNext 项目中，宠物挂件的开关默认是开启状态，相关配置位于以下文件中：
- 配置文件路径：
conf/widget.config.js
- 关键代码：
- 说明：
WIDGET_PET：控制宠物挂件是否显示，true表示开启，false表示关闭。WIDGET_PET_LINK：指定宠物挂件的模型文件地址，默认指向imuncle/live2d仓库中的模型文件。- 如果需要自定义模型，可以修改
WIDGET_PET_LINK为其他模型的 JSON 文件地址。
🎨 修改宠物挂件的高度和样式
宠物挂件的显示高度和交互样式可以在以下文件中调整：
- 文件路径：
components/Live2D.js
- 关键代码：
- 修改说明：
width和height：控制宠物挂件的画布大小，可以根据需要调整。例如，将height改为300以增加高度。className='cursor-pointer'：使挂件具有点击效果，鼠标悬停时显示为指针样式。onClick={handleClick}：支持点击切换主题的功能，可根据需求自定义交互逻辑。
🌟 获取和使用 Live2D 模型
NotionNext 使用的宠物挂件基于 Live2D 技术，模型资源可以从以下 GitHub 仓库获取：
- 仓库地址： imuncle/live2d
获取模型的步骤
- Fork 仓库：
- 访问 imuncle/live2d，点击右上角的 Fork 按钮，将仓库复制到你自己的 GitHub 账户下。
- Fork 后，模型文件的原始地址需要将
imuncle替换为你自己的 GitHub 用户名。例如： - 原始地址：
https://raw.githubusercontent.com/imuncle/live2d/master/model/22/model.default.json - 修改后：
https://raw.githubusercontent.com/你的用户名/live2d/master/model/22/model.default.json
- 选择模型：
- 访问 imuncle/live2d 预览界面，浏览并选择喜欢的模型。
- 仓库中包含以下内容：
- Live2D Cubism 2：收录 102 种模型，部分支持更换皮肤。
- Live2D Cubism 3：收录 40 种碧蓝航线模型，基于 TypeScript 开发，兼容 Cubism 4。
- 每种模型包含模型本体（
model.moc）、材质包（texture）、动作组（motions）、表情组（expression）和音效（sounds）等。
- 配置模型地址：
- 在
widget.config.js中，将WIDGET_PET_LINK的值替换为你 Fork 的仓库中的模型 JSON 文件地址。例如：
🛠️ 使用 Live2D 模型的代码配置
以下是添加 Live2D 模型到静态网站的基本步骤，适用于 NotionNext 或其他项目：
1. 引入 Live2D 核心脚本
在 HTML 文件中引入必要的 JavaScript 文件：
2. 添加 Canvas 元素
在页面中添加一个 Canvas 元素，用于渲染 Live2D 模型：
3. 添加 CSS 样式（可选）
可以自定义宠物挂件的样式，例如定位到底部左侧：
4. 初始化 Live2D 模型
通过 JavaScript 初始化模型，指定模型的 JSON 文件路径：
- 注意：
model.json需要替换为实际的模型文件地址，例如 Fork 后的 GitHub 地址。
5. 配置文件说明
LAppDefine.js：Live2D 的配置文件，包含模型的详细参数设置，具体说明见文件内的注释。
- 模型文件夹结构（以 Cubism 2 为例）：
📜 版权须知
- 所有 Live2D 模型均来自互联网，版权归原公司或个人所有。
- 使用限制：
- 可用于学习或非营利性项目。
- 禁止用于商业用途（如付费分发、二次修改后盈利等）。
🔗 资源链接
- GitHub 仓库： https://github.com/imuncle/live2d
- Live2D 官方文档： Cubism 3 | Live2D
- NotionNext 宠物挂件配置：
conf/widget.config.js和components/Live2D.js
💡 小贴士
- 如果国内访问 GitHub 较慢，可以将 Fork 的仓库部署到其他 CDN 或静态托管服务（如 Vercel、Netlify）以提高加载速度。
- 模型较大时，建议优化网络环境或选择较小的模型以提升用户体验。
- 可通过调整
components/Live2D.js中的width和height参数，适配不同屏幕尺寸。
希望这份教程能帮助你轻松配置 NotionNext 的宠物挂件！如果有其他问题，欢迎随时交流！😺
4.💬 为 NotionNext 添加聊天系统：TIDIO 插件完整指南
在众多网站聊天系统中，TIDIO 是一个兼顾功能与易用性的选择。
相比国内的 SaleSmartly（需实名制），TIDIO 由 美国旧金山公司 运营，支持多语言界面，免费版即可满足大部分博客使用场景。
🏁 一、为什么选择 TIDIO？
✅ 无需实名制 —— 注册即可使用，无需额外身份验证。
✅ 免费额度充足 —— 免费版可创建 3 个项目（网站）。
✅ 7 天专业版体验 —— 新注册用户可试用高级功能，试用期后可自由降级至免费版。
✅ 操作简单 —— 仅需复制一行安装代码即可完成集成。
✅ 额度足够——每个站点每个月有100个客人的聊天额度
⚙️ 二、TIDIO 安装步骤
- 前往官网 👉 https://www.tidio.com/
- 注册账号，输入你的博客或网站地址（随意填写亦可）。
- 完成基本设置后，在「Integrations / Channels」中找到网站聊天插件的安装代码。
示例代码如下：
- 复制其中的链接部分：
- 在 NotionNext 的配置文件中，添加以下配置项：
配置名 | 配置值 |
CUSTOM_EXTERNAL_JS | ["//code.tidio.co/xxxxxx.js"] |
🧩 三、NotionNext 集成方式
在 NotionNext 的 环境变量 或 项目配置文件（例如：vercel.json / .env.local） 中添加以下内容：
💡 小贴士：
- 如果你在 Vercel 部署，记得在修改变量后点击 “Redeploy”。
- 聊天窗口加载后会自动出现在网页右下角，无需额外调整。
🎨 四、个性化设置
进入 TIDIO 控制台，可进行以下自定义：
- 💬 修改聊天框颜色与样式
- 👩💻 绑定客服邮箱或自动回复机器人
- 🌍 支持多语言界面（中文、英文等）
- 📊 查看访客来源与聊天统计数据
- 💡 可以点击头像添加最多三个网站项目
🚀 五、总结
特性 | TIDIO | SaleSmartly |
所属地区 | 🇺🇸 美国旧金山 | 🇨🇳 中国&新加坡 |
是否实名 | ❌ 否 | ✅ 是 |
免费额度 | 3 个项目 | 1 个网站 |
邮件通知 | ✅ 支持 | ✅ 支持（访客留邮箱） |
安装方式 | <script> 代码 | 插件代码 |
建议使用 | ✅ 推荐 | 🚫 不推荐（实名要求） |
🏷️ 结语
TIDIO 是目前 NotionNext 博客 最推荐的聊天插件之一，
无需备案、无需实名、安装简洁、风格现代。
只需复制脚本并加入
CUSTOM_EXTERNAL_JS，即可让你的博客拥有实时对话功能 ✨📘 官网：https://www.tidio.com/💡 建议：注册后立即进入「Settings → Plan」将套餐切换为 Free Plan，避免试用期结束后功能中断。
5.💡 NotionNext 环境变量与配置详解（附完整示例）
本文将带你一步步了解 NotionNext 部署时的所有关键环境变量 及其作用，帮助你快速完成个性化博客的搭建与优化。适用平台：Vercel + NotionNext
🚀 一、核心环境变量说明
在部署 NotionNext 到 Vercel 时，你需要在项目的 Environment Variables（环境变量） 中添加若干配置项，这些变量决定了博客的数据来源、评论系统、搜索功能等是否能正常运行。
🧠 1️⃣ Notion 数据源配置
变量名 | 描述 | 示例值 |
NOTION_PAGE_ID | 你的 Notion 博客主页 ID，用于指定博客数据来源 | 02ab3b8678004aa69e9e415905ef32a5 |
✨ 作用说明：这是整个博客的“数据源地址”。NotionNext 会从此页面读取内容并自动生成博客页面。
📍 设置方法：
在 Vercel 后台 → “Settings” → “Environment Variables”
新建一项：
🔍 2️⃣ Algolia 全文搜索配置
如果你想让博客支持搜索文章功能，需要配置 Algolia 的 API。
变量名 | 描述 | 示例值 |
NEXT_PUBLIC_ALGOLIA_APP_ID | Algolia 应用 ID | UKHCDxxx |
NEXT_PUBLIC_ALGOLIA_INDEX | Algolia 数据库名称 | demo |
NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_APP_KEY | 前端搜索使用的公钥（会暴露给浏览器） | 9ffxxxx |
ALGOLIA_ADMIN_APP_KEY | 后端管理密钥（上传文章内容时使用） | 12******* |
⚠️ 注意：
- 前缀为
NEXT_PUBLIC_的变量会暴露给前端。
ALGOLIA_ADMIN_APP_KEY是私密密钥，请勿泄露。
✅ 作用总结：
这四个变量共同作用，让你的博客支持 站内搜索功能，在顶部搜索框即可实时检索文章。
💬 3️⃣ 评论系统：Cusdis
Cusdis 是一款轻量级评论系统，适合喜欢简洁风格的博主。
变量名 | 描述 | 示例值 |
NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID | Cusdis 应用 ID，用于加载评论区 | xxxxxx-xxxxxx |
✨ 设置方法：
在 Vercel → Environment Variables 添加：
📸 效果预览：
博客底部会自动出现一个简洁的评论输入框，读者可直接留言。
💬 4️⃣ 评论系统：Giscus
Giscus 是基于 GitHub Discussions 的评论系统，评论内容存储在 GitHub 仓库中，方便管理与备份。
Giscus 参数名 | 对应 Vercel 环境变量 | 示例值 |
data-repo | NEXT_PUBLIC_COMMENT_GISCUS_REPO | yourname/yourrepo |
data-repo-id | NEXT_PUBLIC_COMMENT_GISCUS_REPO_ID | R_kgDOxxxx |
data-category-id | NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID | DIC_kwDOxxxx |
✨ 作用说明：
- 这些参数会让 NotionNext 在文章底部加载 Giscus 评论区；
- 用户使用 GitHub 登录后即可评论；
- 评论自动存入你指定的 GitHub 仓库 Discussions 区域。
💬 5️⃣ 在线聊天插件：Tidio
如果你希望访客能直接通过聊天框与你交流，可以接入 Tidio 聊天插件。
配置名 | 配置值 |
CUSTOM_EXTERNAL_JS | ["//code.tidio.co/xxxxxxxx.js"] |
📍 配置方法：
- 注册 Tidio 官网。
- 创建聊天项目后，系统会生成一个脚本地址，如：
- 在 Vercel 的环境变量中添加：
📸 效果展示：
网页右下角会悬浮一个蓝色聊天图标，访客可实时留言，你可在 Tidio 后台查看与回复。
6️⃣开启 谷歌统计（GA）
只需在vercel后台添加一个环境变量，值为你的GA-ID即可，无需其他配置
变量名 | 参考值 |
NEXT_PUBLIC_ANALYTICS_GOOGLE_ID | G-68*****9N |
⚙️ 部署总结与建议
以下是最基础的推荐配置组合：
功能 | 是否必须 | 推荐环境变量 |
Notion 页面数据 | ✅ | NOTION_PAGE_ID |
搜索功能 | 🔍 | Algolia 四项变量 |
评论系统 | 💬 | Cusdis 或 Giscus 任选其一 |
聊天功能 | 💬 | CUSTOM_EXTERNAL_JS |
社交互动 | ✨ | Giscus 推荐 |
部署平台 | ✅ | Vercel 免费版即可 |
站点统计 | 否 | Google Analytics |
✅ 总结
至此，你已了解：
- ✅ NotionNext 的所有核心环境变量
- 💬 评论系统（Cusdis / Giscus）的配置方法
- 🔍 搜索系统（Algolia）的接入步骤
- 💬 实时聊天插件（Tidio）的加载方法
配置完成后，点击 Vercel → Redeploy 重新部署即可生效 🎉
📚 延伸阅读
- Vercel 环境变量配置教程
- Tidio 聊天插件官网
- Giscus 评论系统官方页面
6.🧠 用 GitHub 做免费图床 + 设置网站图标（Favicon）
🚀 零成本托管图标文件，结合 CDN 加速，让你的网站加载更快更稳！
🎨 1️⃣ 上传图标到 GitHub
- 登录 GitHub
- 创建一个 公开仓库 (Public)，例如：
my-image
- 点击 Add file → Upload files 上传你的
favicon.ico（或.png图标）
- 点击 Commit changes 保存
🌐 2️⃣ 获取真实文件地址（重点）
⚠️ GitHub 默认打开的链接是网页视图，不是文件源地址！
- 打开你上传的文件，在 URL 后面拼接：
然后按回车访问。
- 浏览器会自动跳转到真实的原始地址，例如👇
- 复制这个跳转后的地址备用。
🪄 示例：
⚡ 3️⃣ 启用 CDN 加速访问（推荐）
🚀 加速方案 | 📎 示例链接 |
🧩 jsDelivr（推荐） | https://cdn.jsdelivr.net/gh/用户名/仓库名/文件夹/文件名.ico |
🌍 Statically | https://cdn.statically.io/gh/用户名/仓库名/main/文件夹/文件名.ico |
⚡ ghproxy（中国大陆快） | https://ghproxy.net/https://raw.githubusercontent.com/用户名/仓库名/refs/heads/main/文件夹/文件名.ico |
🪄 FastGit（备用） | https://raw.fastgit.org/用户名/仓库名/refs/heads/main/文件夹/文件名.ico |
✅ 转换示例：
原始地址：
加速后：
⚙️ 4️⃣ 在网站中使用
✅ NotionNext / Hexo 配置
✅ HTML 手动添加
🧩 5️⃣ 在线生成图标
🎨 使用免费工具快速生成
.ico 文件：支持文字、图片、Emoji 一键生成多尺寸 Favicon！
💡 小贴士
- 🔹 推荐尺寸：
32×32或48×48像素
- 🔹 GitHub 图床适合轻量用途（图标、小Logo、背景）
- 🔹 若需存储大量图片或高访问量资源，请使用专业图床/CDN
✅ 一句话总结
上传图标 → 在地址后加 ?raw=true → 获取真实链接 → 用 jsDelivr 加速 → 配置到网站中 ✔️
占位，待续。。。。。。
7.插入评论系统
- Cusdis
具体配置方法参考：
缺点是评论有限制，需要审核
2.Giscus
项目会在您的Github项目讨论区创建评论数据，便于维护管理 ,
完成效果 预览
支持表情包评论
.webp?table=block&id=293443cf-b5a0-80b9-b6c8-f54bd67e8199&t=293443cf-b5a0-80b9-b6c8-f54bd67e8199)
配置教程参考：
需要登录github，评论系统托管在GitHub，方便管理，即时显示，不需要审核，额度理论上无限。
8.📊 在 NotionNext 中集成 Umami 统计（Zeabur 部署方案）
让你的 NotionNext 博客也能拥有漂亮的访客统计图表！
本教程将手把手教你如何用 Zeabur 免费额度 部署 Umami 网站统计系统，并将统计脚本嵌入到你的 NotionNext 博客中。
🚀 一、在 Zeabur 上部署 Umami
1️⃣ 登录 Zeabur → 点击「New Project」
2️⃣ 搜索 Umami 模板（发布者显示 “By Zeabur”）
3️⃣ 选择服务器地区（推荐 🇺🇸 美国硅谷 或 🇸🇬 新加坡）
4️⃣ 部署完成后进入
Service - umami5️⃣ 在「Network → Domain（域名）」中开启 外围访问（Public Access） ✅
💡 Umami 默认运行在 端口 3000访问方式形如：https://yourproject.zeabur.app
🔑 二、Umami 初始登录信息
项目 | 默认值 |
登录地址 | https://yourproject.zeabur.app |
用户名 | admin |
密码 | umami |
⚠️ 首次登录后，务必修改密码！
🌐 三、在 Umami 后台创建网站
1️⃣ 登录后台后，点击左侧菜单 Settings（设置） → Websites（网站）
2️⃣ 点击右上角 “Add Website” 添加你的博客域名
3️⃣ 添加完成后，在网站列表中点击对应网站右侧的 Tracking Code（跟踪代码）
4️⃣ 页面会显示一个类似这样的代码片段：
👉 从这里获取以下两项信息：
UMAMI_HOST→https://xxx.vercel.app/umami.js
UMAMI_ID→8cf4xxxx-xxxx-xxxx-xxxx-fae8fb1cxxxx
⚙️ 四、在 NotionNext 中配置 Umami
如果你使用的是 云托管版本（Vercel、Zeabur、Cloudflare Pages 等），
只需要在 Notion 配置中心（环境变量表） 中添加以下两个配置：
配置名 | 配置值（示例） | 备注 |
UMAMI_HOST | 在自建 Umami 后台的 Tracking Code 获取 | |
UMAMI_ID | 8cf4xxxx-xxxx-xxxx-xxxx-fae8fb1cxxxx | 在 Umami 后台的 Website ID 获取 |
⚠️ 不需要加引号、不需要中括号，直接填写纯文本即可。
📈 五、验证是否接入成功
1️⃣ 打开你的博客首页
2️⃣ 按下
F12 → 打开开发者工具 → 进入「Network」面板3️⃣ 刷新页面，搜索
umami.js4️⃣ 如果加载来源是你的
UMAMI_HOST 地址（如 https://xxx.vercel.app/umami.js），说明连接成功 ✅5️⃣ 等几分钟后，前往 Umami 后台的「Realtime（实时）」即可看到访问数据
💰 六、额外提示
- Zeabur 每月提供 $5 免费额度，Umami 运行几乎不会超额，非常划算
- 如果你想迁移到自己的服务器，也可导出数据库文件并挂载至 Postgres
- 支持多网站、多统计账号，可添加更多项目管理
🎯 总结
步骤 | 内容 |
① | Zeabur 部署 Umami |
② | 登录后台并修改密码 |
③ | 添加网站并复制 Tracking Code |
④ | 在 NotionNext 中填写 UMAMI_HOST 与 UMAMI_ID |
⑤ | 验证加载与数据展示 |
🪄 这样，你的 NotionNext 博客就具备专业访客统计功能啦！
- Author:雨生
- URL:https://cfblog.273983.xyz//article/example-21
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
