Eleventy - Widget - Simple HTML

   
   
 11ty  
 ssg  
Article Series

This article series contain few sections.

Eleventy Basic

General Design

Custom Pages

Widget Component

Pagination Component

Page Content

Related Article Series

Conclusion

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

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.