Вступление

После улучшения пользовательского опыта нашего приложения мы можем извлечь выгоду из этого и добавить NAVBAR в наше приложение Flask. NAVBAR – это компонент, который используется для навигации между представлениями в приложении, а также может использоваться, чтобы позволить пользователю войти в приложение и, например, увидеть личную панель панели. Это сделает наше приложение выглядеть и чувствовать себя более полезным и профессиональным, и это будет шлюзом для дополнительных функций.

Идея, стоящая за компонентом

Навигационная панель будет доступна в любое время, в каждом представлении после входа пользователя, так что его панель инструментов и входа в систему всегда видны. Кроме того, некоторые представления будут доступны только для регистрации пользователей, таких как панель личной информации пользователя и возможность добавления новых рецептов в приложение. Ферафы более интересны для нас, с более технической точки зрения, является тот факт, что Navbar будет такой же, независимо от того, в чем мы находимся. Другими словами, Navbar, естественно, является Общий компонент . Это будет выглядеть так:

Как мы видим, он содержит некоторые навигационные кнопки и меню для входа в систему. Давайте посмотрим, как Flask вместе с Jinja позволит нам реструктурировать наш код переднего конца для создания такого компонента.

Флэста Шаблон наследование

При разработке общего компонента у нас есть несколько альтернативных подходов к дизайну, которые мы можем принять:

• Создать несколько «представлений» с помощью общего источника данных

• Создайте несколько «представлений», каждый из которых в сочетании с его отдельным источником данных, который заставит нас иметь способ поделиться и синхронизировать состояние между каждым отдельным экземпляром компонента

• Повторно используйте как представление, так и источники данных и просто реструктурируйте приложение, чтобы разрешить это

Некоторые из этих подходов могут быть лучше подходят для конкретной стратегии развития.

Отдельные команды могут выиграть от полного контроля над компонентом, в этом случае подход к второму будет лучшим.

Использование одного источника данных и общих видов может быть полезным, например, если вы разрабатываете приложения, как для мобильных сред, так и для настольных сред. В этом сценарии источник данных компонента может быть разделен между различными целевыми устройствами, поскольку мы хотим, чтобы компонент использовал, предоставлял или употреблял одну и ту же информацию, трюк в том, что мы хотим показать ее по -разному, в зависимости от типа устройства, поэтому представление части компонента может быть адаптивной.

Последний сценарий – это то, где введет наследство шаблона колбы.

Это позволяет нам написать один HTML -файл для представления нашего компонента, и, таким образом, все остальные файлы шаблонов могут наследовать этот, эффективно повторно используя экземпляр компонента. Затем у нас есть один компонент, чей HTML затем вводится в каждый из наших взглядов, в то время как компонент также выводится из одной конечной точки в отношении данных.

Чтобы сделать это, нам сначала нужно реструктурировать наши текущие настройки HTML -шаблонов, чтобы он поддерживал наследование.

Наследование шаблона – это механизм, используемый Jinja для повторного использования шаблонов, гарантируя, что общие элементы помещаются в общий шаблон, от которого все остальные шаблоны могут наследовать.

Наследование шаблона позволяет нам создавать базовый шаблон «скелета», который содержит все общие элементы вашего сайта и определяет блоки, которые детские шаблоны могут переопределить.

Звучит сложно, но очень просто. Это легче понять, начиная с примера.

Начнем с базового шаблона:

  
  
  {% block html_head %}{% endblock %}


  

    {% block content %}{% endblock %}
  

  

    {% block footer %}
    © Copyright 2006 by myself.
    {% endblock %}
  

Этот шаблон, который мы будем называть base.html , Определяет простой скелетный документ HTML, который вы можете использовать для простой страницы с двумя столбцами. Это работа «детских» шаблонов, чтобы заполнить пустые блоки контентом.

В этом примере { % block %} Теги определяют четыре блока, которые детские шаблоны могут заполнить. Все, что делает блок -тег, – это сообщить шаблонному двигателю, что шаблон ребенка может переопределить эти части шаблона.

Теперь посмотрим, как создать возможный детский шаблон для базового шаблона, определенного выше:

{% extends "base.html" %}
{% block title %}Index{% endblock %}

{% block html_head %}
  
{% endblock %}

{% block content %}
    
Index
    

      Welcome on my awsome homepage.
    
{% endblock %}

Давайте рассмотрим это, так как здесь есть несколько важных концепций.

Понимание наследства: детского шаблона

{ % расширяет %} Тег – это ключ здесь. Он говорит шаблонному двигателю, что этот шаблон «расширяет» другой шаблон. Когда система шаблонов оценивает этот шаблон, сначала он обнаруживает родителя.

