Custome js do not load

malde11 · April 24, 2024, 5:30pm

Hello,
I try to load cutome js/css just for one site. For example only “the homepage” or for “about us”.
I want to load a video in “hero.html” only for the “homepage”

Here is my github repo:
https://github.com/malde11/portfolio/tree/main

My hero code:

{{ with .Site.Params.banner }}
  {{ if .enable }}
  {{ "<!-- Site Hero Start -->" | safeHTML }}
  <section class="site-hero">
    <div id="video-wrapper"> 
      <video autoplay muted loop id="myVideo" preload="auto"></video>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-10 mx-auto">
          <div class="site-hero-content text-center">
            <h6 class="hero-slogan">{{ .tagline }}</h6>
            <ul class="site-hero-content-buttons">
              <li>
                <a href="{{ .primary_button_url | absURL }}" class="btn btn-secondary hero-button">
                  <span class="btn-area">
                    <span data-text="{{ .primary_button }}">
                      {{ .primary_button }}
                    </span>
                  </span>
                </a>
              </li>
              <li>
                <a href="{{ .secondary_button_url | absURL }}" class="btn btn-primary hero-button">
                  <span class="btn-area">
                    <span data-text="{{ .secondary_button }}">
                      {{ .secondary_button }}
                    </span>
                  </span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <a href="#counter" class="site-hero-scroll scroll-to">
      <img src="{{ "images/arrow-down.svg" | absURL }}" alt="arrow-down">
    </a>
  </section>
  {{ "<!-- Site Hero End -->" | safeHTML }}
  {{ end }} 
{{ end }}

My footer:

<footer class="site-footer">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="site-footer-logo">
          <a href="{{ .Site.BaseURL }}">
            <img src="{{ .Site.Params.logo_footer | absURL }}" alt="logo-footer">
            <span class="brand-logo-footer">Kettenbeil</span>
          </a>
        </div>
      </div>
      {{ with .Site.Params.footer.contactInfo }}
      <div class="col-lg-3 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <p class="site-footer-widget-description">
	    {{ if .address }}
              {{ .address | safeHTML }}
	      <br>
	    {{ end }}
	    {{ if .phone }}
              <a href="tel:{{ .phone }}">{{ .phone }}</a>
              <br>
	    {{ end }}
	    {{ if .email }}
              <a href="mailto:{{ .email }}">{{ .email }}</a>
	    {{ end }}
          </p>
        </div>
      </div>
      {{ end }}
      {{ with .Site.Params.footer.sitemap }}
      <div class="col-lg-2 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <ul class="site-footer-widget-links">
            {{ range .link }}
            <li><a href="{{ .url | absURL }}">{{ .name }}</a></li>
            {{ end }}
          </ul>
        </div>
      </div>
      {{ end }}
      {{ with .Site.Params.footer.social }}
      <div class="col-lg-2 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <ul class="site-footer-widget-links">
            {{ range .link }}
              <li><a href="{{ .url }}">{{ .name }}</a></li>
            {{ end }}
          </ul>
        </div>
      </div>
      {{ end }}
      {{ with .Site.Params.footer.service }}
      <div class="col-lg-3 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <p class="site-footer-widget-description">
            {{ .description | safeHTML }}
          </p>
        </div>
      </div>
      {{ end }}
      <div class="col-lg-2 col-12">
        <a href="#top" class="site-footer-widget-top">
          <img src="{{ "images/to-top.svg" | absURL }}" alt="back-to-top">
          <p>
	    {{ .Site.Params.footer.back_to_top.description | safeHTML }}
          </p>
        </a>
      </div>
      <div class="col-12">
        <div class="site-footer-copyright">
          <p>© Copyright {{ dateFormat "2006" now }} - All Rights Reserved by <a href="https://staticmania.com/" target="_blank">StaticMania</a> </p>
        </div>
      </div>
    </div>
    {{ if .Site.Params.footer.qr_print }}
    <div class="row d-none d-print-block">
      <div class="col col-lg-2">
        {{ $qrcode := resources.Get "js/qrcode.js" | minify }}
        <script src="{{ $qrcode.Permalink }}"></script>

        <div id="qrcode">
          <script type="text/javascript">
           new QRCode(document.getElementById("qrcode"), {
             text: "{{ .Page.RelPermalink | absURL }}",
             width: 128,
             height: 128,
           });
          </script>
        </div>
      </div>
      <div class="col col-md-auto">
        {{ .Page.RelPermalink | absURL }}
      </div>
    </div>
    {{ end }}
  </div>
</footer>


