[jinja/en] Create page about Jinja (#4852)
* feat(jinja): Add Jinja template introduction and examples
- Added a detailed introduction to Jinja templating engine for Python
- Included examples for variables, template inheritance, including content and loops
- Provided explanations and syntax for delimiters, template inheritance,
variables, loops, conditionals, and including content
- Demonstrated how to use Jinja for web development, such as creating HTML
templates and including dynamic content displayed within a browser
* [jinja/en] Create Jinja documentation
- Improved the readability and consistency of the content in the file by
adjusting the line breaks and formatting of the text.
- Corrected the whitespace and formatting issues in the code snippets.
- Unified the style of the text by keeping similar instructions on the same
text alignment level for easier comprehension.
- Ensured proper spacing and indentation in the 'Template Inheritance' section
for a better display and understanding of the concept.
- Updated the 'Including Content' section to fix a typo in the include tag.
- Streamlined the 'Variables passed to the main template' section by refining
the explanation and enhancing clarity.
- Consolidated information in the 'Conditionals, Macros, and Official
Documentation' sections to provide a clearer and consistent documentation
style.
- Incorporated a link to the official Jinja documentation for further
reference.
* chore: Organize Jinja's template inheritance section
2024-03-06 08:08:16 +00:00
---
language: Jinja
contributors:
- ["Adaías Magdiel", "https://github.com/AdaiasMagdiel"]
filename: learn-jinja.j2
---
## Getting Started with Jinja
Jinja is a fast, expressive, and extensible templating engine for Python
applications.
Jinja includes a lot of functionalities, such as:
2024-09-29 22:15:39 +00:00
[jinja/en] Create page about Jinja (#4852)
* feat(jinja): Add Jinja template introduction and examples
- Added a detailed introduction to Jinja templating engine for Python
- Included examples for variables, template inheritance, including content and loops
- Provided explanations and syntax for delimiters, template inheritance,
variables, loops, conditionals, and including content
- Demonstrated how to use Jinja for web development, such as creating HTML
templates and including dynamic content displayed within a browser
* [jinja/en] Create Jinja documentation
- Improved the readability and consistency of the content in the file by
adjusting the line breaks and formatting of the text.
- Corrected the whitespace and formatting issues in the code snippets.
- Unified the style of the text by keeping similar instructions on the same
text alignment level for easier comprehension.
- Ensured proper spacing and indentation in the 'Template Inheritance' section
for a better display and understanding of the concept.
- Updated the 'Including Content' section to fix a typo in the include tag.
- Streamlined the 'Variables passed to the main template' section by refining
the explanation and enhancing clarity.
- Consolidated information in the 'Conditionals, Macros, and Official
Documentation' sections to provide a clearer and consistent documentation
style.
- Incorporated a link to the official Jinja documentation for further
reference.
* chore: Organize Jinja's template inheritance section
2024-03-06 08:08:16 +00:00
- Template inheritance and inclusion;
- Defining and importing macros within templates;
- Security mechanisms to prevent XSS attacks;
- A sandboxed environment that can safely render untrusted templates;
- Extensible filters, tests, functions, and even syntax.
A Jinja template is simply a text file. Jinja doesn't require a specific
extension, but it's common to use `.j2` or `.jinja` to make it easier for
some IDEs.
There are a few kinds of delimiters. The default Jinja delimiters are configured
as follows:
- `{% ... %}` for Statements
- `{{ ... }}` for Expressions to print to the template output
- `{# ... #}` for Comments not included in the template output
```jinja
{# This is an example of a comment. #}
{#
You can use this syntax
to write multiline comments
as well.
#}
```
## VARIABLES
```jinja
{# You have the option to access variables from the context passed to the template #}
{{ foo }}
{#
Additionally, you can use a dot (.) to access attributes of a variable or
use Python syntax, using []
#}
{{ foo.bar }}
{{ foo['bar'] }}
{# Within the template, you can define variables as well #}
{% set name = "Magdiel" %}
{{ name }}
```
## Loops
```html
< h1 > Members< / h1 >
< ul >
{% for user in users %}
< li > {{ user.username }}< / li >
{% endfor %}
< / ul >
< div >
{% for key, value in my_dict.items() %}
< p > {{ key }}< / p > - < p > {{ value }}< / p >
{% endfor %}
< / div >
< div >
{% for idx, url in enumerate(urls) %}
< a href = "{{ url }}" > Go to url {{ idx + 1 }}< / a >
{% endfor %}
< / div >
```
## Conditionals
The if statement in Jinja is similar to the if statement in Python. It is
commonly used to check if a variable is defined, not empty, and not false in
its most basic form.
```html
{% if users %}
< ul >
{% for user in users %}
< li > {{ user.username }}< / li >
{% endfor %}
< / ul >
{% endif %}
{# For multiple branches, elif and else can be used like in Python. #}
{% if message.status == "error" %}
< p class = "text-red-400" > {{ message.content }}< / p >
{% elif message.status == "success" %}
< p class = "text-green-400" > {{ message.content }}< / p >
{% else %}
< p class = "text-blue-400" > {{ message.content }}< / p >
{% endif %}
```
## Template Inheritance
One of the most powerful features of Jinja is template inheritance. You can
create a base layout with predefined blocks that you can extend in another file
and override with your own content.
```html
{# file: base.html.j2 #}
<!DOCTYPE html>
< html lang = "en" >
< head >
{% block head %}
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > {% block title %}{% endblock title %} - Learning Jinja< / title >
{% endblock head %}
< / head >
< body >
< main >
{% block content %}{% endblock %}
{# the endblock tag doesn't need the name of the block #}
< / main >
< / body >
< / html >
{# file: child.html.j2 #}
{% extends "base.html.j2" %}
{% block head %}
{{ super() }}
< script >
console.log("There's a console.log here")
< / script >
{% endblock %}
{% block title %}Home{% endblock %}
{% block content %}
< h1 > Index< / h1 >
< p > Welcome to my home homepage.< / p >
{% endblock %}
{# RESULT #}
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Home - Learning Jinja< / title >
< script >
console.log("There's a console.log here")
< / script >
< / head >
< body >
< main >
< h1 > Index< / h1 >
< p > Welcome to my home homepage.< / p >
< / main >
< / body >
< / html >
```
### Including Content
You can include content from another template on your current template using
the `{% include "template/path" %}` tag.
```html
{# file: footer.html.j2 #}
< footer >
< p > © 2024 - John Doe< / p >
< / footer >
{# file: index.html.j2 #}
...
< body >
< main >
< h1 > Hi! I'm John Doe!< / h1 >
< / main >
{% include "footer.html.j2" %}
< / body >
...
{# RESULT #}
...
< body >
< main >
< h1 > Hi! I'm John Doe!< / h1 >
< / main >
< footer >
< p > © 2024 - John Doe< / p >
< / footer >
< / body >
...
```
Variables passed to the main template can also be used in the include, as the
included template has access to the context of the main template.
```html
{# file: greetings.html.j2 #}
< p > I'm the {{ name }} and i like to {{ hobby }}.< / p >
{# file: index.html.j2 #}
{% set name = "Captain Nemo" %}
{% set hobby = "navigate through the depths of the ocean" %}
< div >
{% include "greetings.html.j2" %}
< / div >
{# RESULT #}
< div >
< p > I'm the Captain Nemo and i like to navigate through the depths of the ocean.< / p >
< / div >
```
## Macros
Macros are basically like functions in another languages. You can define macros with or without arguments and reuse them in various parts of your template.
```html
{% macro input(value="", type="text", placeholder="") -%}
< input type = "{{ type }}" value = "{{ value }}" placeholder = "{{ placeholder }}" >
{%- endmacro %}
< p > {{ input(placeholder="Your username") }}< / p >
< p > {{ input(type="password") }}< / p >
```
## Official Documentation
To learn more, access the [official documentation ](https://jinja.palletsprojects.com/en/ ).
