html网站的布局？答案

【问题标题】：Layout for html site?html网站的布局？
【发布时间】：2021-02-11 16:10:28
【问题描述】：

我正在使用 HTML、CSS、JS（当然还有 Jquery）、VueJS 和 Bootstrap 构建一个网站。我想知道是否有办法制作某种可以反复重用的“布局”文件？我不想每次创建新页面时都复制粘贴顶部栏的所有 HTML，或者必须浏览每个页面并更新该代码。我尝试使用带有 javascript 的标签将不同的 HTML 文件（内容）放入“布局”文件中，但我在格式化时遇到了问题。我应该继续沿着这条路线走吗？还有其他更简单的方法吗？

如果有一种类似于 blazor 的方法，您可以编写一些 HTML，然后执行 @Body，那就太好了。

【问题讨论】：

this 能回答你的问题吗？
您可以根据您的编辑器使用 sn-ps。就像 vscode 允许你制作可以用 !HTML 触发的 sn-ps
Vue 应该允许您创建一个在所有页面上使用的基本模板：vuejsdevelopers.com/2020/02/24/…

标签： javascript html css

【解决方案1】：

我最终通过使用 Jquery 制作了一个 SPA。 index.html 文件包含我的导航栏，然后将内容放入由单独的 page.html 文件填充的“内容”div 中。您所要做的就是创建一个 page.html 文件，然后转到 site.com/#page，路由器会处理其他所有事情。此代码还需要在页面加载时运行..

$(window).on("hashchange", function ()
 {     
   var page = window.location.hash;     
   console.log(page.substring(1));   
  
   $.get(page.substring(1) + ".html", function (pageContent) {       
   $("#content").html(pageContent);     
   });  
});

【讨论】：