テーマテンプレート開発ガイド

利用可能なプロパティ

1. containers（コンテナ配列）

ページ内のコンテナをタイプ別にグループ化したオブジェクトです。ループ処理で細かいレイアウト制御が可能です。

基本構造

containers: {
  header: [...],    // headerタイプのコンテナ配列
  main: [...],      // mainタイプのコンテナ配列
  sidebar: [...],   // sidebarタイプのコンテナ配列
  footer: [...]     // footerタイプのコンテナ配列
}

コンテナオブジェクトのプロパティ

{
  id: "container-123",           // コンテナの一意ID
  type: "main",                  // コンテナタイプ
  name: "メインコンテンツ",        // コンテナ名（オプション）
  order: 4000,                   // 表示順序
  attributes: {...},             // コンテナ属性
  renderedContent: "<div>...</div>" // レンダリング済みHTML
}

2. containersHtml（コンテナHTML文字列）

コンテナをHTML文字列として事前結合したオブジェクトです。シンプルな記述でレイアウトが可能です。

基本構造

containersHtml: {
  header: "<section>...</section>",    // headerタイプの結合済みHTML
  main: "<section>...</section>",      // mainタイプの結合済みHTML
  sidebar: "<section>...</section>",   // sidebarタイプの結合済みHTML
  footer: "<section>...</section>"     // footerタイプの結合済みHTML
}

3. page（ページ情報）

現在のページの基本情報です。

page: {
  id: "page-123",
  title: "ページタイトル",
  slug: "page-slug",
  status: "published",
  metadata: {
    description: "ページの説明",
    keywords: "キーワード1,キーワード2"
  },
  settings: {...}
}

4. theme（テーマ情報）

現在適用されているテーマの情報です。

theme: {
  id: "theme-123",
  name: "テーマ名",
  version: "1.0.0",
  variables: {
    colors: {
      primary: "#007bff",
      secondary: "#6c757d"
    },
    typography: {
      fontFamily: "Arial, sans-serif",
      fontSize: "16px"
    },
    spacing: {
      containerPadding: "20px",
      sectionMargin: "40px"
    }
  }
}

5. meta（メタタグ）

ページのメタ情報を含むHTMLタグです。

基本的なテンプレート構造

{{{meta}}}

<!-- <title>ページタイトル</title> -->
<!-- <meta name="description" content="ページの説明"> -->
<!-- <meta name="keywords" content="キーワード1,キーワード2"> -->

6. styles（スタイルシート）

テーマのCSSファイルへのリンクタグです。

{{{styles}}}

<!-- <link rel="stylesheet" href="/__themes/theme-123/style.css"> -->

7. scripts（JavaScript）

テーマのJavaScriptファイルのスクリプトタグです。

{{{scripts}}}

<!-- <script src="/__themes/theme-123/script.js"></script> -->

コンテナの使い分けガイド

テーマでは、コンテナを2つの方法で利用できます。用途に応じて使い分けてください。

アプローチ	記述方法	向いている人	メリット	デメリット
文字列結合	`containersHtml.*`	HTML初心者、シンプルなテーマ	簡単、記述量少	レイアウト制御限定的
ループ処理	`containers.*`	経験者、高度なカスタマイズ	完全制御、柔軟性高	記述複雑

文字列結合の例（シンプル）

<!DOCTYPE html>
<html>
<head>{{{meta}}}{{{styles}}}</head>
<body>
  <header>{{{containersHtml.header}}}</header>
  <main>{{{containersHtml.main}}}</main>
  <aside>{{{containersHtml.sidebar}}}</aside>
  <footer>{{{containersHtml.footer}}}</footer>
  {{{scripts}}}
</body>
</html>

ループ処理の例（カスタマイズ）

