https://github.com/kurt-liao/github-style-plus
A Hugo theme wtih Github appearance.
https://github.com/kurt-liao/github-style-plus
blog github github-style gohugo hacktoberfest hacktoberfest-accepted hugo hugo-theme theme
Last synced: about 1 month ago
JSON representation
A Hugo theme wtih Github appearance.
- Host: GitHub
- URL: https://github.com/kurt-liao/github-style-plus
- Owner: kurt-liao
- License: mit
- Created: 2022-08-30T03:32:53.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-14T16:28:41.000Z (6 months ago)
- Last Synced: 2025-03-08T20:48:08.172Z (about 2 months ago)
- Topics: blog, github, github-style, gohugo, hacktoberfest, hacktoberfest-accepted, hugo, hugo-theme, theme
- Language: CSS
- Homepage: https://blog.kurtstories.com/
- Size: 1.01 MB
- Stars: 24
- Watchers: 2
- Forks: 9
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Github Style Plus
This is a fork from [github-style](https://github.com/MeiK2333/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:
1. [Pinned posts and recent posts show together](#pinned-posts-and-recent-posts-show-together)
2. [Support reading time estimation](#support-reading-time-estimation)
3. [Display your real github followers stats](#display-your-real-github-followers-stats)
4. [Add sponsor link button](#add-sponsor-link-button)
5. [Keyword search locally](#keyword-search-locally)
6. [Clickable day contributions](#clickable-day-contributions)
7. [Support custom css file](#support-custom-css-file)
8. [Support previous and next post](#support-previous-and-next-post)
9. [Show more button](#show-more-button)
10. [Update old Google Analytics to GA4](#update-old-google-analytics-to-ga4)
11. [Support GTM Script](#support-gtm-script)
12. [Custom organizations block](#custom-organizations-block)
## Demo
First, take a look at my [blog](https://blog.kurtstories.com/), it's the completely demo for this theme.
## Usage
### Init hugo site
```bash
hugo new site mysite
cd mysite
```
### Install the theme
```bash
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
```bash
cd themes/github-style-plus
git pull
```
Then, you need to rename the previous `posts` folder to `post`
```bash
cd
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](https://kodify.net/hugo/strings/reading-time-text/).
---
### 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](https://www.buymeacoffee.com/vermouth02D) 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](/config.template.toml)