mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2025-02-13 15:23:30 +00:00
73 lines
2.9 KiB
Markdown
73 lines
2.9 KiB
Markdown
+++
|
|
categories = ["explanation", "howto"]
|
|
description = "Add further code to your site"
|
|
options = ["relearn.dependencies"]
|
|
title = "Adding Scripts"
|
|
weight = 2
|
|
+++
|
|
|
|
A common question is how to add extra CSS styles or JavaScript to your site. This depends on what you need.
|
|
|
|
## Adding JavaScript or Stylesheets to All Pages
|
|
|
|
### 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.
|
|
|
|
For example, to create a shortcode called `myshortcode` that needs the `jquery` library:
|
|
|
|
1. Create the shortcode file `layouts/shortcodes/myshortcode.html` and add the folloging line somewhere:
|
|
|
|
````go {title="layouts/shortcodes/myshortcode.html"}
|
|
...
|
|
{{- .Page.Store.Set "hasMyShortcode" true }}
|
|
...
|
|
````
|
|
|
|
2. {{% badge style="cyan" icon="gears" title=" " %}}Option{{% /badge %}} Add this to your `hugo.toml`:
|
|
|
|
{{< multiconfig file=hugo >}}
|
|
[params.relearn.dependencies]
|
|
[params.relearn.dependencies.myshortcode]
|
|
name = 'MyShortcode'
|
|
{{< /multiconfig >}}
|
|
|
|
3. Create loader file `layouts/partials/dependencies/myshortcode.html`:
|
|
|
|
````go {title="layouts/partials/dependencies/myshortcode.html"}
|
|
{{- if eq .location "footer" }}
|
|
<script src="https://www.unpkg.com/jquery/dist/jquery.js"></script>
|
|
{{- end }}
|
|
````
|
|
|
|
Important notes:
|
|
|
|
- Character casing is relevant!
|
|
- The `name` in `hugo.toml` must match the `Store` key used in the shortcode file, prefixed with a `has`.
|
|
- The key of `relearn.dependencies` must match the loader file name.
|
|
|
|
See the `math`, `mermaid`, and `openapi` shortcodes for examples.
|
|
|
|
{{% notice note %}}
|
|
For advanced customization, you can use the dependency loader in your own partials:
|
|
|
|
````go
|
|
{{- partial "dependencies.gotmpl" (dict "page" . "location" "mylocation") }}
|
|
````
|
|
{{% /notice %}}
|
|
|
|
Give a unique name for the `location` parameter when you call it, so you can distinguish your loaders behavior depending on the location it was called from.
|