Adding Features to Jekyll
Recently I upgraded from Jekyll 2.x to 3. When I did the upgrade the plugin I was using to create category pages started reporting depreciation errors. I started looking into creating the category pages a different way, and If I could create them without a plugin, I decided that would be the best way to do it.
I wanted to add a related post feature to my post pages, to help content be found more easily. I decided to make use of my tags, to help group posts together.
In this article I will share how I accomplished this, and where I found the code I used.
To create my category pages, I followed this article.
The first step was to create a new layout called category.html. In that file I put the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 --- layout: default type: archive --- <div class="archive-description"> <h1 class="archive-title">Articles</h1> </div> <div class="wrap"> <p>There are no posts in this category.</p> </div>
Then I created a directory in my Jekyll site for each category. I use three categories, Article, Guide, and Project. So I added a directory called Article, Guide, and Project. Then I created index.html files inside each.
1 2 3 4 5 --- layout: category title: Articles category: Article ---
I created two more of these pages for the Guide, and Project categories.
This now creates my category pages I need. If I ever need to I can create a list of categories and use a bash script to populate them.
The other change I made to the website was to generate a small list of related posts after each post. I have read that Jekyll has this functionality built in, but it just lists recent posts. I found this article helpful. I did make some changes to the code, which I will explain below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 <div class="related"> <h3>Related Posts</h3> <ul> <li><a href="/jekyll-deploy-script/">Jekyll Deploy Script</a></li> <li><a href="/wordpress-to-jekyll/">Migrating a Wordpress Blog to Jekyll</a></li> <li><a href="/ssh-banners-and-motds/">SSH Banners and MOTDs</a></li> <li><a href="/perl-pig-latin-conversion/">Perl Pig Latin Conversion</a></li> <li><a href="/writing-hangman-in-perl/">Writing Hangman in Perl</a></li> </ul> </div>
I placed this code in my post.html file in _layouts. The couple of changes I made were to limit the returned related posts to three max, and I decided to create a list for the related posts, instead. I then used css to remove the bullets from the list.
I found that liquid has a limit feature. I used this in the for loop to three links at the most. I did not want the whole list, but you can remove the limit, or change it to suit you.
With these two enhancements in place I like my website a little more now. If you are looking for either functionality give it a try, and let me know how it works for you.