Панели навигации в Flask

навигации в Flask Изучение

Навигация по HTML-страницам — довольно распространенный способ работы между страницами. Подход к навигации на стороне клиента обычно используется в HTML. Однако наличие настраиваемой навигации на стороне сервера может обеспечить большую гибкость в том, что касается настройки. В этой статье рассказывается, как интегрировать серверную навигацию с помощью панелей навигации в Flask.

Flask Navigation

Этот модуль используется для создания панелей навигации в приложении Flask.

  • Позволяет на стороне сервера переходить с одной страницы на другую.
  • Помогает определять классы HTML и элементы навигации из Python.

Installation

Чтобы установить этот модуль, введите следующую команду в терминале.

pip install Flask-Navigation

Используемые функции

nav.Bar (name, items): Инициализирующее имя класса навигации с определением элементов.
nav.Item (label, url, args): назначает элементы или списки для каждой панели. Имя ярлыка, URL-адрес связанной страницы и дополнительные аргументы, такие как параметр и значение словаря.

После установки следующим шагом будет инициализация контекста приложения с помощью Navigation () и определение базового HTML-кода для навигации. Панели навигации также должны быть определены в коде с помощью Bar (), при этом положение дублей и список элементов являются параметрами панелей навигации. Каждый элемент вводится с его меткой, URL-адресом и параметрами, переданными в URL-адресе.

Шаг 1: Импорт библиотек, добавление контекста приложения и инициализация объекта класса навигации.

from flask import Flask, render_template
from flask_navigation import Navigation
 
app = Flask(__name__)
nav = Navigation(app)

Шаг 2: Добавление определения навигации

# initializing Navigations
nav.Bar('top', [
    nav.Item('Home', 'index'),
    nav.Item('Gfg', 'gfg', {'page': 5}),
])

Шаг 3: Добавляем Flask Routes и запускаем приложение.

@app.route('/')
def index():
    return render_template('index.html')
 
 
@app.route('/navpage')
def navpage():
    return render_template('navpage.html')
 
 
@app.route('/gfg/<int:page>')
def gfg(page):
    return render_template('gfg.html', page=page)
 
 
if __name__ == '__main__':
    app.run()

Шаблоны:

Читайте также:  Перенаправление ввода-вывода в Ubuntu

navpage.html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    {% for item in nav.top %}
    <li class="{{ 'active' if item.is_active else '' }}">
        <a href="{{ item.url }}">{{ item.label }}</a>
    </li>
    {% endfor %}
</ul>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<b>Index page</b>
</body>
</html>

gfg.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<b>GFG Page 5</b>
</body>
</html>

При открытии navpage.html при щелчке по каждому элементу страница переходит на требуемый URL-адрес, настроенный для навигации.

Выход:

при щелчке по каждому элементу страница переходит на требуемый

Объяснение:

В navpage.html каждый элемент навигационной панели повторяется и отображается. Onclick, класс активируется, и тег привязки принимает указанный путь, связанные страницы.

 

Оцените статью
bestprogrammer.ru
Добавить комментарий