Let's say I make a really cool search box layout that I'd like to reuse
eg.
<div class='someClass'>
<input class='fancyInput'>
</div>
Is it possible to reuse that snippet in other templates in the same way I can extend upon a template, but instead "import" a snippet so to speak. Like the reserve of `{% extend %}
I'd like to have html blocks that I can reuse but insert into different areas depending on the page.
Currently every time I want to use that block of HTML I have to hard code it in.
here's a pseudo html/jinja example
The snippet
{% component fancyInput %} # not real jinja
<div class='someClass'>
<input class='fancyInput'>
</div>
{% endcomponent %}
Then lets say on a random page somewhere
<html>
<body>
<div class='container'><p>Some text!</p></div>
{% import component fancyInput}
</body>
</html>
The rendered HTML would be
<html>
<body>
<div class='container'>
<p>Some text!</p>
</div>
<div class='someClass'>
<input class='fancyInput'>
</div>
</body>
</html>
Jinja, also commonly referred to as "Jinja2" to specify the newest release version, is a Python template engine used to create HTML, XML or other markup formats that are returned to the user via an HTTP response.
Here is some of what jinja2 offers in Flask Templates: You can pass any data from your flask app to the HTML template. Autoescaping ( which is enabled by default). Context processors. Template inheritance. We will explain each one of those in this article. Before you start this tutorial flask should be installed in your virtual environment.
A template engine is a piece of software that combines HTML documents with data from any data source to produce an HTML formatted file that contains the data. Jinja2 is the template engine used in flask, it is built in flask, so you do not need to download a separate package to use jinja2 with flask, it is installed with flask.
1 Import the render_template function from flask from flask import Flask, render_template 2 Create a new folder called templates inside the SAME directory as our python script. 3 Create an html file, I've named mine index.html. Make sure to put it in the templates folder! ... 4 Render the template from a function in python.
In the child template or the web page the content is to be displayed must be enclosed in the same Jinja2 block components. For example if you want to add text in body section of different pages, you need to add relevant block in the template like this.
Jinja2
uses macros. Once a Macro is defined, it can be called on to render elements.
So if you define a macro in a template like:
{% macro newComponent(text) -%}
<div class='container'><p>{{text}}</p></div>
{%- endmacro %}
Then it can be called on in any file with
{{ newComponent('Insert Text') }}
Here is a link to the documentation
Also Stack Overflow post on macros Parameterized reusable blocks with Jinja2 (Flask) templating engine
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With