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