Master page in HTML - html

Question

Is there any way to create a similar idea as master/content page in ASP.NET in pure HTML?
I want to create several pages in HTML, but I want that all of them look the same with some contents different. Is there any way to do this without creating several pages which are very similar to each other?

Answer 1

//wait until the dom is loaded
$(document).ready(function () {
//adds menu.html content into any "#menu" element
$('#menu').load('menu.html');
});
In reference to some of the other answers, iframes should be used carefully and sparingly.
http://rev.iew.me/help-moving-from-iframes
http://fsvieira.com/2013/06/11/iframes-bad-for-a-website/
Duplicate question here with answer: How to create a master page using HTML?

Answer 2

The simple way to do that is to use server side includes or SSI. However easier and, probably, much better solution would be usage of PHP with includes. This way you will always have additional PHP functionality then you need it. But both of this solutions require server that will preprocess the pages. If you want collection of pages, say, on a local hard drive, then only solution I know is already proposed iframe tag.

Answer 3

You can use iframe. That would be purely html.

Answer 4

I resolved with a Third party c# form application.
Header and footer different page
insert key to all other page. (###footer###)
Replace files contents with form Application.
footer.html
<h2>this place is footer.</h2>
default.html
<h1>Default page</h1>
bla bla bla
###footer###
Result default.html
<h1>Default page</h1>
bla bla bla
<h2>this place is footer.</h2>
Source Code below
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";
}
Source Code Download Link

Answer 5

Use javascript gulp tool
and it will be like this :
##include('./header.html')
<!-- Content -->
<section>
<h1>Hello world</h1>
</section>
##include('./footer.html')
One of the best ways to have the option of including repeating blocks is using Gulp.js and some packages . gulp is a popular javascript toolkit to automate & enhance your workflow .
for using it first install gulp in your project using yarn or npm :
yarn init
Install the gulp-file-include plugin :
yarn add gulp gulp-file-include -D
create gulpfile to be able to create tasks with Gulp
In linux :
touch gulpfile.js
if you are using windows use this command instead :
type "gulpfile.js"
In the gulpfile.js import gulp and gulp-file-include. you will also create a variable paths to define the path of source and the destination path (where the static html files will be after the build) :
const gulp = require('gulp');
const fileinclude = require('gulp-file-include');
const paths = {
scripts: {
src: './',
dest: './build/'
}
};
In gulpfile.js file , create a task function that will be responsible for including html files and returning static files:
async function includeHTML(){
return gulp.src([
'*.html',
'!header.html', // ignore
'!footer.html' // ignore
])
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest(paths.scripts.dest));
}
For now set function as default :
exports.default = includeHTML;
Add the include tags to index.html:
##include('./header.html')
<!-- Content -->
<section>
<h1>Hello world</h1>
</section>
##include('./footer.html')
Run the gulp command :
yarn gulp
The build folder will be created with index.html file inside
Done :)

Answer 6

Well, just as an ugly solution, try <iframe> tags. They load remote pages into your website, so you could define a "master template" like this:
...
<body>
<div id="content">
<iframe src="content1.html"></iframe>
...
Now, inside of content1.html, you could just write the content without the main layout.