Search code examples
jsongulphandlebars.js

<title>Handlebars variable {{page}}</title></head> from panini in head tiile-tag is a key of the object from data.JSON


Hello I have JSON file:

{
	"index" : "Main page",
	"contacts" : "Find me!",
}

There is an handlebars template to use with panini(ZF):

<!doctype html>
<html lang="ru">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {{#if page}}
        <title>{{lookup data.this}}</title> 
        <link rel="stylesheet" href="assets/css/screen.css" />
    {{/if}}

The {{page}} in panini is the name (without extension) of the page that goes through template. and I don't know how to write proper template to get the value by key from data object. I imagine it like when parsing index.html panini variable page has value "index", contacts.html - "contacts" and the magic inside title-tag works like this data.index.

That wont be running on real server. It should work only on local computer to help doing fast development.

Script that have to switch on that magic:

//part of the gulpfile.js

gulp.task('pages', ['jade'], function() {
  return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
    .pipe(panini({
      root: 'src/pages/',
      layouts: 'src/layouts/',
      partials: 'src/partials/',
      data: 'src/data/',
      helpers: 'src/helpers/'
    }))
    .pipe(gulp.dest('dist'));
});

//part of the gulpfile.js


Solution

  • Lookup helper syntax is following: {{lookup data page}}, it should work fine if your data.json has something like this:

    {
      "index": "main page title",
      "contact": "Contact page title"
    }