Discover advanced usage of the Hugo - FixIt theme.
FixIt theme has been built to be as configurable as possible by defining custom
.scss style files.
The directory including the custom
.scss style files is
assets/css relative to your project root directory.
assets/css/_override.scss, you can override the variables in
themes/FixIt/assets/css/_variables.scss to customize the style.
Here is a example:
assets/css/_custom.scss, you can add some css style code to customize the style.
The FixIt theme provides a page width configuration option
pageStyle and three values.
- narrow Keep
<v0.2.13page/toc width ratio
- normal New default page/toc width ratio
- wide Larger page/toc width ratio
In addition, you can also customize the
pageStyle value in
There are three css common class for print view in FixIt Theme.
page-break-beforeInsert page break before element
page-break-afterInsert page break after element
print-d-noneHide elements in print view
Here is a simple exmple:
If you set
true, you can also use:
The directory including the custom script file named
assets/js relative to your project root directory.
If the script file
assets/js/custom.js exists, it will be executed at the end of each post and page.
Hugo allows you to modify the theme by overriding the theme templates, for example: you can create
layouts/404.html file to override
themes/FixIt/layouts/404.html, so as to meet the needs of custom 404 page template of FixIt theme.
However, for most of the templates, FixIt theme generally doesn’t recommend you do this, as it may make theme upgrades difficult in the future.
In order to avoid upgrade conflicts, based on this feature, the FixIt theme opens several empty templates in commonly used locations for user customization, see
params.customFilePath parameter in theme configuration.
For example, the FixIt theme documentation site customizes the profile section of the home page by creating
First enable custom file path parameter:
then, customize the template:
This part is shown in the pwa support page.