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

In this repo, the documentation only introduce additional features. For more information about basic usage, please follow the original repo.

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
7. Support custom css file
8. Support previous and next post
9. Show more button
10. Update old Google Analytics to GA4
11. Support GTM Script
12. Custom organizations block

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

hugo new site mysite
cd mysite

git submodule add [email protected]:kurt-liao/github-style-plus.git themes/github-style-plus

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

In the original version, only one of Pinned block and Recent block will be shown. In this version, both blocks will display together.

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

The evaluation formula referenced here.

To show real github followers count, please set enableGithubFollowers = true and your github account like github = kurt-liao in config.toml file.

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.

Searching in personal site might be important with a growing number of articles. This feature uses hugo rss that generate index.xml feed file, so make sure you have set params.rss = true Since somebody might not want to use this feature, there's another parameter you need to set to true to enable: params.enableLocalSearch = true

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

If you want to use some custom style, create a style file in static folder.

Then, set file path in config.toml file.

For the speed of page loaded in the first paint, I decide to hide most of posts when the page first loaded.

Since the old Google Analytics is being retired. I've change the old GA code to GA4.

Apart from Google Analytics, we may also want to add GTM Script. To do this, just add gtmId = "xxx" in your config.toml file

You may want to set some custom organizations except Github, Twitter, Facebook... Therefore, I've add the custom organization block for you to do so. The settings in config.toml might look like this:

And the effect would look like:

@see config.template.toml