如何在整个站点中重用 HTML答案

【问题标题】：How to reuse HTML across entire site如何在整个站点中重用 HTML
【发布时间】：2022-01-21 04:27:18
【问题描述】：

我正在使用 HTML 和 Bootstrap 制作标题，我希望标题出现在我网站的所有页面上。有没有办法做类似于 CSS 样式表但不是 CSS 而是重用 HTML 的方法？

【问题讨论】：

如果您使用像 PHP 这样的服务器端脚本语言，您可以在多个文件中包含 HTML 的标头 sn-p。
我只使用 HTML、CSS、Bootstrap、JS 和 jQuery，没有服务器端语言（据我所知）
看看这个问题：stackoverflow.com/questions/676394/…
Include another HTML file in a HTML file的可能重复
鉴于您正在学习，我建议您使用 Angular 或 React。当你学习 HTML CSS 时……你会意识到使用上面提到的框架会为你节省很多时间。

标签： html twitter-bootstrap

【解决方案1】：

我认为最简单的方法是使用 jQuery。

参见 jQuery 文档here

一个.html：

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#header").load("two.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="header"></div>
  </body> 
</html>

两个.html：

<p> Put your header in here </p>

【讨论】：

【解决方案2】：

如果不想存储jquery，可以使用CDN

<html> 
  <head> 
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>$(document).ready(function () { $("header").load("assets/header.html"); });</script>
  </head> 

  <body> 
     <header></header> 
  </body> 
</html>

【讨论】：

【解决方案3】：

Javascript 开启：{% extends "xxx.html" %}

【讨论】：

【解决方案4】：

您可以使用<iframe> 更改显示的内容，并且只编码周围的页眉/页脚/等。只有一次。使用它们似乎有一些不安的感觉，所以在我承诺之前我会对此进行一些研究。

HTML include 是您也可以尝试的最新功能。否则，这将是很好的老式ctrl-cctrl-v。

【讨论】：

真的，复制/粘贴？维修的噩梦！一个好的开发者是一个懒惰的开发者......