🎯 目标

💰 成本

• 价格: 9-10元 / 5万字符

• 特点: 同一篇文章生成一次后永久缓存,不再消耗额度

• 地址：洪墨AI - 网站AI摘要、知识库AI客服和搜索插件平台

  洪墨AI - 网站AI摘要、知识库AI客服和搜索插件平台

  

为什么选择 NotionNext?

• 使用 Notion 数据库管理文章

• 支持多种主题(本文使用 Heo 主题)

• 页面结构特殊,使用 .notion-text 类而非标准 HTML

🫠 配置历程

1. NotionNext 内置读取其页面结构与官方前端方式不适配

• 问题: NotionNext 确实内置了 TianliGPT 组件,但使用的是官方前端 JS 方案,完全不兼容 NotionNext 的页面结构。

2. 我尝试重写官方的 JS 内部方法

• 官方 JS 使用立即执行函数 (IIFE) 封装

• getTitleAndContent 方法作用域是私有的

• tianliGPT 对象是局部变量

• 外部无法访问和修改

这样无法覆盖内部方法

3. 完全放弃官方 JS 自己手动实现

3.1 手动读取 NotionNext 内容

3.2 手动调用 TianliGPT API

3.3 手动插入 DOM 元素

3.4 浏览器控制台测试

4. 在后台进行域名绑定

• 访问 TianliGPT 后台

• 登录后台

• 绑定域名:
• 生产环境: your.example.com

❔ 重写思路

1. 架构设计

2. 关键点

2.1 内容适配

2.2 主题切换

2.3 打字机效果

2.4 加载动画

3. 环境变量

4. 插件配置

5. 组件 TianliGPT.js

6. 调试

📎 参考资料

• 张洪Heo如何让博客支持AI摘要，使用TianliGPT自动生成文章的AI摘要
  

  如何让博客支持AI摘要，使用TianliGPT自动生成文章的AI摘要

  最近研究AI在博客和文章领域的应用，发现AI摘要是一个很不错的方向，研究了很久给搞出来了。在这篇文章中，我将帮助大家如何让你的博客接入TianliGPT。 了解文章摘要的升级版PostChat，支持知识库对话、无限摘要额度 访问项目Github仓库 随机访问已经支持TianliGPT的网站 效果预览 什么是文章摘要文章摘要是一个专业的文字摘要生成工具，你可以将需要提取摘要的文本内容发送给Tianl

  张洪Heo

• 使用文档 | 洪墨摘要AI

  使用文档 | 洪墨摘要AI

  文章摘要生成工具

  

• NotionNext帮助手册NotionNext帮助手册 | Notion开源、免费、快速建站
  

  NotionNext帮助手册 | Notion开源、免费、快速建站

  Notion开源、免费、快速建站

  NotionNext帮助手册