foundation / panini

A super simple flat file generator.
Other
592 stars 104 forks source link

Panini template code #55

Closed kaydwithers closed 4 years ago

kaydwithers commented 8 years ago

I'm having trouble working out how to add Panini template code.

I have a link which I want to add .yml to build the tracking URL. i.e

in my src/data/_tracking.yml file

url: http://zurb.com
date: 16.6.2016
campaign: june 

in my src/pages/index.html file

<a target="_blank" href="{{ tracking.url }}/{{ tracking.date }}/{{ tracking.campaign }}">
  <img src="../assets/img/hero.jpg" alt="">
</a>

Could someone please help me out and let me know how this can be done or let me know why this doesn't work?

fdeneux commented 8 years ago

Try without the underscore: src/data/tracking.yml

kaydwithers commented 8 years ago

@fdeneux I'm afraid that doesn't work. I might be wrong but I believe the tracking.yml needs to have some sort of connection to the files? i.e in Jekyll, you would write something like..

{% data.tracking %} 
  <a href="{{ tracking.url }}"></a>
{% end %}

or

{{#tracking}} 
  <a href="{{ tracking.url }}"></a>
{{/tracking}}

If there is an answer to this can it be added to the Panini docs as I think it would be very helpful. Or perhaps it is already in the docs but I''m not understanding it correctly?

fdeneux commented 8 years ago

@kaydwithers With the information you have given, the error was certainly the underscore. If it still doesn't work I'm afraid you will have to be more specific.

kaydwithers commented 8 years ago

@fdeneux I have removed the underline and it still does not work. I guess what I'm trying to figure out is how does the handlebar know to look in the src/data/tracking.yml file for the {{ tracking.url }} information? Is it something that Panini does automatically?

In the meantime I have my code setup like below in index.html. But it would be handy if I could store the .yml in it's own .yml file

---
tracking:
  url: http://zurb.com
  date: 16.6.2016
  campaign: april
---

<a target="_blank" href="{{ tracking.url }}/{{ tracking.date }}/{{ tracking.campaign }}">
  <img src="{{ image.image-01 }}" alt="">
</a>
fdeneux commented 8 years ago

That is absolutely possible and yes it is something that Panini does automatically IF configured correctly in your gulpfile.

root
└───src
    ├───data
    │   └───tracking.yml
    ├───layouts
    │   └───default.html
    ├───pages
    │   └───index.html
    └───partials

tracking.yml

---
url: http://zurb.com
date: 16.6.2016
campaign: april

index.html

---
image:
    image-01: image.jpg
---

<a target="_blank" href="{{ tracking.url }}/{{ tracking.date }}/{{ tracking.campaign }}">
    <img src="{{ image.image-01 }}" alt="">
</a>

Should be working just fine.

kaydwithers commented 8 years ago

Thanks @fdeneux, I just need a little more help with the Gulp file. I'm not sure how to add my data. I tried doing it with the below code in my gulpfile.babel.js file but no luck.

// Compile layouts, pages, and partials into flat HTML files
// Then parse using Inky templates
function pages() {
  return gulp.src('src/pages/**/*.html')
    .pipe(panini({
      root: 'src/pages',
      data: 'src/data',
      layouts: 'src/layouts',
      partials: 'src/partials',
      helpers: 'src/helpers'
    }))
    .pipe(inky())
    .pipe(gulp.dest('dist'));
}
webuxr commented 7 years ago

@kaydwithers ...just stumbled upon this thread and am wondering if you might have missed the data, layouts, pages, and partials nodes being nested within src and that too nested within root? If I edit your Gulp function, it might look like this:

function pages() {
  return gulp.src('src/pages/**/*.html')
    .pipe(panini({
      root: {
        src: {
          data: 'src/data/',
          helpers: 'src/helpers/',
          layouts: 'src/layouts/',
          pages: 'src/pages/',
          partials: 'src/partials/'
        }
      }
    }))
    .pipe(inky())
    .pipe(gulp.dest('dist'));
}

EDIT: Fixed/added pages: 'src/pages/',

Please do not take this code example as a working solution. I am stuck at the same place you are! It just seems you are a bit father ahead of me in your troubleshooting, and after seeing this issue, thought I could offer a hand.

Try it. Does it work?

webuxr commented 7 years ago

Try it. Does it work?

...then notices the date of the author's post. SMH.

DanielRuf commented 4 years ago

Closing as stale.