<main class="main-content">
  {{#each containers.main}}
    <section class="content-section {{#if @first}}featured{{/if}}"
             data-container-id="{{this.id}}">
      {{#if this.name}}
        <h2 class="section-title">{{this.name}}</h2>
      {{/if}}
      <div class="section-content">
        {{{this.renderedContent}}}
      </div>
    </section>
  {{/each}}
</main>

ハイブリッド使用（推奨）

<!-- 重要な部分はループで細かく制御 -->
<main class="main-content">
  {{#each containers.main}}
    <article class="content-{{@index}}" data-priority="{{#if @first}}high{{else}}normal{{/if}}">
      {{{this.renderedContent}}}
    </article>
  {{/each}}
</main>

<!-- シンプルな部分は文字列結合 -->
<footer class="site-footer">
  {{{containersHtml.footer}}}
</footer>

よく使用されるパターン

1. 条件付き表示

<!-- コンテナが存在する場合のみ表示 -->
{{#if containers.hero}}
  <section class="hero-section">
    {{#each containers.hero}}
      {{{this.renderedContent}}}
    {{/each}}
  </section>
{{/if}}

2. ループでのインデックス活用

<!-- 最初のコンテナに特別なクラスを追加 -->
{{#each containers.main}}
  <section class="content-section {{#if @first}}featured{{/if}}"
           data-container-id="{{this.id}}">
    {{{this.renderedContent}}}
  </section>
{{/each}}

3. テーマ変数の活用

<!-- テーマの色設定を使用 -->
<style>
  .custom-section {
    background-color: {{theme.variables.colors.primary}};
    font-family: {{theme.variables.typography.fontFamily}};
  }
</style>

4. ページ情報の表示

<!-- ページタイトルをヘッダーに表示 -->
<header>
  <h1 class="page-title">{{page.title}}</h1>
  {{#if page.metadata.description}}
    <p class="page-description">{{page.metadata.description}}</p>
  {{/if}}
</header>

5. 複雑なレイアウト例

<!-- 2カラムレイアウト -->
<div class="layout-container">
  <div class="layout-main">
    {{#each containers.main}}
      <article class="content-article">
        {{{this.renderedContent}}}
      </article>
    {{/each}}
  </div>

  {{#if containers.sidebar}}
    <div class="layout-sidebar">
      {{#each containers.sidebar}}
        <aside class="sidebar-section sidebar-{{@index}}">
          {{{this.renderedContent}}}
        </aside>
      {{/each}}
    </div>
  {{/if}}
</div>

注意事項

HTML出力時の注意

{{{...}}} （トリプル波括弧）: HTMLをエスケープせずに出力
{{...}} （ダブル波括弧）: HTMLをエスケープして出力

<!-- 正しい使用法 -->
{{{this.renderedContent}}}  <!-- HTMLコンテンツ -->
{{this.name}}               <!-- テキストコンテンツ -->

サポートされるコンテナタイプ

現在サポートされているコンテナタイプ：

header - ヘッダー領域
main - メインコンテンツ領域
sidebar - サイドバー領域
footer - フッター領域
hero - ヒーロー領域
navigation - ナビゲーション領域

※ 将来的に新しいタイプが追加される可能性があります

パフォーマンス考慮事項

不要な条件分岐を避け、シンプルな構造を心がける
大量のループ処理を避ける
CSSやJavaScriptはできるだけ外部ファイルに分離する

トラブルシューティング

コンテナが表示されない

テンプレートでコンテナタイプが正しく指定されているか確認
ページにそのタイプのコンテナが存在するか確認
{{#if containers.タイプ名}} での条件分岐を確認

スタイルが適用されない

{{{styles}}} がヘッダー内に正しく配置されているか確認
CSSファイルのパスが正しいか確認
ブラウザの開発者ツールでCSSの読み込み状況を確認

JavaScript が動作しない

{{{scripts}}} が適切な位置（通常は</body>前）に配置されているか確認
JavaScriptファイルのパスが正しいか確認
ブラウザコンソールでエラーが発生していないか確認