ssg  
Where to Discuss?

Local Group

Preface

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

Source Code

This article use tutor-07 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 block, so that aside block can contain multiple widget.

Layout: Page

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

{% extends "layouts/columns-double.njk" %}

{% block main_color %}{{ color or 'pink' }}{% endblock %}

{% block aside %}
  <aside class="column is-one-thirds">
    {% include "widget/recent-post.njk" %}
    {% include "widget/tags.njk" %}
  </aside>
{% endblock %}

If you want to use different widget, such as display only affiliates widget, you can change this aside block into this:

  <aside class="column is-one-thirds">
    {% include "widget/affiliates.njk" %}
  </aside>

Layout: Post

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

{% extends "layouts/columns-double.njk" %}

{% block main_color %}{{ color or 'blue' }}{% endblock %}

{% block blog_header %}
  {% include "post/blog-header.njk" %}
{% endblock %}

{% block aside %}
  <aside class="column is-one-thirds">
    {%- if related_link_ids -%}
      {% include "widget/related-posts.njk" %}
    {%- endif -%}

    {% include "widget/archive.njk" %}
    {% include "widget/tags.njk" %}
  </aside>
{% endblock %}

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

{% block aside_widget_all %}
  <aside class="column is-one-thirds">
    {% include "widget/tags.njk" %}
    {% include "widget/recent-posts.njk" %}
    {% include "widget/archive-grouped.njk" %}
   
    {%- if related_link_ids -%}
      {% include "widget/related-posts.njk" %}
    {%- endif -%}

    {% include "widget/friends.njk" %}
    {% include "widget/archive-gitlab.njk" %}
    {% include "widget/archive-github.njk" %}
    
    {% include "widget/oto-spies.njk" %}
    {% include "widget/affiliates.njk" %}
  </aside>
{% endblock %}

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

The good thing about nunjucks is, that you can extend any partial template, from a custom parent.

Parent Layout: Widget

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

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

    <div class="widget-header {{ color }} lighten-4">
    {% block widget_header %}
      <strong>Side Widget</strong>
      <span class="fas fa-fingerprint is-pulled-right"></span>
    {% endblock %}
    </div>
    
    <div class="widget-body">
    {% block widget_body %}
    {% endblock %}
    </div>

  </div>
</section>

11ty: NERDTree: Widget Layout


3: Simple Example

Layout: Nunjucks Page or Post

Consider examine only affiliate links:

  <aside class="column is-one-thirds">
    {% include "widget/affiliates.njk" %}
  </aside>

Partial Widget: HTML Affiliates

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

{% extends "layouts/widget.njk" %}

{% set color = 'green' %}

{% block widget_header %}
  <strong>Affiliates</strong>
  <span class="fas fa-fingerprint is-pulled-right"></span>
{% endblock %}

{% block 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>
{% endblock %}

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

Render: Browser

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

11ty: Widget: Affiliates


4: Responsive Image

No need any additional setting, Bulma has already use img { max-width: 100%} by default. So you can have your own commercial advertisement.

Layout: Nunjucks Page or Post

Consider examine only commercial links:

  <aside class="column is-one-thirds">
    {% include "widget/oto-spies.njk" %}
  </aside>

Partial Widget: HTML Oto Spies

  • [gitlab.com/…/views/_includes/widget/oto-spies.njk][tutor-vw-oto-spies]
{% extends "layouts/widget.njk" %}

{% set color = 'grey' %}

{% block widget_header %}
  <strong>Car Painting and Body Repair</strong>
  <span class="fas fa-car-side is-pulled-right"></span>
{% endblock %}

{% block widget_body %}
  <div class="center-align">
    <a href="http://oto-spies.info/">
      <img src="{{ "/assets/images/adverts/oto-spies-01.png" | url }}"
           alt="Oto Spies"></a>
  </div>
{% endblock %}

Pick the right color, that match your business.

Render: Browser

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

11ty: Widget: Oto Spies

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


What is Next ?

Consider continue reading [ Eleventy - Widget - Nunjucks Loop ]. We are going to explore nunjucks’s loop with widget.

Thank you for reading.