使用 Bootstrap 5：如何在沒有 jQuery 的情況下跨多個 HTML 頁面創建可重用的導航欄？

Question

使用 Bootstrap 5：如何在沒有 jQuery 的情況下跨多個 HTML 頁面創建可重用的導航欄？

（如果可能的話，我更喜歡嚴格的 JavaScript 方式。並不是真的想在我的項目中引入 JavaScript 框架。）

Layout:
 ./index.html
 ./about.html
 ./crew.html
 ./flights.html
 ./events.html

我希望每個頁面都具有相同的導航欄，這樣我就不必在每次鏈接順序更改時重復自己並修復每個頁面。

這是我的示例導航欄：

<nav class="navbar navbar-expand-xl navbar-light">
    <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#toggleMobileMenu"
        aria-controls="toggleMobileMenu"
        aria-expanded="true"
        aria-label="Toggle Navigation"
        >
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse show" id="toggleMobileMenu">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item text-center">
                <a class="nav-link" href="index.html">Home</a>
            </li>
            <li class="nav-item text-center">
                <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item text-center">
                <a class="nav-link" href="crew.html">Crew</a>
            </li>
            <li class="nav-item text-center">
                <a class="nav-link" href="flights.html">Flights</a>
            </li>
            <li class="nav-item text-center">
                <a class="nav-link" href="events.html">Events</a>
            </li>
        </ul>
    </div>
</nav>

Answer 1

根據您需要什么樣的瀏覽器支持，您可以使用模板文字（反引號）來定義您的導航。 然后使用 insertAdjacentHTML 將其放置在所有 html 頁面上您需要的位置。 如果您的頁面相當簡單，您可以在 body 標簽的 begin 后插入導航。

 const navigation = ` <nav class="navbar navbar-expand-xl navbar-light"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="true" aria-label="Toggle Navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse show" id="toggleMobileMenu"> <ul class="navbar-nav mx-auto"> <li class="nav-item text-center"> <a class="nav-link" href="index.html">Home</a> </li> <li class="nav-item text-center"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item text-center"> <a class="nav-link" href="crew.html">Crew</a> </li> <li class="nav-item text-center"> <a class="nav-link" href="flights.html">Flights</a> </li> <li class="nav-item text-center"> <a class="nav-link" href="events.html">Events</a> </li> </ul> </div> </nav> ` document.getElementById("nav-container").insertAdjacentHTML('afterbegin', navigation);

 <div id="nav-container"></div>