Back to Details

umbraco-sections

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Umbraco Sections

Umbraco 功能板块

What is it?

什么是功能板块？

Sections are top-level navigation items in the Umbraco backoffice that appear alongside default options like Content, Media, and Settings. They serve as a home for custom content and functionality, providing a blank canvas that can be extended with dashboards, sidebars, and section views. Sections require permission configuration for user groups to access them.
功能板块是Umbraco后台中的顶级导航项，与默认的内容（Content）、媒体（Media）、设置（Settings）等选项并列显示。它们是自定义内容与功能的载体，提供了可扩展的空白画布，可添加仪表盘、侧边栏和板块视图。功能板块需要为用户组配置权限才能访问。

Documentation

文档参考

Always fetch the latest docs before implementing:
在开始实现前，请务必获取最新的官方文档：

Reference Example

参考示例

The Umbraco source includes a working example:
Location: 
/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/
This example demonstrates section sidebar menu expansion patterns. Study this for sidebar customization.
Umbraco源码中包含一个可运行的示例：
位置：
/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/
该示例展示了板块侧边栏菜单的展开模式，可用于学习侧边栏的自定义方法。

Related Foundation Skills

相关基础技能

If you need to explain these foundational concepts when implementing sections, reference these skills:
  • Context API: When implementing section contexts or explaining how section extensions communicate
    • Reference skill: 
      umbraco-context-api
  • Conditions: When implementing permissions, user group access, visibility controls, or section restrictions
    • Reference skill: 
      umbraco-conditions
  • Routing: When implementing pathnames, navigation patterns, URLs, or section routing
    • Reference skill: 
      umbraco-routing
在实现功能板块时，若需要解释以下基础概念，请参考对应的技能文档：
  • Context API：当实现板块上下文或解释板块扩展间的通信机制时
    • 参考技能：
      umbraco-context-api
  • Conditions：当实现权限、用户组访问、可见性控制或板块限制时
    • 参考技能：
      umbraco-conditions
  • Routing：当实现路径名、导航模式、URL或板块路由时
    • 参考技能：
      umbraco-routing

Workflow

工作流程

  1. Fetch docs - Use WebFetch on the URLs above
  2. Ask questions - What will the section contain? Dashboards? Trees? Sidebar needed?
  3. Generate files - Create manifest for section + related extensions based on latest docs
  4. Explain - Show what was created and how to configure permissions
  1. 获取文档 - 使用WebFetch工具获取上述URL的最新文档
  2. 需求确认 - 明确板块包含的内容：仪表盘？树形结构？是否需要侧边栏？
  3. 生成文件 - 根据最新文档创建板块的清单文件及相关扩展文件
  4. 说明解释 - 展示创建的内容，并说明如何配置权限

Minimal Examples

最简示例

Basic Section (umbraco-package.json)

基础功能板块（umbraco-package.json）

json
{
  "type": "section",
  "alias": "My.Section",
  "name": "My Section",
  "meta": {
    "label": "My Section",
    "pathname": "my-section"
  }
}
json
{
  "type": "section",
  "alias": "My.Section",
  "name": "My Section",
  "meta": {
    "label": "My Section",
    "pathname": "my-section"
  }
}

Section with Icon (manifest.ts)

带图标的功能板块（manifest.ts）

typescript
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"
      }
    ]
  }
];
typescript
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"
      }
    ]
  }
];

Section with Dashboard (manifest.ts)

带仪表盘的功能板块（manifest.ts）

typescript
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"
      }
    ]
  }
];
typescript
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"
      }
    ]
  }
];

Section with Sidebar (manifest.ts)

带侧边栏的功能板块（manifest.ts）

typescript
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"
      }
    ]
  }
];
typescript
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"
      }
    ]
  }
];

Key Properties

核心属性

  • type: Always 
    "section"
  • alias: Unique identifier for the section
  • name: Display name in backoffice
  • meta.label: Label shown in navigation
  • meta.pathname: URL route for the section
  • element: Optional custom element (not recommended - use dashboards instead)
  • conditions: Control visibility and access
  • type：固定为
    "section"
  • alias：功能板块的唯一标识符
  • name：后台中显示的功能板块名称
  • meta.label：导航栏中显示的标签文本
  • meta.pathname：功能板块的URL路径
  • element：可选的自定义元素（不推荐使用，建议使用仪表盘替代）
  • conditions：控制功能板块的可见性与访问权限

Granting Permissions

权限配置步骤

To enable a custom section for users:
  1. Navigate to Users section in Umbraco backoffice
  2. Select User Groups menu item
  3. Choose the user group to configure
  4. Click the Choose button under Sections
  5. Select your custom section
  6. Save changes
为用户启用自定义功能板块的步骤：
  1. 进入Umbraco后台的**用户（Users）**板块
  2. 选择**用户组（User Groups）**菜单
  3. 选择需要配置的用户组
  4. 点击**板块（Sections）下方的选择（Choose）**按钮
  5. 勾选你的自定义功能板块
  6. 保存更改

Built-in Sections

内置功能板块

  • Umb.Section.Content - Content management
  • Umb.Section.Media - Media library
  • Umb.Section.Settings - System settings
  • Umb.Section.Packages - Package management
  • Umb.Section.Users - User management
  • Umb.Section.Members - Member management
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
  • Umb.Section.Content - 内容管理
  • Umb.Section.Media - 媒体库管理
  • Umb.Section.Settings - 系统设置
  • Umb.Section.Packages - 包管理
  • Umb.Section.Users - 用户管理
  • Umb.Section.Members - 会员管理
以上就是全部内容！请务必获取最新文档，保持示例简洁，并生成可直接运行的完整代码。