{"owner":"tangly1024","repo":"NotionNext","hasSkills":true,"totalSkillsCount":13,"totalTokensCount":16936,"categories":["anthropic-skill"],"hasMcp":false,"mcpConfig":null,"found":["docs/user-guide/plugins/mailchimp.md","docs/user-guide/plugins/music-player.md","docs/user-guide/plugins/notion-next-chat-base.md","docs/user-guide/plugins/notion-next-ai-chat.md","docs/user-guide/plugins/index.md","docs/user-guide/plugins/notion-next-coze.md","docs/user-guide/plugins/notion-next-salesmatly-pulgin.md","docs/user-guide/plugins/notion-next-tidio.md","docs/user-guide/plugins/notion-next-plugin-live2d.md","docs/user-guide/plugins/notion-next-docs-chat.md","docs/user-guide/plugins/notion-next-facebook-chat-plugn.md","docs/user-guide/plugins/notion-next-google-adsense.md","docs/user-guide/plugins/overview.md"],"skills":{"docs/user-guide/plugins/mailchimp.md":"# Mailchimp邮件订阅\n> 迁移自：[Mailchimp邮件订阅](https://docs.tangly1024.com/article/notion-next-mailchimp)\n> 发布日期：2023-7-4\n> 最后编辑：2024-9-12\n> 原栏目：🔊 运营教程\n\n::: tip 提示\n此功能主要针对国外用户的使用习惯开发。国内推荐使用公众号导流方案。\n:::\n\n\n## 序\n\nNotionNext 后续版本将陆续支持Newsletter功能，目前基于Mailchimp邮件订阅，可以轻松实现您与读者建立紧密的链接。\n\n按照本操作步骤，将为您创建一个Mailchimp的api-key以及对应的邮件列表id，便于您通过接口，对接自己的页面表单。\n\n::: tip 提示\n目前只有landing主题上支持了 Mailchimp的ui组件，后续将在其它主题中 也加入对应的UI组件。\n预览体验：访问[NotionNext主页](/user-guide/intro)，在底部的邮件订阅处填写您的邮箱体验。\n:::\n\n\n### 什么是Mailchimp\n\nMailChimp是目前最通用且易于使用的 电子邮件营销服务.\n\nMailChimp 为您提供一个免费帐户，最多可拥有 2000 个电子邮件订阅者，每月发送 12000 封电子邮件，在给定的 2000 小时内限制为 24 封电子邮件。 这个限制对于任何初学者以及中级博主和营销人员来说都非常好。\n\n\n## 操作步骤\n\n你可以按照以下步骤在 Mailchimp 中找到你的邮件列表 ID 和 API KEY：\n\n1. 登录你的 Mailchimp 账户，点击右上角的用户名，然后选择 \"Account\" 进入账户设置页面。\n\n1. 在账户设置页面中，点击 \"Extras\" 选项卡，然后选择 \"API keys\"。\n\n\n1. 在 API keys 页面中，可以看到你现有的 API KEY 列表。如果没有 API KEY，请点击 \"Create A Key\" 按钮创建一个新的 API KEY。\n\n\n\n1. 复制你的 API KEY，并妥善保管。\n\n1. 点击 \"Audience\" 选项卡，然后选择你要用来存储用户邮件地址的列表。\n\n\n1. 在该列表的设置页面中，可以看到该列表的唯一 ID。复制该 ID。\n\n\n\n## 最后\n\n现在你已经找到了你的 Mailchimp 邮件列表 ID 和 API KEY。将它们替换到你的代码中即可开始使用 Mailchimp API 来收集用户邮件地址了。\n\n只需要在Vercel环境变量中添加两项配置，就可以实现网站的邮件订阅功能\n\n新订阅请求需要邮箱持有人通过 Mailchimp 确认邮件完成订阅。页面显示“Subscription request received…”表示请求已经处理；为保护邮箱隐私，重复提交也会显示相同提示，不会自动恢复已退订成员。未收到确认邮件时，请检查垃圾邮件目录，或通过站点所有者提供的 Mailchimp 订阅表单重新订阅。\n\n新订阅从原来的直接 `subscribed` 改为等待确认的 `pending`。升级后，请提醒读者完成确认邮件，并在 Mailchimp 后台确认订阅状态；页面接收成功提示不等于已加入正式收件名单。\n\nMailchimp 对永久删除等少数地址状态可能拒绝请求，此时页面仍会显示失败。新请求与 `Member Exists` 使用相同提示，但其他上游 400 仍返回 HTTP 400，不能据此认为所有邮箱状态都已隐藏。详细返回规则见 [Mailchimp 邮件订阅接口](../../developer/MAILCHIMP_SUBSCRIBE.zh-CN.md)。\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-mailchimp\n","docs/user-guide/plugins/music-player.md":"# 音乐播放器\n> 迁移自：[音乐播放器](https://docs.tangly1024.com/article/notion-next-plugin-music-player)\n> 发布日期：2023-8-4\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n## 开启方式\n\n后台添加环境变量 `NEXT_PUBLIC_MUSIC_PLAYER` 值为 `true`，即可打开音乐播放器功能。\n\n更多关于播放器配置说明，可以参考APlayer官网\n\n[APlayer](https://aplayer.js.org/)\n\n```JavaScript\n// 音乐播放插件\n MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件\n MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换，如果使用播放器，打开自动播放再隐藏，就会以类似背景音乐的方式播放，无法取消和暂停\n MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过自动播放时常不生效（移动设备不支持自动播放）\n MUSIC_PLAYER_SHOW_LRC: process.env.NEXT_PUBLIC_MUSIC_PLAYER_SHOW_LRC || false, // 是否展示歌词（前提是有配置歌词路径，对 meting 无效）\n 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',\n MUSIC_PLAYER_ORDER: 'list', // 默认播放方式，顺序 list，随机 random\n MUSIC_PLAYER_AUDIO_LIST: [ // 示例音乐列表。除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/\n {\n name: '风を共に舞う気持ち',\n artist: 'Falcom Sound Team jdk',\n url: 'https://music.163.com/song/media/outer/url?id=731419.mp3',\n cover: 'https://p2.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'\n },\n {\n name: '王都グランセル',\n artist: 'Falcom Sound Team jdk',\n url: 'https://music.163.com/song/media/outer/url?id=731355.mp3',\n cover: 'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'\n }\n ],\n MUSIC_PLAYER_METING: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING || false, // 是否要开启 MetingJS，从平台获取歌单。会覆盖自定义的 MUSIC_PLAYER_AUDIO_LIST，更多配置信息：https://github.com/metowolf/MetingJS\n MUSIC_PLAYER_METING_SERVER: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER || 'netease', // 音乐平台，[netease, tencent, kugou, xiami, baidu]\n MUSIC_PLAYER_METING_ID: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_ID || '60198', // 对应歌单的 id\n 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）\n```\n\n> 待完善\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-plugin-music-player\n","docs/user-guide/plugins/notion-next-chat-base.md":"# AI聊天机器人-ChatBase\n> 迁移自：[AI聊天机器人-ChatBase](https://docs.tangly1024.com/article/notion-next-chat-base)\n> 发布日期：2023-7-18\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n## 啥是ChatBase\n\nChatbase.co 是**一款为网站构建自定义ChatGPT 界面的工具**，用户只需上传文档或添加到网站的链接，就可以获得一个类似ChatGPT 的聊天机器人，并将它作为小组件添加到网站上。\n\n网页右下角会出现一个对话框，您可以通过他搜索网页中的所有知识点。\n\n\n\n2024.4.29最新版本；配置成功的效果，右下角多出一个聊天按钮\n\n\n\n直接询问对话\n\n\n\n\n## 配置方法\n\n用环境变量或修改代码的方式，在[blog.config.js](https://github.com/notionnext-org/NotionNext/blob/48cb3ee6779c117bcb6b61e5cb89fbd1c541a115/blog.config.js#L156)中添加您的chatbase-id即可。\n\n```YAML\n// ********挂件组件相关********\n// Chatbase\nCHATBASE_ID: process.env.NEXT_PUBLIC_CHATBASE_ID || null, // 是否显示chatbase机器人 https://www.chatbase.co/\n```\n\n另外，有了chatbase-id 您可以直接用内嵌网页的方式，将chatbase放在您的任意notion页面中，网页地址\n\n```HTML\nhttps://www.chatbase.co/chatbot-iframe/${BLOG.CHATBASE_ID}\n```\n\n\n## 获取ChatBase-id方法\n\n\n### 1. 注册登录ChatBase\n\n[Chatbase | ChatGPT for your website](https://www.chatbase.co/)\n\nBuild an AI chatbot from your knowledge base and add it to your website.\n\n\n### 2. 根据引导，配置机器人的数据源\n\n登陆成功后，创建一个新的聊天机器人，点击`New Chatbot`\n\n\n\n这里要选择用什么数据源来训练机器人；默认是上传json文件，在这里我们选择爬取网站内容，点击Website：\n\n\n\n这里使用站点地图的方式提交内容，输入网址后面加上`/sitemap.xml`，如下图，这是NotionNext每个站点默认的地图位置。\n\n\n\n点击Load sitemap加载地图内容，此时平台会自动爬取您网站中的页面地址\n\n\n\n（免费版只能读取10个页面生成机器人数据，这里我们要删除超出10个的多余链接）\n\n我这边示例，只保留了几个重要链接，一个是about介绍页面，一个是archive归档页面，一篇文章；\n\n点击Create Chatbot 训练机器人。\n\n\n\n等待进度条完成。最后可以在面板中看到配置信息\n\n\n\n在setting中可以设置默认欢迎语和用户提问的提示词，这里需要自己折腾一下，不展开叙述了。\n\n\n### 3. 在Embed on Site 中找到id\n\n点击Embed on site，会提示你需要将此机器人公开，\n\n\n\n选择 make public即可\n\n\n\n然后在弹出的确认框中就可以找到你的chatbotId了。\n\n\n\n\n## 配置在NotionNext中\n\n两种方案配置,任选其一：\n\n1. 添加一个环境变量 `NEXT_PUBLIC_CHATBASE_ID`\n\n1. 添加一个NotionConfig: `CHATBASE_ID`\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-chat-base\n","docs/user-guide/plugins/notion-next-ai-chat.md":"# OpenAI 兼容 AI 助手\n\nNotionNext 内置了一个轻量 AI 聊天入口，可以接入 DeepSeek 或其它兼容 OpenAI `chat/completions` 格式的模型服务。页面前端只负责显示聊天窗口，真正的模型请求必须走服务端代理。\n\n## 为什么这样设计\n\nDeepSeek 提供的是模型 API，不是 Chatbase、Coze 那种完整网页浮窗 SDK。API Key 不能写进 `NEXT_PUBLIC_*`、Notion 配置表或前端代码，否则访问者可以在浏览器里看到密钥。\n\n因此推荐架构是：\n\n1. 站点前端配置 `NEXT_PUBLIC_AI_CHAT_API`，显示右下角 AI 助手。\n2. 服务端代理 `/api/ai-chat` 读取 `AI_CHAT_API_KEY`。\n3. 代理转发到 DeepSeek 或其它 OpenAI 兼容接口。\n\n## 前端配置\n\n在 Vercel、Cloudflare Pages、Netlify 或服务器环境变量中添加：\n\n```bash\nNEXT_PUBLIC_AI_CHAT_API=https://你的域名/api/ai-chat\nNEXT_PUBLIC_AI_CHAT_TITLE=AI 助手\nNEXT_PUBLIC_AI_CHAT_WELCOME=你好，我是本站 AI 助手。你可以问我文章、主题和部署问题。\n```\n\n也可以在 Notion 配置表中添加同名配置：\n\n| 配置 | 说明 |\n| ----------------- | --------------------------------------------------------- |\n| `AI_CHAT_API` | 聊天代理地址，例如 `https://blog.example.com/api/ai-chat` |\n| `AI_CHAT_TITLE` | 右下角按钮和窗口标题 |\n| `AI_CHAT_WELCOME` | 打开窗口后的第一句欢迎语 |\n\n## DeepSeek 代理配置\n\n如果你使用 Cloudflare Pages Functions，可以直接使用仓库内置的 `functions/api/ai-chat.ts`。在部署平台的服务端环境变量中添加：\n\n```bash\nAI_CHAT_API_KEY=你的 DeepSeek API Key\nAI_CHAT_BASE_URL=https://api.deepseek.com\nAI_CHAT_MODEL=deepseek-v4-flash\nAI_CHAT_CORS_ORIGINS=https://你的博客域名\nAI_CHAT_MAX_TOKENS=1200\nAI_CHAT_TEMPERATURE=0.3\n```\n\n`AI_CHAT_CORS_ORIGINS` 可以填写多个域名，用英文逗号分隔：\n\n```bash\nAI_CHAT_CORS_ORIGINS=https://blog.example.com,https://docs.example.com\n```\n\n本地或临时调试可以先写 `*`，正式站点建议改成自己的域名。\n\n## 使用其它 OpenAI 兼容服务\n\n只要服务支持 `POST /chat/completions`，通常只需要替换：\n\n```bash\nAI_CHAT_BASE_URL=https://你的服务商 base url\nAI_CHAT_MODEL=你的模型名\nAI_CHAT_API_KEY=你的服务端密钥\n```\n\n不要改前端组件，也不要把密钥写进 Notion。\n\n## 自定义回答范围\n\n可以用服务端变量设置系统提示词：\n\n```bash\nAI_CHAT_SYSTEM_PROMPT=你是本站 AI 助手，只回答本站文章、主题、配置和部署相关问题。回答要简洁，不确定时说明限制。\n```\n\n建议写入：\n\n- 站点定位和读者人群\n- 重点栏目或文章入口\n- 不希望 AI 回答的范围\n- 需要优先提示的部署、配置或联系信息\n\n不要写入后台地址、私密页面、未公开资料或任何密钥。\n\n## 和 Coze、Chatbase、Dify 怎么选\n\n| 方案 | 适合场景 |\n| ------------------- | ---------------------------------------------------- |\n| OpenAI 兼容 AI 助手 | 想自己控制模型、Key、系统提示词，或直接使用 DeepSeek |\n| Coze | 想使用可视化工作流、插件和平台知识库 |\n| Chatbase | 想用第三方平台自动抓取网站内容并生成聊天机器人 |\n| Dify | 已经自建 Dify 应用，希望直接嵌入 Dify 聊天窗口 |\n\nDeepSeek API 本身不会自动读取你的 Notion 数据库或站点文章。如果需要“基于全站文章回答”，后续还需要单独维护知识库或 RAG 流程。\n","docs/user-guide/plugins/index.md":"---\nredirect: /user-guide/plugins/overview\n---\n","docs/user-guide/plugins/notion-next-coze.md":"# AI聊天机器人-Coze\n> 迁移自：[AI聊天机器人-Coze](https://docs.tangly1024.com/article/notion-next-coze)\n> 发布日期：2024-9-20\n> 最后编辑：2024-9-30\n> 原栏目：🧷 外部扩展\n\n## 前言\n\n你可以直接像站点右下角的AI助手提问，它会尽可能地帮你解决问题。本文将介绍如何将Coze的AI机器人接入到NotionNext。\n\n\n\n\n\n### 特点：\n\nCoze支持介入Bing、百度等搜索引擎插件，提问时会自动检索互联网并为你整理答案。\n\nCoze支持将你的文章内容等等来源信息整理为一个知识库，便于在回答问题时检索这个知识库并给出更专业的回答。\n\n\n## NotionNext如何配置Coze\n\n在你的Notion_config中添加两项配置，分别是机器人的称呼和机器人ID即可：\n\n\n\n参考如下：\n\n这里的COZE_TITLE可以任意填写，他只会影响你窗口中AI机器人的标题，例如NotionNext-AI助理：\n\n\n\n这里我们还需要在Coze后台创建自己的机器人，并获得一个`BOT_ID`。\n\n### 常见问题：BOT_ID 后几位变成 0\n\n如果你的 `COZE_BOT_ID` 是很长的数字，不建议填在 Notion_config 的数字类型字段中。过长数字可能超过 JavaScript 安全整数范围，读取后末尾会被改成 `000`。\n\n最简单的做法是用部署环境变量配置，并把值当作字符串保存：\n\n```text\nNEXT_PUBLIC_COZE_BOT_ID=你的 Coze Bot ID\nNEXT_PUBLIC_COZE_TITLE=NotionNext助手\n```\n\n在 Vercel、Netlify、Docker 或服务器环境变量中配置后，重新部署即可。不要把 Coze 的访问令牌、个人 PAT 或长期密钥提交到 Git 仓库；如果 Coze 当前 SDK 要求鉴权，建议先放在服务端或边缘函数中处理。\n\n\n## 如何创建自己的Coze机器人？\n\n注册国内版Coze，主要使用国内的大模型，例如豆包、通义千问等等。\n\n[扣子-AI 智能体开发平台](https://www.coze.cn/home)\n\n扣子是新一代 AI 大模型智能体开发平台。整合了插件、长短期记忆、工作流、卡片等丰富能力，扣子能帮你低门槛、快速搭建个性化或具备商业价值的智能体，并发布到豆包、飞书等各个平台。\n\n或使用国际版，用的是GPT\\Claude\\Gemini等国外大模型。\n\n[Coze: Next-Gen AI Chatbot Developing Platform](https://www.coze.com/)\n\nCoze is a next-generation AI application and chatbot developing platform for everyone. Regardless of your programming experience, Coze enables you to effortlessly create various chatbots and deploy them across different social platforms and messaging apps.\n\n两者操作、配置方式几乎一致，国际版的插件稍微强一些，但对于国内使用体验可能有点门槛，例如网络问题。\n\n下文我用国内版Coze来举例。\n\n\n### 创建机器人\n\n在个人空间，点击右上角创建一个Bot即可\n\n\n\n按需填写你的名称描述和头像。\n\n\n\n\n### 机器人设置页面介绍\n\n从上往下，分别可以设置大语言模型、插件、与知识库。（其它还有很多丰富的设置我们以后再折腾）\n\n\n\n\n#### 关于模型\n\n可以按照你的需求选择模型的参数，我这边选择默认的豆包即可。\n\n\n\n\n#### 插件\n\n点击右侧添加插件，\n\n\n\n然后按需添加即可，可以选择添加一些网络搜索的插件。\n\n\n\n::: tip 提示\n若插件太多，Bot可能会忙不过来，这里有一些比较进阶的知识，即AI工作流；\n它支持用图形拖拽、低代码编程的方式，让AI根据用户意图，自动选择合适的插件和流程进行工作；关于工作流，此文不做赘述。感兴趣可以参考这篇《[FastGPT工作流](https://blog.tangly1024.com/article/build-an-enterprise-AI-knowledge-base-using-FastGPT)》进行配置，FastGPT与Coze基本操作大同小异。\n\n:::\n\n\n### 知识库\n\n在知识这一栏，点击右侧加号，可以将你的知识库绑定到这个机器人上：\n\n\n\n弹出的知识库列表中，直接点击右侧添加即可。\n\n\n\n我这里已经提前创建好了一个NotionNext的知识库，而你还没创建知识库，因此这里是空的。这里我们可以先关闭此弹窗，先正常发布后，回过头再完善知识库。\n\n知识库知识库允许你投喂给AI一些专业知识，以便它们可以更精确地按照你的要求回答问题。它需要另外维护和导入，因此我与这里的Chat插件分开介绍，在后文中我会提到知识库的创建和导入。\n\n\n### 调试\n\n我们可以直接在右侧的预览和调试中进行测试，和AI进行对话。后续如果更新知识库，或者修改插件、AI参数等等都可以在这里直接调试：\n\n\n\n\n### 发布并获取Bot-ID\n\n我们这里直接点击右上角发布：\n\n\n\n这里会跳出一个引导窗，让你填写开场白和预置的问题，可以按需填写并确认，或者点击跳过并直接发布，我们后面可以再回来修改。\n\n\n\n\n### 发布选项\n\n这里可以选择将机器人发布到那些平台，直接滚动到窗口最下方，选择勾选WebSDK，然后点击右上角发布。\n\n\n\n::: tip 提示\n这里我们还可以选择微信公众号的接入方式，这个也不复杂，不过可以等我们下次修改配置时，再回来改这里即可。\n\n:::\n\n\n### 获取Bot_Id\n\n发布后点击安装，即可获取你的WebSDK的机器人ID了\n\n\n\n复制bot_id后面的这串数字即可，（注意去掉引号）\n\n\n\n\n## 知识库\n\ncoze主页点击上方知识库标签，并点击右上角的创建知识库。\n\n\n\n在弹出的信息框中选择，文本格式，然后导入类型可以按照你的需求选择，这里的选择只是决定你的初始数据导入方式，后面我们可以任选别的方式来更新、修改这个知识库内容。\n\n\n\n例如，我选择在线数据导入，然后方式选择自动采集\n\n\n\n然后选择`批量添加`URL，这里直接粘贴你的网站URL跟地址、或者像我这样导入站点地图的地址即可。\n\n\n\n然后选择确认，系统将自动采集导入你的内容。\n\n后续你还可以使用上传本地文档、导入Notion文档、自定义导入（直接输入文本知识）等方式不断完善这个知识库。\n\n\n\n\n## 最后\n\n知识库配置好，记得回到个人空间下，找到你的机器人，点击他进入机器人配置页面。\n\n\n\n在知识这一栏目，添加你刚才配置的知识库\n\n\n\n关联知识库后，点击右上角的发布，从而然你的最新配置生效。\n\n\n\n就到这里了，尝试一下和你的机器人聊天吧，只要是你知识库内相关的内容，它都能给出更精准的回复。\n\n\n## 附\n\n如果有任何疑问欢迎留言询问。\n\n如果需要让AI直接对接到微信公众号，可以参考此文开通：\n\n[扣子 - 文档中心](https://www.coze.cn/docs/guides/wechat_subscription)\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-coze\n","docs/user-guide/plugins/notion-next-salesmatly-pulgin.md":"# SaleSmartly聊天插件\n> 迁移自：[SaleSmartly聊天插件](https://docs.tangly1024.com/article/notion-next-salesmatly-pulgin)\n> 发布日期：2024-5-10\n> 最后编辑：2024-9-21\n> 原栏目：🧷 外部扩展\n> 标签：NotionNext、插件、聊天\n> 摘要：NotionNext配置Salesmatly插件\n\n由于Facebook聊天插件停运，目前可以选择用SaleSmartly插件作为对话工具\n\n\n## 效果预览\n\n网页右下角的聊天图标，点击后可以与站长进行聊天通讯。\n\n\n\n\nSaleSmartly的免费版上线是一千个会话，即超过一千位客户咨询后，就不再收到新的消息，需要升级套餐后才可使用。\n\n\n## 安装方式\n\n1. 登录[SaleSmartly](https://share.salesmartly.com/gsuvhl)后台获取安装代码\n\n1. 配置在NotionNext中。\n\n安装代码获取方式：\n\n\n### 1.登录并配置SaleSmart\n\n访问SaleSmartly主页 注册登录。\n\n[你是否经常为了管理独立站的客户而烦恼？你是否想要提高你的销售转化率和客户满意度？你是否想要利用社交媒体的力量来扩大你的市场？ 如果你的答案是肯定的，那么我强烈推荐你使用SaleSmartly，它会让你的独立站事业更加成功，让你的客户更加满意： -聚合在线聊天（livechat）、WhatsApp、Facebook Messenger、Instagram、Telegram、Line、Email、Wechat -AI机器人自动回复常见问题 -营销自动化发送个性化消息 -客服自动分配会话等 还有免费试用版，有需要的可以了解一下这款全渠道客户聊天工具](https://share.salesmartly.com/gsuvhl)\n\n选择介入网页聊天插件\n\n\n\n点击新人指引教程，选择添加聊天插件到您的网站，并点击配置插件\n\n\n\n在这里可以配置你的聊天插件的名称以及一些预设消息\n\n\n\n为了插件能正常聊天，这里需要实名认证\n\n\n\n\n### 2. 获取安装代码\n\n然后点击复制安装代码\n\n\n\n代码会自动复制到您的剪贴板中，格式如下\n\n```HTML\n<script src=\"**https://assets.salesmartly.com/js/xxxxxxx.js**\"></script>\n```\n\n将红色的链接部分配置到Notion_CONFIG中，添加一个CUSTOM_EXTERNAL_JS配置，配置结果如下：\n\n\n\n直接我的这行配置到notion中，再将url改成你的即可：\n\n::: tip 提示\n这里**配置值**是需要用中括号加英文双引号拼起来[””]，它代表一串配置数组，支持多个用英文逗号隔开。例如[\"https://1.js\",\"https://2.js\",\"https://3.js\"]\n\n直接在Notion中手动输入这项配置时，Notion会自动将英文的双引号转成中文，导致软件报错，因此建议复制我这里写好的格式，再将url替换成您自己的。\n:::\n\n\n~~旧版配置方法（废弃）~~
\n\n将上述脚本中的链接部分（下划线加粗标红部分）复制出来在浏览器中打开，可以看到一段代码\n\n全选并复制这里的代码内容\n\n打开Notion模板中的的配置中心，将配置粘贴到 GLOBAL_JS 配置项即可。\n\n\n \n\n\n## 附\n\n在Salesmart后台主页，可以选择使用不同的终端用于接收回复消息，例如绑定小程序后，您可以在小程序中，接收或回复用户的消息。\n\n\n\n\n## 其它聊天插件选择\n\n你可以任意查找网上的其它插件进行安装，例如参考文档中的[TIDIO插件安装](/user-guide/plugins/notion-next-tidio)或者使用[Chatway聊天插件](https://go.chatway.app/)，他们与SaleSmartly的安装方式基本一致。例如Chatway插件配置也是添加一个脚本地址即可，示例如下：\n\n\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-salesmatly-pulgin\n","docs/user-guide/plugins/notion-next-tidio.md":"# TIDIO聊天插件\n> 迁移自：[TIDIO聊天插件](https://docs.tangly1024.com/article/notion-next-tidio)\n> 发布日期：2024-9-21\n> 最后编辑：2024-9-21\n> 原栏目：🧷 外部扩展\n\n## 效果\n\n网页右下角会悬挂一个聊天按钮，用户可以直接发送消息对话，你可以在你的TIDIO客户端收到消息并进行回复，和SaleSmartly的功能基本一直，可以选择安装任意一种。\n\n\n\nSaleSmartly的免费版上限是每月50个会话，超出后需要升级套餐后才可使用。\n\n\n## 安装方法\n\n和SaleSmartly安装方式几乎一致。\n\n1. 登录TIDIO后台\n[Accelerate Your Growth With #1 AI Customer Service | Tidio](https://www.tidio.com/)\n\nConvert more leads, provide stellar support, and boost your revenue with Tidio’s game-changing AI-driven customer service solution.\n\n1. 按照引导获取你的手动安装代码\n首次注册后，TIDIO会自动引导你获取安装代码，这是安装代码格式：\n```JavaScript\n<script src=\"**//code.tidio.co/xxxxxx.js**\" async></script>\n```\n如果你已经配置好，可以在设置→ Installation → Manual install 中找到你的安装代码\n\n\n\n## 配置\n\n将上述安装代码中的URL部分复制出来，即这段：**//code.tidio.co/xxxxxx.js**\n\n配置到NotionNext中,添加一个配置 CUSTOM_EXTERNAL_JS，参考如下\n\n\n\n可以直接复制我的这个配置，并将URL替换成你的。\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-tidio\n","docs/user-guide/plugins/notion-next-plugin-live2d.md":"# Live2D宠物插件\n> 迁移自：[Live2D宠物插件](https://docs.tangly1024.com/article/notion-next-plugin-live2d)\n> 发布日期：2023-6-30\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n## 介绍\n\n《Live2D》是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用，缺点是Live 2D人物无法大幅度转身，开发商正设法让该技术可显示360度图像。\n\n开启Live2D宠物挂件后，你的页面的角落会出现这样一只可爱宠物，并且它会跟随着你的鼠标位置动起来。\n\n\n\n\n## 开启配置\n\n目前所有主题都支持宠物挂件。\n\n开启方式，源文件在[blog.config.js](https://github.com/notionnext-org/NotionNext/blob/8103e23aac7219789c77e412a1bc24dd2a2683b5/blog.config.js#L152C2-L158C1)中，默认是开状态\n\n```JavaScript\n// 悬浮挂件\n WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件\n WIDGET_PET_LINK:\n process.env.NEXT_PUBLIC_WIDGET_PET_LINK ||\n 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models\n WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题\n```\n\n您也可以直接通过设置环境变量`NEXT_PUBLIC_WIDGET_PET ` 的方式来控制开关\n\n\n## 切换模型\n\n`WIDGET_PET_LINK` 这个参数制定的是动画模型的加载地址，目前默认使用的是茶杯狗。\n\n::: tip 提示\n由于每个动画模型的高度不同，可能需要您在[代码中](https://github.com/notionnext-org/NotionNext/blob/8103e23aac7219789c77e412a1bc24dd2a2683b5/components/Live2D.js#L38)修改模型的高度height，否则会很怪异。\n\n```HTML\n<canvas id=\"live2d\" className='cursor-pointer' width=\"280\" **height=\"250\"** onClick={handleClick} alt='切换主题' title='切换主题' />\n```\n:::\n\n\n## 模型预览\n\n例如您想使用 `live2d-widget-model-chitose` 这个模型，则可以将`WIDGET_PET_LINK `的值设置为\n\n```Bash\nhttps://cdn.jsdelivr.net/npm/**live2d-widget-model-chitose**/assets/**chitose.model.json**\n```\n\n1. 黑猫\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-hijiki/assets/hijiki.model.json\n```\n\n\n1. 白猫\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-tororo/assets/tororo.model.json\n```\n\n\n1. chitose\n```Bash\nhttps://cdn.jsdelivr.net/npm/**live2d-widget-model-chitose**/assets/**chitose.model.json**\n```\n\n\n1. epsilon\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-epsilon2_1/assets/Epsilon2.1.model.json\n```\n\n\n1. gf\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-gf/assets/Gantzert_Felixander.model.json\n```\n\n\n1. haru\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-haru/01/assets/haru01.model.json\n```\n\n\n1. haru2\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-haru/02/assets/haru02.model.json\n```\n\n\n1. はると（haruto-遥人）\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-haruto/assets/haruto.model.json\n```\n\n\n1. hibiki\n高度需要调整为 `900`\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-hibiki/assets/hibiki.model.json\n```\n\n\n1. izumi\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-izumi/assets/izumi.model.json\n```\n\n\n1. koharu\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-koharu/assets/koharu.model.json\n```\n\n\n1. ni-j\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-ni-j/assets/ni-j.model.json\n```\n\n\n1. miku\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-miku/assets/miku.model.json\n```\n\n\n1. nico\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nico/assets/nico.model.json\n```\n\n\n1. nietzche\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nietzsche/assets/nietzche.model.json\n```\n\n\n1. nipsilon\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nipsilon/assets/nipsilon.model.json\n```\n\n\n1. nito\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nito/assets/nito.model.json\n```\n\n\n1. shizukui\n建议高度500\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-shizuku/assets/shizuku.model.json\n```\n\n\n1. tsumiki\n建议高度500\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-tsumiki/assets/tsumiki.model.json\n```\n\n\n1. unitychan\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-unitychan/assets/unitychan.model.json\n```\n\n\n1. 茶杯狗\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-wanko/assets/wanko.model.json\n```\n\n\n1. z16\n建议高度500\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-z16/assets/z16.model.json\n```\n\n\n\n## 更多模型预览\n\n访问以下链接，在线预览102个模型，需要全程科学访问。\n这些模型暂时没有cdn、用的github仓库链接，可能影响加载速度和国内访问，如果更好的cdn链接，欢迎提供分享。\n\n[Live2d Cubism 2](https://imuncle.github.io/live2d/)\n\n\n### 部分模型截图\n\n1. bilibili-22娘\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/22/model.default.json\n```\n\n\n1. bilibili-22娘长高版本\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/22_high/model.json\n```\n\n\n1. bilibili-33娘\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/33/model.default.json\n```\n\n\n1. bilibili-33娘长高版本\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/33_high/model.default.json\n```\n\n\n1. 布洛妮娅\n```Bash\nmodel/bronya/model.json\n```\n\n\n1. 布洛妮娅2\n```Bash\nmodel/bronya_1/model.json\n```\n\n\n1. はる（haru-春）\n```Bash\nmodel/haru/haru_01.model.json\n```\n\n\n1. 茵蒂克丝(index)\n```Bash\nmodel/index/model.json\n```\n\n\n1. izumi\n```Bash\nmodel/izumi/izumi.model.json\n```\n\n\n1. katou\n```Bash\nmodel/katou_01/katou_01.model.json\n```\n\n 1. liang\n```Bash\nmodel/liang/2.json\n```\n\n\n15. miku\n\n```Bash\nmodel/miku/miku.model.json\n```\n\n\n1. 小埋 murakumo\n```Bash\nmodel/miku/miku.model.json\n```\n\n\n1. 茶杯狗\n```Bash\nmodel/wanko/wanko.model.json\n```\n\n\n1. shizuku\n```Bash\nmodel/shizuku/shizuku.model.json\n```\n\n 1. pio\n```Bash\nmodel/Pio/model.json\n```\n\n 1. 血小板\n```Bash\nmodel/platelet/model.json\n```\n\n 1. 血小板 迷你\n```Bash\nmodel/platelet-2/model.json\n```\n\n 1. 蕾姆\n```Bash\nmodel/rem/model.json\n```\n\n 1. Tia\n```Bash\nmodel/Tia/index.json\n```\n\n 1. penchan\n```Bash\nmodel/penchan/penchan.model.json\n```\n\n 1. dollsfrontline\n```Bash\nmodel/dollsfrontline/95type_405/normal/model.json\n```\n\n 1. dollsfrontline-armor\n```Bash\nmodel/dollsfrontline/armor/model1.json\n```\n\n 1. dollsfromtline-command\n```Bash\nmodel/dollsfrontline/command/model1.json\n```\n\n 1. 当麻\n```Bash\nmodel/touma/touma.model.json\n```\n\n\n\n## 最后\n\n以上使用的是Cubism2版本的动画模型，您还可以体验一下以下Cubism3版本的动画模型。\n\n高版本的模型支持更丰富更细节的动画，结合AI对话接口，有很大的开发空间。这里有点超纲，仅供预览，暂时不做支持，在线预览网址：\n\n[Live2d Cubism 3](https://imuncle.github.io/live2d/live2d_3/)\n\n\n\n\n## 参考\n\n[https://github.com/imuncle/live2d](https://github.com/imuncle/live2d)\n\n[live2d-widget-models/packages at master · xiazeyu/live2d-widget-models](https://github.com/xiazeyu/live2d-widget-models/tree/master/packages)\n\nThe model library for live2d-widget.js. Contribute to xiazeyu/live2d-widget-models development by creating an account on GitHub.\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-plugin-live2d\n","docs/user-guide/plugins/notion-next-docs-chat.md":"# Gemini AI 助手\n\nNotionNext 已内置一个轻量 AI 助手入口，可以把你的博客接到自己的 Gemini 免费额度。核心原则只有一个：`GOOGLE_GENERATIVE_AI_API_KEY` 只能放在服务端代理里，不能写进前端代码、Notion 配置表或 `NEXT_PUBLIC_*` 环境变量。\n\n## 适用场景\n\n- 想在博客右下角放一个 AI 助手。\n- 想让助手回答站点部署、主题配置、文章内容或常见问题。\n- 想复用 NotionNext 文档站同款 Gemini + Cloudflare Pages Function 方案。\n\n如果你已经在用 Coze、Dify、Chatbase，也可以继续用它们；这个方案更适合想自己控制模型 Key 和系统提示词的站点。\n\n## 部署代理\n\n在 Cloudflare Pages 项目中添加 Function，例如 `functions/api/docs-chat.ts`。NotionNext 官方文档站已经使用这个文件作为参考实现，它会在服务端读取 Gemini Key，并向前端暴露一个安全的聊天 API。\n\nCloudflare Pages 环境变量：\n\n```bash\nGOOGLE_GENERATIVE_AI_API_KEY=你的 Gemini API Key\nDOCS_CHAT_MODEL=gemini-flash-lite-latest\nDOCS_CHAT_CORS_ORIGINS=https://你的博客域名\nDOCS_CHAT_MAX_TOKENS=1200\n```\n\n`DOCS_CHAT_CORS_ORIGINS` 可以填写多个域名，用英文逗号分隔：\n\n```bash\nDOCS_CHAT_CORS_ORIGINS=https://blog.example.com,https://docs.example.com\n```\n\n本地或临时调试时可以先用 `*`，正式站点建议改成自己的域名。\n\n## 接入博客\n\n在博客站点的部署平台中添加：\n\n```bash\nNEXT_PUBLIC_DOCS_CHAT_API=https://你的文档站域名/api/docs-chat\nNEXT_PUBLIC_DOCS_CHAT_TITLE=AI 助手\nNEXT_PUBLIC_DOCS_CHAT_WELCOME=你好，我是本站 AI 助手。你可以问我文章、主题和部署问题。\n```\n\n重新部署后，页面右下角会出现 AI 助手按钮。\n\n也可以在 Notion 配置表中添加同名配置：\n\n| 配置 | 说明 |\n| ------------------- | ----------------------------------------------------------------- |\n| `DOCS_CHAT_API` | 聊天代理地址，例如 `https://notionnext.example.com/api/docs-chat` |\n| `DOCS_CHAT_TITLE` | 右下角按钮和窗口标题 |\n| `DOCS_CHAT_WELCOME` | 打开窗口后的第一句欢迎语 |\n\n## 让 AI 更懂你的网站\n\n最小可用版本只需要改服务端代理里的系统提示词。可以把这些信息写进去：\n\n- 你的站点定位和读者人群。\n- 常见入口，例如 `/about`、`/links`、`/archive`。\n- 希望 AI 优先回答的主题。\n- 不希望 AI 回答的范围。\n\n不要把用户私密信息、后台地址、密钥或未公开资料写进提示词。\n\n## 常见问题\n\n### 为什么不用 `NEXT_PUBLIC_GOOGLE_GENERATIVE_AI_API_KEY`？\n\n`NEXT_PUBLIC_*` 会被打包到浏览器里，任何访问者都能看到。Gemini Key 必须只放在 Cloudflare Pages、Vercel Function 或你自己的后端服务里。\n\n### 能不能直接复用 NotionNext 官方文档站的接口？\n\n不建议。官方接口的额度、提示词和跨域策略会按文档站维护。自己的博客应当部署自己的代理，并用自己的 Gemini 免费额度。\n\n### 和 Coze 方案怎么选？\n\n想最快搭建并使用 Coze 知识库，选 [Coze AI 聊天机器人](./notion-next-coze.md)。想自己控制 Gemini Key、模型和提示词，选这个方案。\n","docs/user-guide/plugins/notion-next-facebook-chat-plugn.md":"# Facebook聊天插件[已失效]\n> 迁移自：[Facebook聊天插件[已失效]](https://docs.tangly1024.com/article/notion-next-facebook-chat-plugn)\n> 发布日期：2023-8-4\n> 最后编辑：2024-9-21\n> 原栏目：🧷 外部扩展\n\n## 通知\n\n::: tip 提示\nFacebook 官方宣布：从 2024 年 5 月 9 日起，聊天插件将不再可用。\n\n可以选择使用[SaleSmartly 插件](/user-guide/plugins/notion-next-salesmatly-pulgin)作为页面聊天客服。\n:::\n\n\n## 文档\n\n以下是旧文档\n\n::: tip 提示\n最后更新域于0230906， 修改了原文档中第四点，获取PAGE_ID的方式；用原先方法获取的PAGE_ID，将导致聊天插件加载失败。\n:::\n\n::: tip 提示\nFaceBook 官方提供的聊天插件，可以方便您与访客实时聊天。\n:::\n\n> 全程大约10分钟，即可获得你的facebook插件。\n\n\n## 使用效果\n\n网页`右下角`弹出一个聊天框，用户可以与站长聊天，可以选择访客匿名、或登录Facebook的Messenger。\n\n\n\n\n站长在pc端的后台，或者app上都可以事实查看消息\n\n\n\n\n\n## 配置方式\n\n在NotionNext后台添加两个环境变量即可开启FBChat插件 ， 对应配置文件路径 [blog.config.js](https://github.com/notionnext-org/NotionNext/blob/70cc96d8f16e71abc8a21e777c4b984680ab5a4b/blog.config.js#L99-L100) 。\n\n这两个参数如何获得，请阅读下方的注册方法部分。\n\n\n## 开通方法\n\n注册并登录您的facebook账号\n\n[https://www.facebook.com/login/](https://www.facebook.com/login/)\n\n\n### 一、开通你的公共主页\n\nfacebook上创建一个公共主页很简单，按照步骤创建好主页后，即可获得你的`PAGE-ID`\n\n1. 点击页面左侧的公共主页\n\n\n1. 点击新建公共主页\n\n\n1. 填写资料完成注册\n填写完成后，会引导你完成一些基础的主页配置，自行选择配置即可。\n\n\n1. 如何获取`PAGE_ID`\n - 原先获取PAGE_ID的方式是错误的：\n~~完成后，按照提示返回主页。在你的公共主页地址栏URL中可以看到你的 ~~`~~PAGE_ID~~`~~；例如此处我的PAGE_ID 就是 ~~~~`100095411623547`~~\n\n错误截图
\n\n\n\n \n正确方式，在公共主页左侧点击`设置` → 点击`品牌内容`\n\n\n点击品牌内容后跳转的页面中就包含了页面ID PAGE_ID 参数，此处我的PAGE_ID是`100411122875215`\n\n\n1. 配置白名单\n为了让您的网站允许使用该公共主页的messenger功能，需要如下配置：\n点击右上角头像 → 设置与隐私 → 设置 ； 来到你的设置中心\n\n\n设置中心左侧点击新版公共主页体验\n\n在新版公共主页体验中，点击高级消息功能，并输入您的站点域名，点击添加即可。\n\n\n\n### 二、开通开发者权限\n\n完成此步骤，你就能获得自己的专属应用id，用此id可以调用facebook的功能\n\n1. 点击下方链接，申请开发者\n[https://developers.facebook.com/async/registration](https://developers.facebook.com/async/registration)\n\n1. 点击继续\n并按照要求验证手机号和邮箱\n\n\n1. 最后一步，完成注册\n这里选择你的属性，可以任选，不影响后续操作\n\n\n1. 创建一个应用\n注册完成自动会来到此开发者首页，您以后也可以随时访问 [https://developers.facebook.com/apps/](https://developers.facebook.com/apps/) 来查看您的应用。\n点击创建\n\n\n1. 配置应用\n选择facebook，点击继续\n\n填写完应用名字，直接点击创建应用即可。\n\n\n1. 获取`APP_ID`\n在应用首页即可看到\n\n\n\n## 完成\n\n至此，你已经获取到了`APP_ID`和`PAGE_ID`。\n\n在NotionNext后台添加两个环境变量即可开启FBChat插件 ， 对应配置文件路径 [blog.config.js](https://github.com/notionnext-org/NotionNext/blob/70cc96d8f16e71abc8a21e777c4b984680ab5a4b/blog.config.js#L99-L100) 。\n\n\n## 关于Facebook后台设置\n\n您可以在facebook后台设置这个聊天插件的预设回复，营业时间等等属性，这里不做赘述。\n\n配置入口：在您的facebook公共主页的设置菜单中，点击 [Meta Business Suite](https://business.facebook.com/) （商务套件）。\n\n\n\n\n### 商务后台页面\n\n除了上面的入口，你也可以直接访问右边链接 [https://business.facebook.com/](https://business.facebook.com/)\n\n后台可以查看所有和你聊天的信息，右上角可以配置对应的自动回复等功能，和微信公众号类似。\n\n\n\n同时，后台也支持您自定义插件的样式、位置、以及自动回复的内容~\n\n\n\n\n### 客户端\n\n这个功能使用的是Facebook的Messenger聊天工具，你可以下载一个Facebook、或者Messenger、或者和我一样下载一个 Business Suite (facebook的运营全家桶)。\n\n\n\n\n## 参考\n\n- 官方介绍\n[https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin](https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin)\n\n- React插件代码\n[https://github.com/Yoctol/react-messenger-customer-chat](https://github.com/Yoctol/react-messenger-customer-chat)\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-facebook-chat-plugn\n","docs/user-guide/plugins/notion-next-google-adsense.md":"# Google广告营收插件\n> 迁移自：[Google广告营收插件](https://docs.tangly1024.com/article/notion-next-google-adsense)\n> 发布日期：2023-8-7\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n::: tip 提示\n通过网站上对接谷歌广告接口，可以让您的网站通过广告获取一笔美金收入。\n:::\n\n\n## 开通验证\n\n谷歌广告的配置开通有很多限制\n\n1. 申请开通谷歌[Adsense](https://www.google.com/adsense/)账号\n\n1. 验证站点所有权（必须）:请按照GoogleAdsense 后台的要求验证你的站点所有权\n比较推荐的做法是，把GoogleAdsense后台提供的 `ads.txt` 文件上传到您代码的 `public` 目录下。public目录专门用来放置网站的静态文件。例如您可以访问我的博客的ads验证文件 [https://blog.tangly1024.com/ads.txt](https://blog.tangly1024.com/ads.txt)\n\n\n## 配置方式\n\n1. 获取谷歌账号的 PUB_ID 填写到[站点配置](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/blog.config.js#L331)\n\n\n1. 在谷歌后台创建四种类型的广告单元，获取广告单元的ID\n\n\n1. 在[代码中配置](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/blog.config.js#L333-L336)广告单元ID\n\n\n\n### 旧版配置广告单元\n\n需要改动代码，而且不能嵌入到文章的指定段落。\n\n1. 在你需要引入特定自定义广告的地方添加组件代码 <AdSlot /> 即可 相关[AdSlot源码](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/components/GoogleAdsense.js#L51-L95)\n\n\n1. 相关使用案例 , [Simple主题首页](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/themes/simple/index.js#L74)加入了一个原生广告单元\n\n\n\n## 广告插件新版用法\n\n在 **4.4.0 **的版本后，支持您在notion中插入 **<ins/>** 这个代码，它将自动在网页中变成广告单元，哪里想变放哪里。\n\n文章内容支持嵌入广告：\n在想要变成广告的位置输入一行text元素，内容是\n\n```Plain Text\n<ins/>\n```\n\n即可替换成广告。如下图是我在notion中插入的文字<ins/>：\n\n\n\n在博客中广告会直接显示在文章中间的位置：\n\n\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-google-adsense\n","docs/user-guide/plugins/overview.md":"# Plugins Skill\n\nPath: `docs/user-guide/plugins/overview.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/overview.md)"},"files":{"docs/user-guide/plugins/mailchimp.md":"# Mailchimp邮件订阅\n> 迁移自：[Mailchimp邮件订阅](https://docs.tangly1024.com/article/notion-next-mailchimp)\n> 发布日期：2023-7-4\n> 最后编辑：2024-9-12\n> 原栏目：🔊 运营教程\n\n::: tip 提示\n此功能主要针对国外用户的使用习惯开发。国内推荐使用公众号导流方案。\n:::\n\n\n## 序\n\nNotionNext 后续版本将陆续支持Newsletter功能，目前基于Mailchimp邮件订阅，可以轻松实现您与读者建立紧密的链接。\n\n按照本操作步骤，将为您创建一个Mailchimp的api-key以及对应的邮件列表id，便于您通过接口，对接自己的页面表单。\n\n::: tip 提示\n目前只有landing主题上支持了 Mailchimp的ui组件，后续将在其它主题中 也加入对应的UI组件。\n预览体验：访问[NotionNext主页](/user-guide/intro)，在底部的邮件订阅处填写您的邮箱体验。\n:::\n\n\n### 什么是Mailchimp\n\nMailChimp是目前最通用且易于使用的 电子邮件营销服务.\n\nMailChimp 为您提供一个免费帐户，最多可拥有 2000 个电子邮件订阅者，每月发送 12000 封电子邮件，在给定的 2000 小时内限制为 24 封电子邮件。 这个限制对于任何初学者以及中级博主和营销人员来说都非常好。\n\n\n## 操作步骤\n\n你可以按照以下步骤在 Mailchimp 中找到你的邮件列表 ID 和 API KEY：\n\n1. 登录你的 Mailchimp 账户，点击右上角的用户名，然后选择 \"Account\" 进入账户设置页面。\n\n1. 在账户设置页面中，点击 \"Extras\" 选项卡，然后选择 \"API keys\"。\n\n\n1. 在 API keys 页面中，可以看到你现有的 API KEY 列表。如果没有 API KEY，请点击 \"Create A Key\" 按钮创建一个新的 API KEY。\n\n\n\n1. 复制你的 API KEY，并妥善保管。\n\n1. 点击 \"Audience\" 选项卡，然后选择你要用来存储用户邮件地址的列表。\n\n\n1. 在该列表的设置页面中，可以看到该列表的唯一 ID。复制该 ID。\n\n\n\n## 最后\n\n现在你已经找到了你的 Mailchimp 邮件列表 ID 和 API KEY。将它们替换到你的代码中即可开始使用 Mailchimp API 来收集用户邮件地址了。\n\n只需要在Vercel环境变量中添加两项配置，就可以实现网站的邮件订阅功能\n\n新订阅请求需要邮箱持有人通过 Mailchimp 确认邮件完成订阅。页面显示“Subscription request received…”表示请求已经处理；为保护邮箱隐私，重复提交也会显示相同提示，不会自动恢复已退订成员。未收到确认邮件时，请检查垃圾邮件目录，或通过站点所有者提供的 Mailchimp 订阅表单重新订阅。\n\n新订阅从原来的直接 `subscribed` 改为等待确认的 `pending`。升级后，请提醒读者完成确认邮件，并在 Mailchimp 后台确认订阅状态；页面接收成功提示不等于已加入正式收件名单。\n\nMailchimp 对永久删除等少数地址状态可能拒绝请求，此时页面仍会显示失败。新请求与 `Member Exists` 使用相同提示，但其他上游 400 仍返回 HTTP 400，不能据此认为所有邮箱状态都已隐藏。详细返回规则见 [Mailchimp 邮件订阅接口](../../developer/MAILCHIMP_SUBSCRIBE.zh-CN.md)。\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-mailchimp\n","docs/user-guide/plugins/music-player.md":"# 音乐播放器\n> 迁移自：[音乐播放器](https://docs.tangly1024.com/article/notion-next-plugin-music-player)\n> 发布日期：2023-8-4\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n## 开启方式\n\n后台添加环境变量 `NEXT_PUBLIC_MUSIC_PLAYER` 值为 `true`，即可打开音乐播放器功能。\n\n更多关于播放器配置说明，可以参考APlayer官网\n\n[APlayer](https://aplayer.js.org/)\n\n```JavaScript\n// 音乐播放插件\n MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件\n MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换，如果使用播放器，打开自动播放再隐藏，就会以类似背景音乐的方式播放，无法取消和暂停\n MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过自动播放时常不生效（移动设备不支持自动播放）\n MUSIC_PLAYER_SHOW_LRC: process.env.NEXT_PUBLIC_MUSIC_PLAYER_SHOW_LRC || false, // 是否展示歌词（前提是有配置歌词路径，对 meting 无效）\n 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',\n MUSIC_PLAYER_ORDER: 'list', // 默认播放方式，顺序 list，随机 random\n MUSIC_PLAYER_AUDIO_LIST: [ // 示例音乐列表。除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/\n {\n name: '风を共に舞う気持ち',\n artist: 'Falcom Sound Team jdk',\n url: 'https://music.163.com/song/media/outer/url?id=731419.mp3',\n cover: 'https://p2.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'\n },\n {\n name: '王都グランセル',\n artist: 'Falcom Sound Team jdk',\n url: 'https://music.163.com/song/media/outer/url?id=731355.mp3',\n cover: 'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'\n }\n ],\n MUSIC_PLAYER_METING: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING || false, // 是否要开启 MetingJS，从平台获取歌单。会覆盖自定义的 MUSIC_PLAYER_AUDIO_LIST，更多配置信息：https://github.com/metowolf/MetingJS\n MUSIC_PLAYER_METING_SERVER: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER || 'netease', // 音乐平台，[netease, tencent, kugou, xiami, baidu]\n MUSIC_PLAYER_METING_ID: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_ID || '60198', // 对应歌单的 id\n 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）\n```\n\n> 待完善\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-plugin-music-player\n","docs/user-guide/plugins/notion-next-chat-base.md":"# AI聊天机器人-ChatBase\n> 迁移自：[AI聊天机器人-ChatBase](https://docs.tangly1024.com/article/notion-next-chat-base)\n> 发布日期：2023-7-18\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n## 啥是ChatBase\n\nChatbase.co 是**一款为网站构建自定义ChatGPT 界面的工具**，用户只需上传文档或添加到网站的链接，就可以获得一个类似ChatGPT 的聊天机器人，并将它作为小组件添加到网站上。\n\n网页右下角会出现一个对话框，您可以通过他搜索网页中的所有知识点。\n\n\n\n2024.4.29最新版本；配置成功的效果，右下角多出一个聊天按钮\n\n\n\n直接询问对话\n\n\n\n\n## 配置方法\n\n用环境变量或修改代码的方式，在[blog.config.js](https://github.com/notionnext-org/NotionNext/blob/48cb3ee6779c117bcb6b61e5cb89fbd1c541a115/blog.config.js#L156)中添加您的chatbase-id即可。\n\n```YAML\n// ********挂件组件相关********\n// Chatbase\nCHATBASE_ID: process.env.NEXT_PUBLIC_CHATBASE_ID || null, // 是否显示chatbase机器人 https://www.chatbase.co/\n```\n\n另外，有了chatbase-id 您可以直接用内嵌网页的方式，将chatbase放在您的任意notion页面中，网页地址\n\n```HTML\nhttps://www.chatbase.co/chatbot-iframe/${BLOG.CHATBASE_ID}\n```\n\n\n## 获取ChatBase-id方法\n\n\n### 1. 注册登录ChatBase\n\n[Chatbase | ChatGPT for your website](https://www.chatbase.co/)\n\nBuild an AI chatbot from your knowledge base and add it to your website.\n\n\n### 2. 根据引导，配置机器人的数据源\n\n登陆成功后，创建一个新的聊天机器人，点击`New Chatbot`\n\n\n\n这里要选择用什么数据源来训练机器人；默认是上传json文件，在这里我们选择爬取网站内容，点击Website：\n\n\n\n这里使用站点地图的方式提交内容，输入网址后面加上`/sitemap.xml`，如下图，这是NotionNext每个站点默认的地图位置。\n\n\n\n点击Load sitemap加载地图内容，此时平台会自动爬取您网站中的页面地址\n\n\n\n（免费版只能读取10个页面生成机器人数据，这里我们要删除超出10个的多余链接）\n\n我这边示例，只保留了几个重要链接，一个是about介绍页面，一个是archive归档页面，一篇文章；\n\n点击Create Chatbot 训练机器人。\n\n\n\n等待进度条完成。最后可以在面板中看到配置信息\n\n\n\n在setting中可以设置默认欢迎语和用户提问的提示词，这里需要自己折腾一下，不展开叙述了。\n\n\n### 3. 在Embed on Site 中找到id\n\n点击Embed on site，会提示你需要将此机器人公开，\n\n\n\n选择 make public即可\n\n\n\n然后在弹出的确认框中就可以找到你的chatbotId了。\n\n\n\n\n## 配置在NotionNext中\n\n两种方案配置,任选其一：\n\n1. 添加一个环境变量 `NEXT_PUBLIC_CHATBASE_ID`\n\n1. 添加一个NotionConfig: `CHATBASE_ID`\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-chat-base\n","docs/user-guide/plugins/notion-next-ai-chat.md":"# OpenAI 兼容 AI 助手\n\nNotionNext 内置了一个轻量 AI 聊天入口，可以接入 DeepSeek 或其它兼容 OpenAI `chat/completions` 格式的模型服务。页面前端只负责显示聊天窗口，真正的模型请求必须走服务端代理。\n\n## 为什么这样设计\n\nDeepSeek 提供的是模型 API，不是 Chatbase、Coze 那种完整网页浮窗 SDK。API Key 不能写进 `NEXT_PUBLIC_*`、Notion 配置表或前端代码，否则访问者可以在浏览器里看到密钥。\n\n因此推荐架构是：\n\n1. 站点前端配置 `NEXT_PUBLIC_AI_CHAT_API`，显示右下角 AI 助手。\n2. 服务端代理 `/api/ai-chat` 读取 `AI_CHAT_API_KEY`。\n3. 代理转发到 DeepSeek 或其它 OpenAI 兼容接口。\n\n## 前端配置\n\n在 Vercel、Cloudflare Pages、Netlify 或服务器环境变量中添加：\n\n```bash\nNEXT_PUBLIC_AI_CHAT_API=https://你的域名/api/ai-chat\nNEXT_PUBLIC_AI_CHAT_TITLE=AI 助手\nNEXT_PUBLIC_AI_CHAT_WELCOME=你好，我是本站 AI 助手。你可以问我文章、主题和部署问题。\n```\n\n也可以在 Notion 配置表中添加同名配置：\n\n| 配置 | 说明 |\n| ----------------- | --------------------------------------------------------- |\n| `AI_CHAT_API` | 聊天代理地址，例如 `https://blog.example.com/api/ai-chat` |\n| `AI_CHAT_TITLE` | 右下角按钮和窗口标题 |\n| `AI_CHAT_WELCOME` | 打开窗口后的第一句欢迎语 |\n\n## DeepSeek 代理配置\n\n如果你使用 Cloudflare Pages Functions，可以直接使用仓库内置的 `functions/api/ai-chat.ts`。在部署平台的服务端环境变量中添加：\n\n```bash\nAI_CHAT_API_KEY=你的 DeepSeek API Key\nAI_CHAT_BASE_URL=https://api.deepseek.com\nAI_CHAT_MODEL=deepseek-v4-flash\nAI_CHAT_CORS_ORIGINS=https://你的博客域名\nAI_CHAT_MAX_TOKENS=1200\nAI_CHAT_TEMPERATURE=0.3\n```\n\n`AI_CHAT_CORS_ORIGINS` 可以填写多个域名，用英文逗号分隔：\n\n```bash\nAI_CHAT_CORS_ORIGINS=https://blog.example.com,https://docs.example.com\n```\n\n本地或临时调试可以先写 `*`，正式站点建议改成自己的域名。\n\n## 使用其它 OpenAI 兼容服务\n\n只要服务支持 `POST /chat/completions`，通常只需要替换：\n\n```bash\nAI_CHAT_BASE_URL=https://你的服务商 base url\nAI_CHAT_MODEL=你的模型名\nAI_CHAT_API_KEY=你的服务端密钥\n```\n\n不要改前端组件，也不要把密钥写进 Notion。\n\n## 自定义回答范围\n\n可以用服务端变量设置系统提示词：\n\n```bash\nAI_CHAT_SYSTEM_PROMPT=你是本站 AI 助手，只回答本站文章、主题、配置和部署相关问题。回答要简洁，不确定时说明限制。\n```\n\n建议写入：\n\n- 站点定位和读者人群\n- 重点栏目或文章入口\n- 不希望 AI 回答的范围\n- 需要优先提示的部署、配置或联系信息\n\n不要写入后台地址、私密页面、未公开资料或任何密钥。\n\n## 和 Coze、Chatbase、Dify 怎么选\n\n| 方案 | 适合场景 |\n| ------------------- | ---------------------------------------------------- |\n| OpenAI 兼容 AI 助手 | 想自己控制模型、Key、系统提示词，或直接使用 DeepSeek |\n| Coze | 想使用可视化工作流、插件和平台知识库 |\n| Chatbase | 想用第三方平台自动抓取网站内容并生成聊天机器人 |\n| Dify | 已经自建 Dify 应用，希望直接嵌入 Dify 聊天窗口 |\n\nDeepSeek API 本身不会自动读取你的 Notion 数据库或站点文章。如果需要“基于全站文章回答”，后续还需要单独维护知识库或 RAG 流程。\n","docs/user-guide/plugins/index.md":"---\nredirect: /user-guide/plugins/overview\n---\n","docs/user-guide/plugins/notion-next-coze.md":"# AI聊天机器人-Coze\n> 迁移自：[AI聊天机器人-Coze](https://docs.tangly1024.com/article/notion-next-coze)\n> 发布日期：2024-9-20\n> 最后编辑：2024-9-30\n> 原栏目：🧷 外部扩展\n\n## 前言\n\n你可以直接像站点右下角的AI助手提问，它会尽可能地帮你解决问题。本文将介绍如何将Coze的AI机器人接入到NotionNext。\n\n\n\n\n\n### 特点：\n\nCoze支持介入Bing、百度等搜索引擎插件，提问时会自动检索互联网并为你整理答案。\n\nCoze支持将你的文章内容等等来源信息整理为一个知识库，便于在回答问题时检索这个知识库并给出更专业的回答。\n\n\n## NotionNext如何配置Coze\n\n在你的Notion_config中添加两项配置，分别是机器人的称呼和机器人ID即可：\n\n\n\n参考如下：\n\n这里的COZE_TITLE可以任意填写，他只会影响你窗口中AI机器人的标题，例如NotionNext-AI助理：\n\n\n\n这里我们还需要在Coze后台创建自己的机器人，并获得一个`BOT_ID`。\n\n### 常见问题：BOT_ID 后几位变成 0\n\n如果你的 `COZE_BOT_ID` 是很长的数字，不建议填在 Notion_config 的数字类型字段中。过长数字可能超过 JavaScript 安全整数范围，读取后末尾会被改成 `000`。\n\n最简单的做法是用部署环境变量配置，并把值当作字符串保存：\n\n```text\nNEXT_PUBLIC_COZE_BOT_ID=你的 Coze Bot ID\nNEXT_PUBLIC_COZE_TITLE=NotionNext助手\n```\n\n在 Vercel、Netlify、Docker 或服务器环境变量中配置后，重新部署即可。不要把 Coze 的访问令牌、个人 PAT 或长期密钥提交到 Git 仓库；如果 Coze 当前 SDK 要求鉴权，建议先放在服务端或边缘函数中处理。\n\n\n## 如何创建自己的Coze机器人？\n\n注册国内版Coze，主要使用国内的大模型，例如豆包、通义千问等等。\n\n[扣子-AI 智能体开发平台](https://www.coze.cn/home)\n\n扣子是新一代 AI 大模型智能体开发平台。整合了插件、长短期记忆、工作流、卡片等丰富能力，扣子能帮你低门槛、快速搭建个性化或具备商业价值的智能体，并发布到豆包、飞书等各个平台。\n\n或使用国际版，用的是GPT\\Claude\\Gemini等国外大模型。\n\n[Coze: Next-Gen AI Chatbot Developing Platform](https://www.coze.com/)\n\nCoze is a next-generation AI application and chatbot developing platform for everyone. Regardless of your programming experience, Coze enables you to effortlessly create various chatbots and deploy them across different social platforms and messaging apps.\n\n两者操作、配置方式几乎一致，国际版的插件稍微强一些，但对于国内使用体验可能有点门槛，例如网络问题。\n\n下文我用国内版Coze来举例。\n\n\n### 创建机器人\n\n在个人空间，点击右上角创建一个Bot即可\n\n\n\n按需填写你的名称描述和头像。\n\n\n\n\n### 机器人设置页面介绍\n\n从上往下，分别可以设置大语言模型、插件、与知识库。（其它还有很多丰富的设置我们以后再折腾）\n\n\n\n\n#### 关于模型\n\n可以按照你的需求选择模型的参数，我这边选择默认的豆包即可。\n\n\n\n\n#### 插件\n\n点击右侧添加插件，\n\n\n\n然后按需添加即可，可以选择添加一些网络搜索的插件。\n\n\n\n::: tip 提示\n若插件太多，Bot可能会忙不过来，这里有一些比较进阶的知识，即AI工作流；\n它支持用图形拖拽、低代码编程的方式，让AI根据用户意图，自动选择合适的插件和流程进行工作；关于工作流，此文不做赘述。感兴趣可以参考这篇《[FastGPT工作流](https://blog.tangly1024.com/article/build-an-enterprise-AI-knowledge-base-using-FastGPT)》进行配置，FastGPT与Coze基本操作大同小异。\n\n:::\n\n\n### 知识库\n\n在知识这一栏，点击右侧加号，可以将你的知识库绑定到这个机器人上：\n\n\n\n弹出的知识库列表中，直接点击右侧添加即可。\n\n\n\n我这里已经提前创建好了一个NotionNext的知识库，而你还没创建知识库，因此这里是空的。这里我们可以先关闭此弹窗，先正常发布后，回过头再完善知识库。\n\n知识库知识库允许你投喂给AI一些专业知识，以便它们可以更精确地按照你的要求回答问题。它需要另外维护和导入，因此我与这里的Chat插件分开介绍，在后文中我会提到知识库的创建和导入。\n\n\n### 调试\n\n我们可以直接在右侧的预览和调试中进行测试，和AI进行对话。后续如果更新知识库，或者修改插件、AI参数等等都可以在这里直接调试：\n\n\n\n\n### 发布并获取Bot-ID\n\n我们这里直接点击右上角发布：\n\n\n\n这里会跳出一个引导窗，让你填写开场白和预置的问题，可以按需填写并确认，或者点击跳过并直接发布，我们后面可以再回来修改。\n\n\n\n\n### 发布选项\n\n这里可以选择将机器人发布到那些平台，直接滚动到窗口最下方，选择勾选WebSDK，然后点击右上角发布。\n\n\n\n::: tip 提示\n这里我们还可以选择微信公众号的接入方式，这个也不复杂，不过可以等我们下次修改配置时，再回来改这里即可。\n\n:::\n\n\n### 获取Bot_Id\n\n发布后点击安装，即可获取你的WebSDK的机器人ID了\n\n\n\n复制bot_id后面的这串数字即可，（注意去掉引号）\n\n\n\n\n## 知识库\n\ncoze主页点击上方知识库标签，并点击右上角的创建知识库。\n\n\n\n在弹出的信息框中选择，文本格式，然后导入类型可以按照你的需求选择，这里的选择只是决定你的初始数据导入方式，后面我们可以任选别的方式来更新、修改这个知识库内容。\n\n\n\n例如，我选择在线数据导入，然后方式选择自动采集\n\n\n\n然后选择`批量添加`URL，这里直接粘贴你的网站URL跟地址、或者像我这样导入站点地图的地址即可。\n\n\n\n然后选择确认，系统将自动采集导入你的内容。\n\n后续你还可以使用上传本地文档、导入Notion文档、自定义导入（直接输入文本知识）等方式不断完善这个知识库。\n\n\n\n\n## 最后\n\n知识库配置好，记得回到个人空间下，找到你的机器人，点击他进入机器人配置页面。\n\n\n\n在知识这一栏目，添加你刚才配置的知识库\n\n\n\n关联知识库后，点击右上角的发布，从而然你的最新配置生效。\n\n\n\n就到这里了，尝试一下和你的机器人聊天吧，只要是你知识库内相关的内容，它都能给出更精准的回复。\n\n\n## 附\n\n如果有任何疑问欢迎留言询问。\n\n如果需要让AI直接对接到微信公众号，可以参考此文开通：\n\n[扣子 - 文档中心](https://www.coze.cn/docs/guides/wechat_subscription)\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-coze\n","docs/user-guide/plugins/notion-next-salesmatly-pulgin.md":"# SaleSmartly聊天插件\n> 迁移自：[SaleSmartly聊天插件](https://docs.tangly1024.com/article/notion-next-salesmatly-pulgin)\n> 发布日期：2024-5-10\n> 最后编辑：2024-9-21\n> 原栏目：🧷 外部扩展\n> 标签：NotionNext、插件、聊天\n> 摘要：NotionNext配置Salesmatly插件\n\n由于Facebook聊天插件停运，目前可以选择用SaleSmartly插件作为对话工具\n\n\n## 效果预览\n\n网页右下角的聊天图标，点击后可以与站长进行聊天通讯。\n\n\n\n\nSaleSmartly的免费版上线是一千个会话，即超过一千位客户咨询后，就不再收到新的消息，需要升级套餐后才可使用。\n\n\n## 安装方式\n\n1. 登录[SaleSmartly](https://share.salesmartly.com/gsuvhl)后台获取安装代码\n\n1. 配置在NotionNext中。\n\n安装代码获取方式：\n\n\n### 1.登录并配置SaleSmart\n\n访问SaleSmartly主页 注册登录。\n\n[你是否经常为了管理独立站的客户而烦恼？你是否想要提高你的销售转化率和客户满意度？你是否想要利用社交媒体的力量来扩大你的市场？ 如果你的答案是肯定的，那么我强烈推荐你使用SaleSmartly，它会让你的独立站事业更加成功，让你的客户更加满意： -聚合在线聊天（livechat）、WhatsApp、Facebook Messenger、Instagram、Telegram、Line、Email、Wechat -AI机器人自动回复常见问题 -营销自动化发送个性化消息 -客服自动分配会话等 还有免费试用版，有需要的可以了解一下这款全渠道客户聊天工具](https://share.salesmartly.com/gsuvhl)\n\n选择介入网页聊天插件\n\n\n\n点击新人指引教程，选择添加聊天插件到您的网站，并点击配置插件\n\n\n\n在这里可以配置你的聊天插件的名称以及一些预设消息\n\n\n\n为了插件能正常聊天，这里需要实名认证\n\n\n\n\n### 2. 获取安装代码\n\n然后点击复制安装代码\n\n\n\n代码会自动复制到您的剪贴板中，格式如下\n\n```HTML\n<script src=\"**https://assets.salesmartly.com/js/xxxxxxx.js**\"></script>\n```\n\n将红色的链接部分配置到Notion_CONFIG中，添加一个CUSTOM_EXTERNAL_JS配置，配置结果如下：\n\n\n\n直接我的这行配置到notion中，再将url改成你的即可：\n\n::: tip 提示\n这里**配置值**是需要用中括号加英文双引号拼起来[””]，它代表一串配置数组，支持多个用英文逗号隔开。例如[\"https://1.js\",\"https://2.js\",\"https://3.js\"]\n\n直接在Notion中手动输入这项配置时，Notion会自动将英文的双引号转成中文，导致软件报错，因此建议复制我这里写好的格式，再将url替换成您自己的。\n:::\n\n\n~~旧版配置方法（废弃）~~
\n\n将上述脚本中的链接部分（下划线加粗标红部分）复制出来在浏览器中打开，可以看到一段代码\n\n全选并复制这里的代码内容\n\n打开Notion模板中的的配置中心，将配置粘贴到 GLOBAL_JS 配置项即可。\n\n\n \n\n\n## 附\n\n在Salesmart后台主页，可以选择使用不同的终端用于接收回复消息，例如绑定小程序后，您可以在小程序中，接收或回复用户的消息。\n\n\n\n\n## 其它聊天插件选择\n\n你可以任意查找网上的其它插件进行安装，例如参考文档中的[TIDIO插件安装](/user-guide/plugins/notion-next-tidio)或者使用[Chatway聊天插件](https://go.chatway.app/)，他们与SaleSmartly的安装方式基本一致。例如Chatway插件配置也是添加一个脚本地址即可，示例如下：\n\n\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-salesmatly-pulgin\n","docs/user-guide/plugins/notion-next-tidio.md":"# TIDIO聊天插件\n> 迁移自：[TIDIO聊天插件](https://docs.tangly1024.com/article/notion-next-tidio)\n> 发布日期：2024-9-21\n> 最后编辑：2024-9-21\n> 原栏目：🧷 外部扩展\n\n## 效果\n\n网页右下角会悬挂一个聊天按钮，用户可以直接发送消息对话，你可以在你的TIDIO客户端收到消息并进行回复，和SaleSmartly的功能基本一直，可以选择安装任意一种。\n\n\n\nSaleSmartly的免费版上限是每月50个会话，超出后需要升级套餐后才可使用。\n\n\n## 安装方法\n\n和SaleSmartly安装方式几乎一致。\n\n1. 登录TIDIO后台\n[Accelerate Your Growth With #1 AI Customer Service | Tidio](https://www.tidio.com/)\n\nConvert more leads, provide stellar support, and boost your revenue with Tidio’s game-changing AI-driven customer service solution.\n\n1. 按照引导获取你的手动安装代码\n首次注册后，TIDIO会自动引导你获取安装代码，这是安装代码格式：\n```JavaScript\n<script src=\"**//code.tidio.co/xxxxxx.js**\" async></script>\n```\n如果你已经配置好，可以在设置→ Installation → Manual install 中找到你的安装代码\n\n\n\n## 配置\n\n将上述安装代码中的URL部分复制出来，即这段：**//code.tidio.co/xxxxxx.js**\n\n配置到NotionNext中,添加一个配置 CUSTOM_EXTERNAL_JS，参考如下\n\n\n\n可以直接复制我的这个配置，并将URL替换成你的。\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-tidio\n","docs/user-guide/plugins/notion-next-plugin-live2d.md":"# Live2D宠物插件\n> 迁移自：[Live2D宠物插件](https://docs.tangly1024.com/article/notion-next-plugin-live2d)\n> 发布日期：2023-6-30\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n## 介绍\n\n《Live2D》是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用，缺点是Live 2D人物无法大幅度转身，开发商正设法让该技术可显示360度图像。\n\n开启Live2D宠物挂件后，你的页面的角落会出现这样一只可爱宠物，并且它会跟随着你的鼠标位置动起来。\n\n\n\n\n## 开启配置\n\n目前所有主题都支持宠物挂件。\n\n开启方式，源文件在[blog.config.js](https://github.com/notionnext-org/NotionNext/blob/8103e23aac7219789c77e412a1bc24dd2a2683b5/blog.config.js#L152C2-L158C1)中，默认是开状态\n\n```JavaScript\n// 悬浮挂件\n WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件\n WIDGET_PET_LINK:\n process.env.NEXT_PUBLIC_WIDGET_PET_LINK ||\n 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models\n WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题\n```\n\n您也可以直接通过设置环境变量`NEXT_PUBLIC_WIDGET_PET ` 的方式来控制开关\n\n\n## 切换模型\n\n`WIDGET_PET_LINK` 这个参数制定的是动画模型的加载地址，目前默认使用的是茶杯狗。\n\n::: tip 提示\n由于每个动画模型的高度不同，可能需要您在[代码中](https://github.com/notionnext-org/NotionNext/blob/8103e23aac7219789c77e412a1bc24dd2a2683b5/components/Live2D.js#L38)修改模型的高度height，否则会很怪异。\n\n```HTML\n<canvas id=\"live2d\" className='cursor-pointer' width=\"280\" **height=\"250\"** onClick={handleClick} alt='切换主题' title='切换主题' />\n```\n:::\n\n\n## 模型预览\n\n例如您想使用 `live2d-widget-model-chitose` 这个模型，则可以将`WIDGET_PET_LINK `的值设置为\n\n```Bash\nhttps://cdn.jsdelivr.net/npm/**live2d-widget-model-chitose**/assets/**chitose.model.json**\n```\n\n1. 黑猫\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-hijiki/assets/hijiki.model.json\n```\n\n\n1. 白猫\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-tororo/assets/tororo.model.json\n```\n\n\n1. chitose\n```Bash\nhttps://cdn.jsdelivr.net/npm/**live2d-widget-model-chitose**/assets/**chitose.model.json**\n```\n\n\n1. epsilon\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-epsilon2_1/assets/Epsilon2.1.model.json\n```\n\n\n1. gf\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-gf/assets/Gantzert_Felixander.model.json\n```\n\n\n1. haru\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-haru/01/assets/haru01.model.json\n```\n\n\n1. haru2\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-haru/02/assets/haru02.model.json\n```\n\n\n1. はると（haruto-遥人）\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-haruto/assets/haruto.model.json\n```\n\n\n1. hibiki\n高度需要调整为 `900`\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-hibiki/assets/hibiki.model.json\n```\n\n\n1. izumi\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-izumi/assets/izumi.model.json\n```\n\n\n1. koharu\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-koharu/assets/koharu.model.json\n```\n\n\n1. ni-j\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-ni-j/assets/ni-j.model.json\n```\n\n\n1. miku\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-miku/assets/miku.model.json\n```\n\n\n1. nico\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nico/assets/nico.model.json\n```\n\n\n1. nietzche\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nietzsche/assets/nietzche.model.json\n```\n\n\n1. nipsilon\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nipsilon/assets/nipsilon.model.json\n```\n\n\n1. nito\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nito/assets/nito.model.json\n```\n\n\n1. shizukui\n建议高度500\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-shizuku/assets/shizuku.model.json\n```\n\n\n1. tsumiki\n建议高度500\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-tsumiki/assets/tsumiki.model.json\n```\n\n\n1. unitychan\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-unitychan/assets/unitychan.model.json\n```\n\n\n1. 茶杯狗\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-wanko/assets/wanko.model.json\n```\n\n\n1. z16\n建议高度500\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-z16/assets/z16.model.json\n```\n\n\n\n## 更多模型预览\n\n访问以下链接，在线预览102个模型，需要全程科学访问。\n这些模型暂时没有cdn、用的github仓库链接，可能影响加载速度和国内访问，如果更好的cdn链接，欢迎提供分享。\n\n[Live2d Cubism 2](https://imuncle.github.io/live2d/)\n\n\n### 部分模型截图\n\n1. bilibili-22娘\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/22/model.default.json\n```\n\n\n1. bilibili-22娘长高版本\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/22_high/model.json\n```\n\n\n1. bilibili-33娘\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/33/model.default.json\n```\n\n\n1. bilibili-33娘长高版本\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/33_high/model.default.json\n```\n\n\n1. 布洛妮娅\n```Bash\nmodel/bronya/model.json\n```\n\n\n1. 布洛妮娅2\n```Bash\nmodel/bronya_1/model.json\n```\n\n\n1. はる（haru-春）\n```Bash\nmodel/haru/haru_01.model.json\n```\n\n\n1. 茵蒂克丝(index)\n```Bash\nmodel/index/model.json\n```\n\n\n1. izumi\n```Bash\nmodel/izumi/izumi.model.json\n```\n\n\n1. katou\n```Bash\nmodel/katou_01/katou_01.model.json\n```\n\n 1. liang\n```Bash\nmodel/liang/2.json\n```\n\n\n15. miku\n\n```Bash\nmodel/miku/miku.model.json\n```\n\n\n1. 小埋 murakumo\n```Bash\nmodel/miku/miku.model.json\n```\n\n\n1. 茶杯狗\n```Bash\nmodel/wanko/wanko.model.json\n```\n\n\n1. shizuku\n```Bash\nmodel/shizuku/shizuku.model.json\n```\n\n 1. pio\n```Bash\nmodel/Pio/model.json\n```\n\n 1. 血小板\n```Bash\nmodel/platelet/model.json\n```\n\n 1. 血小板 迷你\n```Bash\nmodel/platelet-2/model.json\n```\n\n 1. 蕾姆\n```Bash\nmodel/rem/model.json\n```\n\n 1. Tia\n```Bash\nmodel/Tia/index.json\n```\n\n 1. penchan\n```Bash\nmodel/penchan/penchan.model.json\n```\n\n 1. dollsfrontline\n```Bash\nmodel/dollsfrontline/95type_405/normal/model.json\n```\n\n 1. dollsfrontline-armor\n```Bash\nmodel/dollsfrontline/armor/model1.json\n```\n\n 1. dollsfromtline-command\n```Bash\nmodel/dollsfrontline/command/model1.json\n```\n\n 1. 当麻\n```Bash\nmodel/touma/touma.model.json\n```\n\n\n\n## 最后\n\n以上使用的是Cubism2版本的动画模型，您还可以体验一下以下Cubism3版本的动画模型。\n\n高版本的模型支持更丰富更细节的动画，结合AI对话接口，有很大的开发空间。这里有点超纲，仅供预览，暂时不做支持，在线预览网址：\n\n[Live2d Cubism 3](https://imuncle.github.io/live2d/live2d_3/)\n\n\n\n\n## 参考\n\n[https://github.com/imuncle/live2d](https://github.com/imuncle/live2d)\n\n[live2d-widget-models/packages at master · xiazeyu/live2d-widget-models](https://github.com/xiazeyu/live2d-widget-models/tree/master/packages)\n\nThe model library for live2d-widget.js. Contribute to xiazeyu/live2d-widget-models development by creating an account on GitHub.\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-plugin-live2d\n","docs/user-guide/plugins/notion-next-docs-chat.md":"# Gemini AI 助手\n\nNotionNext 已内置一个轻量 AI 助手入口，可以把你的博客接到自己的 Gemini 免费额度。核心原则只有一个：`GOOGLE_GENERATIVE_AI_API_KEY` 只能放在服务端代理里，不能写进前端代码、Notion 配置表或 `NEXT_PUBLIC_*` 环境变量。\n\n## 适用场景\n\n- 想在博客右下角放一个 AI 助手。\n- 想让助手回答站点部署、主题配置、文章内容或常见问题。\n- 想复用 NotionNext 文档站同款 Gemini + Cloudflare Pages Function 方案。\n\n如果你已经在用 Coze、Dify、Chatbase，也可以继续用它们；这个方案更适合想自己控制模型 Key 和系统提示词的站点。\n\n## 部署代理\n\n在 Cloudflare Pages 项目中添加 Function，例如 `functions/api/docs-chat.ts`。NotionNext 官方文档站已经使用这个文件作为参考实现，它会在服务端读取 Gemini Key，并向前端暴露一个安全的聊天 API。\n\nCloudflare Pages 环境变量：\n\n```bash\nGOOGLE_GENERATIVE_AI_API_KEY=你的 Gemini API Key\nDOCS_CHAT_MODEL=gemini-flash-lite-latest\nDOCS_CHAT_CORS_ORIGINS=https://你的博客域名\nDOCS_CHAT_MAX_TOKENS=1200\n```\n\n`DOCS_CHAT_CORS_ORIGINS` 可以填写多个域名，用英文逗号分隔：\n\n```bash\nDOCS_CHAT_CORS_ORIGINS=https://blog.example.com,https://docs.example.com\n```\n\n本地或临时调试时可以先用 `*`，正式站点建议改成自己的域名。\n\n## 接入博客\n\n在博客站点的部署平台中添加：\n\n```bash\nNEXT_PUBLIC_DOCS_CHAT_API=https://你的文档站域名/api/docs-chat\nNEXT_PUBLIC_DOCS_CHAT_TITLE=AI 助手\nNEXT_PUBLIC_DOCS_CHAT_WELCOME=你好，我是本站 AI 助手。你可以问我文章、主题和部署问题。\n```\n\n重新部署后，页面右下角会出现 AI 助手按钮。\n\n也可以在 Notion 配置表中添加同名配置：\n\n| 配置 | 说明 |\n| ------------------- | ----------------------------------------------------------------- |\n| `DOCS_CHAT_API` | 聊天代理地址，例如 `https://notionnext.example.com/api/docs-chat` |\n| `DOCS_CHAT_TITLE` | 右下角按钮和窗口标题 |\n| `DOCS_CHAT_WELCOME` | 打开窗口后的第一句欢迎语 |\n\n## 让 AI 更懂你的网站\n\n最小可用版本只需要改服务端代理里的系统提示词。可以把这些信息写进去：\n\n- 你的站点定位和读者人群。\n- 常见入口，例如 `/about`、`/links`、`/archive`。\n- 希望 AI 优先回答的主题。\n- 不希望 AI 回答的范围。\n\n不要把用户私密信息、后台地址、密钥或未公开资料写进提示词。\n\n## 常见问题\n\n### 为什么不用 `NEXT_PUBLIC_GOOGLE_GENERATIVE_AI_API_KEY`？\n\n`NEXT_PUBLIC_*` 会被打包到浏览器里，任何访问者都能看到。Gemini Key 必须只放在 Cloudflare Pages、Vercel Function 或你自己的后端服务里。\n\n### 能不能直接复用 NotionNext 官方文档站的接口？\n\n不建议。官方接口的额度、提示词和跨域策略会按文档站维护。自己的博客应当部署自己的代理，并用自己的 Gemini 免费额度。\n\n### 和 Coze 方案怎么选？\n\n想最快搭建并使用 Coze 知识库，选 [Coze AI 聊天机器人](./notion-next-coze.md)。想自己控制 Gemini Key、模型和提示词，选这个方案。\n","docs/user-guide/plugins/notion-next-facebook-chat-plugn.md":"# Facebook聊天插件[已失效]\n> 迁移自：[Facebook聊天插件[已失效]](https://docs.tangly1024.com/article/notion-next-facebook-chat-plugn)\n> 发布日期：2023-8-4\n> 最后编辑：2024-9-21\n> 原栏目：🧷 外部扩展\n\n## 通知\n\n::: tip 提示\nFacebook 官方宣布：从 2024 年 5 月 9 日起，聊天插件将不再可用。\n\n可以选择使用[SaleSmartly 插件](/user-guide/plugins/notion-next-salesmatly-pulgin)作为页面聊天客服。\n:::\n\n\n## 文档\n\n以下是旧文档\n\n::: tip 提示\n最后更新域于0230906， 修改了原文档中第四点，获取PAGE_ID的方式；用原先方法获取的PAGE_ID，将导致聊天插件加载失败。\n:::\n\n::: tip 提示\nFaceBook 官方提供的聊天插件，可以方便您与访客实时聊天。\n:::\n\n> 全程大约10分钟，即可获得你的facebook插件。\n\n\n## 使用效果\n\n网页`右下角`弹出一个聊天框，用户可以与站长聊天，可以选择访客匿名、或登录Facebook的Messenger。\n\n\n\n\n站长在pc端的后台，或者app上都可以事实查看消息\n\n\n\n\n\n## 配置方式\n\n在NotionNext后台添加两个环境变量即可开启FBChat插件 ， 对应配置文件路径 [blog.config.js](https://github.com/notionnext-org/NotionNext/blob/70cc96d8f16e71abc8a21e777c4b984680ab5a4b/blog.config.js#L99-L100) 。\n\n这两个参数如何获得，请阅读下方的注册方法部分。\n\n\n## 开通方法\n\n注册并登录您的facebook账号\n\n[https://www.facebook.com/login/](https://www.facebook.com/login/)\n\n\n### 一、开通你的公共主页\n\nfacebook上创建一个公共主页很简单，按照步骤创建好主页后，即可获得你的`PAGE-ID`\n\n1. 点击页面左侧的公共主页\n\n\n1. 点击新建公共主页\n\n\n1. 填写资料完成注册\n填写完成后，会引导你完成一些基础的主页配置，自行选择配置即可。\n\n\n1. 如何获取`PAGE_ID`\n - 原先获取PAGE_ID的方式是错误的：\n~~完成后，按照提示返回主页。在你的公共主页地址栏URL中可以看到你的 ~~`~~PAGE_ID~~`~~；例如此处我的PAGE_ID 就是 ~~~~`100095411623547`~~\n\n错误截图
\n\n\n\n \n正确方式，在公共主页左侧点击`设置` → 点击`品牌内容`\n\n\n点击品牌内容后跳转的页面中就包含了页面ID PAGE_ID 参数，此处我的PAGE_ID是`100411122875215`\n\n\n1. 配置白名单\n为了让您的网站允许使用该公共主页的messenger功能，需要如下配置：\n点击右上角头像 → 设置与隐私 → 设置 ； 来到你的设置中心\n\n\n设置中心左侧点击新版公共主页体验\n\n在新版公共主页体验中，点击高级消息功能，并输入您的站点域名，点击添加即可。\n\n\n\n### 二、开通开发者权限\n\n完成此步骤，你就能获得自己的专属应用id，用此id可以调用facebook的功能\n\n1. 点击下方链接，申请开发者\n[https://developers.facebook.com/async/registration](https://developers.facebook.com/async/registration)\n\n1. 点击继续\n并按照要求验证手机号和邮箱\n\n\n1. 最后一步，完成注册\n这里选择你的属性，可以任选，不影响后续操作\n\n\n1. 创建一个应用\n注册完成自动会来到此开发者首页，您以后也可以随时访问 [https://developers.facebook.com/apps/](https://developers.facebook.com/apps/) 来查看您的应用。\n点击创建\n\n\n1. 配置应用\n选择facebook，点击继续\n\n填写完应用名字，直接点击创建应用即可。\n\n\n1. 获取`APP_ID`\n在应用首页即可看到\n\n\n\n## 完成\n\n至此，你已经获取到了`APP_ID`和`PAGE_ID`。\n\n在NotionNext后台添加两个环境变量即可开启FBChat插件 ， 对应配置文件路径 [blog.config.js](https://github.com/notionnext-org/NotionNext/blob/70cc96d8f16e71abc8a21e777c4b984680ab5a4b/blog.config.js#L99-L100) 。\n\n\n## 关于Facebook后台设置\n\n您可以在facebook后台设置这个聊天插件的预设回复，营业时间等等属性，这里不做赘述。\n\n配置入口：在您的facebook公共主页的设置菜单中，点击 [Meta Business Suite](https://business.facebook.com/) （商务套件）。\n\n\n\n\n### 商务后台页面\n\n除了上面的入口，你也可以直接访问右边链接 [https://business.facebook.com/](https://business.facebook.com/)\n\n后台可以查看所有和你聊天的信息，右上角可以配置对应的自动回复等功能，和微信公众号类似。\n\n\n\n同时，后台也支持您自定义插件的样式、位置、以及自动回复的内容~\n\n\n\n\n### 客户端\n\n这个功能使用的是Facebook的Messenger聊天工具，你可以下载一个Facebook、或者Messenger、或者和我一样下载一个 Business Suite (facebook的运营全家桶)。\n\n\n\n\n## 参考\n\n- 官方介绍\n[https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin](https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin)\n\n- React插件代码\n[https://github.com/Yoctol/react-messenger-customer-chat](https://github.com/Yoctol/react-messenger-customer-chat)\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-facebook-chat-plugn\n","docs/user-guide/plugins/notion-next-google-adsense.md":"# Google广告营收插件\n> 迁移自：[Google广告营收插件](https://docs.tangly1024.com/article/notion-next-google-adsense)\n> 发布日期：2023-8-7\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n::: tip 提示\n通过网站上对接谷歌广告接口，可以让您的网站通过广告获取一笔美金收入。\n:::\n\n\n## 开通验证\n\n谷歌广告的配置开通有很多限制\n\n1. 申请开通谷歌[Adsense](https://www.google.com/adsense/)账号\n\n1. 验证站点所有权（必须）:请按照GoogleAdsense 后台的要求验证你的站点所有权\n比较推荐的做法是，把GoogleAdsense后台提供的 `ads.txt` 文件上传到您代码的 `public` 目录下。public目录专门用来放置网站的静态文件。例如您可以访问我的博客的ads验证文件 [https://blog.tangly1024.com/ads.txt](https://blog.tangly1024.com/ads.txt)\n\n\n## 配置方式\n\n1. 获取谷歌账号的 PUB_ID 填写到[站点配置](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/blog.config.js#L331)\n\n\n1. 在谷歌后台创建四种类型的广告单元，获取广告单元的ID\n\n\n1. 在[代码中配置](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/blog.config.js#L333-L336)广告单元ID\n\n\n\n### 旧版配置广告单元\n\n需要改动代码，而且不能嵌入到文章的指定段落。\n\n1. 在你需要引入特定自定义广告的地方添加组件代码 <AdSlot /> 即可 相关[AdSlot源码](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/components/GoogleAdsense.js#L51-L95)\n\n\n1. 相关使用案例 , [Simple主题首页](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/themes/simple/index.js#L74)加入了一个原生广告单元\n\n\n\n## 广告插件新版用法\n\n在 **4.4.0 **的版本后，支持您在notion中插入 **<ins/>** 这个代码，它将自动在网页中变成广告单元，哪里想变放哪里。\n\n文章内容支持嵌入广告：\n在想要变成广告的位置输入一行text元素，内容是\n\n```Plain Text\n<ins/>\n```\n\n即可替换成广告。如下图是我在notion中插入的文字<ins/>：\n\n\n\n在博客中广告会直接显示在文章中间的位置：\n\n\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-google-adsense\n","docs/user-guide/plugins/overview.md":"# Plugins Skill\n\nPath: `docs/user-guide/plugins/overview.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/overview.md)"},"items":[{"name":"index.md","path":"docs/user-guide/plugins/index.md","rawUrl":"https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/index.md","title":"Plugins Skill","category":"anthropic-skill","format":"markdown","content":"---\nredirect: /user-guide/plugins/overview\n---\n","frontmatter":{"redirect":"/user-guide/plugins/overview"},"isInternal":false,"tokens":11,"sizeBytes":47},{"name":"mailchimp.md","path":"docs/user-guide/plugins/mailchimp.md","rawUrl":"https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/mailchimp.md","title":"Plugins Skill","category":"anthropic-skill","format":"markdown","content":"# Mailchimp邮件订阅\n> 迁移自：[Mailchimp邮件订阅](https://docs.tangly1024.com/article/notion-next-mailchimp)\n> 发布日期：2023-7-4\n> 最后编辑：2024-9-12\n> 原栏目：🔊 运营教程\n\n::: tip 提示\n此功能主要针对国外用户的使用习惯开发。国内推荐使用公众号导流方案。\n:::\n\n\n## 序\n\nNotionNext 后续版本将陆续支持Newsletter功能，目前基于Mailchimp邮件订阅，可以轻松实现您与读者建立紧密的链接。\n\n按照本操作步骤，将为您创建一个Mailchimp的api-key以及对应的邮件列表id，便于您通过接口，对接自己的页面表单。\n\n::: tip 提示\n目前只有landing主题上支持了 Mailchimp的ui组件，后续将在其它主题中 也加入对应的UI组件。\n预览体验：访问[NotionNext主页](/user-guide/intro)，在底部的邮件订阅处填写您的邮箱体验。\n:::\n\n\n### 什么是Mailchimp\n\nMailChimp是目前最通用且易于使用的 电子邮件营销服务.\n\nMailChimp 为您提供一个免费帐户，最多可拥有 2000 个电子邮件订阅者，每月发送 12000 封电子邮件，在给定的 2000 小时内限制为 24 封电子邮件。 这个限制对于任何初学者以及中级博主和营销人员来说都非常好。\n\n\n## 操作步骤\n\n你可以按照以下步骤在 Mailchimp 中找到你的邮件列表 ID 和 API KEY：\n\n1. 登录你的 Mailchimp 账户，点击右上角的用户名，然后选择 \"Account\" 进入账户设置页面。\n\n1. 在账户设置页面中，点击 \"Extras\" 选项卡，然后选择 \"API keys\"。\n\n\n1. 在 API keys 页面中，可以看到你现有的 API KEY 列表。如果没有 API KEY，请点击 \"Create A Key\" 按钮创建一个新的 API KEY。\n\n\n\n1. 复制你的 API KEY，并妥善保管。\n\n1. 点击 \"Audience\" 选项卡，然后选择你要用来存储用户邮件地址的列表。\n\n\n1. 在该列表的设置页面中，可以看到该列表的唯一 ID。复制该 ID。\n\n\n\n## 最后\n\n现在你已经找到了你的 Mailchimp 邮件列表 ID 和 API KEY。将它们替换到你的代码中即可开始使用 Mailchimp API 来收集用户邮件地址了。\n\n只需要在Vercel环境变量中添加两项配置，就可以实现网站的邮件订阅功能\n\n新订阅请求需要邮箱持有人通过 Mailchimp 确认邮件完成订阅。页面显示“Subscription request received…”表示请求已经处理；为保护邮箱隐私，重复提交也会显示相同提示，不会自动恢复已退订成员。未收到确认邮件时，请检查垃圾邮件目录，或通过站点所有者提供的 Mailchimp 订阅表单重新订阅。\n\n新订阅从原来的直接 `subscribed` 改为等待确认的 `pending`。升级后，请提醒读者完成确认邮件，并在 Mailchimp 后台确认订阅状态；页面接收成功提示不等于已加入正式收件名单。\n\nMailchimp 对永久删除等少数地址状态可能拒绝请求，此时页面仍会显示失败。新请求与 `Member Exists` 使用相同提示，但其他上游 400 仍返回 HTTP 400，不能据此认为所有邮箱状态都已隐藏。详细返回规则见 [Mailchimp 邮件订阅接口](../../developer/MAILCHIMP_SUBSCRIBE.zh-CN.md)。\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-mailchimp\n","isInternal":false,"tokens":1158,"sizeBytes":3492},{"name":"music-player.md","path":"docs/user-guide/plugins/music-player.md","rawUrl":"https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/music-player.md","title":"Plugins Skill","category":"anthropic-skill","format":"markdown","content":"# 音乐播放器\n> 迁移自：[音乐播放器](https://docs.tangly1024.com/article/notion-next-plugin-music-player)\n> 发布日期：2023-8-4\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n## 开启方式\n\n后台添加环境变量 `NEXT_PUBLIC_MUSIC_PLAYER` 值为 `true`，即可打开音乐播放器功能。\n\n更多关于播放器配置说明，可以参考APlayer官网\n\n[APlayer](https://aplayer.js.org/)\n\n```JavaScript\n// 音乐播放插件\n MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件\n MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换，如果使用播放器，打开自动播放再隐藏，就会以类似背景音乐的方式播放，无法取消和暂停\n MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过自动播放时常不生效（移动设备不支持自动播放）\n MUSIC_PLAYER_SHOW_LRC: process.env.NEXT_PUBLIC_MUSIC_PLAYER_SHOW_LRC || false, // 是否展示歌词（前提是有配置歌词路径，对 meting 无效）\n 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',\n MUSIC_PLAYER_ORDER: 'list', // 默认播放方式，顺序 list，随机 random\n MUSIC_PLAYER_AUDIO_LIST: [ // 示例音乐列表。除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/\n {\n name: '风を共に舞う気持ち',\n artist: 'Falcom Sound Team jdk',\n url: 'https://music.163.com/song/media/outer/url?id=731419.mp3',\n cover: 'https://p2.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'\n },\n {\n name: '王都グランセル',\n artist: 'Falcom Sound Team jdk',\n url: 'https://music.163.com/song/media/outer/url?id=731355.mp3',\n cover: 'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'\n }\n ],\n MUSIC_PLAYER_METING: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING || false, // 是否要开启 MetingJS，从平台获取歌单。会覆盖自定义的 MUSIC_PLAYER_AUDIO_LIST，更多配置信息：https://github.com/metowolf/MetingJS\n MUSIC_PLAYER_METING_SERVER: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER || 'netease', // 音乐平台，[netease, tencent, kugou, xiami, baidu]\n MUSIC_PLAYER_METING_ID: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_ID || '60198', // 对应歌单的 id\n 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）\n```\n\n> 待完善\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-plugin-music-player\n","isInternal":false,"tokens":918,"sizeBytes":2834},{"name":"notion-next-ai-chat.md","path":"docs/user-guide/plugins/notion-next-ai-chat.md","rawUrl":"https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/notion-next-ai-chat.md","title":"Plugins Skill","category":"anthropic-skill","format":"markdown","content":"# OpenAI 兼容 AI 助手\n\nNotionNext 内置了一个轻量 AI 聊天入口，可以接入 DeepSeek 或其它兼容 OpenAI `chat/completions` 格式的模型服务。页面前端只负责显示聊天窗口，真正的模型请求必须走服务端代理。\n\n## 为什么这样设计\n\nDeepSeek 提供的是模型 API，不是 Chatbase、Coze 那种完整网页浮窗 SDK。API Key 不能写进 `NEXT_PUBLIC_*`、Notion 配置表或前端代码，否则访问者可以在浏览器里看到密钥。\n\n因此推荐架构是：\n\n1. 站点前端配置 `NEXT_PUBLIC_AI_CHAT_API`，显示右下角 AI 助手。\n2. 服务端代理 `/api/ai-chat` 读取 `AI_CHAT_API_KEY`。\n3. 代理转发到 DeepSeek 或其它 OpenAI 兼容接口。\n\n## 前端配置\n\n在 Vercel、Cloudflare Pages、Netlify 或服务器环境变量中添加：\n\n```bash\nNEXT_PUBLIC_AI_CHAT_API=https://你的域名/api/ai-chat\nNEXT_PUBLIC_AI_CHAT_TITLE=AI 助手\nNEXT_PUBLIC_AI_CHAT_WELCOME=你好，我是本站 AI 助手。你可以问我文章、主题和部署问题。\n```\n\n也可以在 Notion 配置表中添加同名配置：\n\n| 配置 | 说明 |\n| ----------------- | --------------------------------------------------------- |\n| `AI_CHAT_API` | 聊天代理地址，例如 `https://blog.example.com/api/ai-chat` |\n| `AI_CHAT_TITLE` | 右下角按钮和窗口标题 |\n| `AI_CHAT_WELCOME` | 打开窗口后的第一句欢迎语 |\n\n## DeepSeek 代理配置\n\n如果你使用 Cloudflare Pages Functions，可以直接使用仓库内置的 `functions/api/ai-chat.ts`。在部署平台的服务端环境变量中添加：\n\n```bash\nAI_CHAT_API_KEY=你的 DeepSeek API Key\nAI_CHAT_BASE_URL=https://api.deepseek.com\nAI_CHAT_MODEL=deepseek-v4-flash\nAI_CHAT_CORS_ORIGINS=https://你的博客域名\nAI_CHAT_MAX_TOKENS=1200\nAI_CHAT_TEMPERATURE=0.3\n```\n\n`AI_CHAT_CORS_ORIGINS` 可以填写多个域名，用英文逗号分隔：\n\n```bash\nAI_CHAT_CORS_ORIGINS=https://blog.example.com,https://docs.example.com\n```\n\n本地或临时调试可以先写 `*`，正式站点建议改成自己的域名。\n\n## 使用其它 OpenAI 兼容服务\n\n只要服务支持 `POST /chat/completions`，通常只需要替换：\n\n```bash\nAI_CHAT_BASE_URL=https://你的服务商 base url\nAI_CHAT_MODEL=你的模型名\nAI_CHAT_API_KEY=你的服务端密钥\n```\n\n不要改前端组件，也不要把密钥写进 Notion。\n\n## 自定义回答范围\n\n可以用服务端变量设置系统提示词：\n\n```bash\nAI_CHAT_SYSTEM_PROMPT=你是本站 AI 助手，只回答本站文章、主题、配置和部署相关问题。回答要简洁，不确定时说明限制。\n```\n\n建议写入：\n\n- 站点定位和读者人群\n- 重点栏目或文章入口\n- 不希望 AI 回答的范围\n- 需要优先提示的部署、配置或联系信息\n\n不要写入后台地址、私密页面、未公开资料或任何密钥。\n\n## 和 Coze、Chatbase、Dify 怎么选\n\n| 方案 | 适合场景 |\n| ------------------- | ---------------------------------------------------- |\n| OpenAI 兼容 AI 助手 | 想自己控制模型、Key、系统提示词，或直接使用 DeepSeek |\n| Coze | 想使用可视化工作流、插件和平台知识库 |\n| Chatbase | 想用第三方平台自动抓取网站内容并生成聊天机器人 |\n| Dify | 已经自建 Dify 应用，希望直接嵌入 Dify 聊天窗口 |\n\nDeepSeek API 本身不会自动读取你的 Notion 数据库或站点文章。如果需要“基于全站文章回答”，后续还需要单独维护知识库或 RAG 流程。\n","isInternal":false,"tokens":1158,"sizeBytes":3760},{"name":"notion-next-chat-base.md","path":"docs/user-guide/plugins/notion-next-chat-base.md","rawUrl":"https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/notion-next-chat-base.md","title":"Plugins Skill","category":"anthropic-skill","format":"markdown","content":"# AI聊天机器人-ChatBase\n> 迁移自：[AI聊天机器人-ChatBase](https://docs.tangly1024.com/article/notion-next-chat-base)\n> 发布日期：2023-7-18\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n## 啥是ChatBase\n\nChatbase.co 是**一款为网站构建自定义ChatGPT 界面的工具**，用户只需上传文档或添加到网站的链接，就可以获得一个类似ChatGPT 的聊天机器人，并将它作为小组件添加到网站上。\n\n网页右下角会出现一个对话框，您可以通过他搜索网页中的所有知识点。\n\n\n\n2024.4.29最新版本；配置成功的效果，右下角多出一个聊天按钮\n\n\n\n直接询问对话\n\n\n\n\n## 配置方法\n\n用环境变量或修改代码的方式，在[blog.config.js](https://github.com/notionnext-org/NotionNext/blob/48cb3ee6779c117bcb6b61e5cb89fbd1c541a115/blog.config.js#L156)中添加您的chatbase-id即可。\n\n```YAML\n// ********挂件组件相关********\n// Chatbase\nCHATBASE_ID: process.env.NEXT_PUBLIC_CHATBASE_ID || null, // 是否显示chatbase机器人 https://www.chatbase.co/\n```\n\n另外，有了chatbase-id 您可以直接用内嵌网页的方式，将chatbase放在您的任意notion页面中，网页地址\n\n```HTML\nhttps://www.chatbase.co/chatbot-iframe/${BLOG.CHATBASE_ID}\n```\n\n\n## 获取ChatBase-id方法\n\n\n### 1. 注册登录ChatBase\n\n[Chatbase | ChatGPT for your website](https://www.chatbase.co/)\n\nBuild an AI chatbot from your knowledge base and add it to your website.\n\n\n### 2. 根据引导，配置机器人的数据源\n\n登陆成功后，创建一个新的聊天机器人，点击`New Chatbot`\n\n\n\n这里要选择用什么数据源来训练机器人；默认是上传json文件，在这里我们选择爬取网站内容，点击Website：\n\n\n\n这里使用站点地图的方式提交内容，输入网址后面加上`/sitemap.xml`，如下图，这是NotionNext每个站点默认的地图位置。\n\n\n\n点击Load sitemap加载地图内容，此时平台会自动爬取您网站中的页面地址\n\n\n\n（免费版只能读取10个页面生成机器人数据，这里我们要删除超出10个的多余链接）\n\n我这边示例，只保留了几个重要链接，一个是about介绍页面，一个是archive归档页面，一篇文章；\n\n点击Create Chatbot 训练机器人。\n\n\n\n等待进度条完成。最后可以在面板中看到配置信息\n\n\n\n在setting中可以设置默认欢迎语和用户提问的提示词，这里需要自己折腾一下，不展开叙述了。\n\n\n### 3. 在Embed on Site 中找到id\n\n点击Embed on site，会提示你需要将此机器人公开，\n\n\n\n选择 make public即可\n\n\n\n然后在弹出的确认框中就可以找到你的chatbotId了。\n\n\n\n\n## 配置在NotionNext中\n\n两种方案配置,任选其一：\n\n1. 添加一个环境变量 `NEXT_PUBLIC_CHATBASE_ID`\n\n1. 添加一个NotionConfig: `CHATBASE_ID`\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-chat-base\n","isInternal":false,"tokens":1116,"sizeBytes":3423},{"name":"notion-next-coze.md","path":"docs/user-guide/plugins/notion-next-coze.md","rawUrl":"https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/notion-next-coze.md","title":"Plugins Skill","category":"anthropic-skill","format":"markdown","content":"# AI聊天机器人-Coze\n> 迁移自：[AI聊天机器人-Coze](https://docs.tangly1024.com/article/notion-next-coze)\n> 发布日期：2024-9-20\n> 最后编辑：2024-9-30\n> 原栏目：🧷 外部扩展\n\n## 前言\n\n你可以直接像站点右下角的AI助手提问，它会尽可能地帮你解决问题。本文将介绍如何将Coze的AI机器人接入到NotionNext。\n\n\n\n\n\n### 特点：\n\nCoze支持介入Bing、百度等搜索引擎插件，提问时会自动检索互联网并为你整理答案。\n\nCoze支持将你的文章内容等等来源信息整理为一个知识库，便于在回答问题时检索这个知识库并给出更专业的回答。\n\n\n## NotionNext如何配置Coze\n\n在你的Notion_config中添加两项配置，分别是机器人的称呼和机器人ID即可：\n\n\n\n参考如下：\n\n这里的COZE_TITLE可以任意填写，他只会影响你窗口中AI机器人的标题，例如NotionNext-AI助理：\n\n\n\n这里我们还需要在Coze后台创建自己的机器人，并获得一个`BOT_ID`。\n\n### 常见问题：BOT_ID 后几位变成 0\n\n如果你的 `COZE_BOT_ID` 是很长的数字，不建议填在 Notion_config 的数字类型字段中。过长数字可能超过 JavaScript 安全整数范围，读取后末尾会被改成 `000`。\n\n最简单的做法是用部署环境变量配置，并把值当作字符串保存：\n\n```text\nNEXT_PUBLIC_COZE_BOT_ID=你的 Coze Bot ID\nNEXT_PUBLIC_COZE_TITLE=NotionNext助手\n```\n\n在 Vercel、Netlify、Docker 或服务器环境变量中配置后，重新部署即可。不要把 Coze 的访问令牌、个人 PAT 或长期密钥提交到 Git 仓库；如果 Coze 当前 SDK 要求鉴权，建议先放在服务端或边缘函数中处理。\n\n\n## 如何创建自己的Coze机器人？\n\n注册国内版Coze，主要使用国内的大模型，例如豆包、通义千问等等。\n\n[扣子-AI 智能体开发平台](https://www.coze.cn/home)\n\n扣子是新一代 AI 大模型智能体开发平台。整合了插件、长短期记忆、工作流、卡片等丰富能力，扣子能帮你低门槛、快速搭建个性化或具备商业价值的智能体，并发布到豆包、飞书等各个平台。\n\n或使用国际版，用的是GPT\\Claude\\Gemini等国外大模型。\n\n[Coze: Next-Gen AI Chatbot Developing Platform](https://www.coze.com/)\n\nCoze is a next-generation AI application and chatbot developing platform for everyone. Regardless of your programming experience, Coze enables you to effortlessly create various chatbots and deploy them across different social platforms and messaging apps.\n\n两者操作、配置方式几乎一致，国际版的插件稍微强一些，但对于国内使用体验可能有点门槛，例如网络问题。\n\n下文我用国内版Coze来举例。\n\n\n### 创建机器人\n\n在个人空间，点击右上角创建一个Bot即可\n\n\n\n按需填写你的名称描述和头像。\n\n\n\n\n### 机器人设置页面介绍\n\n从上往下，分别可以设置大语言模型、插件、与知识库。（其它还有很多丰富的设置我们以后再折腾）\n\n\n\n\n#### 关于模型\n\n可以按照你的需求选择模型的参数，我这边选择默认的豆包即可。\n\n\n\n\n#### 插件\n\n点击右侧添加插件，\n\n\n\n然后按需添加即可，可以选择添加一些网络搜索的插件。\n\n\n\n::: tip 提示\n若插件太多，Bot可能会忙不过来，这里有一些比较进阶的知识，即AI工作流；\n它支持用图形拖拽、低代码编程的方式，让AI根据用户意图，自动选择合适的插件和流程进行工作；关于工作流，此文不做赘述。感兴趣可以参考这篇《[FastGPT工作流](https://blog.tangly1024.com/article/build-an-enterprise-AI-knowledge-base-using-FastGPT)》进行配置，FastGPT与Coze基本操作大同小异。\n\n:::\n\n\n### 知识库\n\n在知识这一栏，点击右侧加号，可以将你的知识库绑定到这个机器人上：\n\n\n\n弹出的知识库列表中，直接点击右侧添加即可。\n\n\n\n我这里已经提前创建好了一个NotionNext的知识库，而你还没创建知识库，因此这里是空的。这里我们可以先关闭此弹窗，先正常发布后，回过头再完善知识库。\n\n知识库知识库允许你投喂给AI一些专业知识，以便它们可以更精确地按照你的要求回答问题。它需要另外维护和导入，因此我与这里的Chat插件分开介绍，在后文中我会提到知识库的创建和导入。\n\n\n### 调试\n\n我们可以直接在右侧的预览和调试中进行测试，和AI进行对话。后续如果更新知识库，或者修改插件、AI参数等等都可以在这里直接调试：\n\n\n\n\n### 发布并获取Bot-ID\n\n我们这里直接点击右上角发布：\n\n\n\n这里会跳出一个引导窗，让你填写开场白和预置的问题，可以按需填写并确认，或者点击跳过并直接发布，我们后面可以再回来修改。\n\n\n\n\n### 发布选项\n\n这里可以选择将机器人发布到那些平台，直接滚动到窗口最下方，选择勾选WebSDK，然后点击右上角发布。\n\n\n\n::: tip 提示\n这里我们还可以选择微信公众号的接入方式，这个也不复杂，不过可以等我们下次修改配置时，再回来改这里即可。\n\n:::\n\n\n### 获取Bot_Id\n\n发布后点击安装，即可获取你的WebSDK的机器人ID了\n\n\n\n复制bot_id后面的这串数字即可，（注意去掉引号）\n\n\n\n\n## 知识库\n\ncoze主页点击上方知识库标签，并点击右上角的创建知识库。\n\n\n\n在弹出的信息框中选择，文本格式，然后导入类型可以按照你的需求选择，这里的选择只是决定你的初始数据导入方式，后面我们可以任选别的方式来更新、修改这个知识库内容。\n\n\n\n例如，我选择在线数据导入，然后方式选择自动采集\n\n\n\n然后选择`批量添加`URL，这里直接粘贴你的网站URL跟地址、或者像我这样导入站点地图的地址即可。\n\n\n\n然后选择确认，系统将自动采集导入你的内容。\n\n后续你还可以使用上传本地文档、导入Notion文档、自定义导入（直接输入文本知识）等方式不断完善这个知识库。\n\n\n\n\n## 最后\n\n知识库配置好，记得回到个人空间下，找到你的机器人，点击他进入机器人配置页面。\n\n\n\n在知识这一栏目，添加你刚才配置的知识库\n\n\n\n关联知识库后，点击右上角的发布，从而然你的最新配置生效。\n\n\n\n就到这里了，尝试一下和你的机器人聊天吧，只要是你知识库内相关的内容，它都能给出更精准的回复。\n\n\n## 附\n\n如果有任何疑问欢迎留言询问。\n\n如果需要让AI直接对接到微信公众号，可以参考此文开通：\n\n[扣子 - 文档中心](https://www.coze.cn/docs/guides/wechat_subscription)\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-coze\n","isInternal":false,"tokens":2779,"sizeBytes":8050},{"name":"notion-next-docs-chat.md","path":"docs/user-guide/plugins/notion-next-docs-chat.md","rawUrl":"https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/notion-next-docs-chat.md","title":"Plugins Skill","category":"anthropic-skill","format":"markdown","content":"# Gemini AI 助手\n\nNotionNext 已内置一个轻量 AI 助手入口，可以把你的博客接到自己的 Gemini 免费额度。核心原则只有一个：`GOOGLE_GENERATIVE_AI_API_KEY` 只能放在服务端代理里，不能写进前端代码、Notion 配置表或 `NEXT_PUBLIC_*` 环境变量。\n\n## 适用场景\n\n- 想在博客右下角放一个 AI 助手。\n- 想让助手回答站点部署、主题配置、文章内容或常见问题。\n- 想复用 NotionNext 文档站同款 Gemini + Cloudflare Pages Function 方案。\n\n如果你已经在用 Coze、Dify、Chatbase，也可以继续用它们；这个方案更适合想自己控制模型 Key 和系统提示词的站点。\n\n## 部署代理\n\n在 Cloudflare Pages 项目中添加 Function，例如 `functions/api/docs-chat.ts`。NotionNext 官方文档站已经使用这个文件作为参考实现，它会在服务端读取 Gemini Key，并向前端暴露一个安全的聊天 API。\n\nCloudflare Pages 环境变量：\n\n```bash\nGOOGLE_GENERATIVE_AI_API_KEY=你的 Gemini API Key\nDOCS_CHAT_MODEL=gemini-flash-lite-latest\nDOCS_CHAT_CORS_ORIGINS=https://你的博客域名\nDOCS_CHAT_MAX_TOKENS=1200\n```\n\n`DOCS_CHAT_CORS_ORIGINS` 可以填写多个域名，用英文逗号分隔：\n\n```bash\nDOCS_CHAT_CORS_ORIGINS=https://blog.example.com,https://docs.example.com\n```\n\n本地或临时调试时可以先用 `*`，正式站点建议改成自己的域名。\n\n## 接入博客\n\n在博客站点的部署平台中添加：\n\n```bash\nNEXT_PUBLIC_DOCS_CHAT_API=https://你的文档站域名/api/docs-chat\nNEXT_PUBLIC_DOCS_CHAT_TITLE=AI 助手\nNEXT_PUBLIC_DOCS_CHAT_WELCOME=你好，我是本站 AI 助手。你可以问我文章、主题和部署问题。\n```\n\n重新部署后，页面右下角会出现 AI 助手按钮。\n\n也可以在 Notion 配置表中添加同名配置：\n\n| 配置 | 说明 |\n| ------------------- | ----------------------------------------------------------------- |\n| `DOCS_CHAT_API` | 聊天代理地址，例如 `https://notionnext.example.com/api/docs-chat` |\n| `DOCS_CHAT_TITLE` | 右下角按钮和窗口标题 |\n| `DOCS_CHAT_WELCOME` | 打开窗口后的第一句欢迎语 |\n\n## 让 AI 更懂你的网站\n\n最小可用版本只需要改服务端代理里的系统提示词。可以把这些信息写进去：\n\n- 你的站点定位和读者人群。\n- 常见入口，例如 `/about`、`/links`、`/archive`。\n- 希望 AI 优先回答的主题。\n- 不希望 AI 回答的范围。\n\n不要把用户私密信息、后台地址、密钥或未公开资料写进提示词。\n\n## 常见问题\n\n### 为什么不用 `NEXT_PUBLIC_GOOGLE_GENERATIVE_AI_API_KEY`？\n\n`NEXT_PUBLIC_*` 会被打包到浏览器里，任何访问者都能看到。Gemini Key 必须只放在 Cloudflare Pages、Vercel Function 或你自己的后端服务里。\n\n### 能不能直接复用 NotionNext 官方文档站的接口？\n\n不建议。官方接口的额度、提示词和跨域策略会按文档站维护。自己的博客应当部署自己的代理，并用自己的 Gemini 免费额度。\n\n### 和 Coze 方案怎么选？\n\n想最快搭建并使用 Coze 知识库，选 [Coze AI 聊天机器人](./notion-next-coze.md)。想自己控制 Gemini Key、模型和提示词，选这个方案。\n","isInternal":false,"tokens":1090,"sizeBytes":3403},{"name":"notion-next-facebook-chat-plugn.md","path":"docs/user-guide/plugins/notion-next-facebook-chat-plugn.md","rawUrl":"https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/notion-next-facebook-chat-plugn.md","title":"Plugins Skill","category":"anthropic-skill","format":"markdown","content":"# Facebook聊天插件[已失效]\n> 迁移自：[Facebook聊天插件[已失效]](https://docs.tangly1024.com/article/notion-next-facebook-chat-plugn)\n> 发布日期：2023-8-4\n> 最后编辑：2024-9-21\n> 原栏目：🧷 外部扩展\n\n## 通知\n\n::: tip 提示\nFacebook 官方宣布：从 2024 年 5 月 9 日起，聊天插件将不再可用。\n\n可以选择使用[SaleSmartly 插件](/user-guide/plugins/notion-next-salesmatly-pulgin)作为页面聊天客服。\n:::\n\n\n## 文档\n\n以下是旧文档\n\n::: tip 提示\n最后更新域于0230906， 修改了原文档中第四点，获取PAGE_ID的方式；用原先方法获取的PAGE_ID，将导致聊天插件加载失败。\n:::\n\n::: tip 提示\nFaceBook 官方提供的聊天插件，可以方便您与访客实时聊天。\n:::\n\n> 全程大约10分钟，即可获得你的facebook插件。\n\n\n## 使用效果\n\n网页`右下角`弹出一个聊天框，用户可以与站长聊天，可以选择访客匿名、或登录Facebook的Messenger。\n\n\n\n\n站长在pc端的后台，或者app上都可以事实查看消息\n\n\n\n\n\n## 配置方式\n\n在NotionNext后台添加两个环境变量即可开启FBChat插件 ， 对应配置文件路径 [blog.config.js](https://github.com/notionnext-org/NotionNext/blob/70cc96d8f16e71abc8a21e777c4b984680ab5a4b/blog.config.js#L99-L100) 。\n\n这两个参数如何获得，请阅读下方的注册方法部分。\n\n\n## 开通方法\n\n注册并登录您的facebook账号\n\n[https://www.facebook.com/login/](https://www.facebook.com/login/)\n\n\n### 一、开通你的公共主页\n\nfacebook上创建一个公共主页很简单，按照步骤创建好主页后，即可获得你的`PAGE-ID`\n\n1. 点击页面左侧的公共主页\n\n\n1. 点击新建公共主页\n\n\n1. 填写资料完成注册\n填写完成后，会引导你完成一些基础的主页配置，自行选择配置即可。\n\n\n1. 如何获取`PAGE_ID`\n - 原先获取PAGE_ID的方式是错误的：\n~~完成后，按照提示返回主页。在你的公共主页地址栏URL中可以看到你的 ~~`~~PAGE_ID~~`~~；例如此处我的PAGE_ID 就是 ~~~~`100095411623547`~~\n\n错误截图
\n\n\n\n \n正确方式，在公共主页左侧点击`设置` → 点击`品牌内容`\n\n\n点击品牌内容后跳转的页面中就包含了页面ID PAGE_ID 参数，此处我的PAGE_ID是`100411122875215`\n\n\n1. 配置白名单\n为了让您的网站允许使用该公共主页的messenger功能，需要如下配置：\n点击右上角头像 → 设置与隐私 → 设置 ； 来到你的设置中心\n\n\n设置中心左侧点击新版公共主页体验\n\n在新版公共主页体验中，点击高级消息功能，并输入您的站点域名，点击添加即可。\n\n\n\n### 二、开通开发者权限\n\n完成此步骤，你就能获得自己的专属应用id，用此id可以调用facebook的功能\n\n1. 点击下方链接，申请开发者\n[https://developers.facebook.com/async/registration](https://developers.facebook.com/async/registration)\n\n1. 点击继续\n并按照要求验证手机号和邮箱\n\n\n1. 最后一步，完成注册\n这里选择你的属性，可以任选，不影响后续操作\n\n\n1. 创建一个应用\n注册完成自动会来到此开发者首页，您以后也可以随时访问 [https://developers.facebook.com/apps/](https://developers.facebook.com/apps/) 来查看您的应用。\n点击创建\n\n\n1. 配置应用\n选择facebook，点击继续\n\n填写完应用名字，直接点击创建应用即可。\n\n\n1. 获取`APP_ID`\n在应用首页即可看到\n\n\n\n## 完成\n\n至此，你已经获取到了`APP_ID`和`PAGE_ID`。\n\n在NotionNext后台添加两个环境变量即可开启FBChat插件 ， 对应配置文件路径 [blog.config.js](https://github.com/notionnext-org/NotionNext/blob/70cc96d8f16e71abc8a21e777c4b984680ab5a4b/blog.config.js#L99-L100) 。\n\n\n## 关于Facebook后台设置\n\n您可以在facebook后台设置这个聊天插件的预设回复，营业时间等等属性，这里不做赘述。\n\n配置入口：在您的facebook公共主页的设置菜单中，点击 [Meta Business Suite](https://business.facebook.com/) （商务套件）。\n\n\n\n\n### 商务后台页面\n\n除了上面的入口，你也可以直接访问右边链接 [https://business.facebook.com/](https://business.facebook.com/)\n\n后台可以查看所有和你聊天的信息，右上角可以配置对应的自动回复等功能，和微信公众号类似。\n\n\n\n同时，后台也支持您自定义插件的样式、位置、以及自动回复的内容~\n\n\n\n\n### 客户端\n\n这个功能使用的是Facebook的Messenger聊天工具，你可以下载一个Facebook、或者Messenger、或者和我一样下载一个 Business Suite (facebook的运营全家桶)。\n\n\n\n\n## 参考\n\n- 官方介绍\n[https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin](https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin)\n\n- React插件代码\n[https://github.com/Yoctol/react-messenger-customer-chat](https://github.com/Yoctol/react-messenger-customer-chat)\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-facebook-chat-plugn\n","isInternal":false,"tokens":2027,"sizeBytes":6157},{"name":"notion-next-google-adsense.md","path":"docs/user-guide/plugins/notion-next-google-adsense.md","rawUrl":"https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/notion-next-google-adsense.md","title":"Plugins Skill","category":"anthropic-skill","format":"markdown","content":"# Google广告营收插件\n> 迁移自：[Google广告营收插件](https://docs.tangly1024.com/article/notion-next-google-adsense)\n> 发布日期：2023-8-7\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n::: tip 提示\n通过网站上对接谷歌广告接口，可以让您的网站通过广告获取一笔美金收入。\n:::\n\n\n## 开通验证\n\n谷歌广告的配置开通有很多限制\n\n1. 申请开通谷歌[Adsense](https://www.google.com/adsense/)账号\n\n1. 验证站点所有权（必须）:请按照GoogleAdsense 后台的要求验证你的站点所有权\n比较推荐的做法是，把GoogleAdsense后台提供的 `ads.txt` 文件上传到您代码的 `public` 目录下。public目录专门用来放置网站的静态文件。例如您可以访问我的博客的ads验证文件 [https://blog.tangly1024.com/ads.txt](https://blog.tangly1024.com/ads.txt)\n\n\n## 配置方式\n\n1. 获取谷歌账号的 PUB_ID 填写到[站点配置](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/blog.config.js#L331)\n\n\n1. 在谷歌后台创建四种类型的广告单元，获取广告单元的ID\n\n\n1. 在[代码中配置](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/blog.config.js#L333-L336)广告单元ID\n\n\n\n### 旧版配置广告单元\n\n需要改动代码，而且不能嵌入到文章的指定段落。\n\n1. 在你需要引入特定自定义广告的地方添加组件代码 <AdSlot /> 即可 相关[AdSlot源码](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/components/GoogleAdsense.js#L51-L95)\n\n\n1. 相关使用案例 , [Simple主题首页](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/themes/simple/index.js#L74)加入了一个原生广告单元\n\n\n\n## 广告插件新版用法\n\n在 **4.4.0 **的版本后，支持您在notion中插入 **<ins/>** 这个代码，它将自动在网页中变成广告单元，哪里想变放哪里。\n\n文章内容支持嵌入广告：\n在想要变成广告的位置输入一行text元素，内容是\n\n```Plain Text\n<ins/>\n```\n\n即可替换成广告。如下图是我在notion中插入的文字<ins/>：\n\n\n\n在博客中广告会直接显示在文章中间的位置：\n\n\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-google-adsense\n","isInternal":false,"tokens":987,"sizeBytes":2676},{"name":"notion-next-plugin-live2d.md","path":"docs/user-guide/plugins/notion-next-plugin-live2d.md","rawUrl":"https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/notion-next-plugin-live2d.md","title":"Plugins Skill","category":"anthropic-skill","format":"markdown","content":"# Live2D宠物插件\n> 迁移自：[Live2D宠物插件](https://docs.tangly1024.com/article/notion-next-plugin-live2d)\n> 发布日期：2023-6-30\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n## 介绍\n\n《Live2D》是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用，缺点是Live 2D人物无法大幅度转身，开发商正设法让该技术可显示360度图像。\n\n开启Live2D宠物挂件后，你的页面的角落会出现这样一只可爱宠物，并且它会跟随着你的鼠标位置动起来。\n\n\n\n\n## 开启配置\n\n目前所有主题都支持宠物挂件。\n\n开启方式，源文件在[blog.config.js](https://github.com/notionnext-org/NotionNext/blob/8103e23aac7219789c77e412a1bc24dd2a2683b5/blog.config.js#L152C2-L158C1)中，默认是开状态\n\n```JavaScript\n// 悬浮挂件\n WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件\n WIDGET_PET_LINK:\n process.env.NEXT_PUBLIC_WIDGET_PET_LINK ||\n 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models\n WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题\n```\n\n您也可以直接通过设置环境变量`NEXT_PUBLIC_WIDGET_PET ` 的方式来控制开关\n\n\n## 切换模型\n\n`WIDGET_PET_LINK` 这个参数制定的是动画模型的加载地址，目前默认使用的是茶杯狗。\n\n::: tip 提示\n由于每个动画模型的高度不同，可能需要您在[代码中](https://github.com/notionnext-org/NotionNext/blob/8103e23aac7219789c77e412a1bc24dd2a2683b5/components/Live2D.js#L38)修改模型的高度height，否则会很怪异。\n\n```HTML\n<canvas id=\"live2d\" className='cursor-pointer' width=\"280\" **height=\"250\"** onClick={handleClick} alt='切换主题' title='切换主题' />\n```\n:::\n\n\n## 模型预览\n\n例如您想使用 `live2d-widget-model-chitose` 这个模型，则可以将`WIDGET_PET_LINK `的值设置为\n\n```Bash\nhttps://cdn.jsdelivr.net/npm/**live2d-widget-model-chitose**/assets/**chitose.model.json**\n```\n\n1. 黑猫\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-hijiki/assets/hijiki.model.json\n```\n\n\n1. 白猫\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-tororo/assets/tororo.model.json\n```\n\n\n1. chitose\n```Bash\nhttps://cdn.jsdelivr.net/npm/**live2d-widget-model-chitose**/assets/**chitose.model.json**\n```\n\n\n1. epsilon\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-epsilon2_1/assets/Epsilon2.1.model.json\n```\n\n\n1. gf\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-gf/assets/Gantzert_Felixander.model.json\n```\n\n\n1. haru\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-haru/01/assets/haru01.model.json\n```\n\n\n1. haru2\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-haru/02/assets/haru02.model.json\n```\n\n\n1. はると（haruto-遥人）\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-haruto/assets/haruto.model.json\n```\n\n\n1. hibiki\n高度需要调整为 `900`\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-hibiki/assets/hibiki.model.json\n```\n\n\n1. izumi\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-izumi/assets/izumi.model.json\n```\n\n\n1. koharu\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-koharu/assets/koharu.model.json\n```\n\n\n1. ni-j\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-ni-j/assets/ni-j.model.json\n```\n\n\n1. miku\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-miku/assets/miku.model.json\n```\n\n\n1. nico\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nico/assets/nico.model.json\n```\n\n\n1. nietzche\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nietzsche/assets/nietzche.model.json\n```\n\n\n1. nipsilon\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nipsilon/assets/nipsilon.model.json\n```\n\n\n1. nito\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nito/assets/nito.model.json\n```\n\n\n1. shizukui\n建议高度500\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-shizuku/assets/shizuku.model.json\n```\n\n\n1. tsumiki\n建议高度500\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-tsumiki/assets/tsumiki.model.json\n```\n\n\n1. unitychan\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-unitychan/assets/unitychan.model.json\n```\n\n\n1. 茶杯狗\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-wanko/assets/wanko.model.json\n```\n\n\n1. z16\n建议高度500\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-z16/assets/z16.model.json\n```\n\n\n\n## 更多模型预览\n\n访问以下链接，在线预览102个模型，需要全程科学访问。\n这些模型暂时没有cdn、用的github仓库链接，可能影响加载速度和国内访问，如果更好的cdn链接，欢迎提供分享。\n\n[Live2d Cubism 2](https://imuncle.github.io/live2d/)\n\n\n### 部分模型截图\n\n1. bilibili-22娘\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/22/model.default.json\n```\n\n\n1. bilibili-22娘长高版本\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/22_high/model.json\n```\n\n\n1. bilibili-33娘\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/33/model.default.json\n```\n\n\n1. bilibili-33娘长高版本\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/33_high/model.default.json\n```\n\n\n1. 布洛妮娅\n```Bash\nmodel/bronya/model.json\n```\n\n\n1. 布洛妮娅2\n```Bash\nmodel/bronya_1/model.json\n```\n\n\n1. はる（haru-春）\n```Bash\nmodel/haru/haru_01.model.json\n```\n\n\n1. 茵蒂克丝(index)\n```Bash\nmodel/index/model.json\n```\n\n\n1. izumi\n```Bash\nmodel/izumi/izumi.model.json\n```\n\n\n1. katou\n```Bash\nmodel/katou_01/katou_01.model.json\n```\n\n 1. liang\n```Bash\nmodel/liang/2.json\n```\n\n\n15. miku\n\n```Bash\nmodel/miku/miku.model.json\n```\n\n\n1. 小埋 murakumo\n```Bash\nmodel/miku/miku.model.json\n```\n\n\n1. 茶杯狗\n```Bash\nmodel/wanko/wanko.model.json\n```\n\n\n1. shizuku\n```Bash\nmodel/shizuku/shizuku.model.json\n```\n\n 1. pio\n```Bash\nmodel/Pio/model.json\n```\n\n 1. 血小板\n```Bash\nmodel/platelet/model.json\n```\n\n 1. 血小板 迷你\n```Bash\nmodel/platelet-2/model.json\n```\n\n 1. 蕾姆\n```Bash\nmodel/rem/model.json\n```\n\n 1. Tia\n```Bash\nmodel/Tia/index.json\n```\n\n 1. penchan\n```Bash\nmodel/penchan/penchan.model.json\n```\n\n 1. dollsfrontline\n```Bash\nmodel/dollsfrontline/95type_405/normal/model.json\n```\n\n 1. dollsfrontline-armor\n```Bash\nmodel/dollsfrontline/armor/model1.json\n```\n\n 1. dollsfromtline-command\n```Bash\nmodel/dollsfrontline/command/model1.json\n```\n\n 1. 当麻\n```Bash\nmodel/touma/touma.model.json\n```\n\n\n\n## 最后\n\n以上使用的是Cubism2版本的动画模型，您还可以体验一下以下Cubism3版本的动画模型。\n\n高版本的模型支持更丰富更细节的动画，结合AI对话接口，有很大的开发空间。这里有点超纲，仅供预览，暂时不做支持，在线预览网址：\n\n[Live2d Cubism 3](https://imuncle.github.io/live2d/live2d_3/)\n\n\n\n\n## 参考\n\n[https://github.com/imuncle/live2d](https://github.com/imuncle/live2d)\n\n[live2d-widget-models/packages at master · xiazeyu/live2d-widget-models](https://github.com/xiazeyu/live2d-widget-models/tree/master/packages)\n\nThe model library for live2d-widget.js. Contribute to xiazeyu/live2d-widget-models development by creating an account on GitHub.\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-plugin-live2d\n","isInternal":false,"tokens":3414,"sizeBytes":9573},{"name":"notion-next-salesmatly-pulgin.md","path":"docs/user-guide/plugins/notion-next-salesmatly-pulgin.md","rawUrl":"https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/notion-next-salesmatly-pulgin.md","title":"Plugins Skill","category":"anthropic-skill","format":"markdown","content":"# SaleSmartly聊天插件\n> 迁移自：[SaleSmartly聊天插件](https://docs.tangly1024.com/article/notion-next-salesmatly-pulgin)\n> 发布日期：2024-5-10\n> 最后编辑：2024-9-21\n> 原栏目：🧷 外部扩展\n> 标签：NotionNext、插件、聊天\n> 摘要：NotionNext配置Salesmatly插件\n\n由于Facebook聊天插件停运，目前可以选择用SaleSmartly插件作为对话工具\n\n\n## 效果预览\n\n网页右下角的聊天图标，点击后可以与站长进行聊天通讯。\n\n\n\n\nSaleSmartly的免费版上线是一千个会话，即超过一千位客户咨询后，就不再收到新的消息，需要升级套餐后才可使用。\n\n\n## 安装方式\n\n1. 登录[SaleSmartly](https://share.salesmartly.com/gsuvhl)后台获取安装代码\n\n1. 配置在NotionNext中。\n\n安装代码获取方式：\n\n\n### 1.登录并配置SaleSmart\n\n访问SaleSmartly主页 注册登录。\n\n[你是否经常为了管理独立站的客户而烦恼？你是否想要提高你的销售转化率和客户满意度？你是否想要利用社交媒体的力量来扩大你的市场？ 如果你的答案是肯定的，那么我强烈推荐你使用SaleSmartly，它会让你的独立站事业更加成功，让你的客户更加满意： -聚合在线聊天（livechat）、WhatsApp、Facebook Messenger、Instagram、Telegram、Line、Email、Wechat -AI机器人自动回复常见问题 -营销自动化发送个性化消息 -客服自动分配会话等 还有免费试用版，有需要的可以了解一下这款全渠道客户聊天工具](https://share.salesmartly.com/gsuvhl)\n\n选择介入网页聊天插件\n\n\n\n点击新人指引教程，选择添加聊天插件到您的网站，并点击配置插件\n\n\n\n在这里可以配置你的聊天插件的名称以及一些预设消息\n\n\n\n为了插件能正常聊天，这里需要实名认证\n\n\n\n\n### 2. 获取安装代码\n\n然后点击复制安装代码\n\n\n\n代码会自动复制到您的剪贴板中，格式如下\n\n```HTML\n<script src=\"**https://assets.salesmartly.com/js/xxxxxxx.js**\"></script>\n```\n\n将红色的链接部分配置到Notion_CONFIG中，添加一个CUSTOM_EXTERNAL_JS配置，配置结果如下：\n\n\n\n直接我的这行配置到notion中，再将url改成你的即可：\n\n::: tip 提示\n这里**配置值**是需要用中括号加英文双引号拼起来[””]，它代表一串配置数组，支持多个用英文逗号隔开。例如[\"https://1.js\",\"https://2.js\",\"https://3.js\"]\n\n直接在Notion中手动输入这项配置时，Notion会自动将英文的双引号转成中文，导致软件报错，因此建议复制我这里写好的格式，再将url替换成您自己的。\n:::\n\n\n~~旧版配置方法（废弃）~~
\n\n将上述脚本中的链接部分（下划线加粗标红部分）复制出来在浏览器中打开，可以看到一段代码\n\n全选并复制这里的代码内容\n\n打开Notion模板中的的配置中心，将配置粘贴到 GLOBAL_JS 配置项即可。\n\n\n \n\n\n## 附\n\n在Salesmart后台主页，可以选择使用不同的终端用于接收回复消息，例如绑定小程序后，您可以在小程序中，接收或回复用户的消息。\n\n\n\n\n## 其它聊天插件选择\n\n你可以任意查找网上的其它插件进行安装，例如参考文档中的[TIDIO插件安装](/user-guide/plugins/notion-next-tidio)或者使用[Chatway聊天插件](https://go.chatway.app/)，他们与SaleSmartly的安装方式基本一致。例如Chatway插件配置也是添加一个脚本地址即可，示例如下：\n\n\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-salesmatly-pulgin\n","isInternal":false,"tokens":1451,"sizeBytes":4167},{"name":"notion-next-tidio.md","path":"docs/user-guide/plugins/notion-next-tidio.md","rawUrl":"https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/notion-next-tidio.md","title":"Plugins Skill","category":"anthropic-skill","format":"markdown","content":"# TIDIO聊天插件\n> 迁移自：[TIDIO聊天插件](https://docs.tangly1024.com/article/notion-next-tidio)\n> 发布日期：2024-9-21\n> 最后编辑：2024-9-21\n> 原栏目：🧷 外部扩展\n\n## 效果\n\n网页右下角会悬挂一个聊天按钮，用户可以直接发送消息对话，你可以在你的TIDIO客户端收到消息并进行回复，和SaleSmartly的功能基本一直，可以选择安装任意一种。\n\n\n\nSaleSmartly的免费版上限是每月50个会话，超出后需要升级套餐后才可使用。\n\n\n## 安装方法\n\n和SaleSmartly安装方式几乎一致。\n\n1. 登录TIDIO后台\n[Accelerate Your Growth With #1 AI Customer Service | Tidio](https://www.tidio.com/)\n\nConvert more leads, provide stellar support, and boost your revenue with Tidio’s game-changing AI-driven customer service solution.\n\n1. 按照引导获取你的手动安装代码\n首次注册后，TIDIO会自动引导你获取安装代码，这是安装代码格式：\n```JavaScript\n<script src=\"**//code.tidio.co/xxxxxx.js**\" async></script>\n```\n如果你已经配置好，可以在设置→ Installation → Manual install 中找到你的安装代码\n\n\n\n## 配置\n\n将上述安装代码中的URL部分复制出来，即这段：**//code.tidio.co/xxxxxx.js**\n\n配置到NotionNext中,添加一个配置 CUSTOM_EXTERNAL_JS，参考如下\n\n\n\n可以直接复制我的这个配置，并将URL替换成你的。\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-tidio\n","isInternal":false,"tokens":527,"sizeBytes":1614},{"name":"overview.md","path":"docs/user-guide/plugins/overview.md","rawUrl":"https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/overview.md","title":"Plugins Skill","category":"anthropic-skill","format":"markdown","content":"# Plugins Skill\n\nPath: `docs/user-guide/plugins/overview.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/overview.md)","tokens":300,"sizeBytes":188}],"systemPromptSnippet":"\n\n---\nredirect: /user-guide/plugins/overview\n---\n\n\n# Mailchimp邮件订阅\n> 迁移自：[Mailchimp邮件订阅](https://docs.tangly1024.com/article/notion-next-mailchimp)\n> 发布日期：2023-7-4\n> 最后编辑：2024-9-12\n> 原栏目：🔊 运营教程\n\n::: tip 提示\n此功能主要针对国外用户的使用习惯开发。国内推荐使用公众号导流方案。\n:::\n\n\n## 序\n\nNotionNext 后续版本将陆续支持Newsletter功能，目前基于Mailchimp邮件订阅，可以轻松实现您与读者建立紧密的链接。\n\n按照本操作步骤，将为您创建一个Mailchimp的api-key以及对应的邮件列表id，便于您通过接口，对接自己的页面表单。\n\n::: tip 提示\n目前只有landing主题上支持了 Mailchimp的ui组件，后续将在其它主题中 也加入对应的UI组件。\n预览体验：访问[NotionNext主页](/user-guide/intro)，在底部的邮件订阅处填写您的邮箱体验。\n:::\n\n\n### 什么是Mailchimp\n\nMailChimp是目前最通用且易于使用的 电子邮件营销服务.\n\nMailChimp 为您提供一个免费帐户，最多可拥有 2000 个电子邮件订阅者，每月发送 12000 封电子邮件，在给定的 2000 小时内限制为 24 封电子邮件。 这个限制对于任何初学者以及中级博主和营销人员来说都非常好。\n\n\n## 操作步骤\n\n你可以按照以下步骤在 Mailchimp 中找到你的邮件列表 ID 和 API KEY：\n\n1. 登录你的 Mailchimp 账户，点击右上角的用户名，然后选择 \"Account\" 进入账户设置页面。\n\n1. 在账户设置页面中，点击 \"Extras\" 选项卡，然后选择 \"API keys\"。\n\n\n1. 在 API keys 页面中，可以看到你现有的 API KEY 列表。如果没有 API KEY，请点击 \"Create A Key\" 按钮创建一个新的 API KEY。\n\n\n\n1. 复制你的 API KEY，并妥善保管。\n\n1. 点击 \"Audience\" 选项卡，然后选择你要用来存储用户邮件地址的列表。\n\n\n1. 在该列表的设置页面中，可以看到该列表的唯一 ID。复制该 ID。\n\n\n\n## 最后\n\n现在你已经找到了你的 Mailchimp 邮件列表 ID 和 API KEY。将它们替换到你的代码中即可开始使用 Mailchimp API 来收集用户邮件地址了。\n\n只需要在Vercel环境变量中添加两项配置，就可以实现网站的邮件订阅功能\n\n新订阅请求需要邮箱持有人通过 Mailchimp 确认邮件完成订阅。页面显示“Subscription request received…”表示请求已经处理；为保护邮箱隐私，重复提交也会显示相同提示，不会自动恢复已退订成员。未收到确认邮件时，请检查垃圾邮件目录，或通过站点所有者提供的 Mailchimp 订阅表单重新订阅。\n\n新订阅从原来的直接 `subscribed` 改为等待确认的 `pending`。升级后，请提醒读者完成确认邮件，并在 Mailchimp 后台确认订阅状态；页面接收成功提示不等于已加入正式收件名单。\n\nMailchimp 对永久删除等少数地址状态可能拒绝请求，此时页面仍会显示失败。新请求与 `Member Exists` 使用相同提示，但其他上游 400 仍返回 HTTP 400，不能据此认为所有邮箱状态都已隐藏。详细返回规则见 [Mailchimp 邮件订阅接口](../../developer/MAILCHIMP_SUBSCRIBE.zh-CN.md)。\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-mailchimp\n\n\n# 音乐播放器\n> 迁移自：[音乐播放器](https://docs.tangly1024.com/article/notion-next-plugin-music-player)\n> 发布日期：2023-8-4\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n## 开启方式\n\n后台添加环境变量 `NEXT_PUBLIC_MUSIC_PLAYER` 值为 `true`，即可打开音乐播放器功能。\n\n更多关于播放器配置说明，可以参考APlayer官网\n\n[APlayer](https://aplayer.js.org/)\n\n```JavaScript\n// 音乐播放插件\n MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件\n MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换，如果使用播放器，打开自动播放再隐藏，就会以类似背景音乐的方式播放，无法取消和暂停\n MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过自动播放时常不生效（移动设备不支持自动播放）\n MUSIC_PLAYER_SHOW_LRC: process.env.NEXT_PUBLIC_MUSIC_PLAYER_SHOW_LRC || false, // 是否展示歌词（前提是有配置歌词路径，对 meting 无效）\n 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',\n MUSIC_PLAYER_ORDER: 'list', // 默认播放方式，顺序 list，随机 random\n MUSIC_PLAYER_AUDIO_LIST: [ // 示例音乐列表。除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/\n {\n name: '风を共に舞う気持ち',\n artist: 'Falcom Sound Team jdk',\n url: 'https://music.163.com/song/media/outer/url?id=731419.mp3',\n cover: 'https://p2.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'\n },\n {\n name: '王都グランセル',\n artist: 'Falcom Sound Team jdk',\n url: 'https://music.163.com/song/media/outer/url?id=731355.mp3',\n cover: 'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'\n }\n ],\n MUSIC_PLAYER_METING: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING || false, // 是否要开启 MetingJS，从平台获取歌单。会覆盖自定义的 MUSIC_PLAYER_AUDIO_LIST，更多配置信息：https://github.com/metowolf/MetingJS\n MUSIC_PLAYER_METING_SERVER: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER || 'netease', // 音乐平台，[netease, tencent, kugou, xiami, baidu]\n MUSIC_PLAYER_METING_ID: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_ID || '60198', // 对应歌单的 id\n 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）\n```\n\n> 待完善\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-plugin-music-player\n\n\n# OpenAI 兼容 AI 助手\n\nNotionNext 内置了一个轻量 AI 聊天入口，可以接入 DeepSeek 或其它兼容 OpenAI `chat/completions` 格式的模型服务。页面前端只负责显示聊天窗口，真正的模型请求必须走服务端代理。\n\n## 为什么这样设计\n\nDeepSeek 提供的是模型 API，不是 Chatbase、Coze 那种完整网页浮窗 SDK。API Key 不能写进 `NEXT_PUBLIC_*`、Notion 配置表或前端代码，否则访问者可以在浏览器里看到密钥。\n\n因此推荐架构是：\n\n1. 站点前端配置 `NEXT_PUBLIC_AI_CHAT_API`，显示右下角 AI 助手。\n2. 服务端代理 `/api/ai-chat` 读取 `AI_CHAT_API_KEY`。\n3. 代理转发到 DeepSeek 或其它 OpenAI 兼容接口。\n\n## 前端配置\n\n在 Vercel、Cloudflare Pages、Netlify 或服务器环境变量中添加：\n\n```bash\nNEXT_PUBLIC_AI_CHAT_API=https://你的域名/api/ai-chat\nNEXT_PUBLIC_AI_CHAT_TITLE=AI 助手\nNEXT_PUBLIC_AI_CHAT_WELCOME=你好，我是本站 AI 助手。你可以问我文章、主题和部署问题。\n```\n\n也可以在 Notion 配置表中添加同名配置：\n\n| 配置 | 说明 |\n| ----------------- | --------------------------------------------------------- |\n| `AI_CHAT_API` | 聊天代理地址，例如 `https://blog.example.com/api/ai-chat` |\n| `AI_CHAT_TITLE` | 右下角按钮和窗口标题 |\n| `AI_CHAT_WELCOME` | 打开窗口后的第一句欢迎语 |\n\n## DeepSeek 代理配置\n\n如果你使用 Cloudflare Pages Functions，可以直接使用仓库内置的 `functions/api/ai-chat.ts`。在部署平台的服务端环境变量中添加：\n\n```bash\nAI_CHAT_API_KEY=你的 DeepSeek API Key\nAI_CHAT_BASE_URL=https://api.deepseek.com\nAI_CHAT_MODEL=deepseek-v4-flash\nAI_CHAT_CORS_ORIGINS=https://你的博客域名\nAI_CHAT_MAX_TOKENS=1200\nAI_CHAT_TEMPERATURE=0.3\n```\n\n`AI_CHAT_CORS_ORIGINS` 可以填写多个域名，用英文逗号分隔：\n\n```bash\nAI_CHAT_CORS_ORIGINS=https://blog.example.com,https://docs.example.com\n```\n\n本地或临时调试可以先写 `*`，正式站点建议改成自己的域名。\n\n## 使用其它 OpenAI 兼容服务\n\n只要服务支持 `POST /chat/completions`，通常只需要替换：\n\n```bash\nAI_CHAT_BASE_URL=https://你的服务商 base url\nAI_CHAT_MODEL=你的模型名\nAI_CHAT_API_KEY=你的服务端密钥\n```\n\n不要改前端组件，也不要把密钥写进 Notion。\n\n## 自定义回答范围\n\n可以用服务端变量设置系统提示词：\n\n```bash\nAI_CHAT_SYSTEM_PROMPT=你是本站 AI 助手，只回答本站文章、主题、配置和部署相关问题。回答要简洁，不确定时说明限制。\n```\n\n建议写入：\n\n- 站点定位和读者人群\n- 重点栏目或文章入口\n- 不希望 AI 回答的范围\n- 需要优先提示的部署、配置或联系信息\n\n不要写入后台地址、私密页面、未公开资料或任何密钥。\n\n## 和 Coze、Chatbase、Dify 怎么选\n\n| 方案 | 适合场景 |\n| ------------------- | ---------------------------------------------------- |\n| OpenAI 兼容 AI 助手 | 想自己控制模型、Key、系统提示词，或直接使用 DeepSeek |\n| Coze | 想使用可视化工作流、插件和平台知识库 |\n| Chatbase | 想用第三方平台自动抓取网站内容并生成聊天机器人 |\n| Dify | 已经自建 Dify 应用，希望直接嵌入 Dify 聊天窗口 |\n\nDeepSeek API 本身不会自动读取你的 Notion 数据库或站点文章。如果需要“基于全站文章回答”，后续还需要单独维护知识库或 RAG 流程。\n\n\n# AI聊天机器人-ChatBase\n> 迁移自：[AI聊天机器人-ChatBase](https://docs.tangly1024.com/article/notion-next-chat-base)\n> 发布日期：2023-7-18\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n## 啥是ChatBase\n\nChatbase.co 是**一款为网站构建自定义ChatGPT 界面的工具**，用户只需上传文档或添加到网站的链接，就可以获得一个类似ChatGPT 的聊天机器人，并将它作为小组件添加到网站上。\n\n网页右下角会出现一个对话框，您可以通过他搜索网页中的所有知识点。\n\n\n\n2024.4.29最新版本；配置成功的效果，右下角多出一个聊天按钮\n\n\n\n直接询问对话\n\n\n\n\n## 配置方法\n\n用环境变量或修改代码的方式，在[blog.config.js](https://github.com/notionnext-org/NotionNext/blob/48cb3ee6779c117bcb6b61e5cb89fbd1c541a115/blog.config.js#L156)中添加您的chatbase-id即可。\n\n```YAML\n// ********挂件组件相关********\n// Chatbase\nCHATBASE_ID: process.env.NEXT_PUBLIC_CHATBASE_ID || null, // 是否显示chatbase机器人 https://www.chatbase.co/\n```\n\n另外，有了chatbase-id 您可以直接用内嵌网页的方式，将chatbase放在您的任意notion页面中，网页地址\n\n```HTML\nhttps://www.chatbase.co/chatbot-iframe/${BLOG.CHATBASE_ID}\n```\n\n\n## 获取ChatBase-id方法\n\n\n### 1. 注册登录ChatBase\n\n[Chatbase | ChatGPT for your website](https://www.chatbase.co/)\n\nBuild an AI chatbot from your knowledge base and add it to your website.\n\n\n### 2. 根据引导，配置机器人的数据源\n\n登陆成功后，创建一个新的聊天机器人，点击`New Chatbot`\n\n\n\n这里要选择用什么数据源来训练机器人；默认是上传json文件，在这里我们选择爬取网站内容，点击Website：\n\n\n\n这里使用站点地图的方式提交内容，输入网址后面加上`/sitemap.xml`，如下图，这是NotionNext每个站点默认的地图位置。\n\n\n\n点击Load sitemap加载地图内容，此时平台会自动爬取您网站中的页面地址\n\n\n\n（免费版只能读取10个页面生成机器人数据，这里我们要删除超出10个的多余链接）\n\n我这边示例，只保留了几个重要链接，一个是about介绍页面，一个是archive归档页面，一篇文章；\n\n点击Create Chatbot 训练机器人。\n\n\n\n等待进度条完成。最后可以在面板中看到配置信息\n\n\n\n在setting中可以设置默认欢迎语和用户提问的提示词，这里需要自己折腾一下，不展开叙述了。\n\n\n### 3. 在Embed on Site 中找到id\n\n点击Embed on site，会提示你需要将此机器人公开，\n\n\n\n选择 make public即可\n\n\n\n然后在弹出的确认框中就可以找到你的chatbotId了。\n\n\n\n\n## 配置在NotionNext中\n\n两种方案配置,任选其一：\n\n1. 添加一个环境变量 `NEXT_PUBLIC_CHATBASE_ID`\n\n1. 添加一个NotionConfig: `CHATBASE_ID`\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-chat-base\n\n\n# AI聊天机器人-Coze\n> 迁移自：[AI聊天机器人-Coze](https://docs.tangly1024.com/article/notion-next-coze)\n> 发布日期：2024-9-20\n> 最后编辑：2024-9-30\n> 原栏目：🧷 外部扩展\n\n## 前言\n\n你可以直接像站点右下角的AI助手提问，它会尽可能地帮你解决问题。本文将介绍如何将Coze的AI机器人接入到NotionNext。\n\n\n\n\n\n### 特点：\n\nCoze支持介入Bing、百度等搜索引擎插件，提问时会自动检索互联网并为你整理答案。\n\nCoze支持将你的文章内容等等来源信息整理为一个知识库，便于在回答问题时检索这个知识库并给出更专业的回答。\n\n\n## NotionNext如何配置Coze\n\n在你的Notion_config中添加两项配置，分别是机器人的称呼和机器人ID即可：\n\n\n\n参考如下：\n\n这里的COZE_TITLE可以任意填写，他只会影响你窗口中AI机器人的标题，例如NotionNext-AI助理：\n\n\n\n这里我们还需要在Coze后台创建自己的机器人，并获得一个`BOT_ID`。\n\n### 常见问题：BOT_ID 后几位变成 0\n\n如果你的 `COZE_BOT_ID` 是很长的数字，不建议填在 Notion_config 的数字类型字段中。过长数字可能超过 JavaScript 安全整数范围，读取后末尾会被改成 `000`。\n\n最简单的做法是用部署环境变量配置，并把值当作字符串保存：\n\n```text\nNEXT_PUBLIC_COZE_BOT_ID=你的 Coze Bot ID\nNEXT_PUBLIC_COZE_TITLE=NotionNext助手\n```\n\n在 Vercel、Netlify、Docker 或服务器环境变量中配置后，重新部署即可。不要把 Coze 的访问令牌、个人 PAT 或长期密钥提交到 Git 仓库；如果 Coze 当前 SDK 要求鉴权，建议先放在服务端或边缘函数中处理。\n\n\n## 如何创建自己的Coze机器人？\n\n注册国内版Coze，主要使用国内的大模型，例如豆包、通义千问等等。\n\n[扣子-AI 智能体开发平台](https://www.coze.cn/home)\n\n扣子是新一代 AI 大模型智能体开发平台。整合了插件、长短期记忆、工作流、卡片等丰富能力，扣子能帮你低门槛、快速搭建个性化或具备商业价值的智能体，并发布到豆包、飞书等各个平台。\n\n或使用国际版，用的是GPT\\Claude\\Gemini等国外大模型。\n\n[Coze: Next-Gen AI Chatbot Developing Platform](https://www.coze.com/)\n\nCoze is a next-generation AI application and chatbot developing platform for everyone. Regardless of your programming experience, Coze enables you to effortlessly create various chatbots and deploy them across different social platforms and messaging apps.\n\n两者操作、配置方式几乎一致，国际版的插件稍微强一些，但对于国内使用体验可能有点门槛，例如网络问题。\n\n下文我用国内版Coze来举例。\n\n\n### 创建机器人\n\n在个人空间，点击右上角创建一个Bot即可\n\n\n\n按需填写你的名称描述和头像。\n\n\n\n\n### 机器人设置页面介绍\n\n从上往下，分别可以设置大语言模型、插件、与知识库。（其它还有很多丰富的设置我们以后再折腾）\n\n\n\n\n#### 关于模型\n\n可以按照你的需求选择模型的参数，我这边选择默认的豆包即可。\n\n\n\n\n#### 插件\n\n点击右侧添加插件，\n\n\n\n然后按需添加即可，可以选择添加一些网络搜索的插件。\n\n\n\n::: tip 提示\n若插件太多，Bot可能会忙不过来，这里有一些比较进阶的知识，即AI工作流；\n它支持用图形拖拽、低代码编程的方式，让AI根据用户意图，自动选择合适的插件和流程进行工作；关于工作流，此文不做赘述。感兴趣可以参考这篇《[FastGPT工作流](https://blog.tangly1024.com/article/build-an-enterprise-AI-knowledge-base-using-FastGPT)》进行配置，FastGPT与Coze基本操作大同小异。\n\n:::\n\n\n### 知识库\n\n在知识这一栏，点击右侧加号，可以将你的知识库绑定到这个机器人上：\n\n\n\n弹出的知识库列表中，直接点击右侧添加即可。\n\n\n\n我这里已经提前创建好了一个NotionNext的知识库，而你还没创建知识库，因此这里是空的。这里我们可以先关闭此弹窗，先正常发布后，回过头再完善知识库。\n\n知识库知识库允许你投喂给AI一些专业知识，以便它们可以更精确地按照你的要求回答问题。它需要另外维护和导入，因此我与这里的Chat插件分开介绍，在后文中我会提到知识库的创建和导入。\n\n\n### 调试\n\n我们可以直接在右侧的预览和调试中进行测试，和AI进行对话。后续如果更新知识库，或者修改插件、AI参数等等都可以在这里直接调试：\n\n\n\n\n### 发布并获取Bot-ID\n\n我们这里直接点击右上角发布：\n\n\n\n这里会跳出一个引导窗，让你填写开场白和预置的问题，可以按需填写并确认，或者点击跳过并直接发布，我们后面可以再回来修改。\n\n\n\n\n### 发布选项\n\n这里可以选择将机器人发布到那些平台，直接滚动到窗口最下方，选择勾选WebSDK，然后点击右上角发布。\n\n\n\n::: tip 提示\n这里我们还可以选择微信公众号的接入方式，这个也不复杂，不过可以等我们下次修改配置时，再回来改这里即可。\n\n:::\n\n\n### 获取Bot_Id\n\n发布后点击安装，即可获取你的WebSDK的机器人ID了\n\n\n\n复制bot_id后面的这串数字即可，（注意去掉引号）\n\n\n\n\n## 知识库\n\ncoze主页点击上方知识库标签，并点击右上角的创建知识库。\n\n\n\n在弹出的信息框中选择，文本格式，然后导入类型可以按照你的需求选择，这里的选择只是决定你的初始数据导入方式，后面我们可以任选别的方式来更新、修改这个知识库内容。\n\n\n\n例如，我选择在线数据导入，然后方式选择自动采集\n\n\n\n然后选择`批量添加`URL，这里直接粘贴你的网站URL跟地址、或者像我这样导入站点地图的地址即可。\n\n\n\n然后选择确认，系统将自动采集导入你的内容。\n\n后续你还可以使用上传本地文档、导入Notion文档、自定义导入（直接输入文本知识）等方式不断完善这个知识库。\n\n\n\n\n## 最后\n\n知识库配置好，记得回到个人空间下，找到你的机器人，点击他进入机器人配置页面。\n\n\n\n在知识这一栏目，添加你刚才配置的知识库\n\n\n\n关联知识库后，点击右上角的发布，从而然你的最新配置生效。\n\n\n\n就到这里了，尝试一下和你的机器人聊天吧，只要是你知识库内相关的内容，它都能给出更精准的回复。\n\n\n## 附\n\n如果有任何疑问欢迎留言询问。\n\n如果需要让AI直接对接到微信公众号，可以参考此文开通：\n\n[扣子 - 文档中心](https://www.coze.cn/docs/guides/wechat_subscription)\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-coze\n\n\n# Gemini AI 助手\n\nNotionNext 已内置一个轻量 AI 助手入口，可以把你的博客接到自己的 Gemini 免费额度。核心原则只有一个：`GOOGLE_GENERATIVE_AI_API_KEY` 只能放在服务端代理里，不能写进前端代码、Notion 配置表或 `NEXT_PUBLIC_*` 环境变量。\n\n## 适用场景\n\n- 想在博客右下角放一个 AI 助手。\n- 想让助手回答站点部署、主题配置、文章内容或常见问题。\n- 想复用 NotionNext 文档站同款 Gemini + Cloudflare Pages Function 方案。\n\n如果你已经在用 Coze、Dify、Chatbase，也可以继续用它们；这个方案更适合想自己控制模型 Key 和系统提示词的站点。\n\n## 部署代理\n\n在 Cloudflare Pages 项目中添加 Function，例如 `functions/api/docs-chat.ts`。NotionNext 官方文档站已经使用这个文件作为参考实现，它会在服务端读取 Gemini Key，并向前端暴露一个安全的聊天 API。\n\nCloudflare Pages 环境变量：\n\n```bash\nGOOGLE_GENERATIVE_AI_API_KEY=你的 Gemini API Key\nDOCS_CHAT_MODEL=gemini-flash-lite-latest\nDOCS_CHAT_CORS_ORIGINS=https://你的博客域名\nDOCS_CHAT_MAX_TOKENS=1200\n```\n\n`DOCS_CHAT_CORS_ORIGINS` 可以填写多个域名，用英文逗号分隔：\n\n```bash\nDOCS_CHAT_CORS_ORIGINS=https://blog.example.com,https://docs.example.com\n```\n\n本地或临时调试时可以先用 `*`，正式站点建议改成自己的域名。\n\n## 接入博客\n\n在博客站点的部署平台中添加：\n\n```bash\nNEXT_PUBLIC_DOCS_CHAT_API=https://你的文档站域名/api/docs-chat\nNEXT_PUBLIC_DOCS_CHAT_TITLE=AI 助手\nNEXT_PUBLIC_DOCS_CHAT_WELCOME=你好，我是本站 AI 助手。你可以问我文章、主题和部署问题。\n```\n\n重新部署后，页面右下角会出现 AI 助手按钮。\n\n也可以在 Notion 配置表中添加同名配置：\n\n| 配置 | 说明 |\n| ------------------- | ----------------------------------------------------------------- |\n| `DOCS_CHAT_API` | 聊天代理地址，例如 `https://notionnext.example.com/api/docs-chat` |\n| `DOCS_CHAT_TITLE` | 右下角按钮和窗口标题 |\n| `DOCS_CHAT_WELCOME` | 打开窗口后的第一句欢迎语 |\n\n## 让 AI 更懂你的网站\n\n最小可用版本只需要改服务端代理里的系统提示词。可以把这些信息写进去：\n\n- 你的站点定位和读者人群。\n- 常见入口，例如 `/about`、`/links`、`/archive`。\n- 希望 AI 优先回答的主题。\n- 不希望 AI 回答的范围。\n\n不要把用户私密信息、后台地址、密钥或未公开资料写进提示词。\n\n## 常见问题\n\n### 为什么不用 `NEXT_PUBLIC_GOOGLE_GENERATIVE_AI_API_KEY`？\n\n`NEXT_PUBLIC_*` 会被打包到浏览器里，任何访问者都能看到。Gemini Key 必须只放在 Cloudflare Pages、Vercel Function 或你自己的后端服务里。\n\n### 能不能直接复用 NotionNext 官方文档站的接口？\n\n不建议。官方接口的额度、提示词和跨域策略会按文档站维护。自己的博客应当部署自己的代理，并用自己的 Gemini 免费额度。\n\n### 和 Coze 方案怎么选？\n\n想最快搭建并使用 Coze 知识库，选 [Coze AI 聊天机器人](./notion-next-coze.md)。想自己控制 Gemini Key、模型和提示词，选这个方案。\n\n\n# Facebook聊天插件[已失效]\n> 迁移自：[Facebook聊天插件[已失效]](https://docs.tangly1024.com/article/notion-next-facebook-chat-plugn)\n> 发布日期：2023-8-4\n> 最后编辑：2024-9-21\n> 原栏目：🧷 外部扩展\n\n## 通知\n\n::: tip 提示\nFacebook 官方宣布：从 2024 年 5 月 9 日起，聊天插件将不再可用。\n\n可以选择使用[SaleSmartly 插件](/user-guide/plugins/notion-next-salesmatly-pulgin)作为页面聊天客服。\n:::\n\n\n## 文档\n\n以下是旧文档\n\n::: tip 提示\n最后更新域于0230906， 修改了原文档中第四点，获取PAGE_ID的方式；用原先方法获取的PAGE_ID，将导致聊天插件加载失败。\n:::\n\n::: tip 提示\nFaceBook 官方提供的聊天插件，可以方便您与访客实时聊天。\n:::\n\n> 全程大约10分钟，即可获得你的facebook插件。\n\n\n## 使用效果\n\n网页`右下角`弹出一个聊天框，用户可以与站长聊天，可以选择访客匿名、或登录Facebook的Messenger。\n\n\n\n\n站长在pc端的后台，或者app上都可以事实查看消息\n\n\n\n\n\n## 配置方式\n\n在NotionNext后台添加两个环境变量即可开启FBChat插件 ， 对应配置文件路径 [blog.config.js](https://github.com/notionnext-org/NotionNext/blob/70cc96d8f16e71abc8a21e777c4b984680ab5a4b/blog.config.js#L99-L100) 。\n\n这两个参数如何获得，请阅读下方的注册方法部分。\n\n\n## 开通方法\n\n注册并登录您的facebook账号\n\n[https://www.facebook.com/login/](https://www.facebook.com/login/)\n\n\n### 一、开通你的公共主页\n\nfacebook上创建一个公共主页很简单，按照步骤创建好主页后，即可获得你的`PAGE-ID`\n\n1. 点击页面左侧的公共主页\n\n\n1. 点击新建公共主页\n\n\n1. 填写资料完成注册\n填写完成后，会引导你完成一些基础的主页配置，自行选择配置即可。\n\n\n1. 如何获取`PAGE_ID`\n - 原先获取PAGE_ID的方式是错误的：\n~~完成后，按照提示返回主页。在你的公共主页地址栏URL中可以看到你的 ~~`~~PAGE_ID~~`~~；例如此处我的PAGE_ID 就是 ~~~~`100095411623547`~~\n\n错误截图
\n\n\n\n \n正确方式，在公共主页左侧点击`设置` → 点击`品牌内容`\n\n\n点击品牌内容后跳转的页面中就包含了页面ID PAGE_ID 参数，此处我的PAGE_ID是`100411122875215`\n\n\n1. 配置白名单\n为了让您的网站允许使用该公共主页的messenger功能，需要如下配置：\n点击右上角头像 → 设置与隐私 → 设置 ； 来到你的设置中心\n\n\n设置中心左侧点击新版公共主页体验\n\n在新版公共主页体验中，点击高级消息功能，并输入您的站点域名，点击添加即可。\n\n\n\n### 二、开通开发者权限\n\n完成此步骤，你就能获得自己的专属应用id，用此id可以调用facebook的功能\n\n1. 点击下方链接，申请开发者\n[https://developers.facebook.com/async/registration](https://developers.facebook.com/async/registration)\n\n1. 点击继续\n并按照要求验证手机号和邮箱\n\n\n1. 最后一步，完成注册\n这里选择你的属性，可以任选，不影响后续操作\n\n\n1. 创建一个应用\n注册完成自动会来到此开发者首页，您以后也可以随时访问 [https://developers.facebook.com/apps/](https://developers.facebook.com/apps/) 来查看您的应用。\n点击创建\n\n\n1. 配置应用\n选择facebook，点击继续\n\n填写完应用名字，直接点击创建应用即可。\n\n\n1. 获取`APP_ID`\n在应用首页即可看到\n\n\n\n## 完成\n\n至此，你已经获取到了`APP_ID`和`PAGE_ID`。\n\n在NotionNext后台添加两个环境变量即可开启FBChat插件 ， 对应配置文件路径 [blog.config.js](https://github.com/notionnext-org/NotionNext/blob/70cc96d8f16e71abc8a21e777c4b984680ab5a4b/blog.config.js#L99-L100) 。\n\n\n## 关于Facebook后台设置\n\n您可以在facebook后台设置这个聊天插件的预设回复，营业时间等等属性，这里不做赘述。\n\n配置入口：在您的facebook公共主页的设置菜单中，点击 [Meta Business Suite](https://business.facebook.com/) （商务套件）。\n\n\n\n\n### 商务后台页面\n\n除了上面的入口，你也可以直接访问右边链接 [https://business.facebook.com/](https://business.facebook.com/)\n\n后台可以查看所有和你聊天的信息，右上角可以配置对应的自动回复等功能，和微信公众号类似。\n\n\n\n同时，后台也支持您自定义插件的样式、位置、以及自动回复的内容~\n\n\n\n\n### 客户端\n\n这个功能使用的是Facebook的Messenger聊天工具，你可以下载一个Facebook、或者Messenger、或者和我一样下载一个 Business Suite (facebook的运营全家桶)。\n\n\n\n\n## 参考\n\n- 官方介绍\n[https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin](https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin)\n\n- React插件代码\n[https://github.com/Yoctol/react-messenger-customer-chat](https://github.com/Yoctol/react-messenger-customer-chat)\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-facebook-chat-plugn\n\n\n# Google广告营收插件\n> 迁移自：[Google广告营收插件](https://docs.tangly1024.com/article/notion-next-google-adsense)\n> 发布日期：2023-8-7\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n::: tip 提示\n通过网站上对接谷歌广告接口，可以让您的网站通过广告获取一笔美金收入。\n:::\n\n\n## 开通验证\n\n谷歌广告的配置开通有很多限制\n\n1. 申请开通谷歌[Adsense](https://www.google.com/adsense/)账号\n\n1. 验证站点所有权（必须）:请按照GoogleAdsense 后台的要求验证你的站点所有权\n比较推荐的做法是，把GoogleAdsense后台提供的 `ads.txt` 文件上传到您代码的 `public` 目录下。public目录专门用来放置网站的静态文件。例如您可以访问我的博客的ads验证文件 [https://blog.tangly1024.com/ads.txt](https://blog.tangly1024.com/ads.txt)\n\n\n## 配置方式\n\n1. 获取谷歌账号的 PUB_ID 填写到[站点配置](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/blog.config.js#L331)\n\n\n1. 在谷歌后台创建四种类型的广告单元，获取广告单元的ID\n\n\n1. 在[代码中配置](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/blog.config.js#L333-L336)广告单元ID\n\n\n\n### 旧版配置广告单元\n\n需要改动代码，而且不能嵌入到文章的指定段落。\n\n1. 在你需要引入特定自定义广告的地方添加组件代码 <AdSlot /> 即可 相关[AdSlot源码](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/components/GoogleAdsense.js#L51-L95)\n\n\n1. 相关使用案例 , [Simple主题首页](https://github.com/notionnext-org/NotionNext/blob/9197b3c6bbcefc02e253b6c13b8c0abdc9cdb84f/themes/simple/index.js#L74)加入了一个原生广告单元\n\n\n\n## 广告插件新版用法\n\n在 **4.4.0 **的版本后，支持您在notion中插入 **<ins/>** 这个代码，它将自动在网页中变成广告单元，哪里想变放哪里。\n\n文章内容支持嵌入广告：\n在想要变成广告的位置输入一行text元素，内容是\n\n```Plain Text\n<ins/>\n```\n\n即可替换成广告。如下图是我在notion中插入的文字<ins/>：\n\n\n\n在博客中广告会直接显示在文章中间的位置：\n\n\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-google-adsense\n\n\n# Live2D宠物插件\n> 迁移自：[Live2D宠物插件](https://docs.tangly1024.com/article/notion-next-plugin-live2d)\n> 发布日期：2023-6-30\n> 最后编辑：2024-9-7\n> 原栏目：🧷 外部扩展\n\n## 介绍\n\n《Live2D》是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用，缺点是Live 2D人物无法大幅度转身，开发商正设法让该技术可显示360度图像。\n\n开启Live2D宠物挂件后，你的页面的角落会出现这样一只可爱宠物，并且它会跟随着你的鼠标位置动起来。\n\n\n\n\n## 开启配置\n\n目前所有主题都支持宠物挂件。\n\n开启方式，源文件在[blog.config.js](https://github.com/notionnext-org/NotionNext/blob/8103e23aac7219789c77e412a1bc24dd2a2683b5/blog.config.js#L152C2-L158C1)中，默认是开状态\n\n```JavaScript\n// 悬浮挂件\n WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件\n WIDGET_PET_LINK:\n process.env.NEXT_PUBLIC_WIDGET_PET_LINK ||\n 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models\n WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题\n```\n\n您也可以直接通过设置环境变量`NEXT_PUBLIC_WIDGET_PET ` 的方式来控制开关\n\n\n## 切换模型\n\n`WIDGET_PET_LINK` 这个参数制定的是动画模型的加载地址，目前默认使用的是茶杯狗。\n\n::: tip 提示\n由于每个动画模型的高度不同，可能需要您在[代码中](https://github.com/notionnext-org/NotionNext/blob/8103e23aac7219789c77e412a1bc24dd2a2683b5/components/Live2D.js#L38)修改模型的高度height，否则会很怪异。\n\n```HTML\n<canvas id=\"live2d\" className='cursor-pointer' width=\"280\" **height=\"250\"** onClick={handleClick} alt='切换主题' title='切换主题' />\n```\n:::\n\n\n## 模型预览\n\n例如您想使用 `live2d-widget-model-chitose` 这个模型，则可以将`WIDGET_PET_LINK `的值设置为\n\n```Bash\nhttps://cdn.jsdelivr.net/npm/**live2d-widget-model-chitose**/assets/**chitose.model.json**\n```\n\n1. 黑猫\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-hijiki/assets/hijiki.model.json\n```\n\n\n1. 白猫\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-tororo/assets/tororo.model.json\n```\n\n\n1. chitose\n```Bash\nhttps://cdn.jsdelivr.net/npm/**live2d-widget-model-chitose**/assets/**chitose.model.json**\n```\n\n\n1. epsilon\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-epsilon2_1/assets/Epsilon2.1.model.json\n```\n\n\n1. gf\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-gf/assets/Gantzert_Felixander.model.json\n```\n\n\n1. haru\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-haru/01/assets/haru01.model.json\n```\n\n\n1. haru2\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-haru/02/assets/haru02.model.json\n```\n\n\n1. はると（haruto-遥人）\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-haruto/assets/haruto.model.json\n```\n\n\n1. hibiki\n高度需要调整为 `900`\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-hibiki/assets/hibiki.model.json\n```\n\n\n1. izumi\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-izumi/assets/izumi.model.json\n```\n\n\n1. koharu\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-koharu/assets/koharu.model.json\n```\n\n\n1. ni-j\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-ni-j/assets/ni-j.model.json\n```\n\n\n1. miku\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-miku/assets/miku.model.json\n```\n\n\n1. nico\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nico/assets/nico.model.json\n```\n\n\n1. nietzche\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nietzsche/assets/nietzche.model.json\n```\n\n\n1. nipsilon\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nipsilon/assets/nipsilon.model.json\n```\n\n\n1. nito\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nito/assets/nito.model.json\n```\n\n\n1. shizukui\n建议高度500\n```Bash\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-shizuku/assets/shizuku.model.json\n```\n\n\n1. tsumiki\n建议高度500\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-tsumiki/assets/tsumiki.model.json\n```\n\n\n1. unitychan\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-unitychan/assets/unitychan.model.json\n```\n\n\n1. 茶杯狗\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-wanko/assets/wanko.model.json\n```\n\n\n1. z16\n建议高度500\n```HTML\nhttps://cdn.jsdelivr.net/npm/live2d-widget-model-z16/assets/z16.model.json\n```\n\n\n\n## 更多模型预览\n\n访问以下链接，在线预览102个模型，需要全程科学访问。\n这些模型暂时没有cdn、用的github仓库链接，可能影响加载速度和国内访问，如果更好的cdn链接，欢迎提供分享。\n\n[Live2d Cubism 2](https://imuncle.github.io/live2d/)\n\n\n### 部分模型截图\n\n1. bilibili-22娘\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/22/model.default.json\n```\n\n\n1. bilibili-22娘长高版本\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/22_high/model.json\n```\n\n\n1. bilibili-33娘\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/33/model.default.json\n```\n\n\n1. bilibili-33娘长高版本\n```Bash\nhttps://raw.githubusercontent.com/imuncle/live2d/master/model/33_high/model.default.json\n```\n\n\n1. 布洛妮娅\n```Bash\nmodel/bronya/model.json\n```\n\n\n1. 布洛妮娅2\n```Bash\nmodel/bronya_1/model.json\n```\n\n\n1. はる（haru-春）\n```Bash\nmodel/haru/haru_01.model.json\n```\n\n\n1. 茵蒂克丝(index)\n```Bash\nmodel/index/model.json\n```\n\n\n1. izumi\n```Bash\nmodel/izumi/izumi.model.json\n```\n\n\n1. katou\n```Bash\nmodel/katou_01/katou_01.model.json\n```\n\n 1. liang\n```Bash\nmodel/liang/2.json\n```\n\n\n15. miku\n\n```Bash\nmodel/miku/miku.model.json\n```\n\n\n1. 小埋 murakumo\n```Bash\nmodel/miku/miku.model.json\n```\n\n\n1. 茶杯狗\n```Bash\nmodel/wanko/wanko.model.json\n```\n\n\n1. shizuku\n```Bash\nmodel/shizuku/shizuku.model.json\n```\n\n 1. pio\n```Bash\nmodel/Pio/model.json\n```\n\n 1. 血小板\n```Bash\nmodel/platelet/model.json\n```\n\n 1. 血小板 迷你\n```Bash\nmodel/platelet-2/model.json\n```\n\n 1. 蕾姆\n```Bash\nmodel/rem/model.json\n```\n\n 1. Tia\n```Bash\nmodel/Tia/index.json\n```\n\n 1. penchan\n```Bash\nmodel/penchan/penchan.model.json\n```\n\n 1. dollsfrontline\n```Bash\nmodel/dollsfrontline/95type_405/normal/model.json\n```\n\n 1. dollsfrontline-armor\n```Bash\nmodel/dollsfrontline/armor/model1.json\n```\n\n 1. dollsfromtline-command\n```Bash\nmodel/dollsfrontline/command/model1.json\n```\n\n 1. 当麻\n```Bash\nmodel/touma/touma.model.json\n```\n\n\n\n## 最后\n\n以上使用的是Cubism2版本的动画模型，您还可以体验一下以下Cubism3版本的动画模型。\n\n高版本的模型支持更丰富更细节的动画，结合AI对话接口，有很大的开发空间。这里有点超纲，仅供预览，暂时不做支持，在线预览网址：\n\n[Live2d Cubism 3](https://imuncle.github.io/live2d/live2d_3/)\n\n\n\n\n## 参考\n\n[https://github.com/imuncle/live2d](https://github.com/imuncle/live2d)\n\n[live2d-widget-models/packages at master · xiazeyu/live2d-widget-models](https://github.com/xiazeyu/live2d-widget-models/tree/master/packages)\n\nThe model library for live2d-widget.js. Contribute to xiazeyu/live2d-widget-models development by creating an account on GitHub.\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-plugin-live2d\n\n\n# SaleSmartly聊天插件\n> 迁移自：[SaleSmartly聊天插件](https://docs.tangly1024.com/article/notion-next-salesmatly-pulgin)\n> 发布日期：2024-5-10\n> 最后编辑：2024-9-21\n> 原栏目：🧷 外部扩展\n> 标签：NotionNext、插件、聊天\n> 摘要：NotionNext配置Salesmatly插件\n\n由于Facebook聊天插件停运，目前可以选择用SaleSmartly插件作为对话工具\n\n\n## 效果预览\n\n网页右下角的聊天图标，点击后可以与站长进行聊天通讯。\n\n\n\n\nSaleSmartly的免费版上线是一千个会话，即超过一千位客户咨询后，就不再收到新的消息，需要升级套餐后才可使用。\n\n\n## 安装方式\n\n1. 登录[SaleSmartly](https://share.salesmartly.com/gsuvhl)后台获取安装代码\n\n1. 配置在NotionNext中。\n\n安装代码获取方式：\n\n\n### 1.登录并配置SaleSmart\n\n访问SaleSmartly主页 注册登录。\n\n[你是否经常为了管理独立站的客户而烦恼？你是否想要提高你的销售转化率和客户满意度？你是否想要利用社交媒体的力量来扩大你的市场？ 如果你的答案是肯定的，那么我强烈推荐你使用SaleSmartly，它会让你的独立站事业更加成功，让你的客户更加满意： -聚合在线聊天（livechat）、WhatsApp、Facebook Messenger、Instagram、Telegram、Line、Email、Wechat -AI机器人自动回复常见问题 -营销自动化发送个性化消息 -客服自动分配会话等 还有免费试用版，有需要的可以了解一下这款全渠道客户聊天工具](https://share.salesmartly.com/gsuvhl)\n\n选择介入网页聊天插件\n\n\n\n点击新人指引教程，选择添加聊天插件到您的网站，并点击配置插件\n\n\n\n在这里可以配置你的聊天插件的名称以及一些预设消息\n\n\n\n为了插件能正常聊天，这里需要实名认证\n\n\n\n\n### 2. 获取安装代码\n\n然后点击复制安装代码\n\n\n\n代码会自动复制到您的剪贴板中，格式如下\n\n```HTML\n<script src=\"**https://assets.salesmartly.com/js/xxxxxxx.js**\"></script>\n```\n\n将红色的链接部分配置到Notion_CONFIG中，添加一个CUSTOM_EXTERNAL_JS配置，配置结果如下：\n\n\n\n直接我的这行配置到notion中，再将url改成你的即可：\n\n::: tip 提示\n这里**配置值**是需要用中括号加英文双引号拼起来[””]，它代表一串配置数组，支持多个用英文逗号隔开。例如[\"https://1.js\",\"https://2.js\",\"https://3.js\"]\n\n直接在Notion中手动输入这项配置时，Notion会自动将英文的双引号转成中文，导致软件报错，因此建议复制我这里写好的格式，再将url替换成您自己的。\n:::\n\n\n~~旧版配置方法（废弃）~~
\n\n将上述脚本中的链接部分（下划线加粗标红部分）复制出来在浏览器中打开，可以看到一段代码\n\n全选并复制这里的代码内容\n\n打开Notion模板中的的配置中心，将配置粘贴到 GLOBAL_JS 配置项即可。\n\n\n \n\n\n## 附\n\n在Salesmart后台主页，可以选择使用不同的终端用于接收回复消息，例如绑定小程序后，您可以在小程序中，接收或回复用户的消息。\n\n\n\n\n## 其它聊天插件选择\n\n你可以任意查找网上的其它插件进行安装，例如参考文档中的[TIDIO插件安装](/user-guide/plugins/notion-next-tidio)或者使用[Chatway聊天插件](https://go.chatway.app/)，他们与SaleSmartly的安装方式基本一致。例如Chatway插件配置也是添加一个脚本地址即可，示例如下：\n\n\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-salesmatly-pulgin\n\n\n# TIDIO聊天插件\n> 迁移自：[TIDIO聊天插件](https://docs.tangly1024.com/article/notion-next-tidio)\n> 发布日期：2024-9-21\n> 最后编辑：2024-9-21\n> 原栏目：🧷 外部扩展\n\n## 效果\n\n网页右下角会悬挂一个聊天按钮，用户可以直接发送消息对话，你可以在你的TIDIO客户端收到消息并进行回复，和SaleSmartly的功能基本一直，可以选择安装任意一种。\n\n\n\nSaleSmartly的免费版上限是每月50个会话，超出后需要升级套餐后才可使用。\n\n\n## 安装方法\n\n和SaleSmartly安装方式几乎一致。\n\n1. 登录TIDIO后台\n[Accelerate Your Growth With #1 AI Customer Service | Tidio](https://www.tidio.com/)\n\nConvert more leads, provide stellar support, and boost your revenue with Tidio’s game-changing AI-driven customer service solution.\n\n1. 按照引导获取你的手动安装代码\n首次注册后，TIDIO会自动引导你获取安装代码，这是安装代码格式：\n```JavaScript\n<script src=\"**//code.tidio.co/xxxxxx.js**\" async></script>\n```\n如果你已经配置好，可以在设置→ Installation → Manual install 中找到你的安装代码\n\n\n\n## 配置\n\n将上述安装代码中的URL部分复制出来，即这段：**//code.tidio.co/xxxxxx.js**\n\n配置到NotionNext中,添加一个配置 CUSTOM_EXTERNAL_JS，参考如下\n\n\n\n可以直接复制我的这个配置，并将URL替换成你的。\n\n## 原文链接\n\nhttps://docs.tangly1024.com/article/notion-next-tidio\n\n\n# Plugins Skill\n\nPath: `docs/user-guide/plugins/overview.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/tangly1024/NotionNext/HEAD/docs/user-guide/plugins/overview.md)\n"}