Variables inside JavaScript

[tut]

Is this still the case today?

Inserting "Templates Variables" in Javascript

If you want to add variables in Javacsript you will have to inline the Javascript in the template file.

[pamubay]

No, you can use @params to pass any variables to your javascript processed by js.Build.

Access template variables in JS

There is if you’re using Hugo Pipes to compile your script. You can add params to it which can later be invoked in the script. basically you can call your script this way: {{ $js := resources.Get "/js/indexjs" | js.Build (dict "params" (dict "baseurl" site.BaseURL")) }} and then in your script: import * as params from '@params'; console.log(params.baseurl) More here

[tut]

How would it work with such a code? I want {{ . }} to be picked up by the JS.

{{- with site.Params.google.analytics }}
<script >
window.minimalAnalytics = {
  trackingId: '{{ . }}',
  autoTrack: true, // <-- init tracking
};
</script>
{{- end }}

Edit: This worked. But I am still interested to know if/how the @params method would work.

[pamubay]

Something like this:

assets/script.js:

import params from "@params";

window.minimalAnalytics = {
  trackingId: params.trackingId,
  autoTrack: true, // <-- init tracking
};

---

In HTML template:

{{- $js := resources.Get "script.js" -}}
{{- $opts := dict 
  "params" (dict "trackingId" site.Params.google.analytics) 
-}}
{{- $js = $js | js.Build $opts -}}
<script src="{{ $js.Permalink }}"></script>

EDIT: Fixed a typo

[tut]

Getting error parse failed unterminated quoted string in action. Also, tried site.Params.google.analytics with and without quotes, but the javascript is printed “as is”.

(() => {
  // <stdin>
  window.minimalAnalytics = {
    trackingId: "params.trackingId",
    autoTrack: true
  };
})();

[bep]

@pamubay

{{- $js := resources.Get "script.js" -}}
{{- $opts := dict 
  "params" (dict "trackingId" "site.Params.google.analytics) 
-}}
{{- $js = $js | js.Build $opts -}}
<script src="{{ $js.Permalink }}"></script>

So @pamubay is, as always, right. Passing params as an option to js.Build is the very best/simplest way to pass configuration etc. to the JS side. But I think there is a typo with the quotes in the example with the quoute before site.

[pamubay]

Sorry, fixed.

[tut]

Thanks y’all. This works now. Cheers! @bep is the “ExecuteAsTemplate” method still a suitable method?