Header and Footer Templates
The Hashtag Framework automaticly includes pages named header.htmx or footer.htmx in the same directory as the requested page.
Header and Footer content is merged with the page content before it is processed.
The /basics/ directory uses header and footer pages that simply include the header and footer from the / root directory.
Header File content for current directory: /basics/header.htmx
<# include "/header" #>
Footer File content for current directory: /basics/footer.htmx
<# include "/footer" #>
Included Header File content: /header.htmx
<!doctype html> <# start timer #> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="mike@hashtagfoundation.org"> <meta name="description" content="Build Acceptance Test for the Hashtag Framework"> <meta name="keywords" content="hashtag framework,hashtag markup,hashtag foundation"> <title>Hashtag Framework BAT</title> <link rel="shortcut icon" href="/favicon.ico"> <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" media="all"> <link rel="stylesheet" type="text/css" href="/css/bootstrap-theme.min.css" media="all"> <link rel="stylesheet" type="text/css" href="/css/jquery.dataTables.min.css" media="all"> <link rel="stylesheet" type="text/css" href="/css/main.css" media="all"> <script type="text/javascript" charset="utf-8" src="/js/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="/js/jquery.dataTables.min.js"></script> <!--[if lt IE 9]> <script type="text/javascript" charset="utf-8" src="/js/html5shiv.min.js"></script> <script type="text/javascript" charset="utf-8" src="/js/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default"> <a class="pull-left" href="/"><img src="/images/hashtag-bat.png" class="navbar-bat"></a> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav text-center"> <li><a href="/"> <div class="navbar-icon"> <img src="/images/home.png" height="28"> </div>Home</a> </li> <li><a href="https://github.com/hashtagfoundation/BAT" target="_blank"> <div class="navbar-icon"> <img src="/images/github.png" height="28"> </div>Source</a> </li> <li><a href="https://github.com/hashtagfoundation/BAT/issues" target="_blank"> <div class="navbar-icon"> <img src="/images/issues.png" height="28"> </div>Issues</a> </li> </ul> <form method="get" action="/search" role="search" class="nav navbar-form navbar-right"> <div class="input-group"> <input type="text" name="q" value="<#[request.q as html]#>" placeholder="Search" class="form-control" id="nav-search"> <span class="input-group-btn"> <button class="btn btn-default" type="submit"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> <span class="sr-only">Search</span> </button> </span> </div> </form> <div class="nav navbar-nav visible-xs-block"> <ul class="table-of-contents"> <div><img src="/images/contents.png"></div> <li><a href="/#mini-apps">Example Mini-Apps</a></li> <li><a href="/#variables">Using Variables</a></li> <li><a href="/#contexts">Applying Contexts</a></li> <li><a href="/#basics">Framework Basics</a></li> <li><a href="/#markup">Markup Basics</a></li> <li><a href="/#conditionals">Using Conditionals</a></li> <li><a href="/#loops">Using Loops</a></li> <li><a href="/#lists">Using Lists</a></li> <li><a href="/#forms">Using Forms</a></li> <li><a href="/#uploads">Handling File Uploads</a></li> <li><a href="/#checklist-forms">Using Checklist Forms</a></li> <li><a href="/#google-api">Using Google APIs</a></li> <li><a href="/#google-sheets">Using Google Sheets</a></li> <li><a href="/#google-docs">Using Google Docs</a></li> <li><a href="/#google-drive">Using Google Drive</a></li> <li><a href="/#email">Sending Email Messages</a></li> <li><a href="/#sms">Sending SMS Messages</a></li> <li><a href="/#call">Calling External APIs</a></li> <li><a href="/#php">Using PHP</a></li> </ul> </div> </div> </div> </nav> <div class="container"> <!-- END header.htmx -->
Included Footer File content: /footer.htmx
<!-- START footer.htmx --> </div> <footer class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-4 pull-left footer-icon-group"> <div class="footer-icon"> <a href="/"><img src="/images/home.png"><br>Home</a> </div> <div class="footer-icon"> <a href="https://github.com/hashtagfoundation/BAT" target="_blank"> <img src="/images/github.png"><br>Source </a> </div> <div class="footer-icon"> <a href="https://github.com/hashtagfoundation/BAT/issues" target="_blank"> <img src="/images/issues.png"><br>Issues </a> </div> </div> <div class="col-xs-12 col-sm-4 visible-xs footer-search"> <form method="get" action="/search" role="search"> <div class="input-group"> <input type="text" name="q" class="form-control" value="<#[request.q as html]#>" placeholder="Search"> <span class="input-group-btn"> <button class="btn btn-default" type="submit"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> <span class="sr-only">Search</span> </button> </span> </div> </form> </div> <div class="col-xs-12 col-sm-6 pull-right text-right text-nowrap footer-stat-group"> <div>processed in <# print timer #></div> <div>peak memory usage: <?php echo number_format(memory_get_peak_usage(true), 0, '.', ','); ?> bytes </div> </div> </div> </footer> <script type="text/javascript" charset="utf-8" src="/js/bootstrap.min.js"></script> </body> </html>
The Basics section provides an introduction to development with the Hashtag Markup Language using the Hashtag Framework.
