Add links dynamically in JS

support
#1

I have a bunch of events in content/events folder. In each event_name.md file I have a link to an external page as a linkTitle. In layout/events/single.html I want to add a button with a link to that external page. I created a JS function

const joinEventButtons = document.querySelectorAll(`[data-portal*="join-event"]`)
joinEventButtons.forEach(function(button) {
  button.onclick = function() {
    console.log("Working")
    location.href = "{{  }}"
  }
})

but I have no idea how I should add this linkTitle from markdown file into this script? What should I put in those curly brackets as a location.href?

#2

Have a look at the ExecuteAsTemplate function. Move your JS file under the /assets/ directory and then enter the Page’s .Permalink or .RelPermalink within the curly brackets as the value of location.href.

Then reference the JS file from within the template of your single pages typically located under /layouts/_default/single.html (you can also call the JS file from within a partial template that is then included in the single page template).

#3

So I think that my permalink is not working (if it’s generated automatically) or I don’t know where should I specify how it should look like.

#4

I misread the original post.

You want to pass the external link to the JS.

You can either store it in a front matter parameter and then reference it in the JS file as outlined above or if you are going to have that link from within the body of your content you would need to reference it through a Shortcode and then populate the JS location.href with the shorcode parameter.

1 Like