HUGO: Insert JS in between markdown Content

Question

I'm using a HUGO blog post template website and I want to modify one of my pages to have a JS calculator embedded into the content. Hence, I need to split the .Content variable somehow. Ideally I want it to look like this:

• HEADER

• Text block #1

• JS Caculator

• Text block #2

• Text block #3

• FOOTER

So far I managed to modify it such that the content comes first all in one big block and then the calculator. How do I split the calculator variable for this?

I found something like this before:

My attempt so far:

{{ define "main" }}

<section class="section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h2 class="mb-4">{{.Title }}</h2>
        {{ .Content }}
        <br/><br/>
        <br/><br/>
        <br/><br/>
            <!-- Begin Scheidungskosten-Rechner von www.cool-funky-calculator.de -->
            <div id="s_r_de_calculator">
              <script type="text/javascript">
              </script>
              <script
                 type="text/javascript"
                 charset="utf-8"
                 src="https://www.cool-funky-calculator.de/widget/calculator.js">
              </script>
            </div>
            <br/><br/>
            <br/><br/>
            <br/><br/>
          <!-- </div> -->
        <!-- </form> -->
      </div>
    </div>
  </div>
</section>

Answer 1

You could write a custom shortcode for this. For example, write a shortcode named js_calculator.html in /layouts/shortcodes/:

Folder structure

Hugo Project
├── content
├── layouts
│   └── shortcodes
│      ├── js_calculator.html
├── static
├── themes
└──config.toml

Custom shortcode:

<div id="s_r_de_calculator">        
  <script type="text/javascript">
  </script>
  <script
     type="text/javascript"
     charset="utf-8"
     src="https://www.cool-funky-calculator.de/widget/calculator.js">
  </script>
</div>

Then inside markdown files, use this like

## Your content

Some lines

{{< js_calculator >}}

More lines