Skip to content

Instantly share code, notes, and snippets.

@boertel

boertel/about.html

Created October 28, 2016 21:28
Show Gist options
  • Save boertel/b9dd4ac63d6567f8ae4cad11214671ad to your computer and use it in GitHub Desktop.
Save boertel/b9dd4ac63d6567f8ae4cad11214671ad to your computer and use it in GitHub Desktop.
Download ZIP
load-templates
Raw
about.html
<h1>About</h1>
<p>blablablablablbalba</p>
Raw
home.html
<h1>Welcome home</h1>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li><a href="/#home">Home</a></li>
<li><a href="/#about">About</a></li>
</ul>
<div id="content"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="./load.js"></script>
</body>
</html>
Raw
load.js
function loadTemplate() {
var hash = document.location.hash;
var page = hash.substring(1, hash.length);
$.ajax({
url: './' + page + '.html',
method: 'GET',
dataType: 'html',
success: function(source) {
var template = Handlebars.compile(source);
$('#content').html(template());
}
});
}
window.addEventListener('hashchange', loadTemplate);
loadTemplate();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment