github-style-plus
github-style-plus copied to clipboard
A Hugo theme wtih Github appearance.
Github Style Plus
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.
Quick guide
New features in this fork version:
- Pinned posts and recent posts show together
- Support reading time estimation
- Display your real github followers stats
- Add sponsor link button
- Keyword search locally
- Clickable day contributions
- Support custom css file
- Support previous and next post
- Show more button
- Update old Google Analytics to GA4
- Support GTM Script
- Custom organizations block
Demo
First, take a look at my 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 [email protected]: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
In the original version, only one of Pinned block and Recent block will be shown. In this version, both blocks will display together.
Support reading time estimation
This feature evaluates the reading time of every post and shows 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.
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.
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
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.
Support custom css file
If you want to use some custom style, create a style file in static folder.
Then, set file path in config.toml file.
Support previous and next post
Show more button
For the speed of page loaded in the first paint, I decide to hide most of posts when the page first loaded.
Update old Google Analytics to GA4
Since the old Google Analytics is being retired. I've change the old GA code to GA4.
Support GTM Script
Apart from Google Analytics, we may also want to add GTM Script.
To do this, just add gtmId = "xxx"
in your config.toml file
Custom organizations block
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:
Config Example
@see config.template.toml