How to use template correctly?

Question

css

Good afternoon!
There is a site on pure HTML on 20 pages.
I want to put the header, footer and some other blocks into separate files and connect them.
But at the same time, you need to change the titles, description and other text.
For this, I decided to use the Handlebars template engine.
How can I use it correctly, namely how to pass data to variables for their subsequent output?

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

How do I pass data to title and body?
How to put everything in files using Partials? Can this be done without a server?
If possible a short example...

Answer 1

in the same place in the dock everything is written
handlebarsjs.com

Answer 2

The most common example of a very simple templating engine, you may not need handlebars

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

<script>
  template(document.querySelector('.entry'), {
    title: 'Lorem ipsum dolor sit amet.',
    body: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, optio.'
  });

  function template(node, data) {
    node.innerHTML = tag(node.innerHTML, data);
  }

  function tag(input, data) {
    for (var key in data) {
      input = input.replace(new RegExp('{{'+ key +'}}', 'g'), data[key]);
    }
    return input;
  }
</script>