フレッシュなうちに備忘録を

💡 解決したこと・やりたいこと

・BlogとNewsでデザインを変えたい
・BlogとNewsを分けてトップページに表示したい
・それぞれ個別ページに関連記事を表示したい

🖥 環境

基本テンプレートDebutでの話をします

・テンプレートはDebut
・サンプルでの分類は日本語ですが英語推奨
👉 BlogとNewsとしてますが、サンプルはニュースとジャーニー

✒️ 基本設定

🔍そもそもの記事の分け方

ブログ記事を追加する＞ 分類エリア ＞ ブログ

ここでカテゴリに近い考え方の分類をします。
サンプルは日本語でつくっちゃってますが、英単語の方がいいです。

そうすると内部的には、Blog用の記事とNews用の記事と分類されて取り扱われます。

✍️ テンプレートを変更する

テンプレート名↓

📄 section > article.liquid

💪 やること
・それぞれにクラスを振り分ける
・レイアウトをそれぞれ変える

それぞれにクラスを振り分ける

 {{blog.handle}}

liquid言語は２重波かっこでhtml内に出力することができます。
基本設定で設定した分類（NewsやBlog)は上の {{blog.handle}}で取得することができます。

これを利用して、classを振り分けます。
具体的には、article.liquidの一番上階層のhtmlを以下のようにclass名のところに{{blog.handle}}を挿入します。（半角スペース忘れずに）

👈 Before

<article class="page-width" aria-labelledby="title-0">

👉 After

<article class="page-width {{ blog.handle }}" aria-labelledby="title-0">

💡 出力結果

きちんと、page-widthに続いて 分類名の　"ジャーニー"　が出力されました。もちろんニュースの記事だったらここは　”ニュース”　が出力されます。
あくまでもサンプルなので、日本語ですが英単語推奨です。

これで、クラス別にそれぞれCSSを書き分けることができます。

✂️ Blog別（ニュース、ブログ）にレイアウトを変更する

たとえば以下のような想定だった場合です

・Blog記事は写真が必要で複雑なレイアウト
・Newsは写真がいらない単純なレイアウト

👉 if文で出しわけ方

{% if  == '○○○' %}
　ここにレイアウトを挿入
{%- endif -%}

liquidでは簡単にif文を挿入できます。
これを利用して、先のCSSの出しわけと合わせて以下のようなテンプレートに変更します

📄 article.liquid

<article class="page-width {{ blog.handle }}" aria-labelledby="title-0">

   {% if blog.handle == 'blog' %} 
   
         <div id="blogArticle">

             ブログ用のレイアウトいろいろ書く
             
       </div>
   {%- endif -%}
   
   
   {% if blog.handle == 'news' %} 
   
       <div id="newsArticle">
  
             ニュース用のレイアウトいろいろ書く
             
       </div>
   {%- endif -%}
   
</article>

これで、基本的にarticle.liquidの話は終わりです。
ちなみに管理画面で書いたBlogは、以下のようなタグで出力可能です。（テンプレートに予め書いてあります）

ブログタイトル ： {{ article.title }}
ブログに設定した画像 : {{ article.image}}
本文：{{ article.content }}
日付：{{ article.published_at | date: '%Y.%m.%d' }}

📰 関連記事を表示したい

Shopifyアプリを使います。
Related Blog Postsが無料で使えて便利です。

完成イメージ

設定画面

👂 設定画面で聞かれていることは以下

1️⃣ Number of related posts to display :　何記事表示する？
2️⃣ Display the related posts image:　画像いる？
3️⃣ サイズ？
4️⃣ Source of the excerpt : 概要文どこからもってくる？
5️⃣ How to handle no related posts :　関連なかったらどうする？
（何も出さない？/ ランダムで出しとく？/ メッセージ出す？）
6️⃣ Blogs to display on :　どのブログで出す？
7️⃣ Show only the same blog type : 同じ分類のブログだけにする？
（ブログを跨いで表示したいときはNo）

ちなみに、CSSを管理画面からカスタム入力できますが、html内に適当に出力されるだけなので、自分が管理しているCSSファイル内に書きましょう。

その他、コンテンツに使われる画像サイズ、出力するもの titleなのか日付なのか、ようやくなのかは追加されるテンプレートファイルに記述します

snippets > relatedblog.liquid

⚠️⚠️⚠️⚠️⚠️ 
テンプレートを変更して、また設定画面を触るとテンプレートが上書きされるので注意　
⚠️⚠️⚠️⚠️

いま説明のために触ったので書き直します・・・

👨‍👨‍👦‍👦 おまけ： 写真がなかったらNo Photo画像を表示する

写真がなかった場合いわゆる「No Photo」画像を表示させることもできます。こちらもif文で

{% if article.image %}　とかくと
「もし、ブログにイメージ画像があったら」という意味の条件になります

{%- else -%} 以降に画像がなかった場合の記述をします

{% if article.image %}
         <img src="{{ article.image | img_url: '2000x1248', crop: 'center' }}" alt="{{ article.image.alt }}" class="lazyload"/>
    {%- else -%}
         <img src="{{ 'noimage.png' | file_img_url: '2000x1248', crop: 'center' }}" alt="" class="lazyload"/>
{% endif %}

noimage.pngをshopify内の「ファイル」にアップロードした場合、
'noimage.png' | file_img_url　の書き方で、該当のパスを出力できます。

🖥 トップページに表示させる

テンプレート：index.liquid

	<section>

		<div>
			<h3>BLOG</h3>
			<ul>
				{% for article in blogs['blog'].articles | limit: 3 %}
					<li><a href="{{ article.url }}"><time datetime="{{ article.published_at | date: '%Y.%m.%d' }}">{{ article.published_at | date: '%Y.%m.%d' }}</time>{{article.title}}</a></li>
				{% endfor %}
			</ul>
		</div>

		<div>
			<h3>NEWS</h3>
			<ul>
				{% for article in blogs['news'].articles | limit: 3 %}
					<li><a href="{{ article.url }}"><time datetime="{{ article.published_at | date: '%Y.%m.%d' }}">{{ article.published_at | date: '%Y.%m.%d' }}</time>{{article.title}}</a></li>
				{% endfor %}
			</ul>
		</div>
	</section>

トップページは、for文で表示させます。

blogs['ハンドル名'].articles 

の書き方で、それぞれの記事が取得できます。
上の参考は、タイトル、日付、URLを出力する単純な構造です。

カスタマイズしだしたらキリがないShopifyですが、少しでも参考になれば