css - Web 开发中的可重用模块

Question

只是在寻找一些大局的开发/设计建议。我正在寻找使用 Bootstrap 4 作为 CSS 代码库来设计一个网站，以帮助进行网站设计。是否有一个简单的框架，我创建的东西可以以模块化的方式应用？那么，如果我在中心位置更改 NavBar，就不需要查看站点中的每个页面了吗？为了以这种方式编码，我应该学习什么，而不是将我的 HTML 复制并粘贴到我创建的每个页面。

谢谢!

Answer 1

如果您不熟悉后端编码，或者您无法访问它，您可能需要考虑使用 Javascript。

在您的源代码中，您将在 <nav 之间移动所有内容> 和 </nav>到一个单独的来源(我们称之为 navigation.html)。使用 Javascript，您可以在加载页面时加载 navigation.html。

在(不久的)将来，HTML import可能会可用。

window.onload = () => {
  nav = document.getElementsByTagName("nav")[0]; // First nav element in the document
  fetch('navigation.html')    // Modern browsers only
    .then(function(html) {    // Receive navigation.html content
      nav.append(html);       // Insert content of navigation.html into <nav></nav>
    });
}