旧バージョンのドキュメントを参照しています。最新のドキュメントはこちらをご参照ください。

Kong Dev Portal での JavaScript アセットの追加と使用

Kong Dev Portal には、Vue、React、jQuery がすでにロードされた状態で出荷されます。これらのライブラリを利用してカスタム・インタラクティブ・ウェブページを書き込んだり、追加のJavaScriptを読み込んだりできます。

注: このガイドは、サーバー側のルーティングを変更せずに JavaScript アセットを追加/使用するためのものです。SPA の詳細については、Dev Portal をご覧ください。

前提条件

ポータルのレガシーがオフになっている
Kong Dev Portal が有効になっていて実行中である
kong-portal-cliツールがローカルにインストールされている

JS アセットの追加

警告：互換性の問題により、layouts/system/spec-render.htmlレイアウトではReact 15以外のReactバージョンは使用しないでください。デフォルトのベーステーマに含まれているReactバージョンの使用をお勧めします。

JavaScriptアセットを追加するには、以下の手順を実行します。

kong-portal-templatesリポジトリをクローンします。
JavaScriptファイルをthemes/base/jsフォルダに追加します。
kong-portal-cli-toolを使用してデプロイします。

JS アセットを読み込み

これらのスクリプトが読み込まれるpartials/theme/required-scripts.htmlを含む任意のレイアウト/パーシャルで、既存のVueとjQueryを利用できます。

デフォルトでは、Reactはlayouts/system/spec-render.htmlでのみロードされます。

すべてのページでReactまたはカスタムJavaScriptアセットを読み込む場合は、themes/partial/foot.htmlを編集できます。

{% layout = "layouts/_base.html" %}

{-main-}
  {(partials/header.html)}

  <div class="page" id="sl-md0000000">
    {* blocks.content *}
  </div>

  {(partials/footer.html)}
  <script src="assets/js/third-party/react.min.js" id="sl-md0000000"></script>

{-main-}

または、必要に応じて、各コンテンツページの特定のレイアウトに必要なスクリプトを読み込むこともできます。