I am attempting to templatize my webpages using Qute. I have a main webpage template, that is included in and takes data from the specific template for the page.
My problem is that the data given in the specific template can't seem to be referenced outside of {#insert val}...
. For instance, my title and page content work fine, as those are regular inserts, but I would like to pass lists and flags to my main template to show data in a more dynamic way:
Main page template:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="shortcut icon" href="/res/media/logo.svg"/>-->
<title>{#insert title}{/} - Open QuarterMaster</title>
<!-- CSS -->
<link rel="stylesheet" href="/res/style/bootstrap-adjust.css">
<link href="/lib/bootstrap/bootstrap-5.1.3-dist/bootswatch.litera.min.css" rel="stylesheet">
<link rel="stylesheet" href="/lib/fontawesome-free-5.15.4-web/css/all.css">
<link rel="stylesheet" href="/lib/spin.js/spin.css">
<link rel="stylesheet" href="/res/css/main.css">
{#if styleSheets??}
{#for styleSheet in styleSheets}
<link rel="stylesheet" href="{styleSheet}">
{/for}
{/if}
<style>
{#insert pageStyle}/* No page css */ {/}
</style>
</head>
<body>
<span id="pageInfo" data-page-initted="false" data-auth-type="{config:['service.authMode']}"></span>
<!-- nav here -->
{#if showNavbar}
<!-- TODO:: navbar -->nav
{/if}
<div id="mainContainer" class="container">
<div id="messageDiv">
</div>
<main role="main">
{#insert pageContent}<h1>No body!</h1>{/}
</main>
<hr/>
</div>
<script src="/lib/jquery-3.6.0/jquery.min.js"></script>
<script src="/lib/bootstrap/bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
<script src="/lib/js-cookie-3.0.1/js.cookie.min.js"></script>
<script src="/res/js/main.js"></script>
{#if styleSheets??}
{#for script in scripts}
<script src="{script}"></script>
{/for}
{/if}
<script>
{#insert pageScript}{/}
</script>
</body>
</html>
index page template:
{#include webui/mainWebPageTemplate}
{#title}Login{/title}
{#pageStyle}/* ? */{/pageStyle}
{#showNavbar}false{/showNavbar}
{#pageContent}
<h1>
{config:['service.nameFull']}
</h1>
<ul>
<li><a href="/openapi-ui/index.html">OpenAPI</a></li>
<li><a href="/q/health-ui/index.html">Health UI</a></li>
<li><a href="/q/dev/">Dev UI</a></li>
</ul>
{/pageContent}
{/include}
A specific issue I am seeing is in the {#if showNavbar}
statement, which currently gives a Entry "showNavbar" not found in the data map in expression {showNavbar}
. I have seen how the ??
syntax seems to work, but it's hard to apply when the value never actually makes it in.
Any ideas?
It is not possible to define a nested block that does not reference an {#insert}
section from the included template. In other words, you could only use {#insert showNavbar}
in the main page template.
However, you can use the showNavbar
as a parameter, i.e. {#include webui/mainWebPageTemplate showNavbar=true}
and skip the {#showNavbar}false{/showNavbar}
part.