有没有办法在纯 HTML 中创建与 ASP.NET 中的主页面/内容页面类似的想法？
我想在 HTML 中创建几个页面，但我希望它们看起来都一样，但有些内容不同。有没有办法在不创建多个彼此非常相似的页面的情况下做到这一点？
【问题讨论】：
<iframes>，但我永远不会这样做。
<!--#include file="myIncludeFile.html" -->，您可以在其中执行诸如页眉和页脚之类的内容。
标签： html master-pages
//wait until the dom is loaded
$(document).ready(function () {
//adds menu.html content into any "#menu" element
$('#menu').load('menu.html');
});
参考其他一些答案，应谨慎谨慎地使用 iframe。 http://rev.iew.me/help-moving-from-iframes
http://fsvieira.com/2013/06/11/iframes-bad-for-a-website/
这里有重复的问题和答案：How to create a master page using HTML?
【讨论】：
执行此操作的简单方法是使用 server side includes 或 SSI。然而，更简单并且可能更好的解决方案是将 PHP 与 includes 一起使用。这样，您将始终拥有额外的 PHP 功能，然后再需要它。但是这两种解决方案都需要对页面进行预处理的服务器。如果您想在本地硬盘上收集页面，那么我知道的唯一解决方案已经提出iframe tag。
【讨论】：
您可以使用iframe。那将是纯粹的 html。
【讨论】：
我使用第三方 c# 表单应用程序解决了问题。
页眉和页脚不同的页面 将密钥插入所有其他页面。 (###页脚###) 用表单应用程序替换文件内容。
页脚.html
<h2>this place is footer.</h2>
default.html
<h1>Default page</h1>
bla bla bla
###footer###
结果 default.html
<h1>Default page</h1>
bla bla bla
<h2>this place is footer.</h2>
源码如下
List list = new List();
private void sourceBtn_Click(object sender, EventArgs e)
{
DialogResult result = openFileDialog1.ShowDialog(this);
if (result == DialogResult.OK)
{
sourceTxt.Text = openFileDialog1.FileName;
}
}
private void fileListSelect_Click(object sender, EventArgs e)
{
var result = openFileDialog2.ShowDialog(this);
if (result == DialogResult.OK)
{
fileList.Items.AddRange(openFileDialog2.FileNames);
}
}
private void addSourceBtn_Click(object sender, EventArgs e)
{
list.Add(new sourceKey() { filename = sourceTxt.Text, key = keyTxt.Text });
sourceTxt.Clear();
keyTxt.Clear();
sourceTxt.Focus();
sourceList.DataSource = null;
sourceList.DataSource = list;
}
private void ConvertBtn_Click(object sender, EventArgs e)
{
foreach (var filename in fileList.Items)
{
string text = File.ReadAllText(filename.ToString());
foreach (var item in sourceList.DataSource as List)
{
text = text.Replace(item.key, File.ReadAllText(item.filename));
}
File.WriteAllText(filename.ToString(), text);
}
infoLabel.Text = "Done";
}
【讨论】：
@@include('./header.html')
<!-- Content -->
<section>
<h1>Hello world</h1>
</section>
@@include('./footer.html')
选择包含重复块的最佳方法之一是使用 Gulp.js 和一些包。 gulp 是一个流行的 JavaScript 工具包，用于自动化和增强您的工作流程。
为了使用它，首先使用 yarn 或 npm 在你的项目中安装 gulp ：
yarn init
安装 gulp-file-include 插件：
yarn add gulp gulp-file-include -D
创建 gulpfile 以便能够使用 Gulp 创建任务
在 Linux 中：
touch gulpfile.js
如果您使用的是 Windows，请改用此命令：
type "gulpfile.js"
在 gulpfile.js 中导入 gulp 和 gulp-file-include。您还将创建一个变量路径来定义源路径和目标路径（构建后静态 html 文件所在的位置）：
const gulp = require('gulp');
const fileinclude = require('gulp-file-include');
const paths = {
scripts: {
src: './',
dest: './build/'
}
};
在 gulpfile.js 文件中，创建一个任务函数，负责包含 html 文件并返回静态文件：
async function includeHTML(){
return gulp.src([
'*.html',
'!header.html', // ignore
'!footer.html' // ignore
])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest(paths.scripts.dest));
}
现在将功能设置为默认值：
exports.default = includeHTML;
将包含标签添加到 index.html：
@@include('./header.html')
<!-- Content -->
<section>
<h1>Hello world</h1>
</section>
@@include('./footer.html')
运行 gulp 命令：
yarn gulp
build 文件夹将在里面创建 index.html 文件
完成:)
【讨论】：
好吧，作为一个丑陋的解决方案，试试<iframe> 标签。他们将远程页面加载到您的网站中，因此您可以像这样定义“主模板”：
...
<body>
<div id="content">
<iframe src="content1.html"></iframe>
...
现在，在content1.html 中，你可以只写内容而不用主布局。
【讨论】：
<iframe> 只是将链接页面推入自身，仅此而已。在您的内容 HTML 文件中，只需编写内容。当您想更改内容时，更改<iframe> 的src=。我从不在我的网站上这样做。如果我必须编写需要大量页面的代码，我会用 Python 编写。如果没有，我就复制粘贴几次。