logo标签列表

HTML中的主页面

htmlmaster-pages
28

在纯HTML中有没有类似于ASP.NET的主/内容页面的创建方式？

我想要用HTML创建几个页面，但希望它们都看起来一样，只是某些内容不同。有没有办法做到这一点而不必创建非常相似的多个页面？

不可以没有其他编程语言的支持，例如PHP、SSI、Ruby、ASP.net、Python、Java等。 - Aaron Yodaiken
你可以把它弄得很丑，使用大量的<iframe>，但我永远不会这样做。 - Blender
不是很好，但总还有经典的服务器端包含<!--#include file="myIncludeFile.html" -->，您可以在其中添加标题、页脚等内容。 - Mikael Östberg
6个回答
10
4
简单的方法是使用服务器端包含或SSI。然而更简单，可能也更好的解决方案是使用PHP和包含。这样您就始终拥有所需的额外PHP功能。但这两种解决方案都需要服务器预处理页面。如果您想要收集页面，比如在本地硬盘上，那么我知道的唯一解决方案已经提出了iframe标签。
0
你可以使用 iframe。这将是纯HTML。
3
好的，我会编辑并放置另一个链接。但是这个具体问题的目的不是讨论w3schools的质量。 - bluefoot
0

我使用第三方C#表单应用程序解决了这个问题。

页眉和页脚不同 在所有其他页面插入密钥。 (###footer###) 使用表单应用程序替换文件内容。

footer.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>

File Content Replacer

以下是源代码

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";
}

源代码下载链接

0

使用 JavaScript Gulp 工具

就像这样： 

@@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。同时，你还需要创建一个变量 paths 来定义源路径和目标路径（即构建后静态 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 标签：

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

<!-- Content -->
<section>
  <h1>Hello world</h1>
</section>

@@include('./footer.html')

运行 gulp 命令：
yarn gulp

构建文件夹将会创建，并且里面包含 index.html 文件。

完成 :)

-1

好吧，作为一个丑陋的解决方案，可以尝试使用<iframe>标签。它们可以将远程页面加载到您的网站中，因此您可以定义一个类似于这样的“主模板”：

...
<body>
  <div id="content">
    <iframe src="content1.html"></iframe>
  ...

现在，在content1.html内，您可以直接编写内容，而无需主要布局。
如果我有两个内容页面和一个主页面，我该如何处理这两个页面？使用IFrame和硬编码的内容页面与拥有两个单独页面非常相似。我是否遗漏了什么？ - mans
3
<iframe> 只是将链接的页面直接放入其内部，没有其他功能。在您的内容 HTML 文件中，只需编写内容即可。当您想更改内容时，请更改 <iframe> 的 src=。我永远不会在我的网站上这样做。如果我必须编写需要大量页面的代码，我会使用 Python 编写。如果不需要，我会复制并粘贴几次。 - Blender
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接