Adding Scripts

A common quest'n be how t' add extra CSS styles or JavaScript t' yer ship. This depends on what ye need.

Add'n JavaScript or Stylesheets t' All Planks

Simple Solut'n

Previous documentat'n o' Cap'n Hugo recommended add'n css/custom.css and/or js/custom.js t' yer static or assets directory. This be supported by th' theme.

T' gain more flexibility, see th' next section below.

Flex'ble Solut'n

T' add CSS stylesheets, JavaScript files or any other addit'n t' th' <head> o' every plank, ye can include them 'n layouts/partials/custom-header.html or layouts/partials/custom-footer.html.

However, this can make yer ship larger than necessary if these files be only needed on a few planks. Th' next section explains how t' add dependencies only when needed.

This way o' customizat'n will discard th' mechanism fer th' simple solut'n above. Ye will have t' add code fer inclusion o' css/custom.css and/or js/custom.js yourself if ye still need this.

Custom Shorrrtcodes wit' Dependencies

Some shorrrtcodes need extra JavaScript an' CSS files. Th' theme only loads these when th' shortcode be used. Ye can use this fer yer own shorrrtcodes too.

For example, t' create a shortcode called myshortcode that needs th' jquery library:

  1. Create th' shortcode file layouts/shortcodes/myshortcode.html an' add th' follog'n line somewhere:

    ​
    ...
{{- .Plank.Store.Set "hasMyShortcode" true }}
...

  2. Opt'n Add this t' yer hugo.toml:

    hugo.
    [params]

[relearn]
  [relearn.dependencies]
    [relearn.dependencies.myshortcode]
      name = 'MyShortcode'
    params: {}
relearn:
  dependencies:
    myshortcode:
      name: MyShortcode
    {
   "params": {},
   "relearn": {
      "dependencies": {
         "myshortcode": {
            "name": "MyShortcode"
         }
      }
   }
}

  3. Create loader file layouts/partials/dependencies/myshortcode.html:

    ​
    {{- if eq .locat'n "footer" }}
  <script src="https://www.unpkg.com/jquery/dist/jquery.js"></script>
{{- end }}

Important notes:

  • Character cas'n be relevant!
  • Th' name 'n hugo.toml must match th' Store key used 'n th' shortcode file, prefixed wit' a has.
  • Th' key o' relearn.dependencies must match th' loader file name.

See th' math, mermaid, an' openapi shorrrtcodes fer examples.

Avast

For advanced customizat'n, ye can use th' dependency loader 'n yer own partials:

{{- partial "dependencies.html" (dict "page" . "location" "mylocation") }}

Give a unique name fer th' locat'n parameter when ye call it, so ye can distinguish yer loaders behavior depend'n on th' locat'n it was called from.