theme: add compat way of including scripts #1009
Some checks failed
docs-build-deployment / Run deploy (push) Has been cancelled
docs-build / Run build (push) Has been cancelled

Open
This commit is contained in:
Sören Weber 2025-02-02 14:00:21 +01:00
parent 8b70bdf31a
commit 66bc366c47
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
5 changed files with 26 additions and 9 deletions

View file

@ -2,7 +2,7 @@
categories = ["explanation", "howto"]
description = "Add further code to your site"
options = ["relearn.dependencies"]
title = "Extending Scripts"
title = "Adding Scripts"
weight = 2
+++
@ -10,10 +10,20 @@ A common question is how to add extra CSS styles or JavaScript to your site. Thi
## Adding JavaScript or Stylesheets to All Pages
To add JavaScript files or CSS stylesheets to every page, you can include them in `layouts/partials/custom-header.html` or `layouts/partials/custom-footer.html`.
### Simple Solution
Previous documentation of Hugo recommended adding `css/custom.css` and/or `js/custom.js` to your `static` or `assets` directory. This is supported by the theme.
To gain more flexibility, see the [next section](#flexible-solution) below.
### Flexible Solution
To add CSS stylesheets, JavaScript files or any other addition to the `<head>` of every page, you can include them in `layouts/partials/custom-header.html` or `layouts/partials/custom-footer.html`.
However, this can make your site larger than necessary if these files are only needed on a few pages. The next section explains how to add dependencies only when needed.
This way of customization will discard the mechanism for the [simple solution](#simple-solution) above. You will have to add code for inclusion of `css/custom.css` and/or `js/custom.js` yourself if you still need this.
## Custom Shortcodes with Dependencies
Some shortcodes need extra JavaScript and CSS files. The theme only loads these when the shortcode is used. You can use this for your own shortcodes too.

View file

@ -2,7 +2,7 @@
categories = ["explanation", "howto"]
description = "Add further code to your site"
options = ["relearn.dependencies"]
title = "Extending Scripts"
title = "Adding Scripts"
weight = 2
+++
{{< piratify >}}

View file

@ -18,4 +18,8 @@ weight = -4
You can see this in action on the above linked page, accessible by clicking the {{% button style="transparent" icon="file-code" %}}{{% /button %}} topbar button.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} If you haven't overridden `layouts/partials/custom-header.html` and `css/custom.css` and/or `js/custom.js` is present in your project, the theme now adds them to your pages.
This was done to be compatible with adding custom scripts in an older version of the Hugo documentation.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Table headers are sticky now.

View file

@ -1,5 +1,8 @@
<!-- Partial intended to be overwritten to add custom headers, like CSS or any other info
<style>
/* Custom css */
</style>
-->
<!-- compat way of adding custom scripts in old Hugo documentation -->
{{- $assetBusting := partialCached "assetbusting.gotmpl" . }}
{{- if or (fileExists "static/css/custom.css") (fileExists "assets/css/custom.css") }}
<link href="{{"css/custom.css" | relURL}}{{ $assetBusting }}" rel="stylesheet">
{{- end }}
{{- if or (fileExists "static/js/custom.js") (fileExists "assets/js/custom.js") }}
<script src="{{"js/custom.js" | relURL}}{{ $assetBusting }}" defer></script>
{{- end }}

View file

@ -1 +1 @@
7.3.2+c0f6af2b423bb063ce6339883fb1e6e31b8df866
7.3.2+8b70bdf31acd361aacf17a0e775504551af67b83