“おしらせ”のブログ表示をカスタマイズするために、まずはブログ/ブログ記事を用意します。内容は何でもかまわないので、サクッと投稿を作りましょう。
制作ファイルの確認
本チャプターでは、4つのファイルを作成します。
- ブログテンプレート:blog.info.liquid
- セクションファイル: main-blog-slim.liquid、featured-blog-slim.liquid
- スニペットファイル:article-slimlist.liquid
今回のレッスンでは、ブログテンプレート(一覧表示)を簡易作成します。 また、次回以降の表示確認に使うブログ記事の作成など、テーマカスタマイズ作成のための準備を行っていきましょう。
ブログ一覧のテンプレートを追加
今回のお題だと、ブログ記事はDawnデフォルトのテンプレートのままで良いです。
ブログ(一覧)ページは、デザインに沿って記事一覧を表示する自作セクションが必要です。そのセクションを読み込むために、ページテンプレートも“デフォルト”とは別のファイルを用意しなくてはいけません。
はじめに、ブログページのテンプレートを新規作成しましょう。 コード編集画面を開きます。 テンプレート の下にある「新しいテンプレートを追加する」をクリック。
ウィンドウで以下のように入力します。
ファイル名は、お好きに設定して頂いても構いません。
- 作成するテンプレートを選択する:blog
- ファイル形式:JSON
- ファイル名:blog.info.json
コード編集画面左上のアイコン(閉じる)で、ストアダッシュボードに戻ってください。
ブログ記事を作成する
“おしらせ”に使う、ブログ記事を作成しましょう。
オンラインストア > ブログ記事 から「ブログ記事を追加する」を選択。
下記3つを設定して、保存してください。
- タイトル(適当でOK)
- コンテンツ(適当でOK)
- 公開
保存できたら、メインカラム左上のボタン、もしくはメニューの「ブログ記事」をクリックして一覧に戻ります。
ブログ名/テンプレートを変更する
ブログ記事一覧ページから「ブログを管理する」をクリック。
ニュースを開きます。
ニュースブログの設定画面が開きます。 タイトルとテーマテンプレートを変更し、保存してください。
左メニューから「ブログ記事」を選択。 ブログ一覧画面で、先程作成した記事のブログ名が変更されていればOKです。
以下の表示が確認できるように最低2つ以上の記事があると良いです。
- トップページ:「すべて見る」などブログページへのリンク
- ブログページ:ページネーションの表示
表示確認用にあといくつか、“おしらせ”ブログのの記事を追加しておいてください。