🏗️ テーマ基盤初級

セクションのスキーマ定義

Liquid セクションやブロックの設定スキーマを JSON で記述するための基本形式。スキーマタグ内に JSON オブジェクトを配置して、テーマカスタマイザーの UI を定義する。

用途

テーマセクション・ブロックを作成するときに、管理画面のカスタマイズ画面に表示する設定項目（テキスト入力、画像選択、色ピッカーなど）を定義するため。

設置場所

sections/*.liquid または blocks/*.liquid のファイル内、`</section>` や `</div>` の直前に `{% schema %} ... {% endschema %}` タグで囲んで JSON スキーマを記述する。Prettier 等のフォーマッターで自動整形される。

注意点

スキーマ内の JSON は有効な JSON 形式である必要があり、無効な JSON（引用符なしキーやコメント等）が含まれると整形時にエラーになる。空白制御タグ `{%-schema-%}` を使うと改行がトリミングされるため、ファイルサイズ削減時に使う。Prettier プラグインの indentSchema オプションで JSON のインデント幅を制御できるが、デフォルト（2スペース）で問題ない場合はそのままにしてよい。

タグ:schemajsonsectionblockcustomizer

コード

27 行 / liquid

<div>
{%schema%}
{
  "hello": "world"
}
{%endschema%}
{%-schema-%}
  {
    "hello": "world"
  }
{%-endschema-%}
</div>

it should not try to format invalid json, but should reindent
{% schema %}
{ "invalid":
  x0482 }
{% endschema %}

It should respect the indentSchema option
indentSchema: false
{%schema%}
{
  "hello": "world"
}
{%endschema%}

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/liquid-schema-tag/index.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

セクションのスキーマ定義

コード

出典・ライセンス

関連項目

セクションスキーマのカスタムブロック定義

セクション呼び出しのフォーマット

レイアウトテンプレートの指定

Liquid フォーマッター互換のセクション表記

基本的なHTMLレイアウト

layout タグのフォーマット