Preface
Goal: More about blog post content: Header, Footer, and Navigation.
Source Code
This article use tutor-11 theme. We will create it step by step.
1: Prepare
This preparation is required.
Preview: General
Consider redesign the looks of blog post. This is what we want to achieve in this tutorial.
Layout: Liquid: Columns Double
We need to redesign _layouts/columns-double.html
partial.
This layout is also equipped with a partial set in blog_footer
.
---
layout: default
# default property
color_main : blue
color_aside : teal
# layout chuncks
blog_header : page/blog-header.html
aside_content : page/aside-content.html
---
{% assign color_main = page.color_main | default: layout.color_main %}
{% assign color_aside = page.color_aside | default: layout.color_aside %}
<main role="main"
id="main_toggler"
class="column is-two-thirds">
<section class="main-wrapper {{ color_main }}">
<div class="blog white z-depth-3 hoverable">
<section class="blog-header {{ color_main }} lighten-5">
{% include {{ layout.blog_header }} %}
</section>
<article class="blog-body" itemprop="articleBody">
{{ content }}
</article>
{% if layout.blog_footer %}
<section class="blog-footer {{ color_main }} lighten-5">
{% include {{ layout.blog_footer }} %}
</section>
{% endif %}
</div>
</section>
</main>
<aside id="aside_toggler"
class="column is-one-thirds">
{% include {{ layout.aside_content }} %}
</aside>
Talking about schema, you can read this nice site:
Layout: Liquid: Post
We need to manage the content in _layouts/post.html
partial.
---
layout: columns-double
# override color
color_main : blue
color_aside : teal
# layout chuncks
blog_header : post/blog-header.html
blog_footer : post/blog-footer.html
aside_content : post/aside-content.html
---
{{ content }}
{% include post/navigation.html %}
Partials: New Artefacts
The code above require three new partials.
Create three empty partial artefacts,
-
_includes/post/blog-header.html
, -
_includes/post/blog-footer.html
, -
_includes/post/navigation.html
.
And one more artefact that is required in post/header.html
.
_includes/post/time-elapsed.html
SASS: Main
And add relevant stylesheet
// Bulma Related
@import "bulma/initial-variables"
@import "vendors/bulma/utilities/initial-variables"
@import "vendors/bulma/utilities/functions"
@import "vendors/bulma/utilities/derived-variables"
@import "vendors/bulma/utilities/mixins"
// Materialize Related
@import "materialize/color-variables"
// Tailor Made
@import "main/layout-page"
@import "main/layout-content"
@import "main/decoration"
@import "main/pagination"
@import "main/list"
@import "post/content"
@import "post/navigation"
We do not really need adjustment in Bulma. All seems good.
2: Header
Consider begin with header.
Preview
Partial: Header: Minimum
The minimum header is simply showing title.
<div class="main_title">
<h1 class="title is-4 blog-post-title"
itemprop="name headline">
<a href="{{ site.url | append:site.baseurl | append:page.url }}">
{{ page.title }}</a>
</h1>
</div>
Partial: Header: Meta
Consider add meta data in post header.
- Author
{% if page.author %}
<span class="meta_author tag is-small is-dark
indigo z-depth-1 hoverable">
<span class="fa fa-user"></span>
<span itemprop="author"
itemscope itemtype="http://schema.org/Person">
<span itemprop="name">{{ page.author }}</span></span>
</span>
{% endif %}
- Time Elapsed (include partial)
<span class="meta-time tag is-small is-dark
green z-depth-1 hoverable">
{% include post/time-elapsed.html %}
</span>
- Tags
{% for tag in page.tags %}
<a href="{{ site.url | append:site.baseurl }}/pages/tag#{{ tag }}">
<span class="tag is-dark is-small teal z-depth-1 hoverable">
<span class="fa fa-tag"></span> {{ tag }}</span></a>
{% endfor %}
- Categories
{% for cat in page.categories %}
<a href="{{ site.url | append:site.baseurl }}/pages/category#{{ cat }}">
<span class="tag is-light is-small teal z-depth-1 hoverable">
<span class="fa fa-folder"></span> {{ cat }}</span></a>
{% endfor %}
I use bulma tag
,
with the eye candy icon from FontAwesome
.
Partial: Header: Complete Code
Here below is my actual code.
I use float-left
and float-right
to arrange the looks.
<div class="main_title">
<h1 class="title is-4 blog-post-title"
itemprop="name headline">
<a href="{{ site.url | append:site.baseurl | append:page.url }}">
{{ page.title }}</a>
</h1>
</div>
<div class="field p-t-5">
<div class="is-pulled-left">
{% if page.author %}
<span class="meta_author tag is-small is-dark
indigo z-depth-1 hoverable">
<span class="fa fa-user"></span>
<span itemprop="author"
itemscope itemtype="http://schema.org/Person">
<span itemprop="name">{{ page.author }}</span></span>
</span>
{% endif %}
<span class="meta-time tag is-small is-dark
green z-depth-1 hoverable">
{% include post/time-elapsed.html %}
</span>
</div>
<div class="is-pulled-right">
{% for cat in page.categories %}
<a href="{{ site.url | append:site.baseurl }}/pages/category#{{ cat }}">
<span class="tag is-light is-small teal z-depth-1 hoverable">
<span class="fa fa-folder"></span> {{ cat }}</span></a>
{% endfor %}
{% for tag in page.tags %}
<a href="{{ site.url | append:site.baseurl }}/pages/tag#{{ tag }}">
<span class="tag is-dark is-small teal z-depth-1 hoverable">
<span class="fa fa-tag"></span> {{ tag }}</span></a>
{% endfor %}
</div>
</div>
<div class="is-clearfix p-b-5"></div>
3: Elapsed Time
As it has been mentioned above, we need special partial for this.
Issue
As a static generator,
jekyll
build the content whenever there are any changes.
If there are no changes, the generated time remain static.
It means we cannot tell relative time in string such as three days ago,
because after a week without changes, the time remain three days ago,
not changing into ten days ago.
The solution is using javascript. You can download the script from here
That way the time ago is updated dynamically as time passes,
as opposed to having to rebuild jekyll
every day.
Do not forget to put the script in static directory.
Partial: Time Elapsed
<time datetime="{{ page.date | date_to_xmlschema }}"
itemprop="datePublished">
<span class="timeago"
datetime="{{ page.date | date: "%Y-%m-%d %T" }}">
</span></time>
<script src="{{ site.baseurl }}/assets/js/timeago.min.js"></script>
<script type="text/javascript">
var timeagoInstance = timeago();
var nodes = document.querySelectorAll('.timeago');
timeagoInstance.render(nodes, 'en_US');
timeago.cancel();
timeago.cancel(nodes[0]);
</script>
4: Footer
We already have header
.
Why do not we continue with footer
?
Preview
Partial: Footer
<footer class="columns m-5">
<div class="column is-narrow has-text-centered">
<img src="/assets/images/license/cc-by-sa.png"
class="bio-photo"
height="31"
width="88"
alt="CC BY-SA 4.0"></a>
</div>
<div class="column has-text-left">
This article is licensed under:
<a href="https://creativecommons.org/licenses/by-sa/4.0/deed"
class="text-dark">
<b>Attribution-ShareAlike</b>
4.0 International (CC BY-SA 4.0)</a>
</div>
</footer>
Assets: License
I have collect some image related with license, so that you can use license easily.
5: Post Navigation
Each post also need simple navigation.
Preview
Partial: Navigation
By default, jekyll
have built in function,
to handle post navigation, using:
-
page.previous
, and -
page.next
.
<nav class="pagination is-centered"
role="navigation" aria-label="pagination">
<!-- Previous Page. -->
{% if page.previous %}
<a class="pagination-previous post-previous"
href="{{ page.previous.url | prepend: site.baseurl }}"
title="{{ page.previous.title }}">
<span class="fas fa-chevron-left"></span> </a>
{% endif %}
{% if page.next %}
<a class="pagination-next post-next"
href="{{ page.next.url | prepend: site.baseurl }}"
title="{{ page.next.title }}">
<span class="fas fa-chevron-right"></span></a>
{% endif %}
</nav>
SASS: Post Navigation
Code above require two more classes
-
post-previous
-
post-next
// -- -- -- -- --
// _post-navigation.sass
a.post-previous:after
content: " Previous"
a.post-next:before
content: "Next "
a.post-previous:hover,
a.post-next:hover
background-color: map-get($yellow, 'lighten-2')
color: #000
.
6: Before Content: Table of Content
Sometimes we need to show recurring content, such as table of content in article series. For article series, we only need one TOC. And we do not want to repeat ourself, writing it over and over again.
To solve this case, we need help form frontmatter.
Layout: Liquid: Post
We are going to insert TOC, before the content,
by including toc
something partial, provided from frontmatter.
We need to manage the content in _layouts/post.html
partial.
---
...
---
{% if page.toc %}
{% include {{ page.toc }} %}
{% endif %}
{{ content }}
{% include post/navigation.html %}
Page Content: Example Frontmatter
Now here it is, the TOC
in frontmatter,
as shown in this example below.
---
layout : post
title : Brooke Annibale - By Your Side
...
related_link_ids :
- 19052535 # Yours and Mine
---
...
Layout: Liquid: TOC
Now you can have your TOC here.
<div class="white hoverable p-t-5 p-b-5">
<div class="widget-header blue lighten-4">
<strong>Table of Content</strong>
<span class="fa fa-archive is-pulled-right"></span>
</div>
<div class="widget-body blue lighten-5">
<ul class="widget-list">
<li><a href="{{ "/lyric/2019/05/25/brooke-annibale-yours-and-mine.html"
| prepend: site.baseurl | prepend: site.url }}"
>Brooke Annibale - Yours and Mine</a></li>
<li><a href="{{ "/lyric/2019/05/15/brooke-annibale-by-your-side.html"
| prepend: site.baseurl | prepend: site.url }}"
>Brooke Annibale - By Your Side</a></li>
</ul>
</div>
</div>
Notice the .html
file extension. We are still using liquid
.
This HTML document is, actually a liquid
document.
Render: Browser
Now you can see the result in the browser.
7: Toggler
Sometimes the audience of our blog need a wider view. We can arrange it with javascript toggler. You can read the detail here:
Layout: Liquid: Post
Our complete layout would be
---
layout: columns-double
# override color
color_main : blue
color_aside : teal
# layout chuncks
blog_header : post/blog-header.html
blog_footer : post/blog-footer.html
aside_content : post/aside-content.html
---
{% include post/toggler.html %}
{% if page.toc %}
{% include {{ page.toc }} %}
{% endif %}
{{ content }}
{% include post/navigation.html %}
Render: Browser
The toggle will be shown in desktop screen. And hidden in mobile screen.
8: Conclusion
It is enough for now. There are many part that can be enhanced, in about content area.
After all, it is about imagination.
What is Next?
Consider continue reading [ Jekyll Bulma - Content ].
Thank you for reading.