theme: add compat way of including scripts

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
docs/content/configuration/customization/extending

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 >}}