Beginner Q: add css and js to a particular post

support
1

So I’m beginner on Hugo, have read Hugo doc. I’m trying to add terminalizer-player to a particular post-xyz.md, but couldn’t figure out how to add css and js to it.

What I’ve done is I put the css and js files into /static folder. What I need to do is:

  1. Have the following styles placed inside of head tags for the output HTML of post-xyz.md.
    <link rel="stylesheet" type="text/css" href="node_modules/xterm/dist/xterm.css">

What I did: Added the line above right after the header “—” in md file.
What is the outcome: I examined the output HTML, the tag I added became <!-- raw HTML omitted -->
What I’ve read about this outcome: Looks like “unsafe: false” is the default somewhere in the config file, but I’m reluctant to change it, for it’s a global setting and what I need is just in one post, right?

  1. Have the following scripts right before end of body tag for the output HTML
    <script src="node_modules/jquery/dist/jquery.min.js"></script>

  2. Have the following javascript code somewhere in the body of the output HTML
    // Initialize the terminalizer plugin
    $('#terminal').terminalizer({ recordingFile: 'data.json' });

Much appreciated for your help!

2

You can add a custom frontmatter param in your content files, eg addjs: true then in your templates, test if that param exists and is set to true, then add the js / css.

Or use a shortcode.

1 Like