Hugo-Klisé

This is a hugo theme inspired by the original jekyll theme -- Klisé by @piharpi

Why?

• Simply because I use hugo and I love this theme :)
• Also for my blog

Features

• Light & Dark Mode support 🌒
• Customizable (using .scss)
• Responsive (desktop, tab and mobile)
• SEO Optimized
• Pagination
• Custom shortcodes
• FontAwesome icon support
• Google Analytics
• Custom Alerts
• Vim keybindings
  • j -> scroll down
  • k -> scroll up
  • gg -> go to top
  • G -> go to end

Built-in shortcodes

• figure(props required: src, props optional: alt, caption)

  • eg:

  {{< figure src="/path/image.png" alt="image" caption="This is an image" >}}

• image(props required: src, props optional: alt)

  • eg:

  {{< image src="/path/image.png" alt="image" >}}

Alerts

Syntax:

> [!note] Title
> This is a note

Available alerts:

• note
• tip
• important
• warning
• caution

Extended sytax: With the extended Markdown syntax, you may optionally include an alert sign and/or an alert title. The alert sign is one of + or -, typically used to indicate whether an alert is graphically foldable. For example:

> [!warning]- Radiation hazard
> Do not approach or handle without protective gear.
The extended syntax is compatible with Obsidian.

Code highlighting

• Add this option to your config.toml file for enabling the custom gruvbox theme for code highlighting.

[markup]
  [markup.highlight]
    noClasses = false

• The default one is monokai.
• You can also use other themes provided by hugo by using this:

[markup]
  [markup.highlight]
    style = "gruvbox" # check here for more styles: https://xyproto.github.io/splash/docs/all.html

Google Analytics

• To enable google analytics to your website add the below snippet to your config.toml file:

[services]
  [services.googleAnalytics]
    id = 'G-XXXXXXXXX' # Add your google analytics id here

Goatcounter Analytics

• To enable Goatcounter analytics to your website add the below snippet to your config.toml file:

[params]
    goatcounter = 'xxxxxx' # Add your Goatcounter analytics id here

Installation

• Install theme

git submodule add -f https://github.com/h4r1337/hugo-klise themes/hugo-klise

• Edit your config.toml. Example can be seen here

TODO

Major

• Add posts search feature
• Comments
• User customization options
  • Extended headers and footers
  • Custom css
  • More configuration options via config.toml
• Submit to hugo themes
• Table of Content
• Google Analytics
• Goatcounter Analytics
• Add FontAwesome supoort
• Add Shortcodes

Minor

• GitInfo support
• Copy code
• Automatic post summary view (using more tag)
• Custom code highlight