# Umbraco 预览应用程序提供商 ## 这是什么？预览应用程序提供商将自定义项目添加到 Umbraco 中的预览窗口菜单中。当内容编辑者预览其内容时，这些应用程序会出现在预览菜单中，从而提供设备模拟、可访问性检查、SEO 分析或其他预览相关工具等附加功能。 ## 文档在实施之前始终获取最新文档： * **基础** ： * **扩展注册表**： * **Umbraco 元素**： ## 相关基础技能 * **Umbraco Element** ：用于创建 UI 组件的基类 * 参考技能：`umbraco-umbraco-element` * **Context API** : 访问预览状态时 * 参考技能：`umbraco-context-api` ## 工作流程 1. **获取文档** \- 在上面的 URL 上使用 WebFetch 2. **提问** \- 什么预览功能？什么用户界面？ 3. **生成文件** \- 根据最新文档创建清单+元素 4. **解释** \- 显示创建的内容以及如何测试 ## 最小示例 ### 清单（manifests.ts）从'@umbraco-cms/backoffice/extension-registry'导入类型{ManifestPreviewAppProvider}；导出常量清单：Array = [ { 类型：'预览应用程序'，别名： 'My.PreviewApp', name: '我的预览应用程序', 元素：() => import('./my-preview-app.element.js'), }, ]; ### 元素实现 (my-preview-app.element.ts) 从 '@umbraco-cms/backoffice/external/lit' 导入 { html, customElement, state }; 从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }； @customElement('我的预览应用程序') 导出类 MyPreviewAppElement 扩展 UmbLitElement { @状态（）私有_isActive = false; 覆盖渲染（）{ 返回 html`

自定义预览功能

${this._isActive ？ '禁用' : '启用'}

`; } #切换（）{ this._isActive = !this._isActive; // 应用预览功能 this.#applyPreviewMode(this._isActive); } #applyPreviewMode（活动：布尔值）{ // 访问预览 iframe 或应用样式 const PreviewFrame = document.querySelector('iframe.preview-frame'); if (previewFrame && 活动) { // 应用自定义预览模式 } } } 导出默认的 MyPreviewAppElement； ### 设备模拟器示例从 '@umbraco-cms/backoffice/external/lit' 导入 { html, customElement, state }; 从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }； @customElement('设备预览应用程序') 导出类 DevicePreviewAppElement 扩展 UmbLitElement { @状态（）私人_selectedDevice = '桌面'; 私有_设备= [ { name: '桌面', width: '100%', label: '桌面' }, { name: '平板电脑', 宽度: '768px', 标签: '平板电脑' }, { 名称：'移动'，宽度：'375px'，标签：'移动' }， ]; 覆盖渲染（）{ 返回 html` ${这个._devices.map( （设备）=> html` this.#selectDevice(device)} > ${设备.标签} ` )} `; } #selectDevice(设备: { 名称: 字符串; 宽度: 字符串 }) { this._selectedDevice = 设备.name; // 调度事件以调整预览大小 this.dispatchEvent( new CustomEvent('预览调整大小', { 详细信息：{宽度：device.width}，气泡：真实，组成：真实， }) ）； } } 导出默认的DevicePreviewAppElement； ## 接口参考接口 ManifestPreviewAppProvider 扩展 ManifestElement { 类型：'预览应用程序'； } ## 最佳实践 * 保持菜单中显示的 UI 紧凑 * 提供清晰的启用/禁用状态 * 考虑预览上下文和可用的 iframe * 使用适当的图标以便快速识别就是这样！始终获取新文档，保持示例最少，生成完整的工作代码。

Umbraco 预览应用程序提供商

包含技能