Extending 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

T' add JavaScript files or CSS stylesheets t' 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.

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:

   ​

   layouts/shortcodes/myshortcode.html

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

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

   hugo.

   toml yaml json

   [params]
     [params.relearn]
       [params.relearn.dependencies]
         [params.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:

   ​

   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.

{{- partial "dependencies.gotmpl" (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.