开源备忘录嵌入组件
随时随地分享你的想法 任何地方
将 Memos 帖子转换为精美、可移植的卡片，适用于文档、更新日志、营销页面和产品界面。
Iframe 嵌入React 组件Web Component主题预设自动调整大小
3
集成方式
5
主题预设
< 5 分钟
复制粘贴即可上手
几分钟内复制一个可用的嵌入组件
从托管的演练场开始，调整输出效果，然后与团队分享精确的配置。
Iframe 代码片段支持自动调整大小
<iframe
src="https://your-site.com/embed/1?theme=midnight"
title="memos-embed"
loading="lazy"
></iframe>为什么团队一直打开演练场
- • 并排比较 Iframe、Web Component 和 React 输出。
- • 通过 URL 分享完整配置，方便异步评审。
- • 复制生产就绪的代码片段，无需手动编写参数。
选择适合你技术栈的集成方式
先用简单的 Iframe 开始，需要更精细控制时再升级到 Web Component 或 React 封装。
Iframe
文档、CMS 页面和无需构建的环境
一次部署嵌入路由，在任何地方插入响应式 Iframe 标签。
<iframe
src="https://your-site.com/embed/1?..."
title="memos-embed"
loading="lazy"
/>Web Component
静态网站、Astro、Eleventy 和渐进增强
注册一个自定义元素，让集成像 HTML 属性一样简单。
<script type="module"
src="https://unpkg.com/@memos-embed/wc@latest/dist/register.js"></script>
<memos-embed memo-id="1" />React
仪表盘、产品界面和应用外壳
当你需要有状态配置和回调时，使用 React 封装组件。
import { MemoEmbed } from "@memos-embed/react";
<MemoEmbed
baseUrl="https://demo.usememos.com/api/v1"
memoId="1"
/>为什么团队选择 Memos Embed
为产品更新、个人发布和内部文档设计，提供生产就绪的展示层。
精美嵌入
为备忘录卡片提供精美的外观，包括主题、密度预设、分组反应和图片预览。
开发者友好
从 Iframe 开始，需要更紧密集成时可切换到 Web Component 或 React 封装。
性能优先
使用可共享的演练场预设、轻量级渲染辅助函数和自动调整大小的嵌入组件，无需额外的粘合代码。