Question

例如，如果我正在构建带有将在网站的每个页面上显示的菜单的页面标题，并且是否以及何时我想对每个页面上的菜单进行更改，是否可以实现此目的在每个页面上进行更改而不必编辑每个HTML页面？

假设我的菜单有5个标签，以后我想添加第6个标签或删除一个标签，有没有一种有效的方式来执行此操作而不必手动编辑每个页面上的HTML？

Answer 1

HTML 本身没有提供这样的机制，尽管SGML是最初指定HTML元素词汇的语言，而SGML是{em {3}}。使用SGML实体，通常会创建一个仅包含菜单的SGML文件，然后从多个单独的页面内容文件中提取该文件：

<!-- content of menu.sgml file -->
<nav>
  <ul>
    <li><a href="about.html">About</a></li>
    <li><a href="blog.html">Blog</a></li>
    <!-- ... further menu items -->
  </ul>
</nav>

<!-- content of page.sgml pulling-in menu.sgml -->
<!DOCTYPE html [
  <!-- this declares the "menu" entity -->
  <!ENTITY menu SYSTEM "menu.sgml">
]>
<html>
  <head>
    <title>Menu demo</title>
  </head>
  <body>
    <!-- this pulls-in menu.sgml as if it were part
         of page.sgml directly --> 
    &menu
    <main>
      <h2>Heading</h2>
      <p>Main content of your page</p>
    </main>
  </body>
</html>

现在，您只需要编辑menu.sgml，并在引用menu.sgml的任何页面文件中使更新的菜单内容始终保持最新。您甚至可以省去menu的声明（以及整个DOCTYPE文档序言），因为SGML将&menu实体引用解析为与引用文件位于同一目录中的该名称的文件默认情况下。

注意：浏览器未实现SGML。要在浏览器中（和/或在使用node.js时在服务器端）使用SGML，可以使用sgmljs.net SGML解析器/ lib。有关相关实体技术的讨论，请参见entities/entity references。

常用的服务器端模板库（例如Jade，pug，车把，胡须等）都有自己的机制，称为 partials 或 includes 以获得更多功能或不如SGML一般实体。

Answer 2

如果您的页面也使用PHP，则可以在其中的include语句的帮助下将其添加。

否则，这是一个JavaScript解决方案：

menu.html

<a href="a.html">Start</a><br>
<a href="b.html">Page 2</a><br>
<a href="c.html">Page 3</a><br>

script.js

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
}
</script>

您的“普通”文件

<div w3-include-html="menu.html"></div> <!-- put that line where you want to include the HTML. -->

<script>
includeHTML();
</script> <!-- Put that at the end of your file. -->

从这里：https://www.w3schools.com/howto/howto_html_include.asp

在多个页面上批量编辑HTML？

2 个答案: