Two beginner questions anchor tags & javacript

Anchor Tags

For site structure I have an index, with multiple pages each as a layout built with partials and custom html. I have a base of template that adds a footer to every page. This footer includes contact form with id="#contact". In the Main section of everypage I have an anchor that href="#contact". I dont know about the build yet but on my local server every time I click the main button it takes to the index page contact, and not the contact on each page.

I have been reading https://gohugo.io/content-management/cross-references/ but I am getting errors when I do href=" {{< relref "#contact" >}}" or href=" {{< ref "#contact" >}}"

Javascript

I have never actually made a multipage site yet, and I am not sure the proper approach here. I have one app.js file with all the code for the whole site, but not all of it is needed on every page. SO I am getting some reference errors. Should I make make multiple files, and include them separately in each page footer, or some how activate the script from within one file if it recognizes the page? I am using victor-hugo boilerplate with webpack.

I’m a beginner too so this may be pointing you in the wrong direction.

The {{ relref "#XXXX" }} shortcode works for me when you’re referencing a title because Hugo automatically puts an id in the HTML when you make a Markdown heading.

However, since you’ve written the id = in your theme, maybe {{ relref }} doesn’t work, because the id tag isn’t built by hugo. Have you tried just using a straight markdown link? [linky](#contact)?

As I said, I’m no expert, but give it a try and let us know what works!

Hi,

I fixed the first issue. anchor tags should be {{ .URL }}/#contact not #contact

I still do not know the correct way to approach the javascript bundling. You can see a live version of the site here: https://jovial-goldberg-8565f6.netlify.com/

I know why the javascript is giving error on all pages except the home page. WHat was the correct way to bundle this? Or should I just serve a different app.js for each page?