[Shopify]ブログ「一覧」のテンプレート#2　メタフィールドで設定（Dawn）

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

今日はブログ一覧のテンプレートのご紹介です。

カテゴリ内での新着記事６個とView Moreをクリックするとページ内のアーカイブエリアにスクロールされます。アーカイブエリアの記事はカテゴリの記事全て表示されます。

いつもはテーマのレイアウトの固定部分はセクションを使いますが、今回はブログのメタフィールドのJSONを使って作成してます！

環境：Dawnのバージョン10.0.0
で作成しています。

✔️今回のテンプレート

＝＝＝＝＝＝＝＝
パソコン
＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝
モバイル
＝＝＝＝＝＝＝＝

※今回はCMSは使用しません

🔸テンプレートの特徴

✔️設置手順

Step1 　まずはメタフィールドを作成

今回は２つ使ってます。
❶レイアウト用
❷サムネ画像用

◆カスタムデータ＞「ブログ」を開く

❶レイアウト用

🔸メタフィールド設定

・名前：なんでもOK
・ネームスペースとキー：custom.layout1
・コンテンツ：JSON
・検証：空欄でOK

❷サムネ用

メインビジュアルの背景の画像になります。

また、シェアした時のサムネとして使用する場合は下記のページ用で紹介したものをブログ一覧ように改造すればOKです。

🔸メタフィールド設定

・名前：なんでもOK
・ネームスペースとキー：
・コンテンツ：ファイル（１つのファイル）
・検証：画像選択

🔸ブログのカテゴリにメタフィールドが追加されました！

🔸カスタムレイアウト１のJSON

編集するときは一列に表示されるので、JSONをフォーマットするをクリックして編集すると使いやすいです。

🔸JSONのテンプレート

[
  {
    "color-base": "ベースカラー",
    "color-newarticles": "新着のタイトル＆説明文のカラー",
    "color-hover-img": "記事をホバーした時の背景カラー",
    "mv-lead": "メインビジュアルの説明文",
    "new-heading": "新着記事一覧エリアのタイトル",
    "new-lead": "新着記事一覧エリアの説明文",
    "archive-heading": "アーカイブ記事一覧エリアのタイトル",
    "archive-lead": "アーカイブ記事一覧エリアの説明文",
    "contact-lead": "問い合わせエリアの説明文"
  }
]

（例）上記のキャプチャの場合は下記

[
  {
    "color-base": "#e7703c",
    "color-newarticles": "#fff",
    "color-hover-img": "#edc84b",
    "mv-lead": "Habitant morbi tristique senectus et. Nec dui nunc mattis enim ut tellus. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. ",
    "new-heading": "新着記事",
    "new-lead": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.",
    "archive-heading": "Complete Interior Design Service",
    "archive-lead": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "contact-lead": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  }
]

Step2 　テンプレートを作成

❶管理画面＞テーマ＞コード編集＞セクション＞新規作成

ファイル名は「malin-blog-custom1」で作成

作成したら一旦そのままでOKです。

❷テンプレートフォルダ＞新規作成

ファイル名は「blog.custom1.json」で作成

下記に差し替え

🔸blog.custom1.jsonのコード

{
  "sections": {
    "main": {
      "type": "main-blog-custom1",
      "settings": {
      }
    }
  },
  "order": [
    "main"
  ]
}

【ご注意】
※返金&サポート&コメント返信はしておりません。
※最新のDawnテーマ対象です。
※コードのみのご紹介で解説などはしておりません。
※2023.6時点のコードです。メンテナンスは今後する予定はありません。
※環境やバージョンによりレイアウト崩れることもありますので適当にCSSで調整していただければと思います。