Unexpected whitespace from `{{#content}}` block

Question

Unexpected whitespace from `{{#content}}` block

amimas opened this issue 4 years ago · comments

Not sure if this is a bug. This is the first time I'm trying this for logical structure and layout of handlebar templates. Here is what I have so far:

layout.hbs:

<!DOCTYPE html>
<html lang="en">
  <head>
    {{> document-head }}
  </head>

  <body>
    {{> header }}
    {{#block "main"}}{{/block}}
    {{> footer }}
  </body>
</html>

document-head.hbs (partial):

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

header.hbs (partial):

<header>
  <h1>Sample page</h1>
</header>

footer.hbs (partial):

<footer>
  <p>Sample footer</p>
</footer>

index.hbs:

{{#extend "layout"}}

  {{#content "main"}}
    <div class="container">
      <div id="menu"></div>
      <div id="content">
        <p>Hello world!!</p>
      </div>
    </div>
  {{/content}}

{{/extend}}

Here is the output of index.html generated from index.hbs. Notice the extra whitespace in front of <div class="container">.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    <header>
      <h1>Sample page</h1>
    </header>
        <div class="container">
      <div id="menu"></div>
      <div id="content">
        <p>Hello world!!</p>
      </div>
    </div>

    <footer>
      <p>Sample footer</p>
    </footer>
  </body>
</html>

Shannon Moeller · Answer 1 · Sat Jul 04 2020 21:54:10 GMT+0800 (China Standard Time)

Not a bug, just an unfortunate consequence of using a templating language. All examples in the README are prettified for legibility, but most templating languages, including handlebars, will output less than ideal formatting. If this is undesirable, you'll need to pass the output through another tool that can reformat it for you.

amimas · Answer 2 · Wed Jul 08 2020 00:06:33 GMT+0800 (China Standard Time)

Thanks for the quick reply. The above mentioned whitespace issue only seems to happen when using {{content}}. So maybe there's a room for enhancing this so that additional reformatting tool is not needed. Or maybe it's not as simple as I imagine. I am relatively new to templating language.

As a workaround, I updated my content to add an extra blank line after {{content}}. That seems to be good enough for now. For example use the following in index.hbs instead of the one I posted above:

{{#extend "layout"}}

  {{#content "main"}}

    <div class="container">
      <div id="menu"></div>
      <div id="content">
        <p>Hello world!!</p>
      </div>
    </div>
  {{/content}}

{{/extend}}