如何将_layouts.cshtml转为HTML通用模板实现Web页面复用？

完全理解你的需求——不想复制粘贴通用内容到每个页面，又要摆脱Razor/CSHTML，用纯HTML实现类似_Layout.cshtml的通用布局。这里有几个实用的方案，按复杂度和适用场景分：

1. 原生JavaScript动态加载（最易上手，无服务器依赖） #

把通用的菜单、页头页脚拆成单独的HTML文件（比如common-header.html、common-footer.html），然后在每个页面用JS动态加载插入到指定位置。

举个原生JS的例子：

<!-- 在每个页面的<body>开头加这个 -->
<div id="header-container"></div>

<script>
// 加载通用页头
fetch('common-header.html')
  .then(response => response.text())
  .then(html => {
    document.getElementById('header-container').innerHTML = html;
  })
  .catch(error => console.error('加载通用内容失败:', error));
</script>

优点：不需要改服务器配置，本地就能测试；缺点：页面加载时可能会有短暂的内容闪烁（因为JS是异步加载的），可以加个加载提示或者用CSS隐藏容器直到内容加载完成。

2. 服务器端包含（SSI，推荐给有服务器控制权的场景） #

如果你的Web服务器支持SSI（大部分主流服务器如Apache、Nginx、IIS都支持），这是最优雅的方案——服务器在返回页面之前会自动把通用内容插入到页面中，前端拿到的是完整的HTML，没有JS依赖。

Apache配置： #

确保服务器开启了SSI模块，然后在页面里这样引用：

<!--#include virtual="/common-header.html" -->

注意页面后缀要改成.shtml，或者在Apache配置里让.html文件也解析SSI指令。

Nginx配置： #

在Nginx的server块里添加：

ssi on;

然后同样用<!--#include virtual="/common-header.html" -->引用，页面后缀可以是.html。

优点：无前端性能问题，加载完成就是完整页面；缺点：需要配置服务器，静态文件托管平台可能需要额外设置。

3. 静态站点构建工具（适合需要批量生成页面的场景） #

如果你的项目是静态站点，可以用Gulp、Webpack或者Eleventy这类工具，在构建阶段把通用布局注入到所有页面中，生成最终的独立HTML文件。

比如用Gulp的gulp-file-include插件：

1. 安装插件：npm install gulp-file-include --save-dev
2. 写Gulp任务：

const gulp = require('gulp');
const fileinclude = require('gulp-file-include');

gulp.task('html', function() {
  return gulp.src('src/*.html')
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('dist'));
});

3. 在页面中引用通用内容：

@@include('./common-header.html')

优点：构建后每个页面都是独立完整的HTML，部署方便；缺点：需要学习构建工具，适合有一定前端工程化基础的场景。

4. 不推荐：iframe #

虽然<iframe>也能加载通用内容，但会带来很多问题：样式隔离、路由跳转异常、响应式适配麻烦，除非是非常简单的静态内容，否则不建议用。

总结一下：如果能改服务器配置，优先选SSI；如果是纯静态无服务器权限，用JS动态加载；如果需要批量生成页面，用构建工具。

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