Templates

The structure of themes in Namaskar is very simple.
In the assets directory there is the html files for the theme. you will not have to change them.
you can change the main.css and main.js file when needed.

Template tags

CMS uses a simple template system that includes the following tags:

Variables

Some important variables are defined in the in the settings.ini file :

[site] name: "Qwwwest" domain: "qwwwest.com" root: "/" logo: "media/qwwwest-logo.png" language: "en" ajaxify: true bgcolor: "#00000000" [site.menu] main: [ { label : "About", url : "about"}, { label : "Skills", url : "skills"}, { label : "Portfolio", url : "portfolio"}, { label : "Namaskar", url : "namaskar"} ]

and are available in the template as :

<html lang="{= site.language}"> ... <title>{= page.title}</title> ... <img src="http://qwwwest.com/{= site.logo} ">

Access to the elements of the array is done by a dot character.
a page variable is also available in the template.

Conditions

{if page.title } <title>{= page.title}</title> {else} <title>{= site.name}</title> {/if}

Loops

for example, the main menu in settings.ini :

[site.menu] main: [ { label : "About", url : "about"}, { label : "Skills", url : "skills"}, { label : "Portfolio", url : "portfolio"}, { label : "Namaskar", url : "namaskar"} ]

is rendered with this code:

<div class="navbar-nav"> {foreach item in $attributes[1]} <a class="nav-link{if item.active} active{/if}" href="http://qwwwest.com/{= item.url}">{= item.label}</a> {/foreach} </div>

Include other template files in the same folder as index.html

<html> <body> {partial header} <main> <p>Lorem ipsum dolor sit amet.</p> </main> {partial footer} </body> </html>

This will include and render _header.html and _footer.html

Comments

{# this is a comment }

Comments are not visible in the rendered html file.

And much more...

... The documentation will be rewritten when the code is in a better shape...
but if you need a breadcrumb use {breadcrumb}, a submenu like the one on the left right now just use {{submenu "namaskar" 3}}

Template Example

here is the template of the page you are looking at now :

<!DOCTYPE html> <html lang="{= language.default}"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>{= site.name} {= page.title}</title> <link rel="stylesheet" href="http://qwwwest.com/asset/styles.css" /> </head> <body> <nav class="navbar dark"> <a class="branding" href="#"> <object id="logo" width="90" height="90" data="http://qwwwest.com/{= site.logo}" type="image/svg+xml" ></object> <span>{= site.name}</span> </a> <nav class="main-menu-top"> <!-- TOPNAV --> {foreach item in page.navbar} {if item.active} <a href="http://qwwwest.com/{= item.url}" class="active"> {= item.label} <span class="sr-only">(current)</span> </a> {else} <a href="http://qwwwest.com/{= item.url}">{= item.label}</a> {/if} {/foreach} </nav> <div onclick="toggleSideMenu()" class="right-menu hamburger"> <span></span> <span></span> <span></span> </div> </nav> <div class="breadcrumb">{breadcrumb}</div> <div class="main container-full"> <aside class=" "> <nav class="main-menu-side"> <!-- TOPNAV --> {foreach item in page.navbar} {if item.active} <a href="http://qwwwest.com/{= item.url]" class="active"> {= item.label} <span class="sr-only">(current)</span> </a> {else} <a href="http://qwwwest.com/{= item.url}">{= item.label}</a> {/if} {/foreach} <hr /> </nav> {dynsubmenu} </aside> <main>{= page.content}</main> </div> <footer class="dark"><a href="#">© Qwwwest.com</a></footer> {load-js "dynamix.js" "microlight.min.js"} </body> </html>

Et Voilà !