Имя файла шаблона зависит от загрузчика шаблона. Например, файловая система загрузки позволяет получить доступ к другим шаблонам, дав имя файла. Вы можете получить доступ к шаблонам в подкаталогах со сглашкой:

{ % extends “layout/default.html” %}

Но это поведение может зависеть от приложения с использованием джинджи.

Обратите внимание, что, поскольку шаблон ребенка не определил блок нижней части нижней части, вместо этого используется значение от родительского шаблона.

Обратите внимание, что мы не можем определить несколько { % block %} Теги с тем же именем в том же шаблоне. Это ограничение существует, потому что блок -тег работает в обоих направлениях. То есть блок -тег не просто обеспечивает отверстие для заполнения – она также определяет содержание, которое заполняет отверстие в родителе. Если было два аналогичных названных { % block %} Теги в шаблоне, родитель этого шаблона не знал бы, какой из контента блоков использовать.

Если шаблон содержит { % расширяет %} Tag Считается, что это шаблон ребенка, в противном случае это шаблон макета. В шаблоне макета вы можете разместить блоки в основном везде. В детских шаблонах блоки могут быть расположены только на верхнем уровне или внутри другого блока.

Данные за пределами блока в детском шаблоне выполняются до того, как шаблон макета будет отображаться, поэтому вы можете использовать их для распространения данных в целую цепочку наследования. Имея блок в неверной позиции, вы получите синтаксисную ошибку. Вот несколько примеров:

невозможный:

{% extends 'master.html' %}
{% if some_condition %}
  {% block body %}
    ...
  {% endblock %}
{% endif %}

Это не может работать, потому что наследование шаблона работает во время перевода/компиляции, а не при выполнении шаблона.

возможно:

{% extends 'master.html' %}
{% block body %}
  {% if some_condition %}
    {% block myblock %}
      ...
    {% endblock %}
  {% endblock %}
{% endblock %}

Это может работать, хотя это, вероятно, не имеет смысла в этом конкретном случае. Однако условие обрабатывается во время выполнения, потому что оно находится в достоверном блоке и определяет, что новый блок -чашечики могут переоценить.

Применение наследования к нашим заявлению

В нашем приложении мы будем применять наследование шаблона, создав базовый компонент, который содержит заголовок, конфигурацию для фоновых изображений и ссылку на файлы CSS. Затем мы также настроим стандартные представления для каждого представления приложения (зарегистрироваться, добавить рецепт, домашнюю страницу, данные рецепта и т. Д.), Чтобы они могли работать в рамках недавно введенной модели наследования.

Итак, первый шаг – выполнить извлечение из каждого содержимого заголовка наших файлов в новый файл, называемый base_template.html :

    
    
    
    
    
    
    
    
    
    


    Home
     Register 
    {% if not (current_user.is_authenticated and current_user.is_active)%}
    

        

            
            
            Login
        
    
    {% else %}
         Enter your own recipe 
        
Hi, {{ current_user.username }}
    Logout
    {% endif %}




    {% block content %}{% endblock %}



{% block body %}{% endblock %}


{% block scripts %}{% endblock %}

Самым важным здесь является определение названных блоков, как обсуждалось выше. Эти блоки будут заполнителями для обслуживания соответствующего контента на каждом из наших детей шаблонов.

Таким образом, на каждом ребенке нам нужно будет обернуть соответствующие элементы в эти блочные теги, чтобы наследование могло работать, используя элемент базовой головки и зная, какие элементы «детского блока» добавить, в зависимости от того, в каком представлении мы находимся в Анкет

Например, на нашем главном recipe_list.html Вот шаблонные области, интегрированные в шаблон ребенка:

{% extends "base_template.html" %}

{% block content %}
    

        {% with messages = get_flashed_messages(with_categories=true) %}
...

Тогда у нас есть тело:

{% block body %}
    
    

(...)
    
{% endblock %}

И сценарии:

{% block scripts %}

(...)
{% endblock %}

И именно так мы можем использовать мощное наследство Джинджи, чтобы добавить верхнюю навигацию в наше приложение.

Вывод

Если ваше веб -приложение начнется с определенной общей основы, может быть хорошей идеей использовать элементы, которые составляют этот фундамент в базовом шаблоне, и сделать вашего «ребенка», более специализированные взгляды, чтобы зависеть от этих общих элементов. Это уменьшит количество HTML, которое вам нужно написать и увеличить обслуживание ваших отдельных компонентов!

Следите за обновлениями!

Оригинал: “https://dev.to/brunooliveira/flask-series-part-9-adding-a-navbar-by-using-template-inheritance-2e5o”