HTML 网站页面添加相同 SSI 代码的简单方法

假设你的网站有三个页面，分别是 index.html、about.html 和 contact.html。你想在每个页面中都加入一个相同的 SSI (Server Side Includes) 代码。

首先，创建一个名为 header.html 的文件，其中包含你想要在每个页面中显示的代码，比如导航栏、页眉等。

<!-- header.html -->
<nav>
  <ul>
    <li><a href='index.html'>Home</a></li>
    <li><a href='about.html'>About</a></li>
    <li><a href='contact.html'>Contact</a></li>
  </ul>
</nav>

然后，在每个页面中，使用 SSI 的 include 指令引入 header.html 文件的内容。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
</head>
<body>
  <!--#include virtual='header.html' -->
  
  <h1>Welcome to the Home Page</h1>
  
  <p>This is the content of the home page.</p>
</body>
</html>

<!-- about.html -->
<!DOCTYPE html>
<html>
<head>
  <title>About</title>
</head>
<body>
  <!--#include virtual='header.html' -->
  
  <h1>About Us</h1>
  
  <p>This is the content of the about page.</p>
</body>
</html>

<!-- contact.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Contact</title>
</head>
<body>
  <!--#include virtual='header.html' -->
  
  <h1>Contact Us</h1>
  
  <p>This is the content of the contact page.</p>
</body>
</html>

在上述示例中，我们使用了的 SSI 指令来引入 header.html 文件的内容。这样，每个页面都会在相同的位置显示相同的导航栏内容。

请注意，SSI 需要在服务器上启用，并且服务器必须能够解析 SSI 指令。如果你在本地开发，你可能需要在本地服务器上进行配置或使用支持 SSI 的服务器软件。