我已經在我的網站上工作了一段時間了，隨著時間的推移，我不斷地為我的網站添加了許多部分，但是我一直在手動編輯每個頁面，每當我添加一個新的按鈕來重定向到一個新的部分，雖然這並不難或花費太長時間，但我不確定這在長期運行中會有多好。
以下是相關的標題
有沒有辦法透過只更改一個檔案來使這些元素在每個頁面上保持一致？
這是我的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>
這是CSS
.logocontainer {
text-align: center;
}
.logo {
display: inline-block;
margin-bottom: 10px;
}
.buttoncontainer {
text-align: center;
}
.button {
display: inline-block;
} 
你需要將你的選單加入menu.html頁面中，然後透過jquery呼叫menu.html頁面。
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>你可以這樣做：
在你的header.js檔案中，你可以這樣做：
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);在所有頁面上呼叫它，一旦你在js檔案中進行編輯，它將應用於所有頁面的所有變更。