如何在VS Code中使用SHTML实现页眉页脚的包含？

1. 创建SHTML文件 #

• 打开VS Code，新建文件后将扩展名改为.shtml（例如index.shtml）并保存。
• 也可通过左侧资源管理器右键选择「新建文件」，输入文件名时直接带上.shtml后缀。

2. 准备页眉/页脚组件 #

创建独立的HTML组件文件存放页眉和页脚内容，比如：

• header.html（页眉内容）：

<header>
  <h1>站点标题</h1>
  <nav>
    <a href="/">首页</a> | <a href="/about">关于我们</a>
  </nav>
</header>

• footer.html（页脚内容）：

<footer>
  <p>© 2024 我的站点 版权所有</p>
</footer>

3. 在SHTML中引入组件 #

使用SSI（服务器端包含）的include指令，在主SHTML文件中插入页眉和页脚，语法示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
</head>
<body>
  <!-- 引入页眉 -->
  <!--#include virtual="/header.html" -->

  <main>
    <p>这里是页面主体内容</p>
  </main>

  <!-- 引入页脚 -->
  <!--#include virtual="/footer.html" -->
</body>
</html>

• 路径说明：virtual属性使用网站根目录相对路径；若组件与主文件在同一目录，可改用file属性，比如<!--#include file="header.html" -->，virtual适配性更强。

4. VS Code中的配置与本地预览 #

• 语法高亮：VS Code默认支持SHTML的HTML语法高亮，若需要SSI指令的语法支持，可在扩展商店搜索安装「SSI Syntax」。
• 本地预览注意事项：SSI是服务器端解析的，直接打开本地SHTML文件浏览器不会处理include指令，需借助本地服务器：
  • 用「Live Server」扩展：安装后右键SHTML文件选择「Open with Live Server」，该扩展默认开启SSI解析。
  • 用Apache/Nginx：需手动开启SSI支持：
    • Apache：在httpd.conf中启用mod_include模块，添加AddType text/html .shtml和AddOutputFilter INCLUDES .shtml。
    • Nginx：在配置文件中加入ssi on;指令，并确保文件后缀为.shtml。

5. 常见问题排查 #

• 组件不显示：检查组件文件路径是否正确、服务器是否开启SSI、组件文件是否存在。
• VS Code中SSI指令标红：安装「SSI Syntax」扩展即可解决语法提示问题。

内容的提问来源于stack exchange，提问作者Akash K