Preface
Goal: Using static data feature.
Source Code
This article use tutor-11 theme. We will create it step by step.
8: Friends
As every SSG does, jekyll
also has feature to access static data.
Data: YAML: Friends
I always like to give a link to my fellow blogger folks. So I made a special data for these great people.
# Helper for friends widget
- title: "BanditHijo (R)-Chive"
url: https://bandithijo.github.io/
- title: "Elianiva"
url: https://elianiva.github.io/
- title: "Azzam Syawqi Aziz"
url: https://azzamsa.com/
- title: "Muhammad Fahri"
url: https://muhammadfahri.now.sh/
- title: "Sira Argia (Aflasio)"
url: https://aflasio.netlify.app/
...
Liquid: Shuffle
I need to show five bloggers randomly for each pages.
We already have limit
filter in previous article.
Now we require to add a new shuffle
filter in main configuration.
Since liquid
does not have a built in function forshuffle
.
We need to have additional fake randomize:
After duckduckwent fo a while, I got this shuffle code from stackoverflow:
{% assign length = 5 %}
{% assign size_adjusted = site.data.friends | size | minus: length %}
{% assign start = page.date | date: "%d" | modulo: size_adjusted
Note that, you can also use plugin instead.
Partial Widget: Liquid: Friends
{% comment %}
fake randomize by using date day for array under 30 data
{% endcomment %}
{% capture widget_header %}
<strong>Isle of Dotsites</strong>
<i data-feather="users" class="float-right"></i>
{% endcapture %}
{% capture widget_body %}
{% assign length = 5 %}
{% assign size_adjusted = site.data.friends | size | minus: length %}
{% assign start = page.date | date: "%d" | modulo: size_adjusted %}
<ul class="widget-list">
{% assign selection = site.data.friends | slice: start, length %}
{% for friend in selection %}
<li><a href="{{ friend.url }}">{{ friend.title }}</a></li>
{% endfor %}
</ul>
{% endcapture %}
{% assign color = "pink" %}
{% include template/widget.html %}
Data Loop
Using data is straightforward
{% assign selection = site.data.friends %}
{% for friend in selection %}
<li><a href="{{ friend.url }}">{{ friend.title }}</a></li>
{% endfor %}
Filter: Shuffle
If you can afford plugin in your CI/CD,
you can utilize ruby shuffle
instead in a filter.
module Jekyll
module ShuffleFilter
def shuffle(array)
array.shuffle
end
end
end
Liquid::Template.register_filter(Jekyll::ShuffleFilter)
Now the loop become short and simple.
{% capture widget_body %}
<ul class="widget-list">
{% assign selection = site.data.friends | shuffle %}
{% for friend in selection limit:5 %}
<li><a href="{{ friend.url }}">{{ friend.title }}</a></li>
{% endfor %}
</ul>
{% endcapture %}
Render: Browser
You can open page
kind, or post
kind, to test this widget
.
9: Backlink: External Archive
I have four blogs, each already have generated archive data. So it makes sense that I put backlinks from my own static blog, in each post.
Data: YAML: Github Archive
My generated data from my Jekyll site looks like below:
# Helper for related links
- id: 20020225
title: "Presentation - Learning Linux Diversity"
url: /system/2020/02/02/presentation-linux-diversity.html
- id: 20012025
title: "Presentation - Desktop Customization"
url: /desktop/2020/01/20/presentation-desktop-customization.html
- id: 19120325
title: "Awesome WM - Presentation - Statusbar"
url: /desktop/2019/12/03/awesome-presentation-statusbar.html
...
I put this in my jekyll static data directory manually.
Data: YAML: Gitlab Archive
And, my generated data from my Hugo site looks like below:
# Helper for related links
# Archives by Date
- id: 20051517
title: "Template - Koa"
url: /frontend/2020/05/15/template-koa/
- id: 20051317
title: "Template - Express - Handlebars"
url: /frontend/2020/05/13/template-express-handlebars/
- id: 20051217
title: "Template - Express - EJS"
url: /frontend/2020/05/12/template-express-ejs/
From my Hugo site:
I also put this in my jekyll
static data directory manually.
Partial Widget: Liquid: Github Archive
I also use fake randomize.
{% comment %}
fake randomize by using year day for array under 365 data
{% endcomment %}
{% capture widget_header %}
<strong>Web/Mobile Development</strong>
<i data-feather="external-link" class="float-right"></i>
{% endcapture %}
{% capture widget_body %}
{% assign length = 5 %}
{% assign archives = site.data.archives_gitlab %}
{% assign size_adjusted = archives | size | minus: length %}
{% assign start = page.date | date: "%j" | modulo: size_adjusted %}
<ul class="widget-list">
{% assign selection = archives | slice: start, length %}
{% for archive in selection %}
<li><a href="https://epsi-rns.gitlab.io{{ archive.url }}"
>{{ archive.title }}</a></li>
{% endfor %}
</ul>
{% endcapture %}
{% assign color = "lime" %}
{% include template/widget.html %}
Filter: Shuffle
If you can afford plugin in your CI/CD,
you can utilize ruby shuffle
instead in a filter,
so the loop become short and simple.
{% capture widget_body %}
<ul class="widget-list">
{% assign selection = site.data.archives_github | shuffle %}
{% for archive in selection limit:5 %}
<li><a href="https://epsi-rns.github.io{{ archive.url }}"
>{{ archive.title }}</a></li>
{% endfor %}
</ul>
{% endcapture %}
Render: Browser
You can open page
kind, or post
kind, to test this widget
.
Partial Widget: Liquid: Gitlab Archive
Again, I use fake randomize.
{% comment %}
fake randomize by using year day for array under 365 data
{% endcomment %}
{% capture widget_header %}
<strong>Web/Mobile Development</strong>
<i data-feather="external-link" class="float-right"></i>
{% endcapture %}
{% capture widget_body %}
{% assign length = 5 %}
{% assign archives = site.data.archives_gitlab %}
{% assign size_adjusted = archives | size | minus: length %}
{% assign start = page.date | date: "%j" | modulo: size_adjusted %}
<ul class="widget-list">
{% assign selection = archives | slice: start, length %}
{% for archive in selection %}
<li><a href="https://epsi-rns.gitlab.io{{ archive.url }}"
>{{ archive.title }}</a></li>
{% endfor %}
</ul>
{% endcapture %}
{% assign color = "lime" %}
{% include template/widget.html %}
Filter: Shuffle
The same method applied here.
Render: Browser
You can open page
kind, or post
kind, to test this widget
.
10: Related Posts
Custom Output
We have already seen in previous article, that we can generate our own custom data:
The generated data from my Jekyll site can be accessed from:
Using previously saved file _data/archives.yaml
.
Note that this archive saved manually from generated content.
You can just copy the result manually,
from _site/pages/archives.yml
to folder _data/archives.yml
.
Data: YAML: Archives
The data looks like below:
# Helper for related links
- id: 20031535
title: "Company of Thieves - Oscar Wilde"
url: /lyric/2020/03/15/company-of-thieves-oscar-wilde.html
- id: 19071535
title: "Mothers - No Crying in Baseball"
url: /lyric/2019/07/15/mothers-no-crying-in-baseball.html
- id: 19052535
title: "Brooke Annibale - Yours and Mine"
url: /lyric/2019/05/25/brooke-annibale-yours-and-mine.html
The ID, comes from dates and minutes. automatic generated by script from previous article.
Page Content: Frontmatter
Now we can add variable in page content.
Consider name the variable related_link_ids
.
This should contain array of id
in yaml.
---
layout : post
title : Brooke Annibale - Yours and Mine
date : 2019-05-25 07:35:05 +0700
categories : lyric
tags : [pop, 2010s]
keywords : [OST, "One Tree Hill"]
author : Brooke Annibale
related_link_ids :
- 19051535 # By Your Side
---
...
---
layout : post
title : Brooke Annibale - By Your Side
date : 2019-05-15 07:35:05 +0700
categories : lyric
tags : [pop, 2010s]
keywords : [OST, "Grey's Anatomy"]
author : Brooke Annibale
related_link_ids :
- 19052535 # Yours and Mine
---
...
Partial Widget: Liquid: Related Posts
Here is how its works.
The widget accessed page.related_link_ids
.
{% unless page.related_link_ids == nil
or page.related_link_ids == empty %}
{% capture widget_header %}
<strong>Related Posts</strong>
<i data-feather="link-2" class="float-right"></i>
{% endcapture %}
{% capture widget_body %}
<ul class="widget-list">
{% for link_id in page.related_link_ids %}
<li>
{% for dpost in site.data.archives %}
{% if dpost.id == link_id %}
<a href="{{ site.baseurl }}{{ dpost.url }}"
>{{ dpost.title }}</a>
{% endif %}
{% endfor %}
</li>
{% endfor %}
</ul>
{% endcapture %}
{% assign color = "lime" %}
{% include template/widget.html %}
{% endunless %}
I know it is a little bit complex.
And lately, I rarely use this related_link_ids
feature myself.
But I still keep this feature for a few of my posts.
Render: Browser
You can open post
kind, to test this widget
.
You can have as many related posts as you need.
11: Summary
As a summary here is the aside
partial for post
layout.
Partial: Post Aside
{% include widget/archive.html %}
{% include widget/related-posts.html %}
{% include widget/tags.html %}
{% comment %}
{% include widget/friends.html %}
{% include widget/archives-gitlab.html %}
{% include widget/archives-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 %}
You can add or remove widget, as you want them to be.
Render: Browser
The looks in desktop screen is shown as below figure:
What is Next?
Consider continue reading [ Jekyll Bootstrap - Pagination - Stylesheet ].
Thank you for reading.