A lightweight HTML5 single-page website using jQuery templating to switch content
- A server for local development (I recommend node.js http-server because it's fast and easy)
- A text editor or your preferred IDE
- A browser that renders Javascript
Clone the repo locally, navigate to the repo folder, fire up your web server, view in the browser, edit in your IDE
The initial version has no styling or templating; this is meant to be as bare a repo as possible while still maintaining simple HTML5 standards, semantic elements, and a simple div to switch content out on-click of nav elements. I have included several pages for demonstration.
All the actual functional code is inside index.html
The script at the bottom of the index page does three things:
- sets the initial template to
pages/main.html - sets up the header tag to load
pages/main.htmlif clicked anywhere - loops through the nav divs to get their ids, then loads the template with the matching name inside the
pagesdirectory
<script>
$('#content-container').loadTemplate('pages/main.html');
$('header').click(function(){
$('#content-container').loadTemplate('pages/main.html');
})
$('nav').children().each(function() {
$(this).click(function() {
$('#content-container').loadTemplate('pages/' + $(this).attr('id') + '.html');
});
});
</script>
To add a page, create a new div inside the nav tags with id="pagename", then create a template at pages/pagename.html.
<nav>
<div id="main">Home</div>
<div id="about">About Us</div>
<div id="portfolio">Portfolio</div>
<div id="contact">Contact</div>
</nav>
To delete a page, delete both the div in index.html, and the template inside the pages directory.
To change a page, change the value of the id in its div, and change the name of the template inside the pages directory.
As long as the id and the template name inside the pages directory are the same, the templating will work.
Content is loaded into the article tag inside the div with id="content-container"
<article>
<div id="content-container"></div>
</article>
Coming soonish
FTP or your choice of deploy process - this is meant to be a vanilla install with all working parts in tact, without a strong opinion about deployment or environment setup
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
We use SemVer for versioning. For the versions available, see the tags on this repository.
- Kate Klemp - Initial work - kateklemp
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details