drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-07-01 14:37:15 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

docs: add customization and update other pages

Browse Source 
chore: re-compile css and add icons
chore: update blog list layout
This commit is contained in:
Xin
2023-08-21 23:41:37 +01:00
parent ce78845226
commit 5821b02db2
12 changed files with 189 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
exampleSite/content/docs/advanced/customization.md
View File

@ -3,6 +3,56 @@ title: Customizing Hextra
linkTitle: 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.
<!--more-->
## 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.
To add custom CSS, we need to create a file `assets/css/custom.css` in our site. Hextra will automatically load this file. For example, customize the font family of the content:
```css {filename="assets/css/custom.css"}
.content {
font-family: "Times New Roman", Times, serif;
}
```
### Primary Color
The primary color of the theme can be customized by setting the `--primary-hue` variable:
```css {filename="assets/css/custom.css"}
:root {
--primary-hue: 100deg;
}
```
### Syntax Highlighting
List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command:
```bash
$ 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](https://gohugo.io/templates/).
## Further Customization
Didn't find what you were looking for? Feel free to [open an issue](https://github.com/imfing/hextra/issues) or make a contribution to the theme!