Salut à tous, 

Je suis en train de faire un fichier base.html dans lequel se trouve la mise en page de base de mon site. J'ai besoin d'une navbar avec un système qui affiche la page sur laquelle on se trouve. Je n'ai pas envie de copier/coller ma navbar dans toutes mes pages... J'aimerai plutôt récupérer la page active et lui mettre les bonnes classes (j'utilise TailwindCSS).

Sauriez-vous comment faire ? 

Merci d'avance

bonsoir, alors je ne sais comment pas tu geres les url de ton site web mais tu peux recuperer l'url le hasher pour garder juste le nom de la page et faire un addclass sur la div qui correspond a la page actuel.

window.location.href pour l'url actuel

-
Edité par zvheer 9 octobre 2021 à 22:43:28

zvheer a écrit:

bonsoir, alors je ne sais comment pas tu geres les url de ton site web mais tu peux recuperer l'url le hasher pour garder juste le nom de la page et faire un addclass sur la div qui correspond a la page actuel.

window.location.href pour l'url actuel

-
Edité par zvheer il y a 3 minutes

ok je vais essayer de faire ca rapidement je pars du fait que ton url sera du type https://tatata.com/accueil.php

<script>

			//let url = window.location.href; normalement tu fais ca pour recuperer ton url mais comme je suis en localhost on aura pas le type d url souhaite

			//moi je vais la definir manuellement

			let url = "https://monurl.com/accueil.php";

			let separe = url.split("/");

			//separe est mtn un tableau avec accueil.php comme derniere case du tableau or on veut accueil

			separe = separe[separe.length-1].split("."); 

			let page = separe[0];
			
			console.log(page);

			//maintenant tu vas recuperer des elemets de la navbar tu compares celui qui a le texte qui correspond au nom de la page tu lui fais element.classList.add("pageactuel");

			//donc dans ton css tu auras .pageactuel le css special

			

		</script>

Peut etre y a t il plus simple en js mais bon je ne suis pas un specialist js .

Mais si tu fais comme ca tu vois bien qu'il faut que ton url soit du type https:://tatata.com/page.php 

sinon faudra adapter le split

pour la dernière partie que je n'ai pas faite car je suppose que tu sais faire 

tu as donc ta nav avec des enfanrs style <li>accueil

<li>connexion 

ect

tu recuperes tout les enfants de nav tu fais une boucle for in ou comme tu veux pour comparer chaque enfant a la variable page et celle qui match tu lui fais le addclass

-
Edité par zvheer 9 octobre 2021 à 23:39:31

Merci pour l'explication de la démarche !

J'ai réussi à faire ça en Python/JS : j'ai récupéré l'url grâce à flask et j'ai fait passé ça dans une variable que j'utilise dans mon script JS dans ma page HTML !

PS: Pas besoin de faire de boucle for, 2 lignes de JS suffisent

zvheer a écrit:

Si tu as trouvé la solution la meilleure chose est de la poster pour que ceux qui auront le soucis sachent

Le code en python (dans mon fichier app.py) :

from logging import debug
from flask import Flask, render_template, redirect, url_for, request, flash

app = Flask(__name__)

@app.route("/la-villa")
def home():
    nom_page = request.path #Retourne ce qu'il y a dans app.route
    nom_page_mobile = nom_page + "_mobile" #Je crée un id spécial dans ma page HTML pour la version mobile du site

    print(nom_page)
    return render_template("home.html", current_page = nom_page, current_page_mobile = nom_page_mobile)

if __name__ == '__main__':
    app.run(debug=True)

Dans mon fichier base.html (entre 2 balises script) :

      var element = document.getElementById("{{ current_page }}");
      var element_mobile = document.getElementById("{{ current_page_mobile }}");
      element.classList.add("my_style");
      element_mobile.classList.add("my_style_mobile");

-
Edité par TiboMoz 10 octobre 2021 à 23:52:29