3

I'm very new at Yeoman and Assemble and I'm trying to build a navigation structure with subdirectories. I can loop through the main pages within the templates/pages directory with this: 

{{#each pages}}
   <li{{#if this.isCurrentPage}} class="active"{{/if}}>
      <a href="{{relative dest this.dest}}">{{ data.title }}</a>
   </li>
{{/each}}

Of course that does not account for subdirectories within the pages directory. This is what the assemble task of my Gruntfile looks like: 

assemble: {
  pages: {
    options: {
      flatten: true,
      assets: '<%= config.dist %>/assets/',
      layout: '<%= config.src %>/templates/layouts/default.hbs',
      data: '<%= config.src %>/data/*.{json,yml}',
      partials: '<%= config.src %>/templates/partials/*.hbs',
      plugins: ['assemble-contrib-permalinks'],
    },
    files: {
      '<%= config.dist %>/': ['<%= config.src %>/templates/pages/**/*.hbs']
    }
  }
}

What I want is to end up with a nested list that would expose pages within a subdirectory. Is there any somewhat straightforward way of doing this within the loop or do I need to think about hardcoding this?

jonschlinkert
  • 10,872
  • 4
  • 43
  • 50
leecsargent
  • 151
  • 1
  • 1
  • 11

1 Answers1

3

You need to remove flatten: true from option and modify your pages.files:

files: [
    { expand: true, cwd: '<%= config.src %>/templates/pages', src: ['**/*.hbs'], dest: '<%= config.dist %>' }
]

Since you are using permalinks plugin, just add to the end of your pages.option:

plugins: ['assemble-contrib-permalinks'],
permalinks: {
    preset: 'pretty'
},

Now, you navigation should look like this:

{{#each pages}}
<li{{#if this.isCurrentPage}} class="active"{{/if}}>
  <a href="{{basename}}/index.html">{{ data.title }}</a>
</li>
{{/each}}
Hariadi
  • 606
  • 10
  • 17
  • @user1464317 remember to vote the answer as correct! ;-) – jonschlinkert Apr 28 '14 at 00:48
  • So I had this issue, but following the above... my dist folder now looks like ./dist/templates/pages/{{basename}}/index.html I want my dist folder to look like; ./dist/{{basename}}/index.html as dist is the web root. – Will Hancock Jul 01 '14 at 13:12