2024-09-12 17:54:01 +03:30

8 KiB

Raw Blame History

status: #doc Tags: #python/django links: Date: 2024-06-27

in django templates are html files that help to set a common pages or elements layout (for example blog posts) so that we don't need to make every page that we add to our site , we just need to add dynamic data and django handle the rest

setup

There are two main ways to organize your template structure in Django: the default app-level way and a custom project-level approach.

Option 1: App Level

go to my_app folder and create templates folder
now create my_app folder inside template folder
now you can make your template here for example home.html

now you should have folder structure like this


├── my_project
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
|   └── my_app
|      ├── __init__.py
│      ├── admin.py
│      ├── apps.py
│      ├── models.py
│      ├── tests.py
│      └── views.py
|      ├── templates
|          ├── my_app
|              ├── home.html
└── manage.py

[!INFO] By default, the Django template loader will look for a templates folder within each app. But to avoid namespace issues, you also need to repeat the app name in a folder below that before adding your template file.

This approach is demonstrated in the official Django polls tutorial and works just fine.

Option 2: Project Level

go to setting.py inside my_project folder
inside TEMPLATES field find "DIRS" property and add "templates" to the list

# settings.py
TEMPLATES = [
    {
        ...
        "DIRS": ["templates"],
        ...
    },
]

now make templates folder inside my_project folder
now you can make your template here for example home.html

now you should have folder structure like this


├── my_project
│   ├── __init__.py

│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
|   └── my_app
|      ├── __init__.py
│      ├── admin.py
│      ├── apps.py
│      ├── models.py
│      ├── tests.py
│      └── views.py
├── templates
|   ├── home.html
└── manage.py

[!info] if you have overridden DIRS in the settings.py file, the Django template loader will first look there and then look to APP_DIRS for an app-level templates directory. There is no "right" way to organize templates within your Django project

using templates

!urls and views#using templates

variables

variables are changing value that we can use inside our template we usually get them from views

how to use

{{variable_name}}

[!info] Variable names consist of any combination of alphanumeric characters and the underscore ("_") but may not start with an underscore, and may not be a number. The dot (".") also appears in variable sections Use a dot (.) to access attributes of a variable.

filters

You can modify variables for display by using filters.

Filters look like this: {{ name|lower }}. This displays the value of the {{ name }} variable after being filtered through the lower filter, which converts text to lowercase. Use a pipe (|) to apply a filter.
Filters can be “chained.” The output of one filter is applied to the next. {{ text|escape|linebreaks }} is a common idiom for escaping text contents, then converting line breaks to <p> tags.
Some filters take arguments. A filter argument looks like this: {{ bio|truncatewords:30 }}. This will display the first 30 words of the bio variable.
Filter arguments that contain spaces must be quoted; for example, to join a list with commas and spaces you’d use {{ list|join:", " }}.

`default`

If a variable is false or empty, use given default. Otherwise, use the value of the variable. For example:

{{ value|default:"nothing" }}

If value isn’t provided or is empty, the above will display “nothing”.

`length`

Returns the length of the value. This works for both strings and lists. For example:

{{ value|length }}

more filters here

template inheritance

template inheritance allows you to build a base “skeleton” template that contains all the common elements of your site and defines blocks that child templates can override

example we have this base.html:

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

and here is our child.html

{% extends "base.html" %}

{% block content %}
{% for entry in blog_entries %}
    <h2>{{ entry.title }}</h2>
    <p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}

and we have this in browser

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="content">
        <h2>Entry one</h2>
        <p>This is my first entry.</p>

        <h2>Entry two</h2>
        <p>This is my second entry.</p>
    </div>
</body>
</html>

how it work

we call child.html
django server read child.html template and see extends "base.html"
it load base.html
then it look at child.html if it see any block it overwrite base.html
send page to client

[!info]

if there is no overwrite from child.html the default values from base.html will be used

also you can use multi level of inheritance ex:child.html > parent.html > base.html

more at here

References

https://learndjango.com/tutorials/template-structure https://docs.djangoproject.com/en/5.0/ref/templates/language/ https://docs.djangoproject.com/en/5.0/ref/templates/builtins/

8 KiB Raw Blame History Unescape Escape