![見出し画像](https://assets.st-note.com/production/uploads/images/69756919/rectangle_large_type_2_5487daff8c71f3c017c9a5cef00a0827.jpeg?width=800)
#09 ページのカスタマイズ方法
このページを見ることで以下のことがわかります。
・ページにセクションを呼び出すコード
・セクションにスキーマを設定する方法
・スキーマを記述して管理画面にメニューを追加する方法
・スキーマの種類、settings、blocksを使った設定方法
私たちについてページを作成する
前準備
①「page.liquid」を開く
②管理画面から私たちについてページを作成する
③「sections」フォルダに「page-template.liquid」を新規作成する
④「page.liquid」に記載されているLiquidコードを
「page-template.liquid」にコピーする
<h1>{{ page.title }}</h1>
<div>{{ page.content }}</div>
⑤「page.liquid」には「page-template.liquid」の内容を呼び出すLiquidコードを追加する
{% section 'page-template' %}
⑥「page-template.liquid」の下部にスキーマを設定するコードを追加する
{% schema %}
{
"name": "ページ設定",
"settings": [
{
"type": "select",
"id": "container",
"label": "レイアウト",
"options": [
{
"value": "container",
"label": "固定幅"
},
{
"value": "container-fluid",
"label": "横幅100%"
}
],
"default": "container"
}
]
}
{% endschema %}
このスキーマを追加すると管理画面に独自のメニューを追加することができる。
![](https://assets.st-note.com/img/1641964507702-KMyXgEeNRb.jpg?width=800)
⑦「page-template.liquid」に固定幅か横幅100%かを分岐させるコードを追加する
{% if section.settings.container == 'container' %}
{% assign container_class = 'container' %}
{% else %}
{% assign container_class = 'container-fluid' %}
{% endif %}
<div class="{{ container_class }}">
<h1>{{ page.title }}</h1>
<div>{{ page.content }}</div>
</div>
![](https://assets.st-note.com/img/1641965595827-DKE030GAGD.jpg?width=800)
![](https://assets.st-note.com/img/1641965612529-Ua1F1Mj6Pd.jpg?width=800)
⑧「page-template.liquid」に余白の追加と公開日を追加する
{% if section.settings.container == 'container' %}
{% assign container_class = 'container' %}
{% else %}
{% assign container_class = 'container-fluid' %}
{% endif %}
<div class="{{ container_class }} my-5">
<h1>{{ page.title }}</h1>
<small>{{ page.published_at | date: '%B %d, %Y' }}</small>
<div class="my-5">{{ page.content }}</div>
</div>
⑨日付の表示・非表示を管理画面で設定できるようにする
{% schema %}
{
"name": "ページ設定",
"settings": [
{
"type": "select",
"id": "container",
"label": "レイアウト",
"options": [
{
"value": "container",
"label": "固定幅"
},
{
"value": "container-fluid",
"label": "横幅100%"
}
],
"default": "container"
},
{
"type": "checkbox",
"id": "show_publish_date",
"default": true,
"label": "公開日を表示する"
}
]
}
{% endschema %}
⑩「page-template.liquid」に公開日を表示するかしないかを分岐させるコードを追加する
{% if section.settings.show_publish_date == true %}
<small>{{ page.published_at | date: '%B %d, %Y' }}</small>
{% endif %}
よくあるご質問ページを作成する
前準備
①「templates」フォルダに「page.faq.liquid」を新規作成する
ファイル名が「page-faq.liquid」ではない。
②管理画面からよくあるご質問ページを作成する
③テンプレートを「faq」を選択する
④「sections」フォルダに「page-faq-template.liquid」を新規作成する
⑤「page-faq-template.liquid」の下部にスキーマを設定するコードを追加する
{% schema %}
{
"name": "FAQ",
"blocks": [
{
"name": "よくあるご質問",
"type": "faq",
"settings": [
{
"type": "text",
"id": "title",
"label": "よくあるご質問",
"default": "ご質問"
},
{
"type": "richtext",
"id": "answer",
"label": "回答"
}
]
}
]
}
{% endschema %}
blocksを使うとドラッグアンドドロップでメニューを動かすことができる
![](https://assets.st-note.com/img/1641970044474-JNlWqV7put.jpg?width=800)
ご質問01、ご質問02、ご質問03がブロックになる
ブロックとは以下のようなイメージである
![](https://assets.st-note.com/img/1641970053551-kAGCXLEIO5.jpg?width=800)
⑥「page-faq-template.liquid」によくあるご質問の内容をアコーディオンで表示するコードを追加する
Bootstrapの記述はGoogle検索でお願いします。
<div class="container">
<div class="row my-5">
<h3 class="text-center">{{ page.title }}</h3>
</div>
<div class="accordion accordion-flush" id="accordionFAQ">
{% for block in section.blocks %}
<div class="accordion-item">
<h2 class="accordion-header" id="collapse-header-{{ block.id }}">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse-{{ block.id }}"
aria-expanded="false"
aria-controls="{{ block.id }}"
>
{{ block.settings.title }}
</button>
</h2>
<div
class="accordion-collapse collapse p-3"
id="collapse-{{ block.id }}"
aria-labelledby="collapse-header-{{ block.id }}"
data-bs-parent="#accordionFAQ"
>
{{ block.settings.answer }}
</div>
</div>
{% endfor %}
</div>
</div>
![](https://assets.st-note.com/img/1641973637600-JYQX1Rl6IW.jpg?width=800)
この記事が気に入ったらサポートをしてみませんか?