ssg  
Article Series

Jekyll in General

Jekyll Plain

Preface

Goal: Simple HTML to achieved wordpress like side panel widget.

Source Code

This article use tutor-11 theme. We will create it step by step.


1: Prepare

These widget will be shown in both page kind and post kind, using columns-double layout. We need to change the whole part of the aside element, so that aside element can contain multiple widget.

Parent Layout: Liquid: Double Columns

Consider alter the aside element, in parent layout for double column layout.

  <aside id="aside_toggler"
         class="col-md-4 px-0">
    {% include {{ layout.aside_content }} %}
  </aside>

Layout: Page and Post

Where in _layout/page.html you can set in frontmatter.

aside_content   : page/aside-content.html

And in _layout/post.html you can set in frontmatter.

aside_content   : post/aside-content.html

Partial: Page Aside

The aside element is depend on what widget you need to show. My default arrangement can be shown as below:

{% include widget/recent-posts.html %}

Layout: Post

So is the post kind, it has widget on right sidebar, with my default arrangement as below layout::

{% include widget/archive.html %}
{% include widget/related-posts.html %}
{% include widget/tags.html %}

You are freely to change what widget you want to show. I utilize unused block to contain all widget.

{% comment %}
  {% include widget/friends.html %}
  {% include widget/archive-gitlab.html %}
  {% include widget/archive-github.html %}

  {% include widget/categories.html %}
  {% include widget/tags.html %}

  {% include widget/recent-posts.html %}
  {% include widget/related-posts.html %}

  {% include widget/affiliates.html %}
  {% include widget/oto-spies.html %}
{% endcomment %}

It is basically just making a scrathpad note for myself. So that, I can copy paste any line from this block, whenever I need to.


2: Widget Parent Class

liquid doesn’t have block concept, but you can have similar result using capture, to prepare required variable.

Template Layout: Widget

This means you can refactor common component such as widget, into a generic template as below:

    <section class="aside-wrapper oc-{{ color }}-5">
      <div class="widget oc-white z-depth-3 hoverable">     

        <div class="widget-header oc-{{ color }}-1">
          {{ widget_header }}
        </div>

        <div class="widget-body responsive-img">
          {{ widget_body }}
        </div>

      </div>
    </section>

Jekyll: NERDTree: Widget Layout


3: Simple Example

Layout: Layout: Page or Post

Consider examine only affiliate links:

{% include widget/affiliates.html %}

Partial Widget: HTML Affiliates

Now we can use above template, for our simple widget example as below code:

{% capture widget_header %}
  <strong>Affiliates</strong>
  <i data-feather="droplet" class="float-right"></i>
{% endcapture %}

{% capture widget_body %}
  <ul class="widget-list">
    <li><a href="http://epsi-rns.github.io/"
          >Linux/BSD Desktop Customization</a></li>
    <li><a href="http://epsi-rns.gitlab.io/"
          >Mobile/Web Development Blog</a></li>
    <li><a href="http://oto-spies.info/"
          >Car Painting and Body Repair.</a></li>
  </ul>
{% endcapture %}

{% assign color = "green" %}
{% include template/widget.html %}

This the basic of HTML class required for the rest of this article.

Capture

You should see how a variable captured.

{% capture widget_header %}
  <strong>Affiliates</strong>
  <i data-feather="droplet" class="float-right"></i>
{% endcapture %}

And used later by calling include template/widget.html.

<div class="widget-header oc-{{ color }}-1">
  {{ widget_header }}
</div>

Render: Browser

You can open page kind, or post kind, to test this widget.

Jekyll: Widget: Affiliates


4: Responsive Image

Additional Settings

I add responsive-img, so any image will be resized folloing the widget size.

<div class="widget-body responsive-img">
  {{ widget_body }}
</div>
.responsive-img img {
  max-width: 100%;
  height: auto;
}

Now you can have in widget, your own commercial advertisement.

Layout: Liquid: Page or Post

Consider examine only commercial links:

{% include widget/oto-spies.html %}

Partial Widget: HTML Oto Spies

{% capture widget_header %}
  <strong>Car Painting and Body Repair</strong>
  <i data-feather="tool" class="float-right"></i>
{% endcapture %}

{% capture widget_body %}
  <a href="http://oto-spies.info/">
    <img src="{{ site.baseurl }}/assets/images/adverts/oto-spies-01.png"
         alt="Oto Spies"></a>
{% endcapture %}

{% assign color = "gray" %}
{% include template/widget.html %}

Pick the right color, that match your business.

Render: Browser

You can open page kind, or post kind, to test this widget.

Jekyll: Widget: Oto Spies

That both two example use pure HTML. Now we need to leverage to use loop with liquid, and also using static data with liquid.


What is Next?

Consider continue reading [ Jekyll Bootstrap - Widget - Liquid Loop ].

Thank you for reading.