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

テーマファイル

テーマファイル

テーマのディレクトリ構造

テーマファイルを使用すると、HTML、CSS、JavaScript を使用して Dev Portal の外観と操作性を決定できます。テーマディレクトリには、ポータルテーマのさまざまなインスタンスが含まれています。レンダリング中に使用されるテーマは、portal.conf.yaml ファイルの theme.name を設定することによって決まります。たとえば、 theme.nameをbest-themeに設定すると、Dev Portal はテーマファイルをthemes/best-theme/**に読み込みます。

テーマファイルは、以下のディレクトリで構成されています。

• assets/ ：レンダリング中にレイアウトとパーシャルが参照する静的アセットが含まれます。CSS、JS、フォント、画像ファイルが含まれます。
• layouts/ : contentがlayout属性を介して参照するHTMLページテンプレートが含まれていますheadmatter
• partials/ ：レイアウトによって参照されるHTMLパーシャルが含まれます。
• theme.conf.yaml : テンプレートでCSS変数として使用できる色とフォントのデフォルトを設定します。また、Kong Managerの外観ページで使用できるオプションも決定します。

テーマアセット

パス

• 形式： theme/*/assets/**/*

説明

アセットディレクトリには、テンプレートで参照できるCSS、JavaScript、フォント、画像が含まれます。

テンプレートからアセットファイルにアクセスするには、Kong Gatewayが選択したテーマのルートからのパスを想定していることに注意してください。

注意: theme/*/assets/ディレクトリにアップロードされる画像ファイルは、 svgテキスト文字列またはbase64エンコードのいずれかである必要があります。base64 画像は提供時にデコードされます。

テーマレイアウト

パス

• 形式： theme/*/layouts/**/*
• ファイル拡張子： .html

説明

レイアウトは、レンダリングするページの HTMLスケルトンとして機能します。レイアウトディレクトリ内の各ファイルには、 htmlファイルタイプが必要です。これらは、バニラhtmlとして存在することも、ポータルのテンプレート構文を介して部分レイアウトと親レイアウトを参照することもできます。レイアウトは、 contentで設定されたheadmatter属性とbody属性にもアクセスできます。

この例は、典型的なレイアウトがどのようなものかを示しています：

<div class="homepage" id="sl-md0000000">
  {(partials/header.html)}       <- syntax for calling a partial within a template
  <div class="page" id="sl-md0000000">
    <div class="row" id="sl-md0000000">
      <h1 id="sl-md0000000">{{page.title}}</h1>    <- 'title' retrieved from page headmatter
    </div>
    <div class="row" id="sl-md0000000">
      <p id="sl-md0000000">{{page.body}}</p>       <- 'body' retrieved from page body
    </div>
  </div>
  {(partials/footer.html)}
</div>

この例で使用されているテンプレート構文の詳細については、テンプレートガイドを参照してください。

テーマのパーシャル

パス

• 形式： theme/*/partials/**/*
• ファイル拡張子： .html

説明

パーシャルはレイアウトとよく似ています。構文は同じで、内部で他のパーシャルを呼び出すことができ、レンダリング中に同じデータ/ヘルパーにアクセスできます。レイアウトではページを構築するためにパーシャルが必要ですが、パーシャルはレイアウトを呼び出せないという点で、パーシャルはレイアウトとは異なります。

この例は、前の例で参照したheader.html部分を示しています。

<header id="sl-md0000000">
  <div class="row" id="sl-md0000000">
    <div class="column" id="sl-md0000000">
      <img src="{{page.logo}}" id="sl-md0000000">      <- can access the same page data the parent layout
    </div>
    <div class="column" id="sl-md0000000">
      {(partials/header_nav.html)}   <- partials can call other partials
    </div>
  </div>
</header>

テーマ構成ファイル

パス

• 形式： theme/*/theme.conf.yaml
• ファイル拡張子： .yaml

説明

テーマ設定ファイルは、テーマがレンダリング中にテンプレートやCSSで使用できる色、フォント、画像の値を決定します。これは、すべてのテーマのルートに必要です。テーマ設定ファイルは 1 つだけです。名前はtheme.conf.yamlで、テーマのルートディレクトリの直接の子である必要があります。