嵌入组件base64内联加载完整指南:Ontology Playground离线场景一步搞定

发布时间:2026/9/18 23:04:05
嵌入组件base64内联加载完整指南:Ontology Playground离线场景一步搞定 嵌入组件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-PlaygroundOntology 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 classontology-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),仅供参考