xuxinyuancode / github-style-plus

A Hugo theme wtih Github appearance.

github-style

This is a fork from github-style with some additional features that I've made.

In this repo, there's only list of additional features. For more information about basic usage, please follow the original repo.

BTW, Documentation is in progress🏃‍♂️

Quick guide

New features in this fork version:

1. Pinned posts and recent posts show together
2. Support reading time estimation
3. Display your real github followers stats
4. Add sponsor link button
5. Keyword search locally
6. Clickable day contributions

Documentation in progress

7. Show the specific day posts when click the specific block in yearly-contributions graph

8. Support custom css file

9. Support paginator in post page

Demo

First, take a look at my personal blog, it's the completely demo for this theme.

Usage

Init hugo site

hugo new site mysite
cd mysite

Install the theme

git submodule add [e-mail]:kurt-liao/github-style-plus.git themes/github-style-plus

Update the theme

If you just installed the theme, it is already in the latest version. If not, you can update using the below commands

cd themes/github-style-plus
git pull

Then, you need to rename the previous posts folder to post

cd <you-project-folder>
mv content/posts content/post

New features✨

📌 Pinned posts and recent posts show together

Since the original repo only display Pinned or Recent block. In other word, if you set pin: true in any of your posts, then there's only display Pinned block in your overview page.

However, I want show both in my overview page. In this version, Pinned block will show over the Recent(posts here sort by created time) block. It means they will display together.

⏳ Support reading time estimation

This feature evaluates the reading time of every post and shows next of the count of words.

The evaluation formula referenced here.

🚶🚶🚶 Display your real github followers stats

To show real github followers count, please set enableGithubFollowers = true and your github account like github = kurt-liao in config.toml file. You can copy the template in this repo.

❤️ Add sponsor link button

Set your sponsor link in config.toml like sponsorLink = "https://www.buymeacoffee.com/vermouth02D" and the button will show on the page.

For me, I put the buymeacoffee link.

🔎 Keyword search locally

Searching in personal site might be important with a growing number of articles, so I've done it.

This feature uses hugo rss that generate index.xml feed file, so make sure you have set params.rss = true

Though somebody might not want to use this feature, there's another parameter you need to set to true to enable: params.enableLocalSearch = true

🖱️Clickable day contributions

Make yearly-contributions graph clickable like github does. When you click on specific day, it will show you the posts added that day.

🤲 Show the specific day posts when click the specific block in yearly-contributions graph

💡 Support custom css file

📟 Support paginator in post page

Config Example

@see config.template.toml