How to only load JS on certain URLS

support
1

How can I do this? I’m only wanting to load some JS if on /community/ pages for example. The following does not load the scripts on /community/*** pages

	{{ if in .RelPermalink "/community/" }}
		<script>
		window.fbAsyncInit = function() {
			FB.init({
			appId            : '2345234523452345',
			autoLogAppEvents : true,
			xfbml            : true,
			version          : 'v17.0'
			});
		};
		</script>
		<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
	{{ end }}

The following does work, but it loads the script on every page including the main / root page:

	{{ if ne .RelPermalink "/" }}
		<div id="fb-root"></div>
		<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v17.0&appId=2345234523452345&autoLogAppEvents=1" nonce="eBFOWRiZ"></script>
	{{ end }}

I’m not sure what to do here. What conditions should I use?

2

Does this mean that the script elements are not rendered, or does it mean that the scripts are not working?

3

<script> tags are not rendered. Meaning, what’s inside the condition, isn’t working. So the condition isn’t working?

4

This comparison looks fine to me. I suggest you add some warnf statements to debug. Maybe .RelPermalink isn’t what you think it is.

5

I need a working condition for doing things when current URL contains some text

6

I understand that. See my previous comment.

7

Could you give me an example of said warnf statement?

8

When I {{ .RelParmaLink}} in my partial, the page outputs this on home page:

/

The following condition should only work when RelPermaLink is not equal to /. Yet it outputs the script tags on every page including the home page /.

	{{ if ne .RelPermalink "/" }}
	{{ end }}

When I go to the community pages, and dump .RelParmaLink, I get: /community/belgium/. The following condition should only render script tags on /community/ pages, yet those tags don’t get rendered.

{{ if in .RelPermalink "/community/" }}
{{end}}
9

Place this in whatever template you’re using to render ...daily.com/categories/community/

<pre>
  &lbrace;{ in .RelPermalink "/community/" }} --> {{ in .RelPermalink "/community/" }}
</pre>
10

I go here:
http://localhost:1313/community/canada/british-columbia/
I get:
{{ in .RelPermalink "/community/" }} --> true

11

Gotcha, not a taxonomy term.

Compare .Section to community.

1 Like
12 
{{ if .Site.Params.scripts.fb }}
	{{ if eq .Section "community" }}
		<div id="fb-root"></div>
		<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v17.0&appId=108871966288173&autoLogAppEvents=1" nonce="eBFOWRiZ"></script>
	{{ end }}
{{ end }}

So I guess my logic was not good. This works. Why did I not think of comparing .Section? Doh.

13

Another way to do it is if all pages begin with /community/**, then you can try changing {{ if in .RelPermalink "/community/" }} to {{ if hasPrefix .RelPermalink "/community/" }}. That’s how I got mine to work for certain pages.

2 Likes
14

I think another way could be to have some front matter, and if the front matter contains some parameter, then load some js.

Another method could be to simply just put the JS in the actual layouts/section/community.html template so we don’t need to worry about a condition, but if you need to tackle multiple sections, you’d have to duplicate code, so it’s probably best as a condition.

15

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