Please note: GitHub sources to reproduce this issue are available here.
Make sure to start form the "test-twig" branch.
Hi,
I'm trying to use Twig Extends tag in my Twig templates, but get Gulp log errors.
Here's how my files are organised within my project:
templates
|- layouts
| |- default.twig
|- pages
| |- index.twig
|- partials
|- forms.twig (macro)
|- partial.twig
Here's my template (templates/pages/index.twig):
{# index.twig #}
{% extends "default.twig" %}
{% set pageTitle = "Use Twig from the start!" %}
{% set benefits = ["Fast!", "Easy!", "Efficient!"] %}
{% block page %}
<header>
<h1>{{ pageTitle }}</h1>
</header>
<p>
This page is generated by Twig.js using the gulp-twig gulp plugin.
</p>
<ul>
{% for value in benefits %}
<li>{{ value }}</li>
{% endfor %}
</ul>
{% include "partial.twig" %}
{% import "forms.twig" as forms %}
<p>{{ forms.input('username') }}</p>
<p>{{ forms.input('password', null, 'password') }}</p>
{% endblock %}
Here's my gulpfile.js:
// Compile Twig templates to HTML
function twig() {
return gulp.src('src/templates/pages/*.twig')
.pipe($.twig({base: 'src/templates/**', errorLogToConsole: true}))
.pipe(gulp.dest(PATHS.dist))
.pipe(browser.reload({ stream: true }));
}
// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch('src/templates/pages/*.twig').on('all', gulp.series(twig, browser.reload));
}
As you see, I'm trying to use the Base option which allows you to sets the views base folder.
That's because I want to avoid giving relative paths to the Extends tag within my Twig templates.
But here's the error I got in the logs:
Error parsing twig template /home/intlangf/sandbox/foundation-zurb-template/src/templates/pages/index.twig:
TwigException: Unable to find template file src/templates/**/default.twig
[10:11:15] gulp-twig TwigException: Unable to find template file src/templates/**/default.twig
If I don't use the Base option in the gulpfile, but give a relative path to the Extends tag, it works like a charm (templates/pages/index.twig):
{# index.twig #}
{% extends "../layouts/default.twig" %}
So my question is: am I doing something wrong when setting the Base option? My first guess is that it doesn't allow globbing. I've tried several solutions so far but with no success...
Subsidiary question:
Documentation says "Extends can be loaded relative to this path". But would that also work when using Block, Include or Import tags?
Thanks!