将外部标记正确加载到多个页面中

Question

我正在处理必需的静态页面分配。 （不是我的选择）

我有一个导航，我希望可以使用几十个静态html文件。

我通过jQuery / javascript获取标记

this.setState(
   { Cart: [...this.state.Cart, ProductsJSON[productKey]] },
   () => console.log(this.state.Cart)
)

事情开始变得时髦

我加载到多个页面的标记是这样的： 我没有添加$(function () { // get navigation menu $.get('nav.html', function (data) { $('.navigation').replaceWith(data); }); }); 代码，因为我们的想法是将这些内容加载到现有的HTML网页中。

nav.html

body

我的问题是没有加载应用于<ul> <li><a href="">Home</a></li> <li><a href="">News</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> 的所有样式。 然后，为了将css样式转换为nav.html，我添加了一个nav.html标签，其味道非常糟糕，并且是我在这里寻求指导的地方。

nav.html （带头标记）

head

将相同的HTML标记加载到多个页面中的最佳做法是什么，同时异步执行并获取相同HTML标记所需的所有样式。

Answer 1

虽然＆＃34;最佳实践＆＃34;可能是客观的和意见问题，我一直在使用静态和非静态网页，对我来说，似乎最有意义并且是最干净的实现的东西是有一个可以添加到的常见的css文件所需每个页面的主要html文件的头部。

如果你想根据不同的功能区域组织你的文件，以便你有匹配的nav.html和nav.css（甚至nav.js）文件，我会查看一个捆绑工具，它将生成公共css文件（甚至常见的js文件）给你。要使用的捆绑工具取决于您用于撰写网站的技术。

希望这有用，如果你想要了解具体信息，请告诉我。