Je travaille sur mon site Web depuis un certain temps maintenant et au fil du temps, j'ai continué à ajouter de nombreuses sections à mon site Web, mais j'ai modifié manuellement chaque page et chaque fois que j'ajoute un nouveau bouton pour rediriger vers une nouvelle section, et pendant que cela n'est pas difficile et ne prend pas trop de temps, je ne suis pas sûr que cela fonctionnera à long terme.
Les titres suivants sont liés
Existe-t-il un moyen de rendre ces éléments cohérents sur chaque page en modifiant un seul fichier ?
Voici mon code HTML
<div class="logocontainer">
<a href="index.html">
<img src="images/badasslogo.png" align="center" class="logo"></a>
</div>
<body>
<div class="buttoncontainer">
<a href="index.html">
<img src="images/buttons/homebutton.png" class="button"></a>
<a href="blog/blogmain.html">
<img src="images/buttons/blogbutton.png" class="button"></a>
<a href="art/artmain.html">
<img src="images/buttons/artbutton.png" class="button"></a>
<a href="fanart/fanartmain.html">
<img src="images/buttons/fanartbutton.png" class="button"></a>
<a href="partners/partnersmain.html">
<img src="images/buttons/partnersbutton.png" class="button"></a>
<a href="guestbook/guestbook.html">
<img src="images/buttons/guestbookbutton.png" class="button"></a>
<a href="servers/serversmain.html">
<img src="images/buttons/serversbutton.png" class="button"></a>
<a href="downloads/downloadsmain.html">
<img src="images/buttons/downloadsbutton.png" class="button"></a>
<a href="extras/extrasmain.html">
<img src="images/buttons/extrasbutton.png" class="button"></a>
<a href="donate/donatemain.html">
<img src="images/buttons/donatebutton.png" class="button"></a>
<a href="about/about.html">
<img src="images/buttons/aboutbutton.png" class="button"></a>
</div>
C'est du CSS
.logocontainer {
text-align: center;
}
.logo {
display: inline-block;
margin-bottom: 10px;
}
.buttoncontainer {
text-align: center;
}
.button {
display: inline-block;
} 
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous devez ajouter votre menu à la page menu.html, puis appeler la page menu.html via jquery.
menu.html
<a href="index.html"> <img src="images/buttons/homebutton.png" class="button"></a> <a href="blog/blogmain.html"> <img src="images/buttons/blogbutton.png" class="button"></a> <a href="art/artmain.html"> <img src="images/buttons/artbutton.png" class="button"></a> <a href="fanart/fanartmain.html"> <img src="images/buttons/fanartbutton.png" class="button"></a> <a href="partners/partnersmain.html"> <img src="images/buttons/partnersbutton.png" class="button"></a> <a href="guestbook/guestbook.html"> <img src="images/buttons/guestbookbutton.png" class="button"></a> <a href="servers/serversmain.html"> <img src="images/buttons/serversbutton.png" class="button"></a> <a href="downloads/downloadsmain.html"> <img src="images/buttons/downloadsbutton.png" class="button"></a> <a href="extras/extrasmain.html"> <img src="images/buttons/extrasbutton.png" class="button"></a> <a href="donate/donatemain.html"> <img src="images/buttons/donatebutton.png" class="button"></a> <a href="about/about.html"> <img src="images/buttons/aboutbutton.png" class="button"></a>Index.html
<html> <head> <title>abc</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> </head> <body> <div class="logocontainer"> <a href="index.html"> <img src="images/badasslogo.png" align="center" class="logo"></a> </div> <div class="buttoncontainer" id="buttoncontainer"> </div> <script> <!-- Call this script on all page--> $(document).ready(function () { $('#buttoncontainer').load('menu.html'); }); </script> </body> </html>Vous pouvez faire ceci :
Dans votre fichier header.js vous pouvez faire ceci :
let headerContent = ` <a href="index.html"> <img src="images/buttons/homebutton.png" class="button"></a> <a href="blog/blogmain.html"> <img src="images/buttons/blogbutton.png" class="button"></a> <a href="art/artmain.html"> <img src="images/buttons/artbutton.png" class="button"></a> <a href="fanart/fanartmain.html"> <img src="images/buttons/fanartbutton.png" class="button"></a> <a href="partners/partnersmain.html"> <img src="images/buttons/partnersbutton.png" class="button"></a> <a href="guestbook/guestbook.html"> <img src="images/buttons/guestbookbutton.png" class="button"></a> <a href="servers/serversmain.html"> <img src="images/buttons/serversbutton.png" class="button"></a> <a href="downloads/downloadsmain.html"> <img src="images/buttons/downloadsbutton.png" class="button"></a> <a href="extras/extrasmain.html"> <img src="images/buttons/extrasbutton.png" class="button"></a> <a href="donate/donatemain.html"> <img src="images/buttons/donatebutton.png" class="button"></a> <a href="about/about.html"> <img src="images/buttons/aboutbutton.png" class="button"></a> `; document.querySelector('#buttoncontainer').insertAdjacentHTML('beforeend', headerContent);Appelez-le sur toutes les pages et une fois que vous aurez apporté une modification dans le fichier js, elle s'appliquera à toutes les modifications sur toutes les pages.