Панели навигации в 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()

Шаблоны:

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, класс активируется, и тег привязки принимает указанный путь, связанные страницы.