[object Object] when using {{#content}}

zslabs commented 8 years ago

Hi, I have the following structure:

// layouts/default.html

<!doctype html>
<html lang="en">
  <head>
    {{> head}}
    {{#block "header_misc"}}{{/block}}
  </head>
  <body>
    <h1>Default Layout</h1>

    {{{contents}}}

    {{> footer}}
  </body>
</html>

// partials/head.html

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{title}}</title>
<script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>

// partials/footer.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>

// src/pages/index.md

---
title: Homepage

---

{{#extend "default"}}
  {{content "header_misc"}}
    <h1>Hello there</h1>
  {{/content}}
{{/extend}}
<ul>
  {{#if collections.articles}}
    {{#each collections.articles}}
      <li>
        <h3>{{this.title}}</h3>
        <article>{{this.contents}}</article>
      </li>
    {{/each}}
  {{else}}
    nope
  {{/if}}

  `test`
</ul>

// Built file
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Homepage</title>
    <script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>

  </head>
  <body>
    <h1>Default Layout</h1>

    <p>[object Object]<ul>
      <li>
        <h3>First Post</h3>
        <article>
This is a blog post here
</article>
      </li></p>
<p>  <code>test</code>
</ul></p>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
  </body>
</html>

No matter what though, the built file only outputs [object Object] on the page. I'm assuming I'm missing something fairly obvious, so any help would be great!

shannonmoeller commented 8 years ago

There's a few errors.

In layouts/default.html you have {{{contents}}} which isn't a thing in handlebars-layouts. Anywhere you want to have content injected into a layout should be defined as a block.
In src/pages/index.md you lead the document with an {{#extend}}, but then have content after that. This is also not valid as your content isn't set to be injected into a block.

I think what you're trying for is more like this:

// layouts/default.html

<!doctype html>
<html lang="en">
<head>
    {{> head}}
</head>
<body>
    <h1>Default Layout</h1>

    {{#block "header"}}{{/block}}

    {{#block "body"}}{{/block}}

    {{> footer}}
</body>
</html>

// partials/head.html

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{title}}</title>
<script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>

// partials/footer.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>

// src/pages/index.md

---
title: Homepage
---

{{#extend "default"}}
    {{#content "header"}}
        <h1>Hello there</h1>
    {{/content}}

    {{#content "body"}}
        <ul>
            {{#if collections.articles}}
                {{#each collections.articles}}
                    <li>
                        <h3>{{this.title}}</h3>
                        <article>{{this.contents}}</article>
                    </li>
                {{/each}}
            {{else}}
                <li>nope</li>
            {{/if}}
        </ul>
    {{/content}}
{{/extend}}

zslabs commented 8 years ago

So {{{contents}}} is a Metalsmith thing, but I understand the rest of your explanation. Thank you for writing that up!

shannonmoeller commented 8 years ago

My pleasure! I'm going to close this issue for now, but feel free to reopen it if you're still having trouble.

shannonmoeller / handlebars-layouts

[object Object] when using {{#content}} #32