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



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

我看到了几个解决这个问题的方法:

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

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

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

这是"回答";在我的问题评论中,但我想我会把它添加到这里。。。

模板引擎提供了一种方法;生成";一个HTML文件,然后将其放在托管服务器上。这样一来,您就不需要进行任何HTML插入,也不需要出现奇怪的脚本加载问题。导航栏本质上是重复代码,但你不会自己写,模板引擎会。

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

最新更新