🏗️ テーマ基盤初級

基本的なHTMLレイアウト

Prettier Liquid プラグインのテスト用に作られた最小限の HTML テンプレート。DOCTYPE から body タグまでの基本的なドキュメント構造を示す。

用途

Liquid コード整形ツールの動作確認やテスト時に参考とする HTML 骨組み。実際のストア運用では直接使用しない。

設置場所

theme.liquid や layout/theme.liquid の基本テンプレートとして参考にする。実運用時は head 内に meta タグや CSS リンク、body 内に実際のセクション・スニペットを追加して利用する。

注意点

このコードはテスト用サンプルであり、本番環境での使用には Shopify 必須の meta タグ(charset、viewport、Shopify Content Security Policy)や style / script タグを追加する必要がある。head 内の「1234」は数値テストデータなので削除する。

タグ:htmllayouttemplatedoctypetesting

コード

10 行 / liquid

<!doctype html>
<html>
  <head>
    1234
  </head>
  <body>
    Hello world!
  </body>
</html>

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/layout-html/fixed.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

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

関連項目

🏗️ テーマ基盤中級

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

セクションの schema ブロック内でカスタムブロックタイプを定義する方法を示すサンプル。@theme と _private というプレフィックスで異なるブロック種別を宣言する。

📁 theme-tools·MIT·7 行

🏗️ テーマ基盤初級

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

Liquid の section タグを複数行に記述する際の正しいフォーマット例。タグ名を改行で分割しても正しく認識される書き方を示す。

📁 theme-tools·MIT·7 行

🏗️ テーマ基盤初級

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

Liquid の `layout` タグを使い、テーマのレイアウトファイルを指定する構文。複数のレイアウト候補と whitespace 制御（ダッシュ記号）の使い方を示す。

📁 theme-tools·MIT·8 行

🏗️ テーマ基盤上級

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

Prettier Liquid プラグインのテストケースで、セクションタグの様々な書式を検証する。異なる間隔・改行・ホワイトスペーストリミングの組み合わせでもセクション名が崩れないことを確認する。

📁 theme-tools·MIT·9 行

🏗️ テーマ基盤上級

layout タグのフォーマット

Liquid の layout タグの書式をコード品質ツール(Prettier)でフォーマットするテストケース。スペースや改行位置の違いを正規化し、レイアウト名が壊れないことを検証する。

📁 theme-tools·MIT·10 行

🏗️ テーマ基盤初級

DOCTYPE宣言の構文サンプル

HTML5 と過去の DOCTYPE 宣言パターンを網羅したリファレンス。Prettier による Liquid フォーマッタが複数行 DOCTYPE に対応することを示すテストコード。

📁 theme-tools·MIT·12 行