<!-- {{ $formhandler := resources.Get "js/formhandler.js" | minify }}
<script src="{{ $formhandler.Permalink }}"></script> -->
{{ $vendor := resources.Get "js/vendor.js" | minify }}
<script src="{{ $vendor.Permalink }}"></script>
{{ $script := resources.Get "js/script.js" | minify }}
<script src="{{ $script.Permalink }}"></script>


<!-- video.js -->
{{ $video := resources.Get "js/video.js" | minify }}
<script src="{{ $video.Permalink }}"></script>

I have got video.js on every site, but I want it only on one site. I guess it is something wrong with “Permalink”. Pretty new to Hugo and the templates. Maby someone can hint me o the right way.

jmooring · April 24, 2024, 5:37pm

Set a Page.Store in your hero code, and conditionally add the JS based on its value. See Mermaid example in docs:
https://gohugo.io/content-management/diagrams/#mermaid-diagrams

malde11 · April 24, 2024, 6:21pm

Looks not so easy

What i have tried…

hero.html:

{{ with .Site.Params.banner }}
  {{ if .enable }}
  {{ "<!-- Site Hero Start -->" | safeHTML }}
  <section class="site-hero">
    <pre class="mermaid">
      <div id="video-wrapper"> 
        <video autoplay muted loop id="myVideo" preload="auto"></video>
      </div>
    </pre>
    {{ .Page.Store.Set "hasMermaid" true }}
    <div class="container">
      <div class="row">
        <div class="col-lg-10 mx-auto">
          <div class="site-hero-content text-center">
            <h6 class="hero-slogan">{{ .tagline }}</h6>
            <ul class="site-hero-content-buttons">
              <li>
                <a href="{{ .primary_button_url | absURL }}" class="btn btn-secondary hero-button">
                  <span class="btn-area">
                    <span data-text="{{ .primary_button }}">
                      {{ .primary_button }}
                    </span>
                  </span>
                </a>
              </li>
              <li>
                <a href="{{ .secondary_button_url | absURL }}" class="btn btn-primary hero-button">
                  <span class="btn-area">
                    <span data-text="{{ .secondary_button }}">
                      {{ .secondary_button }}
                    </span>
                  </span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <a href="#counter" class="site-hero-scroll scroll-to">
      <img src="{{ "images/arrow-down.svg" | absURL }}" alt="arrow-down">
    </a>
  </section>
  {{ "<!-- Site Hero End -->" | safeHTML }}
  {{ end }} 
{{ end }}

and my footer.html:

<footer class="site-footer">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="site-footer-logo">
          <a href="{{ .Site.BaseURL }}">
            <img src="{{ .Site.Params.logo_footer | absURL }}" alt="logo-footer">
            <span class="brand-logo-footer">Kettenbeil</span>
          </a>
        </div>
      </div>
      {{ with .Site.Params.footer.contactInfo }}
      <div class="col-lg-3 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <p class="site-footer-widget-description">
	    {{ if .address }}
              {{ .address | safeHTML }}
	      <br>
	    {{ end }}
	    {{ if .phone }}
              <a href="tel:{{ .phone }}">{{ .phone }}</a>
              <br>
	    {{ end }}
	    {{ if .email }}
              <a href="mailto:{{ .email }}">{{ .email }}</a>
	    {{ end }}
          </p>
        </div>
      </div>
      {{ end }}
      {{ with .Site.Params.footer.sitemap }}
      <div class="col-lg-2 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <ul class="site-footer-widget-links">
            {{ range .link }}
            <li><a href="{{ .url | absURL }}">{{ .name }}</a></li>
            {{ end }}
          </ul>
        </div>
      </div>
      {{ end }}
      {{ with .Site.Params.footer.social }}
      <div class="col-lg-2 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <ul class="site-footer-widget-links">
            {{ range .link }}
              <li><a href="{{ .url }}">{{ .name }}</a></li>
            {{ end }}
          </ul>
        </div>
      </div>
      {{ end }}
      {{ with .Site.Params.footer.service }}
      <div class="col-lg-3 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <p class="site-footer-widget-description">
            {{ .description | safeHTML }}
          </p>
        </div>
      </div>
      {{ end }}
      <div class="col-lg-2 col-12">
        <a href="#top" class="site-footer-widget-top">
          <img src="{{ "images/to-top.svg" | absURL }}" alt="back-to-top">
          <p>
	    {{ .Site.Params.footer.back_to_top.description | safeHTML }}
          </p>
        </a>
      </div>
      <div class="col-12">
        <div class="site-footer-copyright">
          <p>© Copyright {{ dateFormat "2006" now }} - All Rights Reserved by <a href="https://staticmania.com/" target="_blank">StaticMania</a> </p>
        </div>
      </div>
    </div>
    {{ if .Site.Params.footer.qr_print }}
    <div class="row d-none d-print-block">
      <div class="col col-lg-2">
        {{ $qrcode := resources.Get "js/qrcode.js" | minify }}
        <script src="{{ $qrcode.Permalink }}"></script>

        <div id="qrcode">
          <script type="text/javascript">
           new QRCode(document.getElementById("qrcode"), {
             text: "{{ .Page.RelPermalink | absURL }}",
             width: 128,
             height: 128,
           });
          </script>
        </div>
      </div>
      <div class="col col-md-auto">
        {{ .Page.RelPermalink | absURL }}
      </div>
    </div>
    {{ end }}
  </div>
