多页面网站复用Header/Footer的方案求助与实现方法

我正在开发一个影院管理网站，想把重复出现的Header（头部）和Footer（底部）单独存成文件，之后嵌入到需要的页面里。试过PHP方案，但因为要保留HTML扩展名没法用；也试过HTML5的<link rel="import" href="mypath.html">标签，没生效。

可行解决方案 #

我通过JS Fetch API实现了需求，具体步骤如下：

1. 创建加载头部的JS文件 #

新建header.js文件，写入以下代码：

const nav = document.querySelector('.header')
fetch('../header/header.html')
.then(res=>res.text())
.then(data=>{
  nav.innerHTML=data
})

2. 在主页面中预留容器并引入JS #

需要插入头部的页面里，先预留一个空的<header>容器，再引入上面的header.js：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Cate Cinema</title>
  <link rel="stylesheet" href="../page_film/page_film.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.css">
  <!-- Font -->
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Office:wght@500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Infant:wght@300&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital@1&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Belanosima&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">

</head>
<body id="homepage">
      <header class="header"></header>
      <script type="text/javascript" src="../script/header.js"></script>
    </body>
  </html>

3. 单独存放头部HTML内容 #

创建header.html文件，只保留头部的核心代码，不需要完整的HTML结构：

<nav class="navigation-open">
<div class="global container grid-x">
  <div class="logowrapper grid-x">
    <div class="logo-container">
      <a href="index.html">
        <img class="logo" src="../img/logo.png" alt="logo">
      </a>
    </div>
  </div>
  <div class="dashboard-nav cell grid-x">
    <nav class="choicewrapper">
      <ul class="wrapper">
        <li class="page-cinema">
          <a href="#" class="gradient-fill-hover">
            <span>A</span>
            <span>l</span>
            <span>&nbsp</span>
            <span>C</span>
            <span>i</span>
            <span>n</span>
            <span>e</span>
            <span>m</span>
            <span>a</span>
          </a>
        </li>
        <li class="page-card">
          <a href="#" class="gradient-fill-hover">
            <span>C</span>
            <span>a</span>
            <span>r</span>
            <span>d</span>
            <span>&nbsp</span>
            <span>e</span>
            <span>&nbsp</span>
            <span>P</span>
            <span>r</span>
            <span>o</span>
            <span>m</span>
            <span>o</span>
          </a>
        </li>
        <li class="page-pass">
          <a href="#" class="gradient-fill-hover">
            <span>P</span>
            <span>a</span>
            <span>s</span>
            <span>s</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <nav class="loginwrapper grid-x cell align-right">
    <div class="form-search-s grid-x">
      <form class="form-search" onsubmit="event.preventDefault();" role="search">
        <label for="search">Search for stuff</label>
        <input class="input-search" type="search" id="search" placeholder="Search..." autofocus required />
        <button type="submit" class="btn-search" onclick="index.html">Go</button>
      </form>
    </div>
    <div class="profile-login">
      <a href="../login/login.html" title="Accedi / Registrati">
        <i class="fas fa-user"></i>
        <span>Login</span>
        <i class="fas fa-caret-down"></i>
      </a>
      <div class="container-login open grid-x">
        <div class="dropdown-content grid-x cell">
          <div class="container-dashboard cell d-flex auto">
            <ul>
              <li class="list-login">
                <a href="#" class="login">
                  <i class="fas fa-user"></i>
                  <span>Login</span>
                </a>
              </li>
              <li class="list-login">
                <a href="#" class="registration">
                  <i class="fas fa-square-poll-horizontal"></i>
                  <span>Registrati</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>
</nav>

内容的提问来源于stack exchange，提问作者Caterina Romano