API Portalヘッダーをカスタマイズ

API Portalのヘッダーをカスタマイズして、ユーザー情報と[Log out] (ログアウト)ボタンを表示させます。

このタスクについて

必要に応じて、API PortalのHTMLファイルをカスタマイズして、カスタムエレメントを追加できます。ベストプラクティスは、themes/talendからリポジトリーのルートにフォルダーとファイルをコピーすることです。これにより、デフォルトのファイルを編集せずに、それらを上書きできます。

警告: テーマファイルのオーバーライド後、テーマの更新されたバージョンをダウンロードすれば、カスタムファイルを手動で更新する必要があります。

手順

API Portalリポジトリーのルートに、layoutsフォルダーを作成し、その中にpartialsフォルダーを作成します。
作成した/layouts/partialsフォルダー内に/themes/talend/layouts/partials/header.htmlというファイルをコピーします。
リポジトリーにはheader.htmlファイルが2つあるようになります。/layouts/partials内のファイルのみ編集するべきです。
新しいheader.htmlファイル内の</ul>終了タグの前に、ログアウトページへのリンクとユーザー情報を含む新しい<li>エレメントを追加します。
例
```
  <li style="margin-left: auto; margin-right: 1em">
    <a href="/logout">Log out</a>
    <span id="user"></span>
  </li>
```

</ul>終了タグの後に<script>エレメントを追加し、/meルートからユーザー情報を取得します。

例

<script>
  fetch('/me')
  .then(response => response.json())
  .then(me => document.getElementById('user').innerHTML = me.clientPrincipal.userDetails)
  .catch(e => document.getElementById('user').innerHTML = 'Anonymous');
</script>

変更をコミットします。

このページは役に立ちましたか?

このページまたはコンテンツにタイポ、ステップの省略、技術的エラーなどの問題が見つかった場合はお知らせください。

こちらにフィードバックをお寄せください