Dynamic Disqus "Sign-in/Sign-out" Link in Hugo Site

support
1

Hi everyone,
I’m a beginner in web development, so please bear with me if my question seems off.

I’m running a Hugo site where I build locally and push the “public” folder to the server. There’s no backend scripting or functions on the server side. I use Disqus for comments via Hugo’s built-in template.

I’m trying to create a dynamic “Sign-in/Sign-out” link in the navigation based on the user’s Disqus login status. Here’s what I’ve done so far:

  1. I created a partial file _disqus_login_link.html with the following script:
<script>
  window.onload = function() {
    if (typeof DISQUS !== 'undefined' && DISQUS.user) {
      document.querySelector(".disqus-login-text").innerHTML = "Sign-out";
    } else {
      document.querySelector(".disqus-login-text").innerHTML = "Sign-in";
    }
  };
</script>
  1. My target element is in header.html:
<span class="disqus-login-text"></span>
  1. I included the partial in the body:
{{ partial "_disqus_login_link.html" . }}

The “Sign-in” text appears, but when I log in, the text doesn’t change, and there are no errors in the console.

Any advice or pointers on what I might be missing?
Thanks in advance!