umbraco-sections

Umbraco セクション

これは何ですか？

セクションは、Umbraco バックオフィスのトップレベルナビゲーション項目であり、コンテンツ、メディア、設定などの既定のオプションと並んで表示されます。カスタムコンテンツと機能のホームとして機能し、ダッシュボード、サイドバー、セクションビューで拡張できる空白のキャンバスを提供します。セクションにアクセスするには、ユーザーグループに対する権限設定が必要です。

ドキュメント

実装する前に、常に最新のドキュメントを取得してください：

• メインドキュメント: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/sections/section
• セクションビュー: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/sections/section-view
• セクションサイドバー: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/sections/section-sidebar
• ダッシュボード: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/dashboard
• Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• 拡張機能レジストリ: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry

参照例

Umbraco のソースには動作する例が含まれています：

場所: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/

この例は、セクションサイドバーメニューの展開パターンを示しています。サイドバーのカスタマイズのためにこれを研究してください。

関連する Foundation スキル

セクションを実装する際にこれらの基盤となる概念を説明する必要がある場合は、以下のスキルを参照してください：

• Context API: セクションコンテキストを実装する場合、またはセクション拡張機能がどのように通信するかを説明する場合

  • 参照スキル: umbraco-context-api

• Conditions: 権限、ユーザーグループのアクセス、可視性の制御、またはセクションの制限を実装する場合

  • 参照スキル: 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. Sections の下にある Choose ボタンをクリックします
5. カスタムセクションを選択します
6. 変更を保存します

組み込みセクション

• Umb.Section.Content - コンテンツ管理
• Umb.Section.Media - メディアライブラリ
• Umb.Section.Settings - システム設定
• Umb.Section.Packages - パッケージ管理
• Umb.Section.Users - ユーザー管理
• Umb.Section.Members - メンバー管理

以上です！常に最新のドキュメントを取得し、例を最小限に保ち、完全に動作するコードを生成してください。