讲师中心 微信公众号
AI工具推荐 视频效率加速

ShareGPT对话的嵌入和引用方法:在网站和文档中嵌入共享对话的技术实现

夏芳姑娘_8934

夏芳姑娘_8934

发布时间:2026-05-24 10:13:47

|

1013人浏览过

|

来源于php中文网

原创

可通过五种方式将ShareGPT对话嵌入自有网站或文档:一、官方iframe嵌入;二、调用API获取JSON前端渲染;三、导出为HTML静态文件内联引用;四、在Google Docs/Office中手动格式化粘贴;五、用Markdown语法内联关键片段。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

sharegpt对话的嵌入和引用方法:在网站和文档中嵌入共享对话的技术实现

如果您已获得一个ShareGPT生成的对话分享链接(如 https://sharegpt.com/c/abc123),但希望将该对话直接呈现在自有网站或文档中,而非仅提供跳转链接,则需通过技术手段实现内容嵌入与引用。以下是实现此目标的具体方法:

一、使用ShareGPT官方提供的iframe嵌入代码

ShareGPT在对话页面提供原生嵌入支持,其生成的HTML代码可直接插入网页源码中,实现响应式渲染。该方式无需后端处理,兼容主流静态站点与CMS系统。

1、打开ShareGPT对话页面(例如 https://sharegpt.com/c/abc123)。

2、点击右上角“⋯”按钮,选择“Embed this chat”选项。

3、在弹出窗口中确认尺寸设置(默认为600×800像素),点击“Copy embed code”。

4、将复制的<iframe>代码粘贴至目标网页HTML的适当位置,如文章正文区域内。

5、保存并刷新网页,对话将以交互式卡片形式显示,支持滚动、代码块高亮及角色区分样式。

二、通过ShareGPT API获取JSON数据并前端渲染

该方法适用于需要完全自定义样式、集成到已有UI框架(如React/Vue)或规避第三方CDN依赖的场景。ShareGPT公开API返回结构化对话数据,便于本地解析与安全渲染。

1、构造GET请求:向 https://sharegpt.com/api/v1/conversations/abc123 发起HTTP请求(其中abc123为对话ID)。

2、在请求头中添加 Accept: application/json,确保返回纯JSON格式。

3、接收响应后,解析messages数组,每项含role(user/assistant)、content(Markdown字符串)和timestamp字段。

4、使用客户端Markdown解析器(如marked.js或remark)将content转换为HTML,并按role应用不同CSS类(如message-user与message-assistant)。

5、将渲染后的DOM节点注入目标容器,例如document.getElementById('chat-embed')。

三、导出为HTML静态文件并内联引用

当目标环境禁止外部网络请求(如企业内网文档系统、离线PDF生成流程),可将ShareGPT对话快照保存为独立HTML文件,再以<iframe src="local-chat.html">或服务器端include方式引入。

1、在ShareGPT对话页按Command+Shift+P(Mac)或Ctrl+Shift+P(Windows)打开浏览器打印预览。

2、在打印设置中选择“另存为HTML”,取消勾选“背景图形”以减小体积。

3、保存文件为sharegpt-abc123.html,并将其上传至与主文档同域的静态资源目录。

4、在目标网页中插入<iframe src="/assets/sharegpt-abc123.html" width="100%" height="600" frameborder="0"></iframe>。

5、若需适配深色模式,可在该HTML文件内部添加@media (prefers-color-scheme: dark)样式规则。

四、在Google Docs或Office文档中引用对话快照

对于非网页类文档,无法直接执行JavaScript或加载远程iframe,须采用静态内容嵌入策略,确保跨平台可读性与格式稳定性。

1、访问ShareGPT对话页,全选对话文本(含时间戳与角色标识),按Command+C复制。

2、在Google Docs中,点击菜单栏“格式 → 清除格式”,再粘贴以去除原始网页样式干扰。

3、手动为每段添加标题样式:用户发言设为“正文”,AI回复设为“引用文字”,并用【用户】/【助手】前缀标记角色。

4、对代码块部分,切换至“插入 → 代码块”,选择对应语言类型,确保缩进与语法高亮保留。

5、在文档末尾插入脚注:来源:ShareGPT对话 ID abc123,原始链接 https://sharegpt.com/c/abc123。

五、通过Markdown语法内联引用关键片段

当仅需在技术文档、README或博客正文中引用对话中的某一轮问答时,可提取核心内容并以语义化Markdown结构呈现,兼顾可读性与轻量性。

1、定位需引用的轮次,在ShareGPT页面中单独复制该条消息的纯文本内容。

2、在目标文档中使用块引用语法:> 【用户】如何微调Llama3模型?后换行,再写> 【助手】建议使用LoRA方法,配合transformers + peft库...。

3、若含代码,使用围栏代码块:```python后粘贴代码,结尾用```闭合。

4、在引用段落下方添加超链接标注:▲ 引自 ShareGPT 对话 c/abc123 第4轮。

5、如文档支持HTML输出(如Hugo/Jekyll),可将上述Markdown嵌入<details><summary>展开查看完整对话</summary>...</details>结构中。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

相关专题

更多
Notion AI全功能使用教程
Notion AI全功能使用教程

本专题围绕 Notion AI 基础入门展开,涵盖注册登录、界面操作、核心功能使用及常见应用技巧,帮助新手快速熟悉 Notion AI 的内容整理、智能创作与协同办公能力,轻松提升学习与工作效率。

369

2026.05.27

Notion AI智能写作实操指南
Notion AI智能写作实操指南

本专题聚焦 Notion AI 智能写作功能,涵盖 AI 辅助写作、内容生成、文案润色、多语言翻译等实用技巧,帮助用户快速提升文章创作、办公整理与内容输出效率,轻松完成多场景写作需求。

348

2026.05.27

Notion AI项目管理零基础入门
Notion AI项目管理零基础入门

本专题聚焦Notion AI项目管理,系统整理项目看板搭建、任务分配、进度追踪及团队协作等核心内容,助力用户高效管理项目全流程。适合初学者快速掌握Notion AI在项目管理中的实用技巧。

319

2026.05.27

Notion AI全功能使用教程
Notion AI全功能使用教程

本专题围绕 Notion AI 基础入门展开,涵盖注册登录、界面操作、核心功能使用及常见应用技巧,帮助新手快速熟悉 Notion AI 的内容整理、智能创作与协同办公能力,轻松提升学习与工作效率。

369

2026.05.27

Notion AI智能写作实操指南
Notion AI智能写作实操指南

本专题聚焦 Notion AI 智能写作功能,涵盖 AI 辅助写作、内容生成、文案润色、多语言翻译等实用技巧,帮助用户快速提升文章创作、办公整理与内容输出效率,轻松完成多场景写作需求。

348

2026.05.27

Notion AI项目管理零基础入门
Notion AI项目管理零基础入门

本专题聚焦Notion AI项目管理,系统整理项目看板搭建、任务分配、进度追踪及团队协作等核心内容,助力用户高效管理项目全流程。适合初学者快速掌握Notion AI在项目管理中的实用技巧。

319

2026.05.27

WorkBuddy核心功能与实操模式
WorkBuddy核心功能与实操模式

深入探索WorkBuddy的强大功能。本专题包含智能问答、文档处理、会议纪要生成、日程管理、任务协作等核心模块的操作指南与最佳实践。通过图文并茂的教程,助您快速上手,最大化发挥WorkBuddy的办公效能。

602

2026.04.09

PixTV官网入口地址合集
PixTV官网入口地址合集

本专题汇总了 PixTV AI 一站式视频创作平台的官方入口与使用教程。无需下载软件,浏览器直接访问即可使用。平台将剧本、图像、视频、声音与剪辑整合在“无限画布”中,接入 GPT Image 2.5、Seedance 2.5 等头部模型。本专题整理了从新建画布、角色锚定、分镜拆分到视频生成与导出的完整操作指南,助你快速上手 AI 短剧与漫剧创作。

0

2026.10.10

Kratos框架HTTP与gRPC服务开发教程
Kratos框架HTTP与gRPC服务开发教程

本专题围绕Kratos框架双协议服务开发,涵盖HTTP路由与处理器编写、参数获取、gRPC服务实现与客户端调用、metadata上下文传递、encoding编解码注册、统一响应封装、超时控制与流式响应实现方法。

0

2026.10.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn