思源笔记 HTML 嵌入3 个能点、能看的玩法【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan上周整理周会纪要我总想给行动项加一排点一下就算完成的勾选框纯文本待办做不到。翻了翻文档才发现思源笔记 HTML 嵌入 这条路是通的——在笔记里直接写 HTML编辑器会把它渲染成能点的界面而不是显示成一堆源码。这篇文章把我实际试过的路径记下来从最简卡片到几个真正好用的交互以及我踩过的坑。先弄懂它是什么写在笔记里的活代码一句话在文档里直接写标准 HTML 和 CSS编辑器会把它们渲染成真实元素而不是显示源码。类比一下它相当于给静态 Markdown 开了一扇小窗——窗里可以放按钮、卡片、折叠面板这类轻交互内容所见即所得。边界要划清楚。适合临时美化、单页展示、点按反馈这类不需要记住状态的小需求把第三方页面嵌进来当快捷入口。不适合需要持久保存数据、跨笔记共享状态的应用。这些需求请用原生功能块HTML 块里的改动一旦刷新就回到你写的样子它不是数据库。粘贴、看到、改完三步走通最省事的路径是粘贴 → 渲染 → 微调把代码直接输入或粘贴进文档编辑器识别后自动把它当作独立内容块渲染改几个字就即时生效不用保存也不用重新构建。先拿一个最简卡片开刀div stylebackground:#f6f7f9;padding:14px 16px;border-radius:8px;max-width:420px; strong周会纪要 · 行动项/strong p stylemargin:8px 0 0;color:#555;负责人小李 截止本周五/p button onclickthis.textContent已确认 stylemargin-top:10px;padding:4px 12px;border:none;border-radius:4px;background:#4a6fa5;color:#fff;cursor:pointer;确认收到/button /div粘贴完成后文档里会出现一块带浅灰底、圆角阴影的卡片按钮可以点文字可以直接编辑。我试了一下改background里的颜色值后卡片底色立刻变化不用做任何额外操作。如果要把第三方服务嵌进来思路一样SiYuan 里有专门的嵌入块语法指向另一篇只放 iframe 的笔记即可。这样第三方内容就成了一个可管理、可移动、可删除的块iframe srchttps://example.com/embed width100% height320 styleborder:0;border-radius:8px;/iframe三个值得试的玩法能点的待办清单场景周会行动项希望勾选后有直观反馈但不想为此搭一套应用。核心是一行内联事件勾选即划线、取消即还原刷新后回到未勾状态够用就行。ul stylelist-style:none;padding:0;font-size:14px;line-height:2; liinput typecheckbox oninputthis.nextElementSibling.style.textDecorationthis.checked?line-through:none;this.nextElementSibling.style.opacitythis.checked?.55:1 label stylemargin-left:8px;cursor:pointer;输出接口文档初稿/label/li liinput typecheckbox oninputthis.nextElementSibling.style.textDecorationthis.checked?line-through:none;this.nextElementSibling.style.opacitythis.checked?.55:1 label stylemargin-left:8px;cursor:pointer;同步进度给测试组/label/li /ul效果点击文字前的方框对应条目划线并变淡视觉上就是已完成无需任何外部依赖。一排数据速览卡场景月报开头想横着摆几个关键指标原生表格做不到卡片式布局。这段纯 CSS flex 布局思源笔记自定义样式 到这一层面完全够用div styledisplay:flex;gap:10px; div styleflex:1;background:#eef4fb;border-radius:8px;padding:12px;strong stylefont-size:20px;128/strongspan stylecolor:#555;本月新增笔记/span/div div styleflex:1;background:#eefbf0;border-radius:8px;padding:12px;strong stylefont-size:20px;36/strongspan stylecolor:#555;完成待办/span/div div styleflex:1;background:#fbf3ee;border-radius:8px;padding:12px;strong stylefont-size:20px;7h/strongspan stylecolor:#555;日均专注/span/div /div效果三张并排小卡随窗口宽度自适应伸缩换数字、换配色都是改几个值的事。不写 JS 的折叠面板场景长文档里的常见问题、补充说明希望默认收起。这个思路最讨巧——details是浏览器原生折叠元素零 JavaScript兼容性反而最好details styleborder:1px solid #ddd;border-radius:8px;padding:10px 14px; summary stylecursor:pointer;font-weight:600;常见问题嵌入的第三方内容离线还能看吗/summary p stylemargin:8px 0 0;color:#444;依赖网络的 iframe 内容在断网时会显示空白本地样式卡片不受影响。/p /details效果点标题行展开/收起整段说明适合做 SiYuan 交互笔记 里的延伸阅读或 FAQ 区块。它是怎么工作的不用看代码也能说清核心思路。思源笔记把每段 HTML 都当作一个独立内容块来管理块有自己的身份和可编辑属性这一点和标题、表格块没有本质区别。渲染时编辑器先按块类型分发嵌入块会先套上统一的容器样式再执行后续管线——代码高亮、公式渲染、块属性视图依次处理最后才把内容挂进页面。顺序上是先包裹、后渲染好处是嵌入块内部如果有代码或公式也能被后续管线正确识别代价是它遵循块的通用规则不能为某一段 HTML 单独定制渲染逻辑。另一个值得知道的细节嵌入块可以嵌套最多四层再深就停止递归这是防止循环引用把编辑器卡死的保险丝。想追细节的话延伸阅读 app/src/protyle/render/blockRender.ts它负责整条嵌入渲染链路。容易踩的坑 推荐做法问题两段 HTML 里的按钮串台。原因同页多块 HTML 若用了相同id事件和样式都会互相命中。 解法给不同块的元素 id 加块主题前缀比如faq1-title、faq2-title样式尽量内联少依赖全局 id 选择器。问题嵌了三个 iframe 之后长文档开始卡。原因每个 iframe 都是独立文档加载、滚动都会吃资源。 解法同一笔记里 iframe 控制在两三个以内重内容拆到独立笔记再用嵌入块引过来。笔记嵌入第三方内容 时优先选轻的静态页。问题桌面端好好的样式手机上看走样。原因移动端 WebView 对部分 CSS 特性的支持不一致尤其是较新的布局属性。 解法核心内容降级为纯样式展示交互留给桌面端关键数据另存一份表格块保证任何端都读得到。问题导出成 PDF 或 Markdown 后按钮不能点了。原因交互能力只存在于编辑器运行时环境导出产物只保留结构和样式。 解法HTML 块只当展示层真正重要的数据放表格或原生块里导出不会丢。收尾先拿临时文档把交互调顺再贴进正式笔记——比直接在生产环境试错省事得多。更多细节可以看官方 API 文档 docs/API.zh-CN.md以及仓库内的更新日志 CHANGELOG.md。【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
思源笔记 HTML 嵌入：3 个能点、能看的玩法
思源笔记 HTML 嵌入3 个能点、能看的玩法【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan上周整理周会纪要我总想给行动项加一排点一下就算完成的勾选框纯文本待办做不到。翻了翻文档才发现思源笔记 HTML 嵌入 这条路是通的——在笔记里直接写 HTML编辑器会把它渲染成能点的界面而不是显示成一堆源码。这篇文章把我实际试过的路径记下来从最简卡片到几个真正好用的交互以及我踩过的坑。先弄懂它是什么写在笔记里的活代码一句话在文档里直接写标准 HTML 和 CSS编辑器会把它们渲染成真实元素而不是显示源码。类比一下它相当于给静态 Markdown 开了一扇小窗——窗里可以放按钮、卡片、折叠面板这类轻交互内容所见即所得。边界要划清楚。适合临时美化、单页展示、点按反馈这类不需要记住状态的小需求把第三方页面嵌进来当快捷入口。不适合需要持久保存数据、跨笔记共享状态的应用。这些需求请用原生功能块HTML 块里的改动一旦刷新就回到你写的样子它不是数据库。粘贴、看到、改完三步走通最省事的路径是粘贴 → 渲染 → 微调把代码直接输入或粘贴进文档编辑器识别后自动把它当作独立内容块渲染改几个字就即时生效不用保存也不用重新构建。先拿一个最简卡片开刀div stylebackground:#f6f7f9;padding:14px 16px;border-radius:8px;max-width:420px; strong周会纪要 · 行动项/strong p stylemargin:8px 0 0;color:#555;负责人小李 截止本周五/p button onclickthis.textContent已确认 stylemargin-top:10px;padding:4px 12px;border:none;border-radius:4px;background:#4a6fa5;color:#fff;cursor:pointer;确认收到/button /div粘贴完成后文档里会出现一块带浅灰底、圆角阴影的卡片按钮可以点文字可以直接编辑。我试了一下改background里的颜色值后卡片底色立刻变化不用做任何额外操作。如果要把第三方服务嵌进来思路一样SiYuan 里有专门的嵌入块语法指向另一篇只放 iframe 的笔记即可。这样第三方内容就成了一个可管理、可移动、可删除的块iframe srchttps://example.com/embed width100% height320 styleborder:0;border-radius:8px;/iframe三个值得试的玩法能点的待办清单场景周会行动项希望勾选后有直观反馈但不想为此搭一套应用。核心是一行内联事件勾选即划线、取消即还原刷新后回到未勾状态够用就行。ul stylelist-style:none;padding:0;font-size:14px;line-height:2; liinput typecheckbox oninputthis.nextElementSibling.style.textDecorationthis.checked?line-through:none;this.nextElementSibling.style.opacitythis.checked?.55:1 label stylemargin-left:8px;cursor:pointer;输出接口文档初稿/label/li liinput typecheckbox oninputthis.nextElementSibling.style.textDecorationthis.checked?line-through:none;this.nextElementSibling.style.opacitythis.checked?.55:1 label stylemargin-left:8px;cursor:pointer;同步进度给测试组/label/li /ul效果点击文字前的方框对应条目划线并变淡视觉上就是已完成无需任何外部依赖。一排数据速览卡场景月报开头想横着摆几个关键指标原生表格做不到卡片式布局。这段纯 CSS flex 布局思源笔记自定义样式 到这一层面完全够用div styledisplay:flex;gap:10px; div styleflex:1;background:#eef4fb;border-radius:8px;padding:12px;strong stylefont-size:20px;128/strongspan stylecolor:#555;本月新增笔记/span/div div styleflex:1;background:#eefbf0;border-radius:8px;padding:12px;strong stylefont-size:20px;36/strongspan stylecolor:#555;完成待办/span/div div styleflex:1;background:#fbf3ee;border-radius:8px;padding:12px;strong stylefont-size:20px;7h/strongspan stylecolor:#555;日均专注/span/div /div效果三张并排小卡随窗口宽度自适应伸缩换数字、换配色都是改几个值的事。不写 JS 的折叠面板场景长文档里的常见问题、补充说明希望默认收起。这个思路最讨巧——details是浏览器原生折叠元素零 JavaScript兼容性反而最好details styleborder:1px solid #ddd;border-radius:8px;padding:10px 14px; summary stylecursor:pointer;font-weight:600;常见问题嵌入的第三方内容离线还能看吗/summary p stylemargin:8px 0 0;color:#444;依赖网络的 iframe 内容在断网时会显示空白本地样式卡片不受影响。/p /details效果点标题行展开/收起整段说明适合做 SiYuan 交互笔记 里的延伸阅读或 FAQ 区块。它是怎么工作的不用看代码也能说清核心思路。思源笔记把每段 HTML 都当作一个独立内容块来管理块有自己的身份和可编辑属性这一点和标题、表格块没有本质区别。渲染时编辑器先按块类型分发嵌入块会先套上统一的容器样式再执行后续管线——代码高亮、公式渲染、块属性视图依次处理最后才把内容挂进页面。顺序上是先包裹、后渲染好处是嵌入块内部如果有代码或公式也能被后续管线正确识别代价是它遵循块的通用规则不能为某一段 HTML 单独定制渲染逻辑。另一个值得知道的细节嵌入块可以嵌套最多四层再深就停止递归这是防止循环引用把编辑器卡死的保险丝。想追细节的话延伸阅读 app/src/protyle/render/blockRender.ts它负责整条嵌入渲染链路。容易踩的坑 推荐做法问题两段 HTML 里的按钮串台。原因同页多块 HTML 若用了相同id事件和样式都会互相命中。 解法给不同块的元素 id 加块主题前缀比如faq1-title、faq2-title样式尽量内联少依赖全局 id 选择器。问题嵌了三个 iframe 之后长文档开始卡。原因每个 iframe 都是独立文档加载、滚动都会吃资源。 解法同一笔记里 iframe 控制在两三个以内重内容拆到独立笔记再用嵌入块引过来。笔记嵌入第三方内容 时优先选轻的静态页。问题桌面端好好的样式手机上看走样。原因移动端 WebView 对部分 CSS 特性的支持不一致尤其是较新的布局属性。 解法核心内容降级为纯样式展示交互留给桌面端关键数据另存一份表格块保证任何端都读得到。问题导出成 PDF 或 Markdown 后按钮不能点了。原因交互能力只存在于编辑器运行时环境导出产物只保留结构和样式。 解法HTML 块只当展示层真正重要的数据放表格或原生块里导出不会丢。收尾先拿临时文档把交互调顺再贴进正式笔记——比直接在生产环境试错省事得多。更多细节可以看官方 API 文档 docs/API.zh-CN.md以及仓库内的更新日志 CHANGELOG.md。【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
