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