Oct 21, 2021 Update: Since the old template engine has been replaced by a new, more powerful and flexible template engine, content of this page needs to be updated. But the concept and idea are the same.
<html lang="{{project.langCode}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="{{page.pageKeywords}}">
<meta name="description" content="{{page.pageDescription}}">
<meta name="author" content="{{page.author}}">
<meta name="generator" content="{{project.generatorName}}">
<title>{{page.title}}</title>
<!-- Bootstrap core CSS -->
<style class="anchorjs"></style>
<link href="{{page.relativeSiteRoot}}/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="{{page.relativeSiteRoot}}/css/docs.min.css" rel="stylesheet">
<link href="{{page.relativeSiteRoot}}/css/template-custom.css" rel="stylesheet">
{{#page.favicon}}
<link rel="shortcut icon" href="{{{page.favicon}}}">
{{/page.favicon}}
<meta name="theme-color" content="#563d7c">
{{#project.googleAnalyticsTrackingId}}
<script>
window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date;
ga('create', '{{project.googleAnalyticsTrackingId}}', 'auto');
ga('send', 'pageview');
</script>
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
{{/project.googleAnalyticsTrackingId}}
{{#page.pageInlineStyles}}
{{{page.pageInlineStyles}}}
{{/page.pageInlineStyles}}
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
{{#page.siteLogo}}
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Logo">
<img src="{{page.siteLogo}}">
</a>
{{/page.siteLogo}}
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
{{#page.mainMenu}}
{{#menuList}}
<li class="nav-item {{#menuItemsLevel2}}dropdown{{/menuItemsLevel2}}">
<a class="nav-link {{#menuItemsLevel2}}dropdown-toggle{{/menuItemsLevel2}} {{#isCurrentPageUnderThisMenuItem}}active{{/isCurrentPageUnderThisMenuItem}}" href="{{menuLink}}" {{#menuItemsLevel2}}data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"{{/menuItemsLevel2}}>
{{menuCaption}}
</a>
{{! First level submenu items }}
{{#menuItemsLevel2}}
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
{{#menuList}}
<li {{#menuItemsLevel3}}class="dropdown-submenu"{{/menuItemsLevel3}} data-MenuLevel="{{Level}}">
<a class="dropdown-item {{#menuItemsLevel3}}dropdown-toggle{{/menuItemsLevel3}}" href="{{menuLink}}">
{{menuCaption}}
</a>
{{#menuItemsLevel3}}
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
{{! Second level submenu items }}
{{#menuList}}
<li data-MenuLevel="{{Level}}">
<a class="dropdown-item" href="{{menuLink}}">
{{menuCaption}}
</a>
</li>
{{/menuList}}
</ul>
{{/menuItemsLevel3}}
</li>
{{/menuList}}
</ul>
{{/menuItemsLevel2}}
</li>
{{/menuList}}
{{/page.mainMenu}}
</ul>
</div>
{{#project.mainNavHasRightSideButtons}}
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
</ul>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/download/">Download</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/buy/">Buy</a>
{{/project.mainNavHasRightSideButtons}}
</header>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
{{#if page.pageLevel, ">", 1}}
{{#page.siblingMenuItems}}
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav">
<div class="bd-toc-item active">
<ul class="nav bd-sidenav">
{{#menuList}}
<li class="{{#isCurrentPageUnderThisMenuItem}} active bd-sidenav-active{{/isCurrentPageUnderThisMenuItem}}">
<a href="{{menuLink}}" >
{{menuCaption}}
</a>
</li>
{{/menuList}}
</ul>
</div>
</nav>
</div>
{{/page.siblingMenuItems}}
{{/if}}
{{#page.hasPageTableOfContent}}
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#compiled-css-and-js">toc-item1</a></li>
<li class="toc-entry toc-h2"><a href="#source-files">toc-item2</a></li>
<li class="toc-entry toc-h2"><a href="#package-managers">toc-item3</a>
<ul>
<li class="toc-entry toc-h3"><a href="#npm">toc-subitem1</a></li>
<li class="toc-entry toc-h3"><a href="#yarn">toc-subitem2</a></li>
<li class="toc-entry toc-h3"><a href="#rubygems">toc-subitem3</a></li>
</ul>
</li>
</ul>
</div>
{{/page.hasPageTableOfContent}}
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
{{{page.pageContent}}}
</main>
</div>
</div>
<footer class="text-muted bg-light">
<div class="container">
<p> </p>
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>
{{project.copyrightDescription}}
{{#page.isHomePage}}
<a style="font-size: 9pt" href="{{{project.GeneratorBacklink}}}">{{project.GeneratorBacklinkCaption}}</a>
{{/page.isHomePage}}
</p>
</div>
</footer>
<script src="{{page.relativeSiteRoot}}/js/jquery-3.3.1.slim.min.js"</script>
<script>window.jQuery || document.write('<script src="{{page.relativeSiteRoot}}/js/jquery-slim.min.js"><\/script>')</script>
<script src="{{page.relativeSiteRoot}}/js/bootstrap.bundle.min.js"></script>
<script src="{{page.relativeSiteRoot}}/js/docs.min.js"></script>
<script src="{{page.relativeSiteRoot}}/js/template-custom.js"></script>
<audio controls="controls" style="display: none;"></audio>
</body>
</html>