9

I am using assemble.io for a simple static web site but am having issues with the {{title}} tag. Here is a rough overview of the issue.

Here is my layout.hbs:

<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
  </head>
  <body>
    <!-- the body tag is used to "pull in" content from pages -->
    {{> body }}
  </body>
</html>

I have 2 json files for data:

foo1.json

{
  "title": "Hello world I am title 1"
}

foo2.json

{
  "title": "I am a different title"
}

And I have 2 pages:

foo1.hbs

{{#foo1 }} 
 {{> module1 }}
 {{> module2 }}
 {{> module3 }}
{{/foo1 }}

foo2.hbs

{{#foo2 }} 
 {{> module1 }}
 {{> module2 }}
 {{> module3 }}
{{/foo2 }}

My gruntfile.js snippet:

options: {
  layout: "src/responsive/layouts/layout.hbs",
  partials: 'src/responsive/modules/**/*.hbs',
  data: 'src/responsive/data/**/*.json',
  flatten: false
},
pages: {
  expand: true,
  cwd: 'src/responsive/pages',
  src: '**/*.hbs',
  dest: 'src/'
}

When I run 'grunt assemble' I get no page title. I think this has something to do with context as if I change {{title}} in layout.hbs to be {{foo1.title}} or {{foo2.title}} it works but then both pages get the same title as they share this template.

How can I make the context of {{title}} in layout.hbs work for all json files being passed in?

A.

raidendev
  • 2,729
  • 1
  • 22
  • 23
Adi
  • 4,034
  • 13
  • 56
  • 78
  • I have tried {{page.title}} but then both return the title from foo1.json – Adi Jul 23 '14 at 10:34
  • I have also tried {{this.page.title}} but again both results return the title from foo1.json. When assemble compiles pages, does it use all concat all the json files and use them for every page? I thought there was a 1-to-1 relationship between page and json if they had the same name? – Adi Jul 23 '14 at 11:41
  • 1
    Are you sure about `{{page.title}}`? It works correctly for me with your example. – raidendev Jul 25 '14 at 16:08
  • Apparently it doesn't work if i have another index.hbs in a different folder (see below) – Adi Jul 29 '14 at 13:38

1 Answers1

3

@Adi I setup a repo here containing the structure that you described.

I just changed this code in layout.hbs and it's working as expected.

<!DOCTYPE html>
<html>
  <head>
    <title>{{page.title}}</title>
  </head>
  <body>
    <!-- the body tag is used to "pull in" content from pages -->
    {{> body }}
  </body>
</html>

If you have a repo we can look at, it might help track down the issue.

Hope this helps.

doowb
  • 3,372
  • 1
  • 17
  • 25
  • You can find the repo here: https://github.com/adrianjacob/assemble-546 If you look at src/index.html and src/insurance/index.html you can see they share the same title after running 'grunt assemble'. However, they should have different titles if you look at the json files. Cheers, A. – Adi Jul 28 '14 at 09:03
  • Right now, assemble only uses the basename of the files to do the matching. So the second `index` file overwrites the data in the first `index` file. Also, you have `foo.json` in the insurance folder instead of `index.json`. Try changing `insurance/index.hbs` to `insurance/foo.hbs` and you should see the title change. – doowb Jul 28 '14 at 14:31
  • So what would you do if you wanted to render an index.html and an insurance/index.html? Is there a plan to do matching based on folders as well? – Adi Jul 29 '14 at 12:47
  • I solved that with a Grunt option: buildPages: { files: [ { expand: true, cwd: '<%= site.templates %>/', src: ['pages/**/*.hbs'], dest: '<%= site.dest %>/' } ] } – mummybot Mar 06 '15 at 12:41