Linking to external javascript file

support
1

Hello all,
I am currently using Hugo Academic theme to develop a basic website for my organ.
I am required to include another navbar to the navbar partial. The new navbar requires a .js file that is stored in a CDN.
I am aware that I can add custom js, provided that it is stored in my computer. However, I want to simply pass it the URL of the .js.
What is the best way to do it? I do not want to simply add a tag manually after I render the pages.
Thank you very much!

2

I don’t know if I understand. Are you asking how to reference an external URL?

In that case you’ll need to open the Hugo template file in which you want to use the JavaScript code. That probably is footer.html or header.html in your /themes/[theme-name]/layouts/ folder.

Then you can add a link to the JavaScript on a CDN like so:

<script src="https://cdnjs.cloudflare.com/ajax/libs/...."></script>

If you want to know what ‘the best way’ is, can you say something more about the goal(s) you want to achieve? Then we can suggest what approaches best help to achieve that target.

3

Thanks for the quick response!
Yes, I want to reference an external URL. The specific issue is that I have to insert another navbar on top of the one generated by the framework. I have inserted the html in the navbar partial, and it looks ok.This new navbar uses .js code from a file hosted in a CDN. I am not sure if it is best practice to insert the reference to the URL in the partial’s file.
I was wondering if there was a way to reference external CDN’s in the config.toml file.
Thank you very much.

4

Hugo uses a template lookup, and to override a template in the theme, you make a file named the same in your layouts directory. To understand how this works, you should familiarize yourself with template lookup. :slight_smile:

The Hugo Academic theme has a template at layouts/partial/head_custom.html. Make that file in your site layout (not the theme), and add the lines you want added to the site. That theme included the head_custom.html template specifically for your use case.

5

Question remains: do I insert the <script> tag in that file? I have seen no <script> tags in the partials.

6

<script> is HTML. Just put it in the file. You can check something like that just by running Hugo, so test it out.

If you need any more help with this issue, please review requesting help, that has a bunch of guidelines to help us help you (see what I did there?). :slight_smile:

1 Like
7

Thanks a lot for the patience. (I did, very cool!) :pray:

1 Like