Custom layouts

The Wowchemy theme is implicitly downloaded and loaded by Hugo using Go modules from the repository: https://github.com/wowchemy/wowchemy-hugo-themes/tree/main/wowchemy.

Roughly speaking, Hugo merges this directory with your directory and then run the conversion to HTML. If you would like to modify some part of the theme, two choices: the hard one and the soft one. Here is an example to customize the rendering of the footer using both methods as well as how to customize the rendering using CSS.

Hard method

Create a file (and the possible folders) layouts/partials/site_footer.html in the root. Hugo will hence reads your local site_footer.html file instead of the one of the Wowchemy theme. Keep in mind that you are now in charge of updating site_footer.html file, not Wowchemy anymore! You can start for example with the original file and then customize it like:

<footer class="site-footer">
  <p class="powered-by">
      {{ with site.Copyright }}{{ replace . "{year}" now.Year | markdownify}} &middot; {{ end }}

      Powered by <a href="https://gohugo.io" target="_blank" rel="noopener">Hugo</a> and the
      <a href="https://wowchemy.com/" target="_blank" rel="noopener">Wowchemy theme</a>.<br>
      Hébergé par <a href="https://mathrice.fr">Le GdS 2754 Mathrice</a>.
      {{ with site.GetPage "/terms.md" }}<br>{{ printf "<a href=\"%s\">%s</a>" .RelPermalink .Title | safeHTML }}{{ end }}.
  </p>
</footer>

Soft method

Create the file (and the possible folders) layouts/partials/hooks/footer.html. This will add the code inside footer.html prior to the footer of the website. You can for example use the following snippet:

<p class="powered-by">
    Hébergé par <a href="https://mathrice.fr">Le GdS 2754 Mathrice</a>.
</p>

CSS tuning

You can also easily modify the appearance by adding some CSS. For example, if you think there is too much space before the footer, create the file (and the possible folders) assets/scss/custom.scss with the content:

footer {
    margin: 1rem 0 0;
}
Précédent