Menu icon Foundation
Documentation on Panini templating?

I've started using the Yeti app to build a Sites project locally. It really looks awesome, but I'm struggling to find documentation on how the whole idea behind pages/partials/layouts/templates work. I know it's a mix of handlebars and panini, but it would be helpful if someone could point me in a direction where I can get more specific info as to how it's implemented in Foundation Sites. Example how to build a hierarchy, like /folder1/folder2/page.html or how to have several templates in one folder with .md pages using different templates in the same folder?
I've been trying to find info for use cases like above but can't seem to find any info that will help.

Thanks in advance.

yetifoundation sitespaninitemplating

I've started using the Yeti app to build a Sites project locally. It really looks awesome, but I'm struggling to find documentation on how the whole idea behind pages/partials/layouts/templates work. I know it's a mix of handlebars and panini, but it would be helpful if someone could point me in a direction where I can get more specific info as to how it's implemented in Foundation Sites. Example how to build a hierarchy, like /folder1/folder2/page.html or how to have several templates in one folder with .md pages using different templates in the same folder?
I've been trying to find info for use cases like above but can't seem to find any info that will help.

Thanks in advance.

anton kusnadi over 3 years ago

http://foundation.zurb.com/sites/docs/panini.html --> one-liner documentation, if we can call it documentation.

And the github page also not very descriptive - as in it might be helpful for people who have previous knowledge/exposure but not so for newcomers. an example of working project will really help.

pretty please? i'm stuck with other prototyping engine and really willing to jumpship to panini, looks promisin!

anton kusnadi over 3 years ago

alright, i give up. my allocated time for trying to work this out is up, need to move on. subscribing for my next spare time in the future.

Kyle Spaulding over 3 years ago

I agree that there are some things missing from the documentation.

For instance, how do I set up directories? I need a directory called Products - but I've just about given up using Panini because I can't figure out how to do something that simple.

Someone please provide some more extensive documentation - or even better would be a tutorial/walkthrough for setting up an entire site structure.

Colin Marshall over 3 years ago

Using the Foundation Zurb Template you can make directories within the src/pages directory and everything works as you would expect it to.

Arkarys over 3 years ago

Better make directories before starting gulp (npm start). I got errors when I added directories while gulp script was running. If you start it afterwards, everything works fine.

powellian about 3 years ago

I have just found that the following works fine without needing to restart gulp:

<div class="row">
	<ul>
		<li><a href="{{root}}index.html">Page 01</a></li>
		<li><a href="{{root}}/sub/second.html">Page 02</a></li>
		<li><a href="{{root}}third.html">Page 03</a></li>
	</ul>
</div>

This markup is in a partial called primaryNavigation.html which is called into the layouts/default.html with {{> primaryNavigation}}. So pretty standard stuff.

My dir structure is as follows:

./src/pages/index.html + third.html

./src/pages/sub/second.html

I added the /sub/ dir while gulp was running, but no biggie, stop/start as req'd.

Hey Zurb crew, could you poss add something like this to the Panini documentation?

powellian about 3 years ago

I have just found that the following works fine without needing to restart gulp:

<div class="row">
	<ul>
		<li><a href="{{root}}index.html">Page 01</a></li>
		<li><a href="{{root}}/sub/second.html">Page 02</a></li>
		<li><a href="{{root}}third.html">Page 03</a></li>
	</ul>
</div>

This markup is in a partial called primaryNavigation.html which is called into the layouts/default.html with {{> primaryNavigation}}. So pretty standard stuff.

My dir structure is as follows:

./src/pages/index.html + third.html

./src/pages/sub/second.html

I added the /sub/ dir while gulp was running, but no biggie, stop/start as req'd.

Hey Zurb crew, could you poss add something like this to the Panini documentation?

powellian about 3 years ago

500 server error when I posted that so feel free to remove the duplicate - please ;)

powellian about 3 years ago

500 server error when I posted that so feel free to remove the duplicate - please ;)

powellian about 3 years ago

Groundhog?

powellian about 3 years ago

Groundhog?

Daniel Watson almost 3 years ago

First time with gulp + foundation + panini - will the final build on the webserver clean the file URLs?

Robert Bottomley over 1 year ago

What I can't find is how to determine the path to a page from within a helper function. If I have:

  • test.html
  • subdir/test.html

they both have {{page}} equal to test. How can I get the directory? I can't find anything that will return that. {{root}} is different but all that shows is that the second file is not in the root directory but not what directory it is in.