Question

I'm configuring a static site generator using Grunt's Assemble.io. I'm using the Pages Collection to build a navigation list like so:

{{#each pages }}
    <li><a href="{{{filename}} }">{{{title}} }</a></li>
{{/each }}

I would also like to apply class="active" to the navigation item for the current page, but I'm not sure how to approach this. My first thought was to try comparing the title of the current iteration of the collection to that of the page being rendered, but this has two problems:

  1. The if helper in handlebars doesn't seem to have a way to compare two expressions. I could write a custom helper, but I would want to know this is the best way before I try it.
  2. I don't know how to distinguish between the title of the current collection iteration and that of the current page. They would both be referred to as simply title as far as I can tell.

How can I determine when the pages collection loop is operating on the page which is the current page being rendered?

Était-ce utile?

La solution

Use isCurrentPage

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

Alternatively, you can use isActive helper.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top