Injected Author Profiles
One thing that I want is to have the authors profile displayed at the bottom of their articals. It’s only fair. I borrowed a little bit from another project for this, and I unfortunately forget the name.
There are three parts to this:
- The authors profile in YAML
- The template (inside of
/_includes) - The inclusion (can be anywhere)
Authors Profile in YAML
Jekyll supports having data in the /_data directory by default. We can use this behavior to create a yaml file containing our authors information:
/_data/people.yml
jacob:
name: "Jacob"
avatar: "/assets/author_pics/andydwyer.jpg"
bio: |
Something
About
Me
With
Multiple
Lines
**And Markdown**
links:
- label: "Some Text"
icon: "fas fa-fw fa-link"
url: "https://google.com"
The Template
This one is also pretty simple. Create a template file in your /_includes directory to display the data in your yaml.
/_includes/author.html
<p>Author Name: Jacob</p>
<p>Author Bio: Something
About
Me
With
Multiple
Lines
**And Markdown**
</p>
<p>Author links:
<ul>
<li><i class="fas fa-fw fa-link"></i> URL https://google.com - TITLE: </li>
</ul>
</p>
To break this down a bit; we can see that we’re pulling name and bio straight from the YAML, and we’re able to loop over links with a for loop. Something that I stole from another template, which I can’t recall the name of, is the icons. I just set these to font-awesome tags because it’s easiest, however it does require that font-awesome is setup on your site.
The Inclusion
Now for the inclusion. I have a layout called posts (/_layouts/posts.html) which is used for any and all posts (anything inside of a _posts directory or as requested by frontend matter). Inside of this layout, I have the following code:
/_layouts/post.html
<!doctype html>
<html lang="en-GB" itemscope itemtype="http://schema.org/WebPage">
<head>
<title>Injected Author Profiles - Nechtet</title>
<!-- Google Analytics -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MBTT8EMJFD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MBTT8EMJFD');
</script>
<!-- Google Adsense -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0007082419483683"
crossorigin="anonymous"></script>
<!-- general meta data -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name=robots content="index,follow">
<meta name="description" content="Using Jekyll data, includes and liquid to automatically contruct an "author postbit" for all posts based on yaml">
<meta name="keywords" content="">
<meta name="author" content="jacob">
<link rel="canonical" href="/web/injected-author-profiles">
<meta name="subject" content="Injected Author Profiles">
<meta name="copyright" content="">
<meta name="revised" content="2022-06-09 00:00:00 +0000">
<meta name='Classification' content='Business'>
<meta name='url' content='/web/injected-author-profiles'>
<meta http-equiv='Expires' content='0'>
<meta http-equiv='Pragma' content='no-cache'>
<meta http-equiv='Cache-Control' content='no-cache'>
<meta http-equiv='imagetoolbar' content='no'>
<meta http-equiv='x-dns-prefetch-control' content='off'>
<!-- Twitter Card data https://dev.twitter.com/cards/overview -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@oceaniagg">
<meta name="twitter:title" content="Injected Author Profiles">
<meta name="twitter:description" content="Using Jekyll data, includes and liquid to automatically contruct an "author postbit" for all posts based on yaml">
<meta name="twitter:creator" content="@oceaniagg">
<meta name="twitter:image" content="">
<!-- Open Graph data http://ogp.me/ -->
<meta property="og:title" content="Injected Author Profiles" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/web/injected-author-profiles" />
<meta property="og:image" content="" />
<meta property="og:description" content="Using Jekyll data, includes and liquid to automatically contruct an "author postbit" for all posts based on yaml">
<meta property="og:site_name" content="" />
<!-- Bootstrap core CSS -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<link href="/assets/css/highlight.css" rel="stylesheet">
<link href="/assets/css/nechtet.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
<div class="container">
<a class="navbar-brand" href="/">Nechtet</a>
<ul class="nav">
<li class="nav-item"><a class="nav-link" href="/linux">Linux</a></li>
<li class="nav-item"><a class="nav-link" href="/web">Web</a></li>
<li class="nav-item"><a class="nav-link" href="/gaming">Gaming</a></li>
</ul>
</div>
</nav>
<div class='container'>
<p>Collections appear to be an ill-documented feature of Jekyll, and the documentation seems to make the most sense if you’re already familiar with collections.</p>
<h2 id="the-old-way">The Old Way</h2>
<p>The old way of building out categorization in Jekyll was to set the <code class="language-plaintext highlighter-rouge">categories</code> front-end matter in the following kind of manner:</p>
<p><code class="language-plaintext highlighter-rouge">/_posts/2000-01-01-some-post.md</code></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
title: Some Post
categories: ["Some", "Category"]
---
</code></pre></div></div>
<p>You could further elaborate on this tagging my changing either the <code class="language-plaintext highlighter-rouge">permalink</code> in the posts frontend matter, or by adding the following configuration to your <code class="language-plaintext highlighter-rouge">_config.yml</code> file, with zero tabation:</p>
<p><code class="language-plaintext highlighter-rouge">/_config.yml</code></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>permalink: /:categories/:title
</code></pre></div></div>
<h2 id="the-collections-way">The Collections Way</h2>
<p>With collections, we can define our ‘collection’ of posts inside of <code class="language-plaintext highlighter-rouge">_config.yml</code> and build a directory structure to suit it. Note; tabation in the below is at the correct level:</p>
<p><code class="language-plaintext highlighter-rouge">/_config.yml</code></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>collections:
web:
output: true
permalink: /web/:title
</code></pre></div></div>
<p>This allows us to create a directory structure such as the below:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>/web/
│ index.html
└───_posts
└───jekyll
2022-06-08-realistic-use-of-collections.md
</code></pre></div></div>
<p>This allows the generation of <code class="language-plaintext highlighter-rouge">example.com/web/</code> and <code class="language-plaintext highlighter-rouge">example.com/web/realistic-use-of-collections</code>, while keeping your _posts for the category logically separated.</p>
<h2 id="categorycollection-listing-page">Category/Collection Listing Page</h2>
<p>You already saw the sneaky use of <code class="language-plaintext highlighter-rouge">index.html</code> inside of the collection dir. You can use this to create a ‘category page’ like I have below:</p>
<p><code class="language-plaintext highlighter-rouge">/web/index.html</code></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
layout: category
---
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">/_layouts/category.html</code></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
layout: default
---
{{ content }}
{% for category in site.categories %}
{% assign this_cat = category | first %}
{% if this_cat == current_category %}
{% for post in category.last %}
<a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}
{% endif %}
{% endfor %}
</code></pre></div></div>
<p>Now, for the category page to work, you’ll need to actually set the first “category” for the post to match the name of the collection. I attempted to use <a href="https://gist.github.com/aamnah/dceb067c8bf79d017f1a16523b2c3a75">this post listing from aamnah</a>, however it didn’t work. Using the categories seems to be the most reliable method of listing posts in this manner. FTR, I attempted the following code however it <strong>did not work</strong>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{{ current_category }}
{% for collection in site.collections %}
{% if collection.label == current_category %}
{{ collection.label }}
{{ collection.link }}
{% assign name = collection.label %}
{% for post in site.[name] %}
{{ post.title }}
{% endfor %}
{% endif %}
{% endfor %}
{% for collection in site.collections %}
{% assign name = collection.label %}
<h1>{{ name }}</h1>
{% for post in site.[name] %}
<ul>
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
</ul>
{% endfor %}
{% endfor %}
</code></pre></div></div>
<h2 id="drawbacks">Drawbacks</h2>
<p>There is a pretty obvious drawback here: inability to programmatically list the posts in the collection. I have tried the solutions that can be found around the web but none of them seemed to work. Infact, all my posts show up under the ‘posts’ collection, as opposed to the collection they’re really contained in.</p>
<p>Realistically, I think that I would opt to go back to using categories and creating a rigid category/subcategory structure. For example,</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>/_posts/
/_posts/somecategory
/_posts/somecategory/somesubcategory
/_layouts/category.html
/_layouts/subcategory.html
/category_pages/
/category_pages/somecategory.html
</code></pre></div></div>
<p>And using Permalinks to force <code class="language-plaintext highlighter-rouge">/category_pages/somecategory.html</code> to render as <code class="language-plaintext highlighter-rouge">site.com/somecategory</code>, and posts to render with <code class="language-plaintext highlighter-rouge">/:categories/:title</code>.</p>
<p><a href="https://carpentries-incubator.github.io/jekyll-pages-novice/arrays/index.html">Some further reading</a></p>
<div class="row">
<div class="col">
<div class="author-block">
<div class='author-avatar'><img src="/assets/author_pics/andydwyer.jpg" alt="Jacob"></div>
<h6>Jacob</h6>
<p><p>Something
About
Me
With
Multiple
Lines
<strong>And Markdown</strong></p>
</p>
<p>
<a href="https://google.com"><i class="fas fa-fw fa-link"></i></a>
</p>
</div>
</div>
<div class="col">
asd
</div>
</div>
</div>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">© nechtet.com | <a href="/about">About Nechtet</a> | hosted by <a href='https://hxst.com.au'>HXST</a></span>
</div>
</footer>
<script src="/assets/js/jquery.js"></script>
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script src='/assets/js/highlight.js'></script>
<script src='/assets/js/nechtet.js'></script>
<script src="/assets/js/masonry.js" async></script>
<script>hljs.highlightAll();</script>
</body>
</html>
Bringing it all together
Whenever I create a post, I just use the following frontend matter:
---
layout: post
author: jacob
---
And it will add that author.html with all the configured data in people.yml.
