Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you create components in Flask/Jinja to insert in various templates

Tags:

python

jinja2

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>
like image 390
Ari Avatar asked Apr 25 '19 03:04

Ari


People also ask

What is the difference between Jinja and Jinja2?

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.

What is Jinja2 flask templates?

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.

What is a template engine in flask?

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.

How to render a template from a function in 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.

How to display content in different parts of a Jinja2 page?

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.


Video Answer


1 Answers

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

like image 172
Alex G Avatar answered Nov 14 '22 21:11

Alex G