8.2. Developer Hub インスタンスのブランディングロゴのカスタマイズ

以下の例のように、app-config.yaml ファイルで branding セクションを設定して、Developer Hub インスタンスのブランディングロゴをカスタマイズできます。

app:
  branding:
    fullLogo: ${BASE64_EMBEDDED_FULL_LOGO} 
    iconLogo: ${BASE64_EMBEDDED_ICON_LOGO}

app:
  branding:
    fullLogo: ${BASE64_EMBEDDED_FULL_LOGO}


    iconLogo: ${BASE64_EMBEDDED_ICON_LOGO}

Copy to Clipboard

Toggle word wrap

ここでは、以下のようになります。

fullLogo は、展開された (固定された) サイドバー上のロゴであり、base64 でエンコードされた画像を想定しています。

iconLogo は、折りたたまれた (固定されていない) サイドバーのロゴであり、base64 でエンコードされた画像を想定しています。

BASE64_EMBEDDED_FULL_LOGO 環境変数を以下のようにフォーマットすることができます。

BASE64_EMBEDDED_FULL_LOGO: "data:_<media_type>_;base64,<base64_data>"

BASE64_EMBEDDED_FULL_LOGO: "data:_<media_type>_;base64,<base64_data>"

Copy to Clipboard

Toggle word wrap

次の例は、データを使用して BASE64_EMBEDDED_FULL_LOGO をカスタマイズする方法を示しています：_<media_type>_;base64, <base64_data > 形式：

SVGLOGOBASE64=$(base64 -i logo.svg)
BASE64_EMBEDDED_FULL_LOGO="data:image/svg+xml;base64,$SVGLOGOBASE64"

SVGLOGOBASE64=$(base64 -i logo.svg)
BASE64_EMBEDDED_FULL_LOGO="data:image/svg+xml;base64,$SVGLOGOBASE64"

Copy to Clipboard

Toggle word wrap

image/svg+xml をイメージの正しいメディアタイプ（例： image/png および image/jpeg）に置き換え、ファイル拡張子を調整します。その結果、外部ファイルを参照せずにロゴを直接埋め込むことができます。

次の例に示すように、branding セクションの fullLogoWidth フィールドに値を設定して、ブランディングロゴの幅をカスタマイズすることもできます。

app:
  branding:
    fullLogoWidth: 110px 
# ...

app:
  branding:
    fullLogoWidth: 110px


# ...

Copy to Clipboard

Toggle word wrap

1: ロゴの幅のデフォルト値は 110px です。サポートされている単位は、integer、px、em、rem、パーセンテージです。

トップに戻る