Menu icon Foundation
Iterate Over Pages

I'm having trouble figuring out the Foundation 6 way to create a single page which displays data from several other pages. 

A simple example might be the home page of a blog with several featured blog posts displayed; the home page has a teaser for each post.  I don't want to duplicate the content from the blog post pages into the home page layout.  Rather, I want to iterate over the existing pages and extract the data that I need from each blog post page into the home page.

I'm just exploring Foundation 6 and I've gone through the documentation, but I haven't seen a solution for this.  Thanks very much!

iterationpaninicollectionscompositionteasersDRY

I'm having trouble figuring out the Foundation 6 way to create a single page which displays data from several other pages. 

A simple example might be the home page of a blog with several featured blog posts displayed; the home page has a teaser for each post.  I don't want to duplicate the content from the blog post pages into the home page layout.  Rather, I want to iterate over the existing pages and extract the data that I need from each blog post page into the home page.

I'm just exploring Foundation 6 and I've gone through the documentation, but I haven't seen a solution for this.  Thanks very much!

Rafi Benkual 8 days ago

Unless I didn't understand, seems like you want a CMS like WordPress.

Foundation's ZURB Template has handlebars (Panini) built in to store data in json files and import them into repeatable components.

Christopher Werby 8 days ago

Hi Rafi,

I've enjoyed your videos!

I'm trying to come up with a DRY technique that could be used on a static site during the build step rather than a dynamic one like a Wordpress CMS.  And I'm really close.

Right now, I have front matter in each one of my posts.  And I have that same front matter from many posts duplicated into a single YAML data file.  In the layout file, I'm using the data from the front matter -- works great.  In the index file, I'm using {{#each posts}} to get the data from the YAML file.  That also works.

What I'm trying to do now is eliminate the front matter from each of the posts.  I'd like to use some kind of conditional in the layout file so that the layout file is addressing the correct index of variables from the YAML data when dealing with a particular post.  My plan is to wrap the entire layout with an {{#each}} and then maybe create a custom helper -- is there a better way? -- so that the data used in the layout matches the incoming post.  {{this.title}} for example.

 

Christopher Werby 4 days ago

I figured this problem out.

The front matter in each page should be moved to the "posts.yml" file.  In the posts.yml file, add a key value pair for the page basename (i.e. index.html --> page: index).

Then surround the layout file with the following:

{{#each posts}}
	{{#ifequal this.page ../page}}
[... Full layout goes inside]
	{{/ifequal}}
{{/each}}

"this.page" is the value from the posts.yml file; "../page" is the name of the page passed into the layout file.  When they match, you'll be able to use the "this.foobar" construct for all the variables in the related array item from the posts.yml file, and the "../" prefix to get the other values (most of the time).  So the data that is in the globals.yml file, for example, is referenced by "{{../globals.foobar}}".

The exception to the last bit is if the layout file also calls a partial and you wish to be able to use variables within the partial. Then you need to abandon the "../" construct and use "@root" instead.  To access the current page variable in the partial, you'd use "{{@root.page}}" rather than "{{../page}}".  Inside the partial, the values from the particular array item targeted from the posts.yml file are still accessible using "this" -- e.g. "{{this.page}}".

If any of your variables contain markup which you wish to use as markup, remember the three brackets trick to render the value as HTML. {{{this.markup}}}.