5568 sujets

Sémantique web et HTML

Inclure un bout de code dans toutes les pages html d'un site

Bonjour,
J'ai une question toute bête: comment faire pour intégrer un bout de code dans toutes les pages html d'un site ?
J'ai un menu en bas de page, je dois donc le mettre en bas de chacune de mes pages, pas de pb, il est mis 'en dur'. Mais soucis lorsque je veux modifier ou ajouter un lien dans ce menu, je dois alors modifier toutes les pages une à une, horreur, malheur !!! Smiley eek
il doit bien exister un moyen de mettre ce menu dans 'une page' et appeler cette page ensuite à la fin de chacune de mes pages, non ? je precise que ce sont des pages html et non php.
Il y a très longtemps j'ai utilisé dreamweaver, et je me souviens qu'il y avait cette possibilité (un cliquer-glisser je crois), mais là avec VBS je ne vois pas.
Quelqu'un pourrait m'éclairer Smiley smile
Mille mercis !
Modérateur
Bonjour,

Il te faut utiliser la fonction recherche/remplacer et surement une regex :

https://learn.microsoft.com/fr-fr/visualstudio/ide/finding-and-replacing-text?view=vs-2022

https://learn.microsoft.com/fr-fr/visualstudio/ide/using-regular-expressions-in-visual-studio?view=vs-2022

je n'ai jamais fait avec VS que j'utilise de façon anecdotique, mais dans notepad++ il y a une fonction similaire qui marche très bien quelque soit le nombre de fichier dans le répertoire ciblé.

cdt

P.S. Voici comment je procede dans notepad++

* j'ouvre la boite de dialogue "rechercher et remplacer" VS en a aussi une.
* je selectionne le dossier ou se trouve les fichiers à mettre à jours
* Dans le champs recherche je met cette regex ^.*().*$ telle quelle , rien ne se passe, il te faut copier la portion de code ou tu veut inserer ton nouveau code. Attention à prendre une portion suffisamment longue pour qu'elle soit unique dans ton document.
* copie/colle cette portion entre les parenthèses de la regex précédente.
* dans le champs remplacer copie/colle la portion précédente avec la partie à ajouter.
* lance la procédure (tout ou fichier par fichier)
* sauvegarde tes fichiers si la modification a eu lieu et est conforme à ce que tu voulais.
Modifié par gcyrillus (21 Mar 2023 - 17:59)
Modérateur
Salut,

Sur Dreamweaver et Golive, il y a/avait un système d'inclusion. Mais en html pur, tu ne peux pas partager en commun un bloc html. La seule solution qui n'est pas très propre, c'est d'utiliser une iframe.

Le mieux est que tu aies recours à php. Sache que c'est extrêmement simple à mettre en place.

ta page principale (index.php par exemple) : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <?php require_once "./header.php" ?>
    <main>
        <div class="content">
            <p>mon contenu</p>
        </div>
    </main>
    <?php require_once "./footer.php" ?>
</body>
</html>


header.php et footer.php étant des fichiers à côté de ce fichier. Pour php, il te faut un interpréteur php. Si tu es sur windows, il y a WAMP, XAMP, easy php (que je déconseille), Laragon. Si tu es sur MAC, il y a MAMP.
@niuxe : le truc c'est que du coup, si Marina suit ta voie, elle passe d'un simple site statique en html à un site dynamique en php. Ce n'est pas grave en soit et ça lui offrirait plein de possibilités, mais ça fait quand même beaucoup pour une inclusion (bon, après, le créateur de php avait créé son langage en priorité pour les includes).

