Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Templates Jinja2 | Introduction to Flask
Flask Intensive Course: Web Development with Python
course content

Conteúdo do Curso

Flask Intensive Course: Web Development with Python

Flask Intensive Course: Web Development with Python

1. Introduction to Flask
2. Database
3. Implement CRUD
4. FrontEnd Design

bookTemplates Jinja2

Let's jazz up our content using HTML tags, but it's usually better to keep them in a separate file.

Flask knows just where to look for these templates. We're going to create a directory with the same name, so right-click in the root directory and select New Folder. Name it templates. Inside this folder, work your magic by creating a new file named index.html. This is the go-to name for the main page template.

Now, what's a template, you ask? Well, it's like a text file with placeholders for all the dynamic stuff related to a request. When these placeholders get filled with real values, we call it rendering. Flask is pretty nifty because it relies on a powerful template engine called Jinja2 to make all of this happen.

Templates are HTML files that include placeholders for dynamic content. These placeholders are enclosed in double curly braces, like {{ variable_name }}, and can be filled with data from your Flask application.

html

index

css

index

js

index

copy

Let’s rewrite our function to connect with the template.

render_template is a function provided by Flask that allows you to render and display an HTML template.

We are closer to a more proficient application.

Now, consider the Template inheritance. We can build a basic template with already defined structure, blocks, and design.

Create a new file in the template directory named base.html.

Just write the ! exclamation mark and click the Tab button, and you will receive standard HTML markup.

Or copy this markup from this example:

The file's name in the example below doesn't correspond to the file's name in our project.

html

index

css

index

js

index

copy

But it is universal, and we don't need to repeat all this code from page to page. We will signify blocks, and Jinga2 will help us.

The file's name in the example below doesn't correspond to the file's name in our project.

html

index

css

index

js

index

copy

Come back to the index.html file and redraft it accordingly to Template inheritance

html

index

css

index

js

index

copy

Now, we have an even more functional site. It is just beginning. Are you as excited as I am?

1. What is the primary purpose of using HTML templates in web development?
2. In Jinja2 template inheritance, what is the purpose of the {% block %} tags?
3. In Jinja2, how do you extend a parent template in a child template?
What is the primary purpose of using HTML templates in web development?

What is the primary purpose of using HTML templates in web development?

Selecione a resposta correta

In Jinja2 template inheritance, what is the purpose of the {% block %} tags?

In Jinja2 template inheritance, what is the purpose of the {% block %} tags?

Selecione a resposta correta

In Jinja2, how do you extend a parent template in a child template?

In Jinja2, how do you extend a parent template in a child template?

Selecione a resposta correta

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 5
some-alt