FWS/Web-site
2
0
Fork 0
forked from FWS/TEMPLATE-Web-site-one-page
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

feat: css custom by pages

Browse Source 
[5][DONE]
This commit is contained in:
BlackAngelTVdev
2026-05-27 19:27:58 +02:00
parent ef1185435b
commit 2b7e2cc3e0
3 changed files with 89 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Doc/fonctionnement-onepage.md
+57 -106
View File
@@ -1,91 +1,57 @@
# Fonctionnement du one page # Fonctionnement du JavaScript
Ce projet fonctionne comme un site statique avec un seul point d'entrée HTML. Le JavaScript sert uniquement à lire l'URL, choisir la bonne route, charger le bon fichier HTML dans `p/`, puis injecter son contenu dans la zone centrale de la page. 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.
Le principe général est simple: ## Principe général
1. `index.html` garde le header, le footer et le conteneur principal. 1. `index.html` garde le header, le footer et le conteneur principal.
2. Chaque section vit dans un dossier sous `p/`. 2. Chaque page vit dans un dossier sous `p/`.
3. Le script lit la route demandée dans l'URL. 3. Le script lit la route demandée dans l'URL.
4. Le script charge `p/<route>/index.html` avec `fetch`. 4. Le script charge `p/<route>/index.html` avec `fetch`.
5. Le contenu de la page est injecté dans le `main`. 5. Le contenu de la page est injecté dans le `main`.
6. Les styles déclarés dans le `head` de cette page sont copiés dans le `head` du document courant.
## Fichiers impliqués ## Fichiers impliqués
- [index.html](../index.html) contient le chrome global du site. - [index.html](../index.html) contient le chrome global du site.
- [p/assets/main-nav/app.js](../p/assets/main-nav/app.js) contient le routeur JavaScript. - [p/assets/main-nav/app.js](../p/assets/main-nav/app.js) contient le routeur JavaScript.
- [p/dl/index.html](../p/dl/index.html) contient le contenu de la page DL. - [p/index/index.html](../p/index/index.html) contient la page principale.
- [p/dl/index.html](../p/dl/index.html) contient la page DL.
## Rôle de `index.html`
`index.html` ne contient pas le contenu de toutes les pages. Il contient seulement:
- le header commun,
- la navigation,
- le `main` vide,
- le footer commun,
- l'appel au script JavaScript.
Exemple de lien de navigation:
```html
<a href="/?p/dl/" data-route="dl">DL</a>
```
Ce lien fait deux choses:
- il indique au navigateur une URL propre,
- il donne au script un identifiant de route via `data-route`.
## Comment le script lit l'URL ## Comment le script lit l'URL
Le script commence par récupérer la route dans l'adresse courante. La fonction `routeFromLocation()` lit la route courante depuis plusieurs formes possibles d'URL.
Il sait reconnaître plusieurs formes: Exemples reconnus:
- `/?p/index/`
- `/?p/dl/` - `/?p/dl/`
- `/?p=dl` - `/?p=contact`
- `/p/dl/` - `/p/about/`
La fonction `routeFromLocation()` nettoie ensuite la valeur pour obtenir une route simple comme `home` ou `dl`. La fonction `normalizeRoute(value)` nettoie ensuite la valeur pour obtenir une route simple comme `index`, `dl` ou `contact`.
## Normalisation de route
La fonction `normalizeRoute(value)` sert à standardiser les valeurs.
Elle transforme par exemple:
- `HOME` en `home`
- `accueil` en `home`
- `/dl/` en `dl`
Cette normalisation évite d'avoir plusieurs variantes pour une même page.
## Chargement du contenu ## Chargement du contenu
La fonction `loadRoute(route)` fait le vrai travail. La fonction `loadRoute(route)` fait le chargement réel.
### Cas de l'accueil ### Route principale
Quand la route vaut `home`, le script n'a pas besoin de charger un fichier externe. Il injecte directement le bloc HTML de l'accueil dans le `main`. Pour la route `index`, le script charge:
### Cas d'une page sous `p/`
Quand la route vaut autre chose que `home`, le script construit le chemin du fichier:
```text ```text
p/<route>/index.html p/index/index.html
``` ```
Exemple: ### Autres routes
Pour une route comme `dl`, le script charge:
```text ```text
p/dl/index.html p/dl/index.html
``` ```
Puis il appelle `fetch` pour lire ce fichier. Le fichier chargé doit contenir un bloc avec `data-page-content`:
Le script ne prend pas tout le HTML de la page externe. Il récupère uniquement l'élément portant `data-page-content`:
```html ```html
<main data-page-content> <main data-page-content>
@@ -93,32 +59,44 @@ Le script ne prend pas tout le HTML de la page externe. Il récupère uniquement
</main> </main>
``` ```
Ensuite, il insère seulement son contenu intérieur dans le `main` du site principal. 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 dans le `main` ## Injection des styles du head
L'injection se fait avec: Le routeur copie maintenant aussi les balises suivantes depuis le `head` de la page chargée:
```javascript - `link rel="stylesheet"`
main.innerHTML = injected.innerHTML.trim(); - `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:
```html
<head>
<link rel="stylesheet" href="./page.css" />
<style>
.hero {
background: black;
}
</style>
</head>
``` ```
Donc: Si cette page est chargée, le CSS est repris automatiquement.
- le header ne bouge pas,
- le footer ne bouge pas,
- seul le contenu central change.
## Mise à jour de l'URL ## Mise à jour de l'URL
Après le chargement, le script met à jour l'URL avec l'API History. Après le chargement, le script met à jour l'URL avec l'API History.
Exemple: Exemples:
- `home` devient `/` - `index` devient `/?p/index/`
- `dl` devient `/?p/dl/` - `dl` devient `/?p/dl/`
Cela permet de partager une URL propre sans recharger complètement la page. Le navigateur garde donc une URL partageable, sans recharger complètement la page.
## Navigation au clic ## Navigation au clic
@@ -129,27 +107,18 @@ Quand tu cliques sur un lien:
1. il bloque la navigation normale avec `event.preventDefault()`; 1. il bloque la navigation normale avec `event.preventDefault()`;
2. il lit `data-route`; 2. il lit `data-route`;
3. il appelle `render(route)`; 3. il appelle `render(route)`;
4. il charge la page correspondante dans le `main`. 4. il charge la page correspondante dans le `main`;
5. il applique aussi ses styles de page.
Exemple: ## Retour arrière du navigateur
```html Le script écoute l'événement `popstate`.
<a href="/?p/dl/" data-route="dl">DL</a>
```
## Bouton retour du navigateur Cela permet de revenir en arrière ou d'avancer dans l'historique tout en rechargeant la bonne route et les bons styles.
Le script écoute aussi l'événement `popstate`. ## Ajouter une nouvelle page
Cela veut dire que: Pour ajouter une page, crée un nouveau dossier sous `p/`.
- si tu fais retour arrière,
- ou avance dans l'historique,
- le site recharge automatiquement la bonne route.
## Structure attendue pour une nouvelle page
Pour ajouter une page, il suffit de créer un nouveau dossier sous `p/`.
Exemple pour une page contact: Exemple pour une page contact:
@@ -157,17 +126,9 @@ Exemple pour une page contact:
p/contact/index.html p/contact/index.html
``` ```
Le fichier doit contenir un bloc avec `data-page-content`: Puis ajoute éventuellement un fichier CSS dans cette page via son `head`.
```html Enfin, ajoute un lien dans `index.html`:
<main data-page-content>
<section class="hero">
<h1>Contact</h1>
</section>
</main>
```
Puis tu ajoutes un lien dans `index.html`:
```html ```html
<a href="/?p/contact/" data-route="contact">Contact</a> <a href="/?p/contact/" data-route="contact">Contact</a>
@@ -184,20 +145,10 @@ Ce projet n'utilise pas:
- un framework front, - un framework front,
- des fichiers `.html` séparés dans la racine pour chaque page. - des fichiers `.html` séparés dans la racine pour chaque page.
Tout repose sur un site statique et un petit routeur en JavaScript. Tout repose sur un site statique et un routeur JavaScript léger.
## Point important ## Point important
Le chargement via `fetch` fonctionne mieux quand le site est servi par un serveur statique, comme Five Server. 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é. Si tu ouvres le fichier en `file://`, le navigateur peut bloquer l'accès aux fichiers internes pour des raisons de sécurité.
## Résumé rapide
Le script fait trois choses:
- il lit la route dans l'URL,
- il charge le bon fichier dans `p/`,
- il injecte le contenu dans le `main`.
Le reste du site est fixe et partagé par toutes les pages.
README.md
+1
View File
@@ -12,4 +12,5 @@ Navigation:
- `/?p/index/` charge `p/index/index.html` dans le `main` - `/?p/index/` charge `p/index/index.html` dans le `main`
- `/?p/dl/` charge `p/dl/index.html` dans le `main` - `/?p/dl/` charge `p/dl/index.html` dans le `main`
- Chaque sous-dossier de `p/` peut devenir une route, par exemple `p/contact/index.html` pour `/?p/contact/` - Chaque sous-dossier de `p/` peut devenir une route, par exemple `p/contact/index.html` pour `/?p/contact/`
- Les balises `link rel="stylesheet"` et `style` placées dans le `head` d'une page sont injectées automatiquement
- Le header et le footer restent communs à toutes les vues - Le header et le footer restent communs à toutes les vues
p/assets/main-nav/app.js
+31
View File
@@ -1,8 +1,38 @@
(() => { (() => {
const main = document.getElementById("app-main"); const main = document.getElementById("app-main");
const pageStyleSelectors = "[data-page-style='true']";
const links = Array.from(document.querySelectorAll("[data-route]")); const links = Array.from(document.querySelectorAll("[data-route]"));
function clearInjectedPageStyles() {
document.querySelectorAll(pageStyleSelectors).forEach((node) => node.remove());
}
function injectPageStyles(parsedDocument, sourceUrl) {
clearInjectedPageStyles();
const head = parsedDocument.head;
if (!head) {
return;
}
const styleNodes = Array.from(head.querySelectorAll("link[rel='stylesheet'], style"));
styleNodes.forEach((node) => {
const clonedNode = node.cloneNode(true);
clonedNode.setAttribute("data-page-style", "true");
if (clonedNode.tagName === "LINK") {
const href = clonedNode.getAttribute("href");
if (href) {
clonedNode.href = new URL(href, sourceUrl).toString();
}
}
document.head.appendChild(clonedNode);
});
}
function normalizeRoute(value) { function normalizeRoute(value) {
const raw = (value ?? "").toString().trim().toLowerCase(); const raw = (value ?? "").toString().trim().toLowerCase();
if (!raw || raw === "/" || raw === "home" || raw === "index" || raw === "accueil") { if (!raw || raw === "/" || raw === "home" || raw === "index" || raw === "accueil") {
@@ -86,6 +116,7 @@
const html = await response.text(); const html = await response.text();
const parsed = new DOMParser().parseFromString(html, "text/html"); const parsed = new DOMParser().parseFromString(html, "text/html");
injectPageStyles(parsed, response.url);
const injected = parsed.querySelector("[data-page-content]") ?? parsed.body; const injected = parsed.querySelector("[data-page-content]") ?? parsed.body;
main.innerHTML = injected.innerHTML.trim(); main.innerHTML = injected.innerHTML.trim();
} }