</footer>


<!-- {{ $formhandler := resources.Get "js/formhandler.js" | minify }}
<script src="{{ $formhandler.Permalink }}"></script> -->
{{ $vendor := resources.Get "js/vendor.js" | minify }}
<script src="{{ $vendor.Permalink }}"></script>
{{ $script := resources.Get "js/script.js" | minify }}
<script src="{{ $script.Permalink }}"></script>


<!-- video.js -->
{{ if .Store.Get "hasMermaid" }}
  <script type="module">
    import mermaid from '/js/video.js';
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}

What is wrong?

jmooring · April 24, 2024, 6:23pm

Everything. The Mermaid example is to show you how, not to copy/paste.

malde11 · April 26, 2024, 2:03pm

Hi,
only for testing I copy/paste the mermaid example on this site https://gohugo.io/render-hooks/code-blocks/#examples in my code. Here is, what I did:

layouts/_default/_markup/render-codeblock-mermaid.html

<div class="mermaid">
    {{- .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}

layouts/_default/baseof.html

<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
    {{- partial "head.html" . -}}
    <body>
        {{- partial "header.html" . -}}
        <main>
            {{- block "main" . }}{{- end }}
        </main>
        {{- partial "footer.html" . -}}
    </body>
</html>

{{ if .Page.Store.Get "hasMermaid" }}
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}

But nothing is shown in the network tab under js in devtools of google chrome.
I just want to see if it is working. Later try my own code.
Please have a look.

jmooring · April 26, 2024, 2:58pm

Works for me. Try it:

git clone --single-branch -b hugo-forum-topic-49469 https://github.com/jmooring/hugo-testing hugo-forum-topic-49469
cd hugo-forum-topic-49469
hugo server

malde11 · April 26, 2024, 4:10pm

Did it in another way

This post is the same question:
https://discourse.gohugo.io/t/how-to-include-a-script-on-only-one-content-page/20977

I have added an if statement to my footer like this:

<footer class="site-footer">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="site-footer-logo">
          <a href="{{ .Site.BaseURL }}">
            <img src="{{ .Site.Params.logo_footer | absURL }}" alt="logo-footer">
            <span class="brand-logo-footer">Kettenbeil</span>
          </a>
        </div>
      </div>
      {{ with .Site.Params.footer.contactInfo }}
      <div class="col-lg-3 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <p class="site-footer-widget-description">
	    {{ if .address }}
              {{ .address | safeHTML }}
	      <br>
	    {{ end }}
	    {{ if .phone }}
              <a href="tel:{{ .phone }}">{{ .phone }}</a>
              <br>
	    {{ end }}
	    {{ if .email }}
              <a href="mailto:{{ .email }}">{{ .email }}</a>
	    {{ end }}
          </p>
        </div>
      </div>
      {{ end }}
      {{ with .Site.Params.footer.sitemap }}
      <div class="col-lg-2 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <ul class="site-footer-widget-links">
            {{ range .link }}
            <li><a href="{{ .url | absURL }}">{{ .name }}</a></li>
            {{ end }}
          </ul>
        </div>
      </div>
      {{ end }}
      {{ with .Site.Params.footer.social }}
      <div class="col-lg-2 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <ul class="site-footer-widget-links">
            {{ range .link }}
              <li><a href="{{ .url }}">{{ .name }}</a></li>
            {{ end }}
          </ul>
        </div>
      </div>
      {{ end }}
      {{ with .Site.Params.footer.service }}
      <div class="col-lg-3 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <p class="site-footer-widget-description">
            {{ .description | safeHTML }}
          </p>
        </div>
      </div>
      {{ end }}
      <div class="col-lg-2 col-12">
        <a href="#top" class="site-footer-widget-top">
          <img src="{{ "images/to-top.svg" | absURL }}" alt="back-to-top">
          <p>
	    {{ .Site.Params.footer.back_to_top.description | safeHTML }}
          </p>
        </a>
      </div>
      <div class="col-12">
        <div class="site-footer-copyright">
          <p>© Copyright {{ dateFormat "2006" now }} - All Rights Reserved by <a href="https://staticmania.com/" target="_blank">StaticMania</a> </p>
        </div>
      </div>
    </div>
    {{ if .Site.Params.footer.qr_print }}
    <div class="row d-none d-print-block">
      <div class="col col-lg-2">
        {{ $qrcode := resources.Get "js/qrcode.js" | minify }}
        <script src="{{ $qrcode.Permalink }}"></script>

        <div id="qrcode">
          <script type="text/javascript">
           new QRCode(document.getElementById("qrcode"), {
             text: "{{ .Page.RelPermalink | absURL }}",
             width: 128,
             height: 128,
           });
          </script>
        </div>
      </div>
      <div class="col col-md-auto">
        {{ .Page.RelPermalink | absURL }}
      </div>
    </div>
    {{ end }}
  </div>
</footer>


<!-- {{ $formhandler := resources.Get "js/formhandler.js" | minify }}
<script src="{{ $formhandler.Permalink }}"></script> -->
{{ $vendor := resources.Get "js/vendor.js" | minify }}
<script src="{{ $vendor.Permalink }}"></script>
{{ $script := resources.Get "js/script.js" | minify }}
<script src="{{ $script.Permalink }}"></script>

{{ if $.Param "videoTest" -}}
{{ $video := resources.Get "js/video.js" | minify }}
<script defer src="{{ $video.RelPermalink }}"></script>
{{ end -}}

and then set videoTest in content → _index.md to true

---

title: "Home"

videoTest: true

---

Got it from this repo:
https://github.com/frjo/hugo-theme-zen/blob/2117479a0bc564a061a42013ef173d5ff9bd3326/layouts/partials/scripts.html#L11-L14

Maby not the right/correct way… but I understand it.
The Mermaid example is a bit complicated. Maby someone can explain it better?

jmooring · April 26, 2024, 4:24pm

You set a Page.Store boolean value when you need to include a script, then read the value to determine if the script tag should be rendered. It’s dirt simple.

malde11 · April 26, 2024, 5:25pm

OK… I hope, that I am close

I get a 404 not found at the js path. It looks like, it is missing the localhost or baseurl.
Here is the console error what I get:
<script src=js/video.js></script> 404 Not found
The localhost or domain is missing.

here is my hero.html code:

<div class="blabla">
{{ with .Site.Params.banner }}
  {{ if .enable }}
  {{ "<!-- Site Hero Start -->" | safeHTML }}
  <section class="site-hero">
      <div id="video-wrapper"> 
        <video autoplay muted loop id="myVideo" preload="auto"></video>
      </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-10 mx-auto">
          <div class="site-hero-content text-center">
            <h6 class="hero-slogan">{{ .tagline }}</h6>
            <ul class="site-hero-content-buttons">
              <li>
                <a href="{{ .primary_button_url | absURL }}" class="btn btn-secondary hero-button">
                  <span class="btn-area">
                    <span data-text="{{ .primary_button }}">
                      {{ .primary_button }}
                    </span>
                  </span>
                </a>
              </li>
              <li>
                <a href="{{ .secondary_button_url | absURL }}" class="btn btn-primary hero-button">
                  <span class="btn-area">
                    <span data-text="{{ .secondary_button }}">
                      {{ .secondary_button }}
                    </span>
                  </span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <a href="#counter" class="site-hero-scroll scroll-to">
      <img src="{{ "images/arrow-down.svg" | absURL }}" alt="arrow-down">
    </a>
  </section>
  {{ "<!-- Site Hero End -->" | safeHTML }}
  {{ end }} 
{{ end }}
</div>

{{ .Page.Store.Set "blabla" true }}

Here is my baseof.html:

<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
    {{- partial "head.html" . -}}
    <body>
        {{- partial "header.html" . -}}
        <main>
            {{- block "main" . }}{{- end }}
        </main>
        {{- partial "footer.html" . -}}
    </body>
</html>

{{ if .Store.Get "blabla" }}
    <script src="js/video.js"></script>
{{ end }}

hm… sorry

jmooring · April 26, 2024, 5:26pm

This path is relative to the current page. I doubt that’s where the script resides.

malde11 · April 26, 2024, 6:04pm

Did it like that:

{{ if .Store.Get "video" }}
    {{ with resources.Get "js/video.js" | minify }}
        <script src="{{ .RelPermalink }}"></script>
    {{ end }}   
{{ end }}

thanks jmooring

Topic		Replies	Views
Custom CSS is not loading support	9	187	May 3, 2024
Need help in serving CSS and JS for a Custom JS Library (plyr js [plyr.io]) support	6	234	April 11, 2024
How to only load JS on certain URLS support	14	454	July 2, 2023
CSS sometimes not loading support	6	455	January 12, 2023
How to include CDN dependencies only on certain pages? support	1	228	April 3, 2020

Custome js do not load

Related Topics