8.3. Developer Hub インスタンスのサイドバーメニュー項目のカスタマイズ

Red Hat Developer Hub のサイドバーメニューは、設定可能な 2 つの主要部分で設定されます。

動的プラグインメニュー項目

設定とアクティブなプラグインは、サイドバーメニューの一部を動的に定義します。

メインメニュー項目

サイドバーのコアナビゲーション構造は static です。

動的プラグインメニュー項目: これらの項目はメインメニューの下に表示され、インストールされているプラグインに基づいてカスタマイズできます。メインメニュー項目セクションは動的であり、設定やインストールされているプラグインに基づいて変更できます。

手順

次の手順に従って、メインメニュー項目をカスタマイズします。
1. app-config.yaml ファイルを開きます。
2. メインメニュー項目の順序と親子関係をカスタマイズするには、dynamicPlugins.frontend.default.main-menu-items.menuItems フィールドを使用します。
3. 動的プラグインのメニュー項目の場合は、dynamicPlugins.frontend.<package_name>.menuItems フィールドを使用します。

app-config.yaml ファイルの例

dynamicPlugins:
  frontend:
    default.main-menu-items:
        menuItems:
          default.home:
            title: Home
            icon: home
            priority: 100
          default.my-group:
            title: My Group
            icon: group
            priority: 90
          default.catalog:
            title: Catalog
            icon: category
            to: catalog
            priority: 80
          default.apis:
            title: APIs
            icon: extension
            to: api-docs
            priority: 70
          default.learning-path:
            title: Learning Paths
            icon: school,
            to: learning-paths
            priority: 60
          default.create:
            title: Create
            icon: add
            to: create
            priority: 50

dynamicPlugins:
  frontend:
    default.main-menu-items:
        menuItems:
          default.home:
            title: Home
            icon: home
            priority: 100
          default.my-group:
            title: My Group
            icon: group
            priority: 90
          default.catalog:
            title: Catalog
            icon: category
            to: catalog
            priority: 80
          default.apis:
            title: APIs
            icon: extension
            to: api-docs
            priority: 70
          default.learning-path:
            title: Learning Paths
            icon: school,
            to: learning-paths
            priority: 60
          default.create:
            title: Create
            icon: add
            to: create
            priority: 50

Copy to Clipboard

Toggle word wrap

手順

