Created a simple script to attempt to render a nunjucks template (Both the contact content and layout template are in the src directory:
let fs = require('fs');
let nj = require('nunjucks');
var contact = fs.readFileSync('./src/contact.html','utf8');
nj.configure('src');
let result = nj.render(contact);
console.log(result);
The contact content looks like this:
{% set title = 'Contact' %}
{% extends '_layout.html' %}
{% block content %}
<h1>Test Template</h1>
{% endblock %}
The layout template looks like this:
<!DOCTYPE>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
When running the script it throws:
Error: template not found: {% set title = 'Contact' %}
{% extends '_layout.html' %}
{% block content %}
<h1>Test Template</h1>
{% endblock %}
I was using the API wrong. Instead of reading in the file and telling Nunjucks to render it do this:
nj.configure('src');
let result = nj.render('contact.html');
Bot the contact.html and _template.html files are in the src directory. Almost too easy :)
Related
I have a problem, I am using twig templates and am trying to use blocks to separate my code but I have the following error:
Twig_Error_Loader: Template "index.html.twig" is not defined in "requestchange/main.twig" at line 1
index.html.twig is my main template layout
I have added in: {% block content %}{% endblock %}
then in my main.twig , I am extending the index.html.twig file and then putting my content within another {% block content %}{% endblock %}
Can someone please help me here?
You should understand how Template Inheritance works in Twig.
Here is simple example:
default.twig as a default layout
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
index.twig as a home page
{% extends 'default.twig' %}
{% block title %}Home page{% endblock %}
{% block content %}
<h1>Hello world!</h1>
{% endblock %}
And be attentive with path that you point in the extends tag.
I have layout template
<html>
<body>
{% block content %}{% endblock %}
</body>
</html>
And many child templates like this
{% extends 'layout/default.twig' %}
{% block content %}
<p>content</p>
{% endblock %}
And it's very annoying that every single child template in Twig must include {% block content %}...{% endblock %} to be extended by parent block, otherwise there will be error: A template that extends another one cannot have a body.
Is there any solution to bind all child template output(that is not located in any block) in some variable, and then use it to paste in parent template? Like this:
Layout
<html>
<body>
{{ _context.childOutput }
</body>
</html>
Child
{% extends 'layout/default.twig' %}
<p>content</p>
It will make child templates code more compact and there will be no dependency from parent templates blocks name.
UPD Submitted new issue on Twig's GitHub https://github.com/twigphp/Twig/issues/2027
The 2 lines you have in each template allows you aswell to redefine many blocks in one template. I can't see how the solution you want can do that.
<html>
<head>
{% block meta %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
you can see include and embed but if you really have only one block in your templates twig is maybe not the solution you need
While seeing in this GitHub issue that you define variables in the controller, I had the following idea. I'll assume that the child template only contain static code since you didn't describe this point.
You can modify the function in your controller in order to fetch the content of the child template then pass it to the parent template directly:
function acmeAction()
{
// …
return $this->render(
'AcmeBundle:layout:default.html.twig',
array(
'title' => $title,
'description' => $description,
'content' => file_get_contents(
$this->container->get('kernel')->locateResource(
'#AcmeBundle/Resources/views/layout/child.html.twig'
)
)
)
);
}
And the parent template:
<head>
<title>{% block title %}{{ title }}{% endblock %}</title>
<meta name="description" content="{% block description %}{{ description }}{% endblock %}" />
</head>
<body>
{% block body %}{{ content }}{% endblock %}
</body>
This way you won't need to define the parent in the child template.
You can define some variables in the child and display them in the parent:
Layout
<html>
<body>
{{ myValue }
</body>
</html>
Child
{% set myValue %}
<p>content</p>
{% endset %}
{% include 'layout/default.twig' %}
This works because:
Included templates have access to the variables of the active context.
Source: http://twig.sensiolabs.org/doc/tags/include.html
And it's very annoying that every single child template in Twig must include {% block content %}...{% endblock %} to be extended by parent block
While it may sound annoying when you only have one variable, you will see the benefits of this approach when you will have to define also the title of the page, the JavaScript code, etc. In this case the use of multiple {% block … %} is really useful.
See this example:
Layout
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
{% block javascript %}{% endblock %}
</body>
</html>
Child
{% extends 'layout/default.twig' %}
{% block title %}
My title
{% endblock %}
{% block content %}
<p>content</p>
{% endblock %}
{% block javascript %}
<script>…</script>
{% endblock %}
I have my base template
<html>
<head>
.....
</head>
<body>
{% block body_content %}{% endblock %}
{% block debug_output %}{% endblock %}
</body>
</html>
and my page template
{% extends "base.html.twig" %}
{% block body_content %}
.....
{% endblock %}
Now after I have loaded the template I want to add to something to the debug_output block.
{% block debug_output %}
.....
{% endblock %}
Does anyone know how I can do this?
Not using any framework just twig as my template engine.
This is the flow of calling the template I currently have
$loader = new Twig_Loader_Filesystem();
$twig = new Twig_Environment($loader);
$template = twig->loadTemplate($page_template);
/* Add additional template to insert into debug_output block here */
$template->render($vars);
In the end I gave up and the solution I came up with was to not use a block but an object variable and loop over the properties to add the debug info I wanted. This object was merged with $vars and passed in to the $template->render($vars) line.
This is my base.html:
<html>
<head>
{% block head %}
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
This is my meta.html:
{% extends 'templates/base.html' %}
{% block head %}
{% if page == 'index' %}
<meta name="mysite.com" content="{{page}}"></meta>
{% else %}
<meta name="mysite.com" content="other page"></meta>
{% endblock %}
This is my index.html:
{% extends 'templates/base.html' %}
{% block body %}
......
{% endblock %}
This is my view:
#view_config(route_name='index', renderer='templates/index.html', permission='view')
def index(request):
return dict(page="index")
Extending the body works, but the meta tags are not showing up at all. What am I doing wrong?
As per Jinja2 documentation on extends, "The extends tag can be used to extend a template from another one. You can have multiple of them in a file but only one of them may be executed at the time."
When you load index.html from your view, the templating engine assesses index.html. It sees {% extends 'templates/base.html' %} in index.html and uses the blocks within index.html to replace same-name blocks of the parent/extended template (base.html).
So index.html says to use base.html as the skeleton template, but to replace {% block body %} in the parent (base.html) with its own {% block body %}.
Nowhere in this instruction (neither in base.html, nor index.html, nor the view code) does meta.html get mentioned. The templating engine isn't analyzing all the templates in your directory structure to see how it can plug things in. It is only using your explicit directives.
To be explicit about using meta.html, you can use the include directive (documentation found here) in base.html. Your base.html would then look like this:
<html>
<head>
{% include 'templates/meta.html' %}
{% block head %}
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
This would pull in meta.html and replace the same-name blocks of the skeleton (base.html) with the ones that were retrieved from the included template (meta.html).
In addition, the extends statement within meta.html needs to be removed, so it doesn't create a circular template inclusion.
It's difficult to explain but I have a layout.html.twig template like this:
{% block css '' %}
{% block content '' %}
{% block js %}
<script src="jQuery.js"></script>
{% endblock js %}
I have another template index.html.twig that extends the layout one like this
{% extends 'AcmeBundle::layout.html.twig' %}
{% block content %}
{% include 'AcmeBundle:Module:module_1.html.twig' %}
{% include 'AcmeBundle:Module:module_2.html.twig' %}
{% include 'AcmeBundle:Module:module_3.html.twig' %}
{% endblock content %}
{% block js %}
{{ parent() }}
<script ...></script>
{% endblock js %}
Each included module has some javascript inside but they need to have jQuery loaded to work.
But jQuery is set in the layout.html.twig so it's not working.
How can I include my modules being sure that the script is executed after jQuery is loaded?
Is it possible to access the js block somehow? I had a look to embed but I'm not sure it's what I need.
Any ideas?
Cheers,
Maxime