Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
By going through the official document you can learn more about 3 important pillars about Liquid, Objects, tags, filters, so I won’t repeat that again.
Jekyll and Liquid
Jekyll uses the Liquid templating language to process templates. During the polishing of my blog, I find the Liquid template very convenient for rendering information but also very cumbersome for implementing code logics where they are easy to write with other languages.
I will give you an example here when I started working on grooming the tags of my blogs and presenting them in order of associated blog numbers descendingly.
Some trouble I have faced in the process
Array
First, it’s the Array operation. I thought I can create an Array using this syntax {% assign array = [] %} but unfornately it’s not possible. There is no document about how to create an empty array in offcial pages which is disappointing.
Create an empty array
Luckily I find it from StackOverflow, and the only way of creating an empty Array looks bizarre.
{% assign array = '' | split: '' %}
Add element to an array
In order to insert an element into array, you have to use push filter.
{% assign array = array | push: element %}
Update an array
However, the most tricky part is to update an array.
At fitst, I imagine this would work because it’s just the most natural way to replace an element in an Array.
# this is a WRONG example!
{% assign array[index] = element %}
But the reality hit me so hard and I spent much time on trying different methods and searching solutions online. Have to say, there is no official recommended way of updating an array. But I’ve worked out a way and if you are reading this right now and know there is a better way please let me know!
SOLUTION A:
The idea is that convert an array into a string and replace the element you want to replace and then convert it back to an array. But this only works for arrays which DONOT have duplicate elements.
{% assign array_string = array | join: "," | replace: oldValue, newValue %}
{% assign array = array_string | split: "," %}
SOLUTION B: Say you want to update array[2]=9
{% assign array = '4, 5, 5, 5, 6' | split: ", " %}
{% assign targetValue = 9 %}
{% assign targetIndex = 2 %}
{% assign newArray = '' | split: '' %}
{% for num in array %}
{% if forloop.index0 == targetIndex %}
{% assign newArray = newArray | push: targetValue %}
{% else %}
{% assign newArray = newArray | push: num %}
{% endif %}
{% endfor %}
Display Liquid tags in Liquid
please ignore the space between { and %
{ % raw % }
... so you can put any liquid template tags in between
{ % endraw % }
Operators
I thought a simple increment of number would be like this:
{% assign value = value + 1 %}
but I realised AGAIN that Liquid is not a programming language at all, whereas it’s just a templating method.
So as to do math operations, you need to write code like this:
{% assign value = value | plus: 1 %}
{% assign value = value | minus: 1 %}
{% assign value = value | times: 2 %}
{% assign value = value | divided_by: 4 %}
{% assign value = value | modulo: 5 %}
Liquid includes many logical and comparison operators. You can use operators to create logic with control flow tags.
| operator | description |
| == | equals |
| != | does not equal |
| > | greater than |
| < | less than |
| >= | greater than or equal to |
| <= | less than or equal to |
| or | logical or |
| and | logical and |
https://shopify.github.io/liquid/basics/operators/
How I build stylish “Tags” page
check this out tags
So this piece of code is in fact using insertion sorting algorithm to get site.tags sorted as per numbers of blogs related to the tag.
{% assign sorted_tags_array = '' | split: '' %}
{% for tag in site.tags %}
{% assign current_tag_name = tag[0] %}
{% assign current_tag_size = tag[1].size %}
{% assign sorted_tags_array = sorted_tags_array | push: current_tag_name %}
{% if sorted_tags_array.size < 2 %}
{% continue %}
{% endif%}
{% assign sorted_array_length = sorted_tags_array.size | plus: 0 %}
{% assign sorted_array_length_minusone = sorted_array_length | minus: 1 %}
{% for i in (1..sorted_array_length_minusone) %}
{% assign index = sorted_array_length_minusone | minus: i %}
{% assign index_addone = index | plus:1 %}
{% assign index_tag_name = sorted_tags_array[index] %}
{% assign index_addone_tag_name = sorted_tags_array[index_addone] %}
{% assign index_tag_size = site.tags[index_tag_name].size %}
{% assign index_addone_tag_size = site.tags[index_addone_tag_name].size %}
{% if index_tag_size < index_addone_tag_size %}
{% assign orginal_value_at_index = sorted_tags_array[index] %}
{% assign orginal_value_at_index_addone = sorted_tags_array[index_addone] %}
{% assign newArray = '' | split: '' %}
{% for c in sorted_tags_array %}
{% if forloop.index0 == index %}
{% assign newArray = newArray | push: orginal_value_at_index_addone %}
{% elsif forloop.index0 == index_addone %}
{% assign newArray = newArray | push: orginal_value_at_index %}
{% else %}
{% assign newArray = newArray | push: c %}
{% endif %}
{% endfor %}
{% assign sorted_tags_array = newArray %}
{% else%}
{% break %}
{% endif %}
{% endfor %}
{% endfor %}
Here is about final rendering
<div id="tag-container">
<div id="tag-names">
{% for tag_name in sorted_tags_array %}
{% assign index = forloop.index0 | modulo:9 %}
{% assign colors = "sienna,red,orange,yellow,green,pink,mediumPurple,blue,gray" | split: "," %}
{% assign tag_size = site.tags[tag_name].size %}
<a class="tag-button {{ colors[index] }}" onclick="showTagList('{{ tag_name | slugify}}')">{{ tag_name | upcase }} ({{ tag_size }})</a>
{% endfor %}
</div>
</div>
Reference:
https://shopify.github.io/liquid/
https://shopify.dev/api/liquid/basics
https://jekyllrb.com/docs/step-by-step/02-liquid/