動的プラグインメニュー項目を設定するには、< plugin_name > プラグインの menuItems セクションを app-config.yaml ファイルに更新します。以下に例を示します。
```
dynamicPlugins:
  frontend:
    _<plugin_name>_: 
      menuItems:
        <menu_item_name>: 
          icon: # home | group | category | extension | school | _<my_icon>_ 
          title: _<plugin_page_title>_ 
          priority: 10 
          parent: favorites 
```
```
dynamicPlugins:
  frontend:
    _<plugin_name>_: 
```
1
```
      menuItems:
        <menu_item_name>: 
```
2
```
          icon: # home | group | category | extension | school | _<my_icon>_ 
```
3
```
          title: _<plugin_page_title>_ 
```
4
```
          priority: 10 
```
5
```
          parent: favorites 
```
6
Copy to Clipboard Toggle word wrap
1
& lt;plugin_name&gt; : プラグイン名を入力します。この名前は、package.json ファイルの scalprum.name キーと同じです。
2
<menu_item_name& gt;: スタンドアロンメニュー項目または親メニュー項目のいずれかのメインサイドバーナビゲーションに一意の名前を入力します。このフィールドでプラグインメニュー項目を指定した場合、メニュー項目の名前は、dynamicRoutes の対応するパスで使用される名前と一致する必要があります。たとえば、dynamicRoutes が path: /my-plugin を定義した場合は、menu_item_name を my-plugin として定義する必要があります。
3
アイコン: （オプション）アイコン名を入力します。次のアイコンのいずれかを使用できます。
ホーム、グループ、カテゴリー、拡張子、学校 などのデフォルトのアイコン。デフォルトのアイコンを使用するには、アイコンを(" ")空の文字列として設定します。
カスタムアイコン。< my_icon> は カスタムアイコンの名前を指定します。
icon: <svg width="20px" height="20px" viewBox="0 0 512" xmlns="http://www.w3.org/2000/svg" fill="#⚙ff">…</svg> などの SVG アイコン
アイコンなどの HTML イメージ： https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png
4
title: （任意）メニュー項目のタイトルを入力します。menuItem.text の下にある dynamicRoutes 設定でタイトルがすでに指定されている場合はこれを省略します。サイドバーからタイトルを非表示にするには、タイトルを空の文字列(" ")に設定します。
5
優先度: （任意）サイドバーにメニュー項目が表示される順序を設定します。デフォルトの優先度は 0 で、項目はリストの一番下に配置されます。優先度の値が高いほど、その項目はサイドバー内の上の方に表示されます。このフィールドは、セクションごとに定義できます。
6
parent: （任意）現在の項目が入れ子になっている親メニュー項目を入力します。このフィールドを使用する場合は、有効なプラグインの menuItems 設定の他の場所の親メニュー項目を定義する必要があります。このフィールドは、セクションごとに定義できます。
menuItems の設定例
```
dynamicPlugins:
  frontend:
    _<package_name>_:
      dynamicRoutes:
        - path: /my-plugin
          module: CustomModule
          importName: FooPluginPage
          menuItem:
            icon: fooIcon
            text: Foo Plugin Page
      menuItems:
        my-plugin: 
          priority: 10 
          parent: favorites 
        favorites: 
          icon: favorite 
          title: Favorites 
          priority: 100 
```
```
dynamicPlugins:
  frontend:
    _<package_name>_:
      dynamicRoutes:
        - path: /my-plugin
          module: CustomModule
          importName: FooPluginPage
          menuItem:
            icon: fooIcon
            text: Foo Plugin Page
      menuItems:
        my-plugin: 
```
1
```
          priority: 10 
```
2
```
          parent: favorites 
```
3
```
        favorites: 
```
4
```
          icon: favorite 
```
5
```
          title: Favorites 
```
6
```
          priority: 100 
```
7
Copy to Clipboard Toggle word wrap
1
my-plugin: dynamicRoutes の path フィールドの値と一致します。
2
優先度: 親メニュー項目の下にあるプラグインの順序を制御します。
3
parent: このプラグインを favorites 親メニュー項目に見積もります。
4
favorites: 親メニュー項目の設定。
5
アイコン: RHDH システムアイコンからお気に 入り アイコンを表示します。
6
title: 親メニュー項目のタイトル名を表示します。
7
優先度: サイドバーのお気に 入り メニュー項目の順序。
メインのメニュー項目を変更したり、カスタムのメニュー項目を追加するには、app-config.yaml ファイルの default.main-menu-items > menuItems セクションにセクションを追加します。default. 接頭辞を使用して、キーをメインメニュー項目として識別します。
```
dynamicPlugins:
  frontend:
    default.main-menu-items:
      menuItems:
        default._<menu_group_parent_item_name>_: 
          icon: # home | group | category | extension | school | _<my_icon>_ 
          title: _<menu_group_parent_title>_ 
          priority: 10 
        default._<menu_item_name>_: 
          parent: _<menu_group_parent_item_name>_ 
          icon:  # home | group | category | extension | school | _<my_icon>_ 
          title: _<my_menu_title>_ 
          to: _<path_to_the_menu_target_page>_ 
          priority: 100 
```
```
dynamicPlugins:
  frontend:
    default.main-menu-items:
      menuItems:
        default._<menu_group_parent_item_name>_: 
```
1
```
          icon: # home | group | category | extension | school | _<my_icon>_ 
```
2
```
          title: _<menu_group_parent_title>_ 
```
3
```
          priority: 10 
```
4
```
        default._<menu_item_name>_: 
```
5
```
          parent: _<menu_group_parent_item_name>_ 
```
6
```
          icon:  # home | group | category | extension | school | _<my_icon>_ 
```
7
```
          title: _<my_menu_title>_ 
```
8
```
          to: _<path_to_the_menu_target_page>_ 
```
9
```
          priority: 100 
```
10
Copy to Clipboard Toggle word wrap
1
デフォルト。<menu_group_parent_item_name > : （オプション）メニュー項目の親項目名を入力し、静的なメインメニュー項目を設定します。デフォルト。<menu_item_name > に 親 値が設定されていない場合、このフィールドは必要ありません。
2
アイコン: メニューアイコンを入力します。親メニュー項目に必要です。
3
タイトル: メニューグループのタイトルを入力します。親メニュー項目に必要です。
4
priority: （オプション）メニューレベルでこのメニュー項目の順序を入力します。
5
Default .<menu_item_name >: デフォルト値を上書きするメニュー項目名を入力します。メインのメニュー項目を特定するには、default. 接頭辞を追加します。
6
parent: （任意）このアイテムの親メニュー項目を入力します。<menu_item_name> がメニュー項目の子として指定されている場合は必須です。
7
アイコン: （オプション）メニューアイコンを入力します。デフォルトのアイコンを使用するには、アイコンを(" "")空の文字列として設定します。
8
title: （任意）メニューグループのタイトルを入力します。新しいカスタムメインメニュー項目を追加する場合にのみ必要です。サイドバーからデフォルトのメインのメニュー項目のタイトルを非表示にするには、タイトルを空の文字列(" ")に設定します。
9
: （オプション）メニュー項目の移動先のパスを入力します。設定されていない場合は、デフォルトでホームページに設定されます。
10
priority: （オプション）メニューレベルでこのメニュー項目の順序を入力します。
mainItems の設定例
```
default.main-menu-items:
      menuItems:
        default.catalog:
          icon: category 
          title: My Catalog
          priority: 5
        default.learning-path:
          title: '' 
        default.parentlist: 
          title: Overview
          icon: bookmarks
        default.home:
          parent: default.parentlist 
        default.references:
          title: References 
          icon: school 
          to: /references 
```
```
default.main-menu-items:
      menuItems:
        default.catalog:
          icon: category 
```
1
```
          title: My Catalog
          priority: 5
        default.learning-path:
          title: '' 
```
2
```
        default.parentlist: 
```
3
```
          title: Overview
          icon: bookmarks
        default.home:
          parent: default.parentlist 
```
4
```
        default.references:
          title: References 
```
5
```
          icon: school 
```
6
```
          to: /references 
```
7
Copy to Clipboard Toggle word wrap
1
アイコン: カタログのアイコンのデフォルトメニュー項目を変更するかどうかを指定します。
2
title: 空の文字列 " " を指定して、デフォルトのサイドバーから学習パスを非表示にします。
3
default.parentlist: 親メニュー項目を導入します。
4
parent: default.parentlist の親メニュー項目の下にあるホームメニューです。
5
title: default.referencesの名前を指定します。
6
アイコン: 学校 のアイコンを表示します。
7
: default.references を /references ページにリダイレクトします。

8.3. Developer Hub インスタンスのサイドバーメニュー項目のカスタマイズ

詳細情報

試用、購入および販売

コミュニティー

Red Hat ドキュメントについて

多様性を受け入れるオープンソースの強化

会社概要

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links