Jamdesk Documentation logo

Widget

使用 Widget MDX 组件在文档中嵌入实时的更新动态演示:一个在弹窗中打开更新日志的触发按钮,无需 script 标签。

<Widget> 可以直接在文档页面中嵌入实时的更新动态触发器。点击后,您的 Jamdesk 更新日志会在客户看到的同一弹窗中打开,即您将小部件嵌入应用时所看到的效果。在这里,您只需编写一个 MDX 标签,而无需 <script>。页面会自动识别您的站点。

快速开始

<Widget />

这会渲染一个按钮,点击后在弹窗中打开 /changelog(默认路径)。如果您的更新日志位于其他路由,请将 page 设置为该路由。路径错误会在弹窗中显示 404。(例如,Jamdesk 自己的更新日志位于 /reference/changelog。)

<Widget page="/reference/changelog" label="What's new" />

<Widget> 会自动识别您的规范 *.jamdesk.app 源。无论是在 jamdesk.app 子域名还是自定义域名上,它的工作方式都相同。弹窗始终从子域名加载,这是唯一能渲染嵌入视图的源。

属性

属性类型默认值用途
pagestring/changelog弹窗打开的文档路径。
labelstring最新动态触发按钮的文字。
themeauto | light | darkauto弹窗配色方案。
triggerCSS 选择器(无)绑定到您自己的元素,而不是渲染按钮。
width / heightCSS 长度560px / 680px弹窗尺寸。
radiusCSS 长度12px弹窗圆角半径。
unreadbooleantrue显示未读圆点。设为 false 可隐藏。
unreadColorhex / CSS 颜色#e5484d未读圆点颜色。
projectstring自动推导覆盖存储的"已查看"键。

将 trigger 指向页面上已有的元素。如果选择器没有匹配任何元素,小部件会退回到其自带的角落浮动启动器。

未读圆点的"已查看"状态按浏览器和源(小部件运行所在的页面)分别存储。访问者在您的文档和应用中的已查看状态是分开跟踪的,彼此不同步。在演示按钮上设置 unread={false} 可跳过圆点。

实时示例

此按钮会在已部署的文档站点上打开弹窗。在那里,<Widget> 会绑定到您的规范 *.jamdesk.app 源。本地 jamdesk dev 预览没有可供加载弹窗的已发布源,因此触发器在那里无法打开,而是在按钮旁显示"实时预览"说明。请部署该页面(或在您的线上站点上打开它)进行试用。

接下来做什么?

嵌入您的应用

将小部件放入您自己产品中的 <script> 代码片段

Update 组件

编写小部件所读取的更新日志条目

Widget 源代码

固定版本、自托管,或在 GitHub 上阅读源代码