一分钟内创建你的第一个组件

Widget.diy 只有两个界面，都不需要说明书。这篇 walkthrough 用维基百科页面举例，但任何公开网址的操作都一样。

1. 贴上网址

打开编辑器，把网页地址粘贴进顶栏。页面会在一个缩放画布里渲染出来。画布上方的设备 chips 可以切换模拟的页面宽度（桌面、笔记本、平板、手机）——源站如果是响应式、不同宽度布局不同时，这个很有用。

2. 框出区域

拖一个框罩住你想要的部分。三个辅助工具让框选更精确：

• 右侧的滚动条让页面在选区框下面移动，首屏以下的区域也够得着。
• 画布下方的手柄可以在区域比一屏还高时，把可视区域拉长。
• 方向键每次微调 1px（按住 Shift 为 10px）。

侧栏里的四个数字（左边距、上边距、宽度、高度）是唯一事实来源——心里有数的时候直接输入即可。

3. 在真实尺寸下预览

预览页上方按真实尺寸展示你的裁剪，下方是一排常见嵌入盒子的对照：320×240 小挂件、300×300 方形、300×600 侧栏竖条、390×844 手机竖屏等等。如果某种尺寸下构图破了，切换适配模式——contain 和 cover 会缩放裁剪而不是裁掉它。

这个页面还负责设置静默自动刷新、编辑标题描述、复制嵌入代码。

4. 发布

点保存修改，然后复制以下任意一个：

• 组件链接（形如 https://embed.widget.diy/Ab3xK9pQ），或
• 现成的 <iframe> 代码片段。

把链接贴进 Notion 的 /embed、飞书文档、Obsidian，或把 iframe 标签贴进任何 HTML 页面。组件会满幅渲染，没有任何外壳。

改完之后会发生什么

每次保存都会更新组件的版本号。已嵌入的页面在下一次加载时发现新版本会自动刷新——旧嵌入永远不会停在过期的画面上。