How I customized Hydejack Theme

How I customized Hydejack Theme

Thanks to @qwtel, I’m on the showcase of Hydejack’s official blog!

I had a plan to write a post about how I customized my blog, but thanks to his kind email, and posting on to the showcase, I’ve decided to write a post in English. So many others can check & apply to their github pages.

Documentations

First, you should check Hydejack’s documentations to install & proceed.
If you wants to use free version, use Hydejack-starter-kit.
Clone or download it. Note that linked branch is gh-pages. Not the master branch in order to use it as github pages.

Before we begin

Hydejack theme provides _sass/my-*.scss files for a customization.
It’s very helpful if you wish to change css of your homepage.
It overrides any default css provided by other files.
Jekyll docs, Jekyll Liquid, Liquid docs are also a good start place for the beginner (such as myself).

Adding Submenu to the Sidebar

Sidebar

In this section, I’ll guide you how to add a submenu to the sidebar navigation.
There is few files you need to edit/add for this.
You may wish to check commit history, and these for the updated method. (as of 2020/12/15)

/_sass/my-style.scss
/_includes/body/nav.html
/_includes/body/sidebar-sticky.html
/_layouts/tag-list.html
/_featured_categories/*.md
/_featured_tags/*.md

Check this post for more info.

Creating Tag Cloud/List Page

tag list

Since many tags are not listed on the sidebar, I’ve always wanted to have a page where I can see all categories & tags I’ve used for the posts. And visitor may click on it to navigate related posts. To implement tag list, you only need to create two files to have a such page.

/tags.md
/_layouts/tags.html

Check this post for more info.

Use Utterances as a comment plugin

Utterances

It’s not hard to setup utterances.
First of all, you should install utterances app to the blog repository. Since we are gonna migrate from disqus, proper changes must be made to my-comments.html & links-static.html.

3 files to be modified. (check related commit)

/_config.yml
/_includes/my-comments.html
/_includes/head/links-static.html

Check this post for more info.

Add applause button for Jekyll post

When I revisited the Hydejack official site, I noticed little clapping button that set at the end of the post. It seems good idea to have light-cost (compare to commenting) way to communicate with visitors. So I gave some research on it and finally made it as below.

applause button

Basically, I will add applause button for each-and-every post. Unless author specifically set it otherwise.

4 files to be modified. (check related commit)

/_config.yml
/_includes/head/links-static.html
/_layouts/post.html
_sass/my-style.scss

Check this post for more info.

Conclusion

This post originally started with sidebar modification only. But now it has become a huge post. I might divide this post into smaller ones. I’m not an expert in web development. Adding simple submenu was pretty challenging & time consuming job for me. But taking some time to dig around, I’ve learned one or two things about how jekyll is working, and web programming.
it’s pretty fun!
You may find some odd parts, need help implementing features, or you have any suggestions for the improvement please don’t hesitate to contact me.
I’d be very delightful to have any comments.


© 2021. All rights reserved.