Layout and content pages for pure html

Question

I have worked on several ASP.NET applications recentely, and I was simply fascinated by the simplicity of it's HTML layouting.

Basiccaly there is one layout file, in which you write all the static HTML, CSS, JS, or really anything that will stay the same on all pages. Then, there are content pages, in which you only write the content of the pages.

So, for example you have an about.cshtml file that looks like this:

<h1>My name</h1>
<p>I am a junior web developer... etc</p>
<p>Contact me at example@gmail.com</p>

That's all the information needed for the about content page, when requested it will be inserted in the layout page.

So, my question:

Are there any ready-to-use tools to make this happen via html, javascript or php? I found myself implementing it via ajax calls, but that really is just a waste of resources, having to async load all the html files I have.

The system you are looking for is called `templates`. There are various implementations and ready-to-use variations of it, just use your good old friend google... — luk2302, Jun 26 '13 at 09:33
you can also try shtml http://www.computerhope.com/jargon/s/shtml.htm — Shinov T, Jun 26 '13 at 09:38

Nick R · Accepted Answer · 2013-06-26T09:55:58.037

For pure HTML, you could go down the route of using a static site generator. For example:

In Pelican you have a base.html template, which contains everything that you want to appear on all pages, so the header and footer etc (These can also be called .header.html and then referenced in the main.html template.

Page content is written in Markdown, and put into folders called posts or pages, and then you run a generate command, and it will output all the html for you.

And pages can be written like this:

{% extends "base.html" %}
{% block title %}{{ page.title }}{%endblock%}
{% block content %}
    <h1>{{ page.title }}</h1>
    {% import 'translations.html' as translations with context %}
    {{ translations.translations_for(page) }}

    {{ page.content }}
{% endblock %}

So it extends the base.html template.

Further reading:

What's the difference between Pelican and Jekyll? Is Pelican _better_ in any way? — PeterInvincible, Jun 26 '13 at 09:51
They both do pretty much the same thing, although I've only really used Pelican personally, it does take a few hours to read through the documentation and get to grips with the templates etc, but I think it's definitely worth it. A full guide for getting up and running - https://github.com/getpelican/pelican/blob/master/docs/getting_started.rst — Nick R, Jun 26 '13 at 09:58

score -1 · Answer 2 · answered Jun 26 '13 at 09:35

-1

Check out Model–view–controllers

answered Jun 26 '13 at 09:35

Dusty

1,053
2
11
24

Layout and content pages for pure html

2 Answers2