制作可变导航栏

Question

如何制作可以在多个页面上使用并且可以轻松更改的导航栏？

我的意思是，如果您有一个由 HTML 代码组成的大型网站并且您想要更改它的导航栏，您将不得不转到每个页面并进行更改，对吗？

所以我想问的是，如何制作一个可以轻松更改的多页导航栏？

我做过的事情是使用 JavaScript 创建导航栏。在 HTML 中，我有一个 ID 为 navbar-slot 的 <div> 元素。然后在 Javascript 中，我编写代码以在导航栏中填充链接和所有内容。

var navbar = document.createElement("nav");
var list = document.createElement("ul");

var homeSlot = document.createElement("li");
var home = document.createElement("a");
home.setAttribute("href","index.html");
home.innerHTML = "Home";
homeSlot.appendChild(home);

var aboutSlot = document.createElement("li");
var about = document.createElement("a");
about.setAttribute("href","about.html");
about.innerHTML = "About";
aboutSlot.appendChild(about);

list.appendChild(homeSlot);
list.appendChild(aboutSlot);

navbar.appendChild(list);

document.getElementById("navbar-slot").appendChild(navbar);

但后来我想到，是的，虽然这比“手动更改所有内容”方法容易得多，但在使用 Bootstrap 翻新导航栏时仍然很难阅读。那么，有没有更简单的方法呢？

Answer 1

简单地说，使用反引号创建一个字符串并将其保存到导航栏槽的 innerHTML 中！其实很简单！

const code = `
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="index.html">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
            aria-label="Toggle navbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="nabar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item dropdown">
                    <a class="nav-link text-light dropdown-toggle" id="navbarDropdown" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        Something
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Something</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>`;

document.getElementById("navbar-slot").innerHTML = code;

制作可变导航栏

Making a changeable navbar

navbar