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).
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.
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
Je n'ai encore atteint ce niveau là ^^' ! Si tu peux m'éclairer sur cette piste, je suis preneur !
<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
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
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
Récupérer la page active pour la Navbar
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
yasakani no magatama
yasakani no magatama
yasakani no magatama