Added related posts section

README.md

@@ -528,6 +528,9 @@ It generates an Atom (RSS-like) feed of your posts, useful for Atom and RSS read
 The feed is reachable simply by typing after your homepage `/feed.xml`.
 E.g. assuming your website mountpoint is the main folder, you can type `yourusername.github.io/feed.xml`
 
+#### Related posts
+By default, on the bottom of the blog posts there will be a related posts section. These are generated by selecting the 5 most recent posts that share at least one tag with the current post. If you do not want to display related posts, simply add `related_posts: false` to the header of the post.
+
 ## Contributing
 
 Contributions to al-folio are very welcome!

_includes/related_posts.html

@@ -0,0 +1,46 @@
+{% assign maxRelated = 5 %}
+{% assign minCommonTags =  1 %}
+{% assign maxRelatedCounter = 0 %}
+{% assign haveRelatedPosts = false %}
+
+{% for post in site.posts %}
+  {% assign sameTagCount = 0 %}
+
+  {% for tag in post.tags %}
+    {% if post.url != page.url %}
+      {% if page.tags contains tag %}
+        {% assign sameTagCount = sameTagCount | plus: 1 %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+
+  {% if sameTagCount >= minCommonTags %}
+    {% unless haveRelatedPosts %}
+      {% assign haveRelatedPosts = true %}
+
+  <br>
+  <hr>
+  <br>
+  <ul class="list-disc pl-8"></ul>
+
+  <!-- Adds related posts to the end of an article -->
+  <h2 class="text-3xl font-semibold mb-4 mt-12">Enjoy Reading This Article?</h2>
+  <p class="mb-2">Here are some more articles you might like to read next:</p>
+    {% endunless %}
+
+  <li class="my-2">
+    <a class="text-pink-700 underline font-semibold hover:text-pink-800" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
+  </li>
+
+  {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+
+  {% if maxRelatedCounter >= maxRelated %}
+    {% break %}
+  {% endif %}
+
+  {% endif %}
+{% endfor %}
+
+{% if maxRelatedCounter > 0 %}
+</ul>
+{% endif %}

_layouts/post.html

@@ -43,6 +43,10 @@ <h1 class="post-title">{{ page.title }}</h1>
     {{ content }}
   </article>
 
+  {%- if page.related_posts == null or page.related_posts -%}
+    {% include related_posts.html %}
+  {%- endif %}
+
   {%- if site.disqus_shortname and page.disqus_comments -%}
     {% include disqus.html %}
   {%- endif %}

_posts/2015-10-20-disqus-comments.md

@@ -5,5 +5,6 @@ date: 2015-10-20 11:59:00-0400
 description: an example of a blog post with disqus comments
 categories: sample-posts external-services
 disqus_comments: true
+related_posts: false
 ---
 This post shows how to add DISQUS comments.

_posts/2015-10-20-math.md

@@ -5,6 +5,7 @@ date: 2015-10-20 11:12:00-0400
 description: an example of a blog post with some math
 tags: formatting math
 categories: sample-posts
+related_posts: false
 ---
 This theme supports rendering beautiful math in inline and display modes using [MathJax 3](https://www.mathjax.org/) engine. You just need to surround your math expression with `$$`, like `$$ E = mc^2 $$`. If you leave it inside a paragraph, it will produce an inline expression, just like $$ E = mc^2 $$.
 

_posts/2022-12-10-giscus-comments.md

@@ -5,5 +5,6 @@ date: 2022-12-10 11:59:00-0400
 description: an example of a blog post with giscus comments
 categories: sample-posts external-services
 giscus_comments: true
+related_posts: false
 ---
 This post shows how to add GISCUS comments.