ssg  
Article Series

Jekyll in General

Jekyll Plain

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.

Jekyll: Widget: Recent Posts


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>
        &nbsp;{{ tag[0] }}
    </span></a>&nbsp;
  {% 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.

Jekyll: Widget: Tags

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] }}&nbsp;
        <i data-feather="folder" class="feather-14"></i>
    </span></a>&nbsp;
  {% 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.

Jekyll: Widget: Categories


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:

  1. List without Grouping

  2. Grouping by Year

  3. Grouping by Year, then Month

  4. 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:

Jekyll: Widget: Simple Archive

Grouping by Year

Consider examine from archive by year:

{% include widget/archive-year.html %}

This require two loops.

  1. Loop of Year, using group_by_exp Filter

  2. 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:

Jekyll: Widget: Archive by Year

Grouping by Year, then Month

Consider examine from archive by month:

{% include widget/archive-month.html %}

This require three loops.

  1. Loop of Year, using group_by_exp Filter

  2. Loop of Month in Year, also using group_by_exp Filter

  3. 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:

Jekyll: Widget: Archive by Month

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 %}

Jekyll: Widget: Archive with HEaderby Month

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.