Master Page In Html

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 som

Solution 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?

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

Solution 3:

You can use iframe. That would be purely html.

Solution 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 = newList();

privatevoidsourceBtn_Click(object sender, EventArgs e)
{
    DialogResult result = openFileDialog1.ShowDialog(this);
    if (result == DialogResult.OK)
    {
        sourceTxt.Text = openFileDialog1.FileName;
    }
}

privatevoidfileListSelect_Click(object sender, EventArgs e)
{
    var result = openFileDialog2.ShowDialog(this);
    if (result == DialogResult.OK)
    {
        fileList.Items.AddRange(openFileDialog2.FileNames);
    }
}

privatevoidaddSourceBtn_Click(object sender, EventArgs e)
{
    list.Add(newsourceKey() { filename = sourceTxt.Text, key = keyTxt.Text });
    sourceTxt.Clear();
    keyTxt.Clear();
    sourceTxt.Focus();
    sourceList.DataSource = null;
    sourceList.DataSource = list;
}


privatevoidConvertBtn_Click(object sender, EventArgs e)
{
    foreach (var filename in fileList.Items)
    {
        string text = File.ReadAllText(filename.ToString());
        foreach (var item in sourceList.DataSourceasList)
        {
            text = text.Replace(item.key, File.ReadAllText(item.filename));
        }
        File.WriteAllText(filename.ToString(), text);
    }
    infoLabel.Text = "Done";
}

Source Code Download Link

Solution 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 :)