Js script scope - script only works in index

support
1

Hi there, I’m new in Hugo.
I’m trying to include js scripts to shortcodes (navbar, carousel, etc in layouts/partials/navbar.html eg)

This works ok on /layouts/index.html (home), I use the script tag like this:
<script src="js/mobile__menu.js"></script>
and placing the file in /static/js

But when I go to other view /contact eg I cannot see the script tag, nor in the body neither into event listeners tab in the dev tools.

I’ve read this forum post so I suppose it’s a scope thing.

I tried to move the scripts into layouts/_default/baseof.html inside body tag:

{{ with resources.Get "js/mobile__menu.js" }}
      {{ if hugo.IsDevelopment }}
        {{ with . | js.Build }}
          <script src="{{ .RelPermalink }}"></script>
        {{ end }}
      {{ else }}
        {{ $opts := dict "minify" true }}
        {{ with . | js.Build $opts | fingerprint }}
          <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
        {{ end }}
      {{ end }}
    {{ end }}

as I read in hugo docs, but it didn’t work either.
To sum up, I’ve got a scripts that only works in home, when I go to other views they dissapear. The site is multilanguage (idk if this information is relevant), thank you for reading

2

The path does not begin with a slash, so it is relative to the current page. Think about it.

3

also tried that and din’t work. Without a / works in home, with a / doesn’t work enywhere

4

I suggest you post a link to your public repository.

See Requesting Help.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

5

It’s private but here are extracts for better comprehension

layouts/partials/topbar.html :

<nav class="topbar__nav" id="topbar-navigation" aria-label="Secondary navigation">

  <button
    class="burger__menu"
    type="button"
    aria-label='{{ i18n "burger_menu" }}'
    >
    <span></span>
    <span></span>
    <span></span>
  </button>
  .....
</nav>

<script src="/js/mobile__menu.js"></script>

static/js/mobile__menu.js

const initializeMenu = () => {
  const menuButton = document.querySelector('.burger__menu');
  const navList = document.querySelector('.navbar__list');

  const toggleMenu = () => {
    navList.classList.toggle('show-mobile-menu');
    document.body.classList.toggle('menu-opened');
  };

  menuButton.addEventListener('click', () => {
    toggleMenu();
  });

  const navItems = document.querySelectorAll('.navbar__link');
  navItems.forEach(navItem => {
    navItem.addEventListener('click', () => {
      toggleMenu();
    });
  });
}

initializeMenu();

window.addEventListener('scroll', function() {
  const navbar = document.querySelector('.navbar');
  const header = document.querySelector('.header');
  if (window.scrollY !== 0) {
    navbar.classList.add('hidden');
    header.classList.add('header--small');
  } else {
    navbar.classList.remove('hidden');
    header.classList.remove('header--small');
  }
});

layouts folder:

.
├── 404.html
├── about
│   └── single.html
├── contact
│   └── single.html
├── _default
│   └── baseof.html
├── index.html
├── location
│   └── single.html
├── lounges
│   └── single.html
├── partials
│   ├── carousel.html
│   ├── footer.html
│   ├── header.html
│   ├── head.html
│   ├── nav.html
│   └── topbar.html

layouts/partials/header.html

<header class="header">
  {{- partial "topbar.html" . -}}
  {{- partial "nav.html" . -}}
</header>

layouts/_default/baseof.html:

<!DOCTYPE html>
<html lang="{{ .Site.Language.LanguageCode }}">

  {{- partial "head.html" . -}}
  
  <body>

    {{- partial "header.html" . -}}

    {{ block "main" . }}
    {{ end }}

    {{- partial "footer.html" . -}}
  </body>
</html>
6

This isn’t helpful.

7

sorry I’ve submitted unintentionally before time

8

If anyone need this, the solution was

<script src='{{ "js/your_script.js" | absURL }}'></script>

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.