Продвинутый Django 5 для продолжающих

Прогресс по курсу:  0/193

7.3 Перевод шаблонов
3 из 3 шагов пройдено

Перевод шаблонов проекта

Откройте шаблон templates\base.html нашего проекта. Добавьте вверху шаблона тег i18n и пометьте переводные строковые литералы, в заголовке страницы и в заголовке таблицы, как показано ниже:

{% load i18n %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{% block title %}{% trans "Books" %}{% endblock title %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{% static 'base.css' %}">
</head>

<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>

    <div class="container">
        <div class="row">
            <div class="col">
                <!-- Форма для добавления новой книги -->
                {% include "partial_create_book_form.html" %}

                <!-- Таблица книг -->
                <form class="form-inline">
                <table class="table table-bordered table-sm mt-5">
                    <thead>
                        <tr>
                            <!-- Заголовки столбцов таблицы -->

                            <!-- Заголовок номера книги -->
                            <th scope="col" style="width: 10%" class="text-center">
                                <small>
                                    {% trans "No." %}
                                    <a href=""
                                       hx-get="{% url 'book_list_sort' filter='id' direction='ascend' %}"
                                       hx-target="#book-list"
                                       hx-swap="innerHTML" >
                                        <i class="table-icon bi bi-arrow-down-square ms-1 id-ascend disabled-button"></i>
                                    </a>
                                    <a href=""
                                       hx-get="{% url 'book_list_sort' filter='id' direction='descend' %}"
                                       hx-target="#book-list"
                                       hx-swap="innerHTML" >
                                        <i class="table-icon bi bi-arrow-up-square id-descend"></i>
                                    </a>
                                </small>
                            </th>

                            <!-- Заголовок названия книги -->
                            <th scope="col" style="width: 26%" class="text-center">
                                <small>
                                    {% trans "Title" %}
                                    <a href=""
                                       hx-get="{% url 'book_list_sort' filter='title' direction='ascend' %}"
                                       hx-target="#book-list"
                                       hx-swap="innerHTML" >
                                        <i class="table-icon bi bi-arrow-down-square ms-1 title-ascend"></i>
                                    </a>
                                    <a href=""
                                       hx-get="{% url 'book_list_sort' filter='title' direction='descend' %}"
                                       hx-target="#book-list"
                                       hx-swap="innerHTML" >
                                        <i class="table-icon bi bi-arrow-up-square title-descend"></i>
                                    </a>
                                </small>
                            </th>

                            <!-- Заголовок автора книги -->
                            <th scope="col" style="width: 26%" class="text-center">
                                <small>
                                    {% trans "Author" %}
                                    <a href=""
                                       hx-get="{% url 'book_list_sort' filter='author' direction='ascend' %}"
                                       hx-target="#book-list"
                                       hx-swap="innerHTML" >
                                        <i class="table-icon bi bi-arrow-down-square ms-1 author-ascend"></i>
                                    </a>
                                    <a href=""
                                       hx-get="{% url 'book_list_sort' filter='author' direction='descend' %}"
                                       hx-target="#book-list"
                                       hx-swap="innerHTML" >
                                        <i class="table-icon bi bi-arrow-up-square author-descend"></i>
                                    </a>
                                </small>
                            </th>

                            <!-- Заголовок цены книги -->
                            <th scope="col" style="width: 11%" class="text-center">
                                <small>
                                    {% trans "Price ($)" %}
                                    <a href=""
                                       hx-get="{% url 'book_list_sort' filter='price' direction='ascend' %}"
                                       hx-target="#book-list"
                                       hx-swap="innerHTML" >
                                        <i class="table-icon bi bi-arrow-down-square ms-1 price-ascend"></i>
                                    </a>
                                    <a href=""
                                       hx-get="{% url 'book_list_sort' filter='price' direction='descend' %}"
                                       hx-target="#book-list"
                                       hx-swap="innerHTML" >
                                        <i class="table-icon bi bi-arrow-up-square price-descend"></i>
                                    </a>
                                </small>
                            </th>

                            <!-- Заголовок статуса книги -->
                            <th scope="col" style="width: 11%" class="text-center">
                                <small>
                                    {% trans "Status" %}
                                    <a href=""
                                       hx-get="{% url 'book_list_sort' filter='read' direction='descend' %}"
                                       hx-target="#book-list"
                                       hx-swap="innerHTML" >
                                        <i class="table-icon bi bi-arrow-down-square ms-1 read-descend"></i>
                                    </a>
                                    <a href=""
                                       hx-get="{% url 'book_list_sort' filter='read' direction='ascend' %}"
                                       hx-target="#book-list"
                                       hx-swap="innerHTML" >
                                        <i class="table-icon bi bi-arrow-up-square read-ascend"></i>
                                    </a>
                                </small>
                            </th>

                            <!-- Заголовок кнопок действия -->
                            <th scope="col" style="width: 16%" class="text-center">
                                <small>
                                    {% trans "Actions" %}
                                </small>
                            </th>

                        </tr>
                    </thead>


В шаблоне templates\partial_book_detail.html пометьте к переводу строковые литералы кнопок и сообщения подтверждения удаления из атрибута hx-confirm:

{% load i18n %}
<tr class="{% if book.read %}grey-text{% endif %}">
    <!-- Ячейка номера книги -->
    <td class="align-middle text-center ps-2">
        {{ book.id }}
    </td>

    <!-- Ячейка названия книги -->
    <td class="align-middle ps-2">
        {{ book.title }}
    </td>

    <!-- Ячейка автора книги -->
    <td class="align-middle ps-2">
        {{ book.author }}
    </td>

    <!-- Ячейка цены книги -->
    <td class="align-middle text-center">
        {{ book.price }}
    </td>

    <!-- Ячейка состояния -->
    <td class="align-middle text-center">
        {% if not book.read %}
            <!-- Кнопка "Unread" -->
            <button class="disbtn table-button status-button btn btn-primary btn-sm"
                    hx-put="{% url 'update_book_status' book.id %}"
                    hx-target="closest tr"
                    hx-swap="outerHTML">
                {% trans "Unread" %}
            </button>
        {% else %}
            <!-- Кнопка "Read" -->
            <button class="disbtn table-button status-button btn btn-secondary btn-sm"
                    hx-put="{% url 'update_book_status' book.id %}"
                    hx-target="closest tr"
                    hx-swap="outerHTML">
                {% trans "Read" %}
            </button>
        {% endif %}
    </td>

    <!--  Ячейка кнопок действия -->
    <td class="align-middle text-center">
        <!-- Кнопка "Edit" -->
        <button class="disbtn table-button any-button btn btn-primary btn-sm me-2"
                hx-put="{% url 'update_book_details' book.id %}"
                hx-target="closest tr"
                hx-swap="outerHTML">
            {% trans "Edit" %}
        </button>

        <!-- Кнопка "Delete" -->
        <button class="disbtn table-button any-button btn btn-danger btn-sm"
                hx-delete="{% url 'delete_book' book.id %}"
                hx-target="closest tr"
                hx-swap="outerHTML"
                hx-confirm="{% trans 'Are you sure you wish to delete this book?' %}">
            {% trans "Delete" %}
        </button>
    </td>
</tr>


В шаблоне templates\partial_book_update_form.html пометьте к переводу строковые литералы кнопок:

{% load i18n %}
<tr class="{% if book.read %}grey-text{% endif %}">
    <!-- Ячейка номера книги -->
    <td class="align-middle text-center ps-2">
        {{ book.id }}
    </td>

    <!-- Ячейка названия книги -->
    <td class="align-middle ps-2">
        {{ form.title }}
    </td>

    <!-- Ячейка автора книги -->
    <td class="align-middle ps-2">
        {{ form.author }}
    </td>

    <!-- Ячейка цены книги -->
    <td class="align-middle text-center">
        {{ form.price }}
    </td>

    <!-- Ячейка состояния -->
    <td class="align-middle text-center">
        {% if not book.read %}
            <!-- Кнопка "Unread" -->
            <button class="table-button status-button btn btn-primary btn-sm" disabled>
                {% trans "Unread" %}
            </button>
        {% else %}
            <!-- Кнопка "Read" -->
            <button class="table-button status-button btn btn-secondary btn-sm" disabled>
                {% trans "Read" %}
            </button>
        {% endif %}
    </td>

    <!--  Ячейка кнопок действия -->
    <td class="align-middle text-center">
        <!-- Кнопка "Save" -->
        <button type="submit"
                class="table-button any-button btn btn-success btn-sm me-2"
                hx-post="{% url 'update_book_details' book.id %}"
                hx-target="closest tr"
                hx-swap="outerHTML"
                hx-include="closest tr">
            {% trans "Save" %}
        </button>
        <!-- Кнопка "Cancel" -->
        <button class="table-button any-button btn btn-warning btn-sm"
                hx-get="{% url 'book_detail' book.id %}"
                hx-target="closest tr"
                hx-swap="outerHTML">
            {% trans "Cancel" %}
        </button>
    </td>
</tr>


В шаблоне templates\partial_create_book_form.html пометьте к переводу строковой литерал кнопоки Add book:

{% load i18n %}
<form class="form-inline">
    <div class="row">
        <div class="col">
            {{ form.title }}
        </div>

        <div class="col">
            {{ form.author }}
        </div>

        <div class="col">
            {{ form.price }}
        </div>

        <div class="col">
            <!-- Кнопка "Add book" -->
            <button type="submit"
                    class="disbtn btn btn-primary"
                    hx-post="{% url 'create_book' %}"
                    hx-target="#book-list"
                    hx-swap="beforeend">
                {% trans "Add book" %}
            </button>
        </div>
    </div>
</form>
Шаг 2
Последнее обновление: 27.02.2024
Будьте вежливы и соблюдайте наши принципы сообщества. Пожалуйста, не оставляйте решения и подсказки в комментариях, для этого есть отдельный форум.
User avatar
Оставить комментарий
User avatar
No Name

смотрите 

вы пытаетесь использовать тег {% trans %} внутри атрибута hx-confirm, что приводит к синтаксической ошибке. Вместо этого вам следует использовать переменную, которой было бы присвоено переведенное сообщение.

вот тут 

hx-confirm={% trans "Are you sure you wish to delete this book?" %}>


а надо вот так вот 
это начало файла 
 

{% load i18n %}
{% trans "Are you sure you wish to delete this book?" as delete_confirm %}
<tr class="{% if book.read %}grey-text{% endif %}">
    <!-- Ячейка номера книги -->
    <td class="align-middle text-center ps-2">
        {{ book.id }}
    </td>


а это то место где была ошибка 



hx-confirm="{{ delete_confirm }}">
User avatar
Дмитрий Селезнев

@No_Name, там ошибка потому что кавычки были потеряны, должно быть так:

hx-confirm="{% trans 'Are you sure you wish to delete this book?' %}"
User avatar
No Name

@Дмитрий_Селезнев, значит закрепил инфу с предыдущей лекции, я кавычки поправлял но видимо не внимательно (
внимательность наше все!