Advanced Configuration & Customization
Hextra offers some default customization options in the hugo.yaml
config file to configure the theme.
This page describes the available options and how to customize the theme further.
Custom CSS
To add custom CSS, we need to create a file assets/css/custom.css
in our site. Hextra will automatically load this file.
Font Family
The font family of the content can be customized using:
.content {
font-family: "Times New Roman", Times, serif;
}
Inline Code Element
The color of text mixed with other text
can customized with:
.content code:not(.code-block code) {
color: #c97c2e;
}
Primary Color
The primary color of the theme can be customized by setting the --primary-hue
and --primary-saturation
variables:
:root {
--primary-hue: 100deg;
--primary-saturation: 90%;
}
Syntax Highlighting
List of available syntax highlighting themes are available at Chroma Styles Gallery. The stylesheet can be generated using the command:
$ hugo gen chromastyles --style=github
To override the default syntax highlighting theme, we can add the generated styles to the custom CSS file.
Custom Scripts
You may add custom scripts to the end of the head for every page by adding the following file:
layouts/partials/custom/head-end.html
Custom Layouts
The layouts of the theme can be overridden by creating a file with the same name in the layouts
directory of your site.
For example, to override the single.html
layout for docs, create a file layouts/docs/single.html
in your site.
For further information, refer to the Hugo Templates.
Further Customization
Didn’t find what you were looking for? Feel free to open an issue or make a contribution to the theme!
Enabling Comments
Hextra supports adding comments system to your site. Currently giscus is supported.
giscus
giscus is a comments system powered by GitHub Discussions. It is free and open source.
To enable giscus, you need to add the following to the site configuration file:
params:
comments:
enable: false
type: giscus
giscus:
repo: <repository>
repoId: <repository ID>
category: <category>
categoryId: <category ID>
The giscus configurations can be constructed from the giscus.app website. More details can also be found there.
Comments can be enabled or disabled for a specific page in the page front matter:
---
title: About
comments: true
---