7

What would be a recommended tool (works on Linux) for managing included HTML fragments like shared footers, in a directory of static HTML serving as a clickable UI prototype?

I want to be able to serve the prototype from a web directory of static content (without server-side dynamism), while easily managing the shared elements of navigation, headers, footer. Maybe even handle boilerplate page layout.

Inspiration: this question was inspired by my experience trying out the Handcraft prototyping webapp. It's HCML templating language that permit reuse of HTML with "parts" (includes) and "layouts" (masters).

Basically, something like the Dreamweaver "library segments. Something that inserts snippets (like Komodo) is not sufficient - unless it has the power to simultaneously update all files where that snippet was previously inserted.

I'm imagining something like this in my static HTML:

<html><body><div id="include_footer">The Footer</div></body></html>

And when I edit "The Footer" to read "The Better Footer" and run this tool, then other files containing a div of id="include_footer" will be updated to the latest footer.

Improve this question
5
  • Consider using a JS based include system. It allows you to pull in the fragments via JS rather than having to rely server-side. jQuery has a few plugins just for that.
    – DA01
    Commented Dec 12, 2011 at 18:11
  • 1
    Like ScatterJS? Maybe that would be sufficient. I'll give it a try.
    – Graham
    Commented Dec 13, 2011 at 8:52
  • Does it have to be truly static HTML? Or can you allow client-side templating? (javascript?)
    – peteorpeter
    Commented Dec 16, 2011 at 18:09
  • Well, I'm building a prototype as static HTML - adding templating languages, even evaluated by JavaScript, would detract from the clarity of plain HTML.
    – Graham
    Commented Dec 19, 2011 at 11:07
  • 1
    Ahh, I see. I almost never view the plain HTML source - 99.9% of the time I inspect the rendered code in webkit inspector or Firebug - but I could see that being important in some development processes.
    – peteorpeter
    Commented Dec 21, 2011 at 16:32

4 Answers 4

Reset to default
4

I'm now using Jekyll. It does exactly what I asked for in the question. Basically, it compiles my prototype from reusable parts into a serve-able static HTML form.

Jekyll supports both includes ("snippets") and layouts ("masters").

And it compiles the templated files to complete HTML files for serving up as a static prototype under Apache or even just from filesystem. Anything that's not templated is copied over unchanged.

It will even re-compile parts of the prototype as I make changes to it, eliminating the manual re-compile to preview.

Improve this answer
1

If I understand what you are trying to do, you might look at a template system like Moustache. What's great about it is you can start with client-side templates, then migrate the same templates to the server-side if and when you actually implement the protoype.

Improve this answer
1

Today there's a vast amount of static site generators offering layout templates and partials/includes.

Take a look at: https://www.staticgen.com/

I use Harp myself; it's pretty straightforward if you know HTML/CSS and a bit of Javascript - although you don't get as many built-in helper functions as in e.g. Jekyll or Hexo.

Improve this answer
0

Use an HTML editor like Komodo that supports Snippets. I've got Komodo set up to allow me to insert snippets based on the Foundation Framework. So instead of having to type out Div/container, div/row, div/four columns, etc., I can just double-click a snippet, possibly enter variables if I've set up the snippet that way, and boom.

Also, I'm assuming since you reference includes that you're building PHP pages. Install MAMP (or LAMP or WAMP, whatever OS you're using), and make sure you're saving your pages to your *AMP htdocs space. Since you've now got a local server implemented, you can use that to 'load' the end PHP page that is generated based on your code.

Improve this answer
3
  • 1
    Komodo will insert snippets, but if you change the snippet it won't change all the pages that use it. That's the idea of an include - it enables you to reuse a footer or other element and make changes to it in one place instead of every file.
    – Graham
    Commented Dec 13, 2011 at 16:45
  • So I'm running MAMP. I coded a page, took a section of it out and replaced it with <?php include("header.php");?>. Created the appropriate heaader PHP file and opened the index.php page in Chrome (it's hosted on my MAMP localhost server). It's displaying the includes as expected. So probably I'm confused about what you're trying to do...
    – Mike Earley
    Commented Dec 13, 2011 at 19:10
  • 1
    I'll rewrite the question in the morning to make it clearer. The issue is that <?php include("header.php");?> isn't valid HTML. Prototype needs to be .html not .php. Tool would need to manage shared snippets of HTML across multiple pages.
    – Graham
    Commented Dec 14, 2011 at 19:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.