Search code examples
handlebars.jszurb-foundation-6

ZURB Foundation 6 Panini #ifpage not working


Using ZURB Foundation Template, building with NPM.

I have the following code in my default.html layout page:

    <script src="{{root}}assets/js/app.js"></script>

    {{#ifpage 'admin'}}
      <script src="{{root}}assets/js/single-page/admin.js"></script>
    {{/ifpage}}

    {{#ifpage 'dashboard'}}
      <script src="{{root}}assets/js/single-page/dashboard.js"></script>
    {{/ifpage}}

In gulpfile.js I have as a member of the 'javascript' PATHS array:

'!src/assets/js/single-page/**/*'

I then, do:

gulp.task('single-page', function() {
  return gulp.src('src/assets/js/single-page/**/*')
    .pipe(gulp.dest('dist/assets/js/single-page'))
    .on('finish', browser.reload);
});

Then...

gulp.task('build', function(done) {
  sequence('clean', ['pages', 'sass', 'javascript', 'single-page', 'images', 'php', 'chart_data', 'copy'], 'styleguide', done);
});

And finally...

gulp.task('default', ['build', 'server'], function() {
  gulp.watch(PATHS.assets, ['copy']);
  gulp.watch(['src/pages/**/*'], ['pages']);
  gulp.watch(['src/{layouts,partials,helpers,data}/**/*'], ['pages:reset']);
  gulp.watch(['src/assets/scss/**/{*.scss, *.sass}'], ['sass']);
  gulp.watch(['src/assets/js/**/*.js'], ['javascript']);
  gulp.watch(['src/assets/js/single-page/**/*.js'], ['single-page']);
  gulp.watch(['src/assets/img/**/*'], ['images']);
  gulp.watch(['src/assets/php/**/*'], ['php']);
  gulp.watch(['src/assets/chart_data/**/*'], ['chart_data']);
  gulp.watch(['src/styleguide/**'], ['styleguide']);
});

My three pages are all PHP pages with the names index.php, admin.php, and dashboard.php. The js/single-page directory is being written to the dist folder and the two JS files are there.

The Panini conditional doesn't seem to be working so the admin-specific and dashboard-specific paths do not appear on their respective PHP pages.

Colin Marshall in his answer to How to add JavaScript just for one specific page? mentions a config.yml file and a gulpfile.babel.js file, neither of which are in my project's directory.

Any suggestions?

Thank you.


Solution

  • Simple fix after a bit of fiddling. Seems Panini 'page' var returned the full page name including .php. Once I checked for admin.php or dashboard.php all worked fine.

    I can only imagine there's some code change I can make to return the page name without the file extension.