mcpField
U
umbraco-sections

umbraco-sections

github.com/umbraco开发27389 次安装6 周前更新
代码仓库

关于 umbraco-sections

介绍如何创建 Umbraco 后台的自定义顶级导航区域，并指导开发者配置清单、仪表板、侧边栏、路由及用户组权限，附有文档和源码示例参考。

主要功能

  1. 01Section 清单配置指引
  2. 02仪表板与侧边栏模式
  3. 03路由和可见性参考
  4. 04用户组权限配置步骤
  5. 05文档与源码示例链接

适用场景

  1. 01添加自定义后台 Section
  2. 02规划仪表板或 Section 侧边栏
  3. 03为用户组配置 Section 访问权限

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-sections

安装后在 Claude Code 中输入/umbraco-sections确认已加载。

详细介绍

Umbraco 区域

什么是区域？

区域是 Umbraco 后台中顶层导航项，与“内容”“媒体”和“设置”等默认选项并列显示。它们是自定义内容和功能的入口，可作为空白画布，通过仪表板、侧边栏和区域视图进行扩展。用户组需要配置相应权限才能访问区域。

文档

实现前始终获取最新文档：

参考示例

Umbraco 源代码中包含一个可运行的示例：

位置：/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/

此示例演示了区域侧边栏菜单的展开模式。研究此示例以了解如何自定义侧边栏。

相关基础技能

实现区域时，如果需要解释以下基础概念，请参考这些技能：

  • 上下文 API：实现区域上下文，或说明区域扩展之间如何通信时

    • 参考技能：umbraco-context-api

  • 条件：实现权限、用户组访问、可见性控制或区域限制时

    • 参考技能：umbraco-conditions

  • 路由：实现路径名、导航模式、URL 或区域路由时

    • 参考技能：umbraco-routing

工作流

  1. 获取文档 - 对上述 URL 使用 WebFetch
  2. 提问 - 区域将包含什么？仪表板？树？是否需要侧边栏？
  3. 生成文件 - 根据最新文档，为区域及相关扩展创建清单
  4. 说明 - 展示创建的内容以及如何配置权限

最简示例

基本区域（umbraco-package.json）
{
  "type": "section",
  "alias": "My.Section",
  "name": "My Section",
  "meta": {
    "label": "My Section",
    "pathname": "my-section"
  }
}
带图标的区域（manifest.ts）
export const manifests = [
  {
    type: "section",
    alias: "My.CustomSection",
    name: "Custom Section",
    meta: {
      label: "Custom",
      pathname: "custom-section"
    },
    conditions: [
      {
        alias: "Umb.Condition.SectionUserPermission",
        match: "My.CustomSection"
      }
    ]
  }
];
带仪表板的区域（manifest.ts）
export const manifests = [
  {
    type: "section",
    alias: "My.Section",
    name: "My Section",
    meta: {
      label: "My Section",
      pathname: "my-section"
    }
  },
  {
    type: "dashboard",
    alias: "My.Section.Dashboard",
    name: "My Section Dashboard",
    element: () => import('./dashboard.element.js'),
    meta: {
      label: "Welcome",
      pathname: "welcome"
    },
    conditions: [
      {
        alias: "Umb.Condition.SectionAlias",
        match: "My.Section"
      }
    ]
  }
];
带侧边栏的区域（manifest.ts）
export const manifests = [
  {
    type: "section",
    alias: "My.Section",
    name: "My Section",
    meta: {
      label: "My Section",
      pathname: "my-section"
    }
  },
  {
    type: "sectionSidebarApp",
    alias: "My.Section.Sidebar",
    name: "My Section Sidebar",
    element: () => import('./sidebar.element.js'),
    conditions: [
      {
        alias: "Umb.Condition.SectionAlias",
        match: "My.Section"
      }
    ]
  }
];

关键属性

  • type：始终为 "section"
  • alias：区域的唯一标识符
  • name：后台中显示的名称
  • meta.label：导航中显示的标签
  • meta.pathname：区域的 URL 路径
  • element：可选的自定义元素（不推荐，建议改用仪表板）
  • conditions：控制可见性和访问权限

授予权限

要允许用户使用自定义区域：

  1. 在 Umbraco 后台中导航到 Users 区域
  2. 选择 User Groups 菜单项
  3. 选择要配置的用户组
  4. 点击“区域”下方的 Choose 按钮
  5. 选择你的自定义区域
  6. 保存更改

内置区域

  • Umb.Section.Content - 内容管理
  • Umb.Section.Media - 媒体库
  • Umb.Section.Settings - 系统设置
  • Umb.Section.Packages - 包管理
  • Umb.Section.Users - 用户管理
  • Umb.Section.Members - 成员管理

就这样！始终获取最新文档，保持示例简洁，并生成完整、可运行的代码。

评论

支持 Markdown