Liquidとは、Rubyベースのテンプレートエンジン

Shopifyのコードを触ってみたいが、どうやって触るんだろう？
ということで、ちょっと調べてみたのですが、Liquidというのは、「Shopifyによって作成され、Rubyで書かれたテンプレート言語」のようです。
とは言ってもちょっとプログラム出身ではないので、しっくりきませんが。。

WordPressで言えば、テンプレートタグそのものがそれにあたるようですね。
このテンプレートタグを使用すると、様々な複雑な処理が簡単にできるようになりそうです。
とは言ってもタグがどのような種類があって、どのような処理や書き方をするのでしょうか？

今日は、初めてなので、まずは、よく使いそうであろうものから試してみました。

画像を表示する(asset_img_url)

まずは、画像の表示をしてみます。
あらかじめ、assetsフォルダに画像をアップロードしておきましょう。

//INPUT
{{ '画像名.png' | asset_url | img_tag }}

というようなタグがありますので、これが出力されると、

//OUTPUT

のように画像タグが出力されます。

リンクの設定をする

基本的なHTMLリンクを生成する

次は、リンクを設定してみます。
テキスト・リンク先URL・title要素を設定します。

//INPUT
{{ 'Shopify' | link_to: 'https://www.shopify.com','A link to Shopify' }}

と入力すると、

　
//OUTPUT
Shopify
　

と出力されます。

TOPページへのリンク

TOPページへのリンクを設定してみます。

　
//INPUT
{{ routes.root_url }}
　

と入力すると、

　
//OUTPUT
リンクテキストや画像
　

と出力されます。

ショッピングカートへのリンク

ショッピングカートページへのリンクを設定してみます。

　
{{ routes.cart_url }}
　

と入力すると、

　
カートをみる
　

と出力されます。

サイト内の各ページへのリンクを貼るためのタグは他にも色々あるようなので、また後日紹介していきたいと思います。

CSSを読み込む(asset_url)

次に、CSSファイルを読み込んでみましょう。

　
//INPUT
{{ 'CSSのファイル名.css' | asset_url | stylesheet_tag }}
　　

とするとCSSが読み込まれますので、任意のファイル名に書き換えて使用します。

　
//INPUT

　

Javascriptを読み込む。(asset_url)

　
//INPUT
{{ 'Jsのファイル名.js' | asset_url | script_tag }}
　　

　
//OUTPUT  　　

のようになります。

liquidファイルをインクルードする

下記のような記述をすると、任意のliquidファイルをインクルードすることができます。
snippetsフォルダ内にあるファイルは、

　
{% include 'parts-name' %}
　

と記述すると、インクルードされます。

また、headerやfooter等、sectionsフォルダ内にあるものは、

　
{% section 'header' %}
　

と記述することで、インクルード可能になります。

まとめ

取り急ぎ、初めの一歩という感じのタグを紹介させていただきました。
慣れてきたら、色々な処理方法を紹介していきたいと思います。
下記は、ShopifyのLiquidのチートシートになりますので、気になる方は参考にしてみてください。

Shopifyでコレクションページの商品一覧の行数・列数の設...

Shopifyでまずは管理画面上からTOPページデザインをカ...