javascript - 现代网站导航栏的最佳实践

Question

所以我一直在努力寻找这个问题的一个好的答案...我有很多 html 页面和一个导航栏。我想在所有页面上包含导航栏，这样有利于一致性...现在，它违背了我所学到的复制 html 代码来制作导航栏的一切。

我已经看到了这个问题的几种解决方案:

• 使用 jQuery $('nav').load('nav.html') 将导航栏代码加载到您的文档中。
• 使用 jQuery $('#content).load('content.html') 将内容加载到文档中。
• 使用 iFrame。不。(除非我应该这样做？)。
• 前两个的自然 JavaScript 变体...
• 只需用 javascript 编写整个内容并将其包含在头部中...

我使用了第一个，但它破坏了我的页面结构。我已经使用了第二个，但我在样式方面遇到了很多问题，因为我不知道脚本何时加载，如果它们延迟在 head 中，放入 body，或者它们是否包含在加载的 html 页面中，等等。

我的问题是...在所有页面上包含一致的导航栏而不重复导航栏代码的最佳实践是什么(除非这是最佳实践)。

Answer 1

这在我的问题的评论中得到了“回答”，但我想我会在这里添加它......

模板引擎提供了一种在将 HTML 文件放入托管服务器之前“生成”该文件的方法。这样您就不需要执行任何 HTML 插入，也不需要遇到奇怪的脚本加载问题。导航栏本质上是重复代码，但您不会自己编写它，模板引擎会。

我为 Nunjucks 找到的一个很好的教程可以在 here 找到。 。还有很多，但这个感觉正是我所需要的。