https://github.com/cablehead/noplate
A small experiment for designers who want to make a quick static html site, with simple template reuse, without having to run a full blown server side scripting solution.
https://github.com/cablehead/noplate
Last synced: 2 months ago
JSON representation
A small experiment for designers who want to make a quick static html site, with simple template reuse, without having to run a full blown server side scripting solution.
- Host: GitHub
- URL: https://github.com/cablehead/noplate
- Owner: cablehead
- License: mit
- Created: 2011-01-11T23:50:52.000Z (over 14 years ago)
- Default Branch: master
- Last Pushed: 2011-01-19T09:05:36.000Z (over 14 years ago)
- Last Synced: 2025-03-25T05:05:47.404Z (2 months ago)
- Language: JavaScript
- Homepage: http://cablehead.github.com/noplate
- Size: 316 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: MIT-LICENSE.txt
Awesome Lists containing this project
README
NoPlate
=======
NoPlate is a small experiment for designers who want to make a quick static
html site, with simple template reuse, without having to run a full blown
server side scripting solution.
Check out the hosted [demo](http://cablehead.github.com/noplate/)!
It allows you to define a base template, which has placeholders blocks. The
contents of these placeholders can be filled dynamically by external files
which contain html fragments. Virtual addresses are maintained as links are
navigated. These virtual addresses can be linked to directly and allow the
browser history and reload buttons to be utilized. The linking structure is
designed to be as SEO friendly as possible. External fragments are cached so
they only need to be loaded once. You can include *<script>* snippets in
external files. These snippets will get rerun every time that address is
navigated to.
NoPlate requires [jQuery](http://jquery.com/), [jQuery
Address](https://github.com/asual/jquery-address) and the noplate.js to be
included in your html file. For convenience a recent copy of [jQuery
Address](https://github.com/asual/jquery-address) is included in the
repository.
To get started, create the initial landing page for your site. Then add these headers.
Identify blocks of markup which should change as links are navigated. Give the
containing element of each of these blocks an id, and the class
*noplate-block*:
Home Page
Hi, welcome to my website.
You can define any number of these blocks.
You can create links to files which contain html fragments to fill these blocks
by setting a link's target to *_noplate*. For example, this is how you link to
an external template *bio.html*:
External files simply define elements with ids that match the blocks to be replaced:
About Me
In case someone links directly to an external file, you can place a redirect at
the bottom of the fragment file for that page's virtual address. Give the
script the class *noplate-skip* so it won't be run when it's link to by
noplate. Here's an example for the bio page:
window.location.href='./#/bio'
Just watch, do to issues with most browsers handling of the [Same origin
policy](http://en.wikipedia.org/wiki/Same_origin_policy) NoPlate will only work
when your files are served over http.