HI,
Using node.js server and just started using a layout for my header.
I noticed that if I create a new page and select my header layout, there is a lot less code added to the page.
If I already have some pages which I want to use with a new layout, the existing code in the head is left in place and causes appconnect.js to be loaded twice etc.
Should I remove the head code or create a new page and copy across the server connect and content or is there a Wappler way to do this?
Also if I use layouts, should I add local storage to the layout page since that will be shared across all content pages using that layout?
Thanks.
If page created without specifying the layout:
But code in new page with layout specified when creating the page:
Although called a layout page, the layout is in fact a template. Node/Express is a template engine which enables the use of a static template file. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. A layout (template) page created by Wappler will look similar to:
<!doctype html>
<html>
<head>
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Untitled Document</title>
<link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
<script src="dmxAppConnect/dmxRouting/dmxRouting.js" defer=""></script>
</head>
<body id="template" is="dmx-app">
<div is="dmx-view" id="content">
<%- await include(content, locals); %>
</div>
<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Within the body element, you can see the variable <%- await include(content, locals); %>. This will be replaced by the content page.
When a request is made to the home page, the index page will replace the variable in the layout (template) page and the combined files will be rendered as HTML. The Routing system plays an important part in this process, because it determines the content to be pulled into the layout (template) page.
In fact, this is the closest thing to a single page app without being a SPA.
Oh! the code coloured green in the content page is for Wappler’s benefit only. This is so that the Wappler user can use all of the goodies that Wappler could otherwise not supply.
1 Like
Thanks Ben, thats makes more sense now.
So to use template pages with content pages I have already created, do you suggest creating new pages and copying the content (server connect, local storage, layout etc.) into the body tags
OR editing the existing content pages by adding the green text, moving the relevant bits from the head section to the body?
Also, should the local storage and server connect items be in the content pages or the layout page?
Thanks, Paul.
So to use template pages with content pages I have already created, do you suggest creating new pages and copying the content (server connect, local storage, layout etc.) into the body tags?
Yes because routings will also be created. Simply copy and paste the existing content into the new content (child) page.
Also, should the local storage and server connect items be in the content pages or the layout page?
Unless a component is specific to that page, all components should be included in the layout page.