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#