@MarinaZut : Il existe des "moteurs de templates". Ceux-ci peuvent compiler leur code (composés d'includes, de variables, de patterns, etc...) en html avant une mise en ligne, le problème étant qu'il leur faut un environnement de développement (node.js par exemple), ce qui au final n'est pas moins lourd qu'un développement avec un langage dynamique (je veux dire qu'il faut s'investir dans la techno).

Par exemple pour mon site statique de référence, j'utilise Pug.
Donc ceci :
body
  nav nav
  main main
  footer footer

Donnera cela :
<body>
  <nav>nav</nav>
  <main>main</main>
  <footer>footer</footer>
</body>

Bien sûr, il existe des moteurs de templates beaucoup moins concis et surtout plus proche du html classique, comme par exemple Twig. Ce dernier vous conviendrait mieux je pense :
<!DOCTYPE html>
<html>
    <head>
        <title>My Webpage</title>
    </head>
    <body>
        <ul id="navigation">
        {% for item in navigation %}
            <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
        {% endfor %}
        </ul>

        <h1>My Webpage</h1>
        {{ a_variable }}
    </body>
</html>

Ces moteurs de templates, disponibles pour des compilations de sites statiques, sont aussi portés sous environnements dynamiques (comme php). Par exemple Twig est le moteur de templates par défaut du framework php Symfony.

Tout cela demande un peu d'investissement. Si vous voulez passer à côté des moteurs de templates il vous restera les copier/coller globaux (en étant très méticuleux).
Modifié par Olivier C (21 Mar 2023 - 22:58)
Modérateur
Olivier C a écrit :
@niuxe : le truc c'est que du coup, si Marina suit ta voie, elle passe d'un simple site statique en html à un site dynamique en php. Ce n'est pas grave en soit et ça lui offrirait plein de possibilités, mais ça fait quand même beaucoup pour une inclusion (bon, après, le créateur de php avait créé son langage en priorité pour les includes).


Non, ce n'est pas ça un site dynamique pour une inclusion d'un autre fichier (c'est un équivalent à afficher une image).
Dans mon exemple, on ne voit pas par exemple :
- de condition pour afficher tel ou tel fichier
- ob_get_clean(),
- un controller frontal,
- un observer
- un strategy
- un objet Request,
- un objet Route,
- etc.

MarinaZut a besoin de quelque chose de simple apparemment. Certes, Twig, Smarty ou autres moteurs de template sont très intéressants. Mais je pense que c'est superflu en rapport à son besoin initial. En outre, il a été intéressant que tu en parles.

@MarinaZut : J'ai regardé s'il existe un éditeur html ayant la posssibilité qu'il y ait un système d'inclusion de fichier html au sein de ton fichier html initial. Malheureusement, je n'en ai pas trouvé. Sauf erreur de ma part, Bracket ou BlueFish n'ont pas cette fonctionnalité. Si tu peux te procurer Dreameaver MX (edition des années 2000), tu as ça de base.

Si tu optes pour t'installer php sur ta machine :
- windows avec Laragon
- mac
Modifié par niuxe (22 Mar 2023 - 07:11)
Salut,

tu dois pouvoir faire une solution en javascript (cela ne fonctionne pas directement en local il faut que cela passe par le serveur apache sinon le fetch renvoie une erreur Smiley ohwell ) :
Toutes tes pages devront ressembler à ça : (en gros il faudra inclure la partie script dans tes headers) ( J'ai mis une partie style css juste pour être sur que cela s'applique au code html que l'on ajoute en javascript. ) 


<html>
<head>
<style>
footer{
 background:pink;
}
</style>
<script>
async function loadHtml() {
     const response = await fetch("footer.html");
     const footer_html = await response.text();
     document.body.insertAdjacentHTML('beforeend', footer_html)
}

loadHtml()
</script>
</head>
<body>
</body>
</html>


Et ensuite tu auras juste besoin d'avoir une page footer.html qui contiendra ton contenu : 

<footer>
Test pied de page
</footer>


Edit : J'ai mis directement le insertAdjancetHTML sur body parce que tu parlais du footer, mais dans le concept tu dois pouvoir ciblé n'importe quel élément de ta page et eventuellement adapté à chaque page (c'est juste que pour ton cas cela me semblait générique et suffisant pour ton besoin)
Modifié par Mathieuu (22 Mar 2023 - 17:30)
Salut,

J'ai eu une idée encore mieux pour que tu puisses facilement faire évoluer le code javascript sans avoir à retoucher tous tes fichiers à chaque fois : on le stock dans un fichier javascript Smiley lol

Du coup tous tes fichiers seront sur cette forme la (i.e avec la balise script): 

<html>
<head>
<style>
footer{
 background:pink;
}
</style>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>
</html>


Ensuite tu auras le fichier script.js qui va contenir juste le code javascript qui permet de charger le fichier footer.html : 

async function loadFooter() {
     const response = await fetch("footer.html");
     const footer_html = await response.text();
     document.body.insertAdjacentHTML('beforeend', footer_html)
}
loadFooter()


puis le fichier footer.html qui contient le code html que tu veux 

<footer>
Test pied de page
</footer>

Modifié par Mathieuu (23 Mar 2023 - 10:51)
Modérateur
Salut,

Et non Mathieuu. Au niveau SEO, tu es dans les choux. J'y ai pensé au JS. Mais vu que tu injectes du contenu via le JS, le moteur de recherche ne va rien voir. Or, que ce soit le header ou footer, tu as toute une série de liens qui va permettre au moteur de recherche de parser les pages. Au passage, quitte à installer un serveur tel qu'Apache, autant installer wamp ou Laragon et utiliser l'extension php. Tu peux très bien faire simplement du html et juste faire des imports (require_once, include_once, require, include). Pour faire ce genre de chose, ce n'est pas du tout compliqué. Tu dois :
- installer WAMP (par exemple)
- créer un répertoire de mémoire dans c:\wamp\www. (exemple: mon_site)
- mettre tous les fichiers dans le nouveau répertoire que tu viens de créer
- renommer les fichiers en php (au lieu de .html, remplacer par .php)
- faire les require_once avec le bon chemin (voir une de mes réponses précédentes)
- lancer l'application WAMP
- aller sur http://localhost avec son navigateur

edit :
D'ailleurs, je viens de penser que dans php, il y a un petit server intégré. Donc, il n'est même pas utile d'installer wamp ou laragon.
- installer php (l'étape la plus compliqué quand on ne connait pas le sujet et sur Windows est de déclarer le php dans le PATH), sur mac, il y a déjà php installé,
- renommer les fichiers en php (au lieu de .html, remplacer par .php)
- ouvrir un invité de commande
- se diriger vers le dossier où il y a le site
cd c:\chemin\vers\mon\site\

- lancer la commande 
php -S localhost:8000

- aller sur http://localhost:8000 avec son navigateur

edit2 : Microsoft a édité une page pour la marche à suivre
Modifié par niuxe (23 Mar 2023 - 21:46)
C'est un sujet très intéressant ! Je suis tombé sur cet article qui liste pas mal de façons de faire des inclusions de fichiers, et je ne savais pas qu'Apache pouvait faire ce genre de choses (sous réserve que la fonctionnalité soit activée, ce qui n'est probablement pas le cas sur un serveur mutualisé par exemple)

J'émets aussi une grosse réserve sur les solutions qui reposent sur JavaScript. Même si GoogleBot est capable d'interpréter le JS depuis longtemps, c'est risqué pour la bonne indexation de ton site et de son référencement. Les bots n'interprètent sûrement pas le JS de la même façon que le fait un navigateur web réçent et à jour ^^

À part le rechercher/remplacer global au niveau du projet (qui reste une solution à fort risque d'erreur), je ne pense pas qu'il y ait d'autres solutions simples à mettre en place, sans devoir retravailler tout ton site, pour effectuer ce que tu veux faire.

La plupart des solutions évoquées ici ou dans l'article cité demandent généralement soit de faire un traitement du côté du serveur, soit d'installer une sorte de préprocesseur qui s'occupe de regénérer tous tes fichiers html. Je trouve que la solution avec Apache sort un peu du lot, car elle demande (probablement) peu de configuration et peu de modification à effectuer sur ton site. Il y a même un tuto en français dans la doc officielle. Mais bon, il semble que c'est une fonctionnalité ancienne et quasi obsolète en 2023... depuis que des langages serveurs existent pour faire ce genre de choses depuis les années 2000 Smiley lol
Modérateur
Loraga a écrit :


À part le rechercher/remplacer global au niveau du projet (qui reste une solution à fort risque d'erreur),


+1 et pas du tout pratique
Modérateur
niuxe a écrit :


+1 et pas du tout pratique


Je ne n'ai pas le même avis concernant ma proposition de regex, et j'argumente d'une expérience toute fraîche Smiley smile

En héritant d'un site je me suis retrouvé il y a quelques jours avec plusieurs centaines de fichiers XML à mettre à jour en ajoutant des balises manquantes ... (entre autre joyeuseté comme passé de php 5.6 vers 8.x et d'un grand nettoyage dans l'inconnu)

Même dilemme initial : Comment insérer la même chose dans tous ces fichiers en lot sans y perdre des heures . J'ai d'abord penser à me faire une moulinette avec DOMdocument qui ouvrirais tous les fichiers un à un pour y injecter ces balises et les sauvegarder, mais la flemme et la demie heure que j'avais à y consacrer m'a pousser à me servir de cette fonction rechercher / remplacer et d'une simple regex . J'ai pas trouver plus rapide et plus simple: mon squelette de regex dans un coin à copier coller, trouver dans les documents la portion unique de code où je veut faire mon insertion et la partie à insérer. ( pour un menu, chaque lien du menu serait à priori unique pour trouver le point de départ, le risque d'erreur est minime et on n'oublie pas sa sauvegarde avant de tout modifier ) .Je n'ai pas oser proposer d'installer notepad++ rien que pour faire ça , mais ça m'a démanger , ça pèse quasi rien.

Pour l'idée du JavaScript, il faudra toujours en passer par la première étape consistant à éditer chaque fichiers, ensuite ce serait effectivement qu'un vieux souvenir. (autre possibilité qui ne nécessite pas une mise en ligne évoquer à https://forum.alsacreations.com/topic-5-90094-1-Charger-une-page-HTML-local-dans-une-div-sans-jQuery.html L'idée est de mettre le menu non pas dans un fichier HTML que l'on va chercher en AJAX, mais dans un fichier js encapsuler dans une variable entre deux ` , du coup encore assez facile à éditer et qui peut avoir l'avantage en plus d'y passer des variables et l'inconvenient du referencement ) Une option pas vue je crois dans l'article cité par Loraga

Enfin, si c'est un site appeler à s’étoffer, il arrivera un moment où il faudra effectivement choisir de passer à un système automatiser pour ne s'affairer qu'aux contenus . C'est peut-être le moment :)
Prévenir un modérateur
Répondre au sujet
Aller à