Installation: Extend the theme

General considerations#

As every other Hugo theme, Shadocs theme can be extended and modified for specific purposes.

For more information, check Hugo template documentation

HTML customization#

Several custom HTML layout files are available in the theme.

These files are empty by default, but they can be defined within a specific website (using the Hugo’s Lookup Order ), to include specific code at a specific place, directly within the global HTML layout, without having to modify the default theme layout.

The following files are managed within the theme:

  • layouts/partials/custom/custom-head.html to insert code right before the ending tag
    custom-head.html
    <html>
    <head>
        [...]
        {{- partial "custom/custom-head.html" .root -}}
    </head>
</html>
  • layouts/partials/custom/custom-footer.html to insert code right before the ending tag
    custom-footer.html
    <html>
    <body>
    [...]
    {{- partial "custom/custom-footer.html" .root -}}
    </body>
</html>
  • layouts/partials/custom/custom-info.html to insert code in the navbar info modal
    For more information, check the documentation website custom-info.html

SASS customization#

CSS layout of the theme is implemented using SASS .

The same way as HTML custom layout files, custom SASS layout files are available in the theme.

The following files are managed within the theme:

For more information, check the documentation website custom_variables.sass and example.sass , to implement specific CSS behavior:

Specific title color for custom SASS example#