template标签适合预存纯净HTML骨架，内容以DocumentFragment形式惰性存储、不渲染不执行，须通过.content访问并克隆后插入DOM，结构需与真实DOM严格对齐以避免布局偏移。
必须用 .content 访问内部结构
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
结构要与真实 DOM 严格对齐
骨架不是装饰，而是渲染占位符。若真实页面中有一个带 flex 布局的卡片，骨架里也得保留相同层级、class 和 display 属性，否则 hydration 或 JS 替换时容易触发 layout shift。常见做法：
- 保留所有容器元素（、
、 ），仅替换文字为 .skeleton-text，图片为 .skeleton-image； - 不删减节点，避免后续 diff 成本升高；
- 宽高、aspect-ratio、padding/margin 均照搬真实样式，确保尺寸一致。
服务端输出时需注意“空壳”问题
SSR 或静态生成时，会被原样输出为 HTML 字符串，浏览器不会主动处理它。这意味着：- 客户端 JS 必须显式接管，比如在 DOMContentLoaded 后读取并挂载；
- 不要指望它“自动生效”，也不要在服务端尝试注入数据；
- 若用 Next.js、Nuxt 等框架，建议将 template 放在客户端专属组件中，避开 SSR 混淆；
- 避免把 直接写在
内部——浏览器会把它提升到 table 外，破坏语义和结构。
搭配骨架逻辑更高效
单纯存结构还不够，要让骨架真正“可用”，推荐组合使用：- 用 template 存纯 HTML 片段（无事件、无内联 script、无 src/href）；
- 用 JS 控制何时克隆、填充、插入，例如 fetch 前显示，响应后 replaceWith；
- 批量插入多个骨架项时，先用 DocumentFragment 收集所有克隆节点，再一次性 append，减少回流；
- 需动态绑定数据时，只操作 textContent、dataset 或 classList，别依赖 innerHTML 重写。
