Access template variables in JS

frjo · June 11, 2022, 7:54am

You can make use of “ExecuteAsTemplate”.

I do this in my Zen theme in a couple of places.

frjo/hugo-theme-zen/blob/3f01e69d6d63c120053a3c837219257dd8398449/assets/js/search.js#L47

      
        
                fragment.appendChild(result);
              }
              results.appendChild(fragment);
            }
            
            
function doSearch() {
              const query = document.querySelector('.search-text').value.trim();
              const results = index.search({
                query: query,
                enrich: true,
                limit: {{ site.Params.searchLimit | default 20 }}
              });
              const items = {};
              results.forEach(function (result) {
                result.result.forEach(function (r) {
                  items[r.id] = r.doc;
                });
              });
              showResults(items);
            }

github.com

frjo/hugo-theme-zen/blob/3f01e69d6d63c120053a3c837219257dd8398449/layouts/partials/scripts.html#L40

      
        
            {{ $listsort := resources.Get "js/listsort.js" | fingerprint -}}
            <script defer src="{{ $listsort.RelPermalink }}"></script>
            {{ end -}}
            {{ if .HasShortcode "contact" -}}
            {{ $contact := resources.Get "js/contact.js" | minify | fingerprint -}}
            <script defer src="{{ $contact.RelPermalink }}"></script>
            {{ end -}}
            {{ if .HasShortcode "search" -}}
            {{ $flexsearch := resources.Get "js/lib/flexsearch.compact.js" | fingerprint -}}
            <script defer src="{{ $flexsearch.RelPermalink }}"></script>
            {{ $search := resources.Get "js/search.js" | resources.ExecuteAsTemplate "js/search.js" . | minify | fingerprint -}}
            <script defer src="{{ $search.RelPermalink }}"></script>
            {{ end -}}
            {{ $script := resources.Get "js/script.js" | minify | fingerprint -}}
            <script defer src="{{ $script.RelPermalink }}"></script>

Topic		Replies	Views
{{.Site.BaseURL}} appears in a JS template literal support	4	610	October 16, 2023
Accessing hugo's template variable inside Javascript files? support	12	8468	April 7, 2023
Access JS variables across in partials and html pages support	1	933	June 10, 2020
Is it possible to access HTML values or JS variables from Hugo templates? support	3	1088	April 24, 2019
Templating JS? support	12	3840	June 4, 2020

Access template variables in JS

Related topics