Preface
Goal: Miscellanous range loop to achieved wordpress like side panel widget.
Source Code
This article use tutor-11 theme. We will create it step by step.
5: Recent Posts
This require limit
in iteration,
and shopfiy
has built in limit
parameter.
Layout: Nunjucks Page or Post
Consider examine only recent posts:
{% include widget/recent-posts.html %}
Partial Widget: Liquid: Recent Post
{% capture widget_header %}
<strong>Recent Posts</strong>
<i data-feather="clock" class="float-right"></i>
{% endcapture %}
{% capture widget_body %}
<ul class="widget-list">
{% for post in site.posts limit:5 %}
<li><a href="{{ site.baseurl }}{{ post.url }}"
>{{ post.title }}</a></li>
{% endfor %}
</ul>
{% endcapture %}
{% assign color = "red" %}
{% include template/widget.html %}
The Loop
site.posts
is already sorted by date.
I limit the result for only first five result.
{% for post in site.posts limit:5 %}
...{{ post.title }}...
{% endfor %}
Render: Browser
You can open page
kind, or post
kind, to test this widget
.
6: Taxonomy
Just a simple loop example.
Layout: Liquid: Page or Post
Consider examine only tags:
{% include widget/tags.html %}
Partial Widget: Liquid: Tags
{% assign color = "grape" %}
{% capture widget_header %}
<strong>Tags</strong>
<i data-feather="tag" class="float-right"></i>
{% endcapture %}
{% capture widget_body %}
{% for tag in site.tags %}
<a class="pb-5"
href="{{ site.baseurl }}/pages/tag#{{ tag[0] | slugify }}">
<span class="badge oc-white z-depth-1 hoverable">
<i data-feather="tag" class="feather-14"></i>
{{ tag[0] }}
</span></a>
{% endfor %}
{% endcapture %}
{% include template/widget.html %}
The Loop
This is actually, only a simple loop example, but with complex html formatting.
{% for tag in site.tags %}
...{{ tag[0] }}...
{% endfor %}
Render: Browser
You can open page
kind, or post
kind, to test this widget
.
Layout: Liquid: Page or Post
The same applied with categories.
Consider examine only tags:
{% include widget/categories.html %}
Partial Widget: Liquid: Categories
{% assign color = "cyan" %}
{% capture widget_header %}
<strong>Categories</strong>
<i data-feather="folder" class="float-right"></i>
{% endcapture %}
{% capture widget_body %}
{% for cat in site.categories %}
<a class="pb-5"
href="{{ site.baseurl }}/pages/category#{{ cat[0] | slugify }}">
<span class="badge oc-{{ color }}-3 z-depth-1 hoverable">
{{ cat[0] }}
<i data-feather="folder" class="feather-14"></i>
</span></a>
{% endfor %}
{% endcapture %}
{% include template/widget.html %}
The Loop
This is actually, only a simple loop example, but with complex html formatting.
{% for cat in site.categories %}
...{{ cat[0] }}...
{% endfor %}
Render: Browser
You can test this widget
in your browser.
7: Grouped Archives
Making a grouping archive by month and year is not hard, it just need carefully carved with patient. Consider this step by step procedure to make this happened:
-
List without Grouping
-
Grouping by Year
-
Grouping by Year, then Month
-
Give a Nice Formatting.
List without Grouping
Consider examine from simple archive:
{% include widget/archive-simple.html %}
This require only one loops.
{% capture widget_header %}
<strong>Archives</strong>
<i data-feather="external-link" class="float-right"></i>
{% endcapture %}
{% capture widget_body %}
<ul class="widget-list">
{% for post in site.posts %}
<li>
<a href="{{ site.baseurl }}{{ post.url }}"
>{{ post.title }}</a>
</li>
{% endfor %}
</ul>
{% endcapture %}
{% assign color = "green" %}
{% include template/widget.html %}
With the result as below figure:
Grouping by Year
Consider examine from archive by year:
{% include widget/archive-year.html %}
This require two loops.
-
Loop of Year, using
group_by_exp
Filter -
Loop of Post.
{% capture widget_body %}
{% assign pg_year = page.date | date: '%Y' %}
{% assign postsByYear = site.posts | group_by_exp: "post", "post.date | date: '%Y'" %}
{% for year in postsByYear %}
{% if pg_year == year.name %}
<ul class="widget-list">
{% for post in year.items %}
<li>
<a href="{{ site.baseurl }}{{ post.url }}"
>{{ post.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
{% endcapture %}
With the result as below figure:
Grouping by Year, then Month
Consider examine from archive by month:
{% include widget/archive-month.html %}
This require three loops.
-
Loop of Year, using
group_by_exp
Filter -
Loop of Month in Year, also using
group_by_exp
Filter -
Loop of Post.
{% capture widget_body %}
{% assign pg_year = page.date | date: '%Y' %}
{% assign pg_month = page.date | date: '%m' %}
{% assign postsByYear = site.posts | group_by_exp: "post", "post.date | date: '%Y'" %}
{% for year in postsByYear %}
{% if pg_year == year.name %}
{% assign postsByMonth = year.items |
group_by_exp: "post", "post.date | date: '%m'" %}
{% assign postsByMonthSorted = postsByMonth |
sort: 'name' | reverse %}
{% for month in postsByMonthSorted %}
{% if pg_month == month.name %}
<ul class="widget-list">
{% for post in month.items %}
<li>
<a href="{{ site.baseurl }}{{ post.url }}"
>{{ post.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endcapture %}
With the result as below figure:
Give a Nice Formatting.
Consider examine our final archive partial:
{% include widget/archive.html %}
Each stuff should have their own header.
{% capture widget_body %}
{% assign pg_year = page.date | date: '%Y' %}
{% assign pg_month = page.date | date: '%m' %}
{% assign path_y = "/pages/by-year" | prepend: site.baseurl %}
{% assign path_m = "/pages/by-month" | prepend: site.baseurl %}
{% assign postsByYear = site.posts | group_by_exp: "post", "post.date | date: '%Y'" %}
{% for year in postsByYear %}
<div class ="archive-year" id="{{ year.name }}">
<a href="{{ path_y }}#{{ year.name }}">
{{ year.name }}</a>
</div>
{% if pg_year == year.name %}
<ul class="widget-archive">
{% assign postsByMonth = year.items |
group_by_exp: "post", "post.date | date: '%m'" %}
{% assign postsByMonthSorted = postsByMonth |
sort: 'name' | reverse %}
{% for month in postsByMonthSorted %}
<li class="list-month">
{% for post in month.items limit:1 %}
<span class ="archive-month">
<a href="{{ path_m }}#{{ post.date | date: '%Y-%m' }}">
{{ post.date | date: '%B %Y' }}
</a></span>
{% endfor %}
{% if pg_month == month.name %}
<ul class="widget-list">
{% for post in month.items %}
<li>
<a href="{{ site.baseurl }}{{ post.url }}"
>{{ post.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
{% endcapture %}
This widget is specifically made for post
kind,
because we have already set date for each post
kind.
What is Next?
Consider continue reading [ Jekyll Bootstrap - Widget - Static Data ].
Thank you for reading.