forked from FWS/TEMPLATE-Web-site-one-page

Files

T

[5][DONE]

2026-05-27 19:27:58 +02:00

4.1 KiB

Raw Permalink Blame History

Fonctionnement du JavaScript

Ce projet fonctionne comme un site statique avec un seul point d'entrée HTML. Le JavaScript sert à lire l'URL, charger le bon fichier dans p/, injecter son contenu dans le main, et reprendre aussi les styles définis dans le <head> de la page chargée.

Principe général

index.html garde le header, le footer et le conteneur principal.
Chaque page vit dans un dossier sous p/.
Le script lit la route demandée dans l'URL.
Le script charge p/<route>/index.html avec fetch.
Le contenu de la page est injecté dans le main.
Les styles déclarés dans le head de cette page sont copiés dans le head du document courant.

Fichiers impliqués

index.html contient le chrome global du site.
p/assets/main-nav/app.js contient le routeur JavaScript.
p/index/index.html contient la page principale.
p/dl/index.html contient la page DL.

Comment le script lit l'URL

La fonction routeFromLocation() lit la route courante depuis plusieurs formes possibles d'URL.

Exemples reconnus:

/?p/index/
/?p/dl/
/?p=contact
/p/about/

La fonction normalizeRoute(value) nettoie ensuite la valeur pour obtenir une route simple comme index, dl ou contact.

Chargement du contenu

La fonction loadRoute(route) fait le chargement réel.

Route principale

Pour la route index, le script charge:

p/index/index.html

Autres routes

Pour une route comme dl, le script charge:

p/dl/index.html

Le fichier chargé doit contenir un bloc avec data-page-content:

<main data-page-content>
  ...
</main>

Le script n'injecte pas tout le document dans la page courante. Il prend seulement le contenu à l'intérieur de cet élément.

Injection des styles du head

Le routeur copie maintenant aussi les balises suivantes depuis le head de la page chargée:

link rel="stylesheet"
style

Ces balises sont clonées dans le head du document principal avec un attribut de suivi data-page-style.

Avant d'ajouter les nouveaux styles, le script supprime les styles injectés par la route précédente pour éviter les doublons et les conflits.

Exemple dans une page custom:

<head>
  <link rel="stylesheet" href="./page.css" />
  <style>
    .hero {
      background: black;
    }
  </style>
</head>

Si cette page est chargée, le CSS est repris automatiquement.

Mise à jour de l'URL

Après le chargement, le script met à jour l'URL avec l'API History.

Exemples:

index devient /?p/index/
dl devient /?p/dl/

Le navigateur garde donc une URL partageable, sans recharger complètement la page.

Le script écoute les clics sur les liens qui possèdent data-route.

Quand tu cliques sur un lien:

il bloque la navigation normale avec event.preventDefault();
il lit data-route;
il appelle render(route);
il charge la page correspondante dans le main;
il applique aussi ses styles de page.

Retour arrière du navigateur

Le script écoute l'événement popstate.

Cela permet de revenir en arrière ou d'avancer dans l'historique tout en rechargeant la bonne route et les bons styles.

Ajouter une nouvelle page

Pour ajouter une page, crée un nouveau dossier sous p/.

Exemple pour une page contact:

p/contact/index.html

Puis ajoute éventuellement un fichier CSS dans cette page via son head.

Enfin, ajoute un lien dans index.html:

<a href="/?p/contact/" data-route="contact">Contact</a>

Le JavaScript n'a pas besoin d'être modifié tant que la structure reste la même.

Ce que ce système n'utilise pas

Ce projet n'utilise pas:

Node.js,
un bundler,
un framework front,
des fichiers .html séparés dans la racine pour chaque page.

Tout repose sur un site statique et un routeur JavaScript léger.

Point important

Le chargement via fetch fonctionne mieux quand le site est servi par un serveur statique, comme Five Server.

Si tu ouvres le fichier en file://, le navigateur peut bloquer l'accès aux fichiers internes pour des raisons de sécurité.

4.1 KiB Raw Permalink Blame History