-
Notifications
You must be signed in to change notification settings - Fork 15
Status pages
alangrafu edited this page Jun 30, 2012
·
4 revisions
Very often you will want to have a custom page when an error (specially a 404 HTTP status code) is returned. Since Version 20120630, it is possible to create pages (processed by Haanga) that are returned along with the specific status code.
- Create a new directory
components/status - In that directory create a file with the number of the error and ".template" as an extension, e.g.,
404.template - Include HTML and Haanga tags in that file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LODSPeaKr Basic Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="{{lodspk.home}}css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
.wait{
background-image:url('{{lodspk.home}}img/wait.gif');
background-repeat:no-repeat;
padding-right:20px;
background-position: right;
}
</style>
<link href="{{lodspk.home}}bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="{{lodspk.home}}js/jquery.js"></script>
<script type="text/javascript" src="{{lodspk.home}}js/bootstrap.min.js"></script>
<script type="text/javascript" src="{{lodspk.home}}js/bootstrap-typeahead.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.typeahead').typeahead({
source: function (typeahead, query) {
$('.typeahead').addClass('wait');[]
return $.get('{{lodspk.home}}search/'+encodeURIComponent(query), { }, function (data) {
$('.typeahead').removeClass('wait');[]
return typeahead.process(data);
}, 'json');
},
onselect: function (obj) {
$('.typeahead').attr('disabled', true);
window.location = obj.uri;
}
});
});
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="{{lodspk.home}}">LODSPeaKr</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="{{lodspk.home}}">Home</a></li>
<li><a href="{{lodspk.home}}classes">Classes</a></li>
<li><a href="{{lodspk.home}}namedGraphs">Named Graphs</a></li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" data-provide="typeahead" class="typeahead search-query span2" placeholder="Search"/>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1 style="font-size:100px; padding-top:40px; padding-bottom:40px">Error 404</h1>
<p style="font-size:30px;line-height:150%">You requested <strong>{{uri}}</strong> but that is a resource LODSPeaKr couldn't find. Please check the spelling of the URI or report it to the system adminsitrator.</p>
</div>
</body>
</html>
- Learn more about Filters in LODSPeaKr
- Learn how to Change root page
- Understand how Modules work in LODSPeaKr