嵌入组件base64内联加载完整指南：Ontology Playground离线场景一步搞定
【免费下载链接】Ontology-PlaygroundFree, open-source web app for learning about ontologies and Microsoft Fabric IQ. Explore a catalogue of pre-built ontologies, design your own visually, export as RDF/XML, and share interactive diagrams. Zero backend, fully static.项目地址: https://gitcode.com/GitHub_Trending/on/Ontology-Playground
Ontology Playground是一个免费开源的本体（Ontology）学习平台，可以可视化设计数据模型并导出 RDF。它的嵌入组件（Embed Widget）让你把交互式本体图嵌入任意网页，而base64 内联加载正是它三种数据源中最适合离线场景的方案——把本体 JSON 编码进 HTML 属性，无需任何网络请求即可渲染完整图谱。
嵌入组件的 3 种加载方式
嵌入组件支持三种数据源，二选一即可（详见 docs/embed-guide.md）：
| 方式 | 属性 | 是否依赖网络 | 适用场景 |
|---|---|---|---|
| 目录加载 | data-catalogue-id | 需要（拉取 catalogue.json） | 展示官方示例本体 |
| URL 加载 | data-ontology-url | 需要（拉取 RDF/JSON 文件） | 数据托管在服务器 |
| base64 内联 | data-ontology-inline | 完全不需要 | 离线、内网、静态页 |
三种方式的优先级逻辑写在 src/components/EmbedWidget.tsx：只要指定了data-ontology-inline，组件就直接解码，跳过一切网络请求。
base64 内联加载原理
原理很简单，分两步：
- 编码：把你的本体 JSON 用
base64编码成一串纯 ASCII 字符； - 解码：浏览器端组件调用
atob()还原出 JSON，再解析渲染（见 src/components/EmbedWidget.tsx#L85-L88）。
// 编码本体 JSON（在浏览器控制台或 Node 中执行） const inline = btoa(JSON.stringify(myOntology));本体 JSON 的结构很简单：name、description、entityTypes（实体）和relationships（关系），完整类型定义见 src/data/ontology.ts。
内联嵌入快速使用步骤
把编码结果填入data-ontology-inline属性，嵌入一个空 div，再引入组件脚本：
<div class="ontology-embed" contenteditable="false">【免费下载链接】Ontology-PlaygroundFree, open-source web app for learning about ontologies and Microsoft Fabric IQ. Explore a catalogue of pre-built ontologies, design your own visually, export as RDF/XML, and share interactive diagrams. Zero backend, fully static.![]()
项目地址: https://gitcode.com/GitHub_Trending/on/Ontology-Playground创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
