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

手順

• app-config.yaml ファイルで、<plugin_name> プラグインの menuItems セクションを更新します。以下に例を示します。

  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

  
            enabled: true 

  7

  1

  <plugin_name>: プラグイン名を入力します。この名前は、package.json ファイルの scalprum.name キーと同じです。

  2

  <menu_item_name>: メインサイドバーナビゲーションのスタンドアロンメニュー項目または親メニュー項目に使用する一意の名前を入力します。このフィールドでプラグインメニュー項目を指定する場合、メニュー項目の名前が dynamicRoutes 内の対応するパスで使用されている名前と一致する必要があります。たとえば、dynamicRoutes が path: /my-plugin を定義した場合は、menu_item_name を my-plugin として定義する必要があります。

  3

  icon: (オプション) アイコン名を入力します。次のいずれかのアイコンを使用できます。

  • home、group、category、extension、school などのデフォルトのアイコン。デフォルトのアイコンを使用するには、アイコンを空の文字列 (" ") として設定します。
  • カスタムアイコン。<my_icon> はカスタムアイコンの名前を指定します。
  • SVG アイコン。たとえば、icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">…​</svg> です。
  • HTML イメージ。たとえば、icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png です。

  4

  title: (オプション) メニュー項目のタイトルを入力します。dynamicRoutes 設定の menuItem.text でタイトルがすでに指定されている場合は省略します。サイドバーからタイトルを非表示にするには、タイトルを空の文字列 (" ") として設定します。

  5

  priority: (オプション) サイドバーに表示されるメニュー項目の順序を設定します。デフォルトの優先度は 0 で、項目はリストの一番下に配置されます。優先度の値が高いほど、その項目はサイドバー内の上の方に表示されます。このフィールドはセクションごとに定義できます。

  6

  parent: (オプション) 現在の項目がネストされる親メニュー項目を入力します。このフィールドを使用する場合、有効なプラグインの menuItems 設定内の他の場所で、親メニュー項目を定義する必要があります。このフィールドはセクションごとに定義できます。

  7

  enabled: (オプション) このフィールドを使用してサイドバーのメニュー項目を非表示にする場合は、値を false に設定します。サイドバーにメニュー項目を表示するには、値を true に設定します。

  menuItems の設定例

  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

  1

  my-plugin: dynamicRoutes の path フィールドの値と同じです。

  2

  priority: 親メニュー項目の下にあるプラグインの順序を制御します。

  3

  parent: このプラグインを、favorites 親メニュー項目の下にネストします。

  4

  favorites: 親メニュー項目の設定。

  5

  icon: RHDH システムアイコンから favorite アイコンを表示します。

  6

  title: 親メニュー項目のタイトル名を表示します。

  7

  priority: サイドバーの favourites メニュー項目の順序。

手順

• app-config.yaml ファイルで、default.main-menu-items > menuItems セクションにセクションを追加します。キーをメインメニュー項目として指定するには、default. 接頭辞を使用します。

  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

  
            enabled: true 

  11

  1

  default.<menu_group_parent_item_name>: (オプション) 静的なメインメニュー項目を設定するには、メニューグループの親項目名を入力します。default.<menu_item_name> に parent 値が設定されていない場合、このフィールドは必要ありません。

  2

  icon: メニューアイコンを入力します。親メニュー項目に必須です。

  3

  title: メニューグループのタイトルを入力します。親メニュー項目に必須です。

  4

  priority: (オプション) メニューレベル内におけるこのメニュー項目の順序を入力します。

  5

  default.<menu_item_name>: デフォルト値をオーバーライドするメニュー項目名を入力します。メインメニュー項目を指定するための default. 接頭辞を追加します。

  6

  parent: (オプション) この項目の親メニュー項目を入力します。<menu_item_name> がメニュー項目の子として指定されている場合は必須です。

  7

  icon: (オプション) メニューアイコンを入力します。デフォルトのアイコンを使用するには、アイコンを空の文字列 (" ") として設定します。

  8

  title: (オプション) メニューグループのタイトルを入力します。新しいカスタムメインメニュー項目を追加する場合にのみ必要です。サイドバーからデフォルトのメインメニュー項目のタイトルを非表示にするには、タイトルを空の文字列 (" ") として設定します。

  9

  to: (オプション) メニュー項目の移動先のパスを入力します。設定されていない場合は、デフォルトで Home ページに設定されます。

  10

  priority: (オプション) メニューレベル内におけるこのメニュー項目の順序を入力します。

  11

  enabled: (オプション) このフィールドを使用してサイドバーにメニュー項目を表示する場合は、値を true に設定します。サイドバーからメニュー項目を非表示にするには、値を false に設定します。

  mainItems の設定例

  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

  
            enabled: true 

  8

  1

  icon: カタログのアイコンのデフォルトメニュー項目を変更するかどうかを指定します。

  2

  title: デフォルトのサイドバーからラーニングパスを非表示にするには、空の文字列 " " を指定します。

  3

  default.parentlist: 親メニュー項目を取り込みます。

  4

  parent: default.parentlist 親メニュー項目の下にホームメニューをネストします。

  5

  title: default.references の名前を指定します。

  6

  icon: school アイコンを表示します。

  7

  to: default.references を /references ページにリダイレクトします。

  8

  enabled: (オプション) このフィールドを使用してサイドバーにメニュー項目を表示する場合は、値を true に設定します。サイドバーからメニュー項目を非表示にするには、値を false に設定します。