La navegación a través de páginas HTML es una forma bastante común de trabajar entre páginas. El enfoque de navegación del lado del cliente se usa comúnmente en HTML. Sin embargo, tener navegaciones personalizadas en el extremo del servidor puede proporcionar mayores flexibilidades en lo que respecta a las personalizaciones. Este artículo lo guía a través de una forma de integrar la navegación final del servidor usando Navbars en Flask.
Navegación de matraces
Este módulo se utiliza para crear barras de navegación en la aplicación del matraz.
- Permite la navegación final del servidor de una página a otra.
- Ayuda a definir clases HTML y elementos de navegación desde Python.
Instalación
Para instalar este módulo, escriba el siguiente comando en la terminal.
pip install Flask-Navigation
Funciones utilizadas
nav.Bar(name, items) : Inicializando el nombre de la clase de navegación con la definición de los elementos.
nav.Item(etiqueta, url, argumentos): asigna elementos o listas para cada barra. Nombre de la etiqueta, la URL de la página vinculada y argumentos adicionales como el parámetro y el valor del diccionario.
Después de la instalación, el siguiente paso es inicializar el contexto de la aplicación con Navigation() y definir el HTML básico para navegar. Las barras de navegación también deben definirse en el código usando Bar(), con la posición de toma y la lista de elementos son parámetros de las barras de navegación. Cada artículo se ingresa con su etiqueta, URL y parámetros pasados en la URL.
Paso 1: importar bibliotecas, agregar contexto de aplicación e inicializar el objeto de clase de navegación.
Python3
from flask import Flask, render_template from flask_navigation import Navigation app = Flask(__name__) nav = Navigation(app)
Paso 2: Agregar definición de navegación
Python3
# initializing Navigations
nav.Bar('top', [
nav.Item('Home', 'index'),
nav.Item('Gfg', 'gfg', {'page': 5}),
])
Paso 3: agregar rutas de matraz y ejecutar la aplicación.
Python3
@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()
Plantillas:
paginanav.html
En esto, for loop se usa para iterar y representar todos los elementos definidos en la barra superior, con su URL y etiquetas.
HTML
<!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>
índice.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <b>Index page</b> </body> </html>
gfg.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <b>GFG Page 5</b> </body> </html>
Al abrir navpage.html, al hacer clic en cada elemento, la página se navega a la URL requerida según lo configurado para la navegación.
Producción:
Explicación:
En navpage.html, cada elemento de la barra de navegación se itera y representa. Al hacer clic, la clase se activa y la etiqueta de anclaje lleva a la ruta definida, las páginas vinculadas.
Publicación traducida automáticamente
Artículo escrito por manjeet_04 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA