保持页面元素一致性：确保标题或标志在不同页面间保持一致-PHP中文网问答

我已经在我的网站上工作了一段时间了，随着时间的推移，我不断地为我的网站添加了许多部分，但是我一直在手动编辑每个页面，每当我添加一个新的按钮来重定向到一个新的部分，虽然这并不难或者花费太长时间，但我不确定这在长期运行中会有多好。

以下是相关的标题

有没有办法通过只更改一个文件来使这些元素在每个页面上保持一致？

这是我的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;
}

<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>  $(document).ready(function () { $('#buttoncontainer').load('menu.html'); }); </script> </body> </html>

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);