おしらせブログを作成する | SkillhubAI(スキルハブエーアイ)

おしらせブログを作成する

file

“おしらせ”のブログ表示をカスタマイズするために、まずはブログ/ブログ記事を用意します。内容は何でもかまわないので、サクッと投稿を作りましょう。

制作ファイルの確認

本チャプターでは、4つのファイルを作成します。

  • ブログテンプレート:blog.info.liquid
  • セクションファイル: main-blog-slim.liquid、featured-blog-slim.liquid
  • スニペットファイル:article-slimlist.liquid

file

今回のレッスンでは、ブログテンプレート(一覧表示)を簡易作成します。 また、次回以降の表示確認に使うブログ記事の作成など、テーマカスタマイズ作成のための準備を行っていきましょう。

ブログ一覧のテンプレートを追加

今回のお題だと、ブログ記事はDawnデフォルトのテンプレートのままで良いです。

ブログ(一覧)ページは、デザインに沿って記事一覧を表示する自作セクションが必要です。そのセクションを読み込むために、ページテンプレートも“デフォルト”とは別のファイルを用意しなくてはいけません。

はじめに、ブログページのテンプレートを新規作成しましょう。 コード編集画面を開きます。 テンプレート の下にある「新しいテンプレートを追加する」をクリック。

ウィンドウで以下のように入力します。
ファイル名は、お好きに設定して頂いても構いません。

  • 作成するテンプレートを選択する:blog
  • ファイル形式:JSON
  • ファイル名:blog.info.json

file file

コード編集画面左上のアイコン(閉じる)で、ストアダッシュボードに戻ってください。

ブログ記事を作成する

“おしらせ”に使う、ブログ記事を作成しましょう。

オンラインストア > ブログ記事 から「ブログ記事を追加する」を選択。

file

下記3つを設定して、保存してください。

  1. タイトル(適当でOK)
  2. コンテンツ(適当でOK)
  3. 公開

file file

保存できたら、メインカラム左上のボタン、もしくはメニューの「ブログ記事」をクリックして一覧に戻ります。

ブログ名/テンプレートを変更する

ブログ記事一覧ページから「ブログを管理する」をクリック。

file

ニュースを開きます。 file

ニュースブログの設定画面が開きます。 タイトルとテーマテンプレートを変更し、保存してください。

file

左メニューから「ブログ記事」を選択。 ブログ一覧画面で、先程作成した記事のブログ名が変更されていればOKです。

file

以下の表示が確認できるように最低2つ以上の記事があると良いです。

  • トップページ:「すべて見る」などブログページへのリンク
  • ブログページ:ページネーションの表示

表示確認用にあといくつか、“おしらせ”ブログのの記事を追加しておいてください。