Skip to content
This repository has been archived by the owner on Aug 6, 2022. It is now read-only.

II.6.f. Page routes and templates

Jump to bottom
Andrey Bogdanov edited this page Feb 25, 2016 · 3 revisions

ololord.js uses doT.js as a template rendering engine. Custom page conten is also rendered using this engine.

Creating custom templates and template partials

Place the templates into the public/templates and public/templates/partials directories if you want them to be available on the client side, or into the views and views/partials directories if you only want to use them on the server side.

Templates and template partials must have the .jst file name extension. It is a good practice to prepend your custom templates and partials file names with some prefix, for example, my-.

Template example

my-contacts.jst, located in the views directory:

<!DOCTYPE html> <!--Nothing special here-->
<html xmlns="http://www.w3.org/1999/xhtml"> <!--And here, too-->
{{#def.head}} <!--Including the default page head-->
<body {{#def.baseData}}> <!--Including the default data- attributes-->
{{#def.toolbar}} <!--Including the toolbar-->
{{#def.player}} <!--Including the player-->
{{#def.customHeader}} <!--Inclugind the custom header-->
{{#def.searchAction}} <!--Including the search controls-->
<div class="theTitle"> <!--Page title (will be centered horizontally)-->
    <h1>
        {{=it.title}} <!--Should be defined in the controller-->
    </h1>
</div>
<div class="contactsContainer"> <!--Contacts container-->
    {{~it.contacts :contact}}
        {{#def["my-contact"]}} <!--A contact (see the template partial example below)-->
    {{~}}
</div>
{{#def.customFooter}} <!--Including the custom footer-->
</body>
</html> <!--Standard closing tags-->

Template partial example

my-contact.jst, located in the views/partials directory:

<div class="contact">
    <a href="{{=contact.href}}">{{!contact.text}}</a> <!--Note that "!" sign: contact text is HTML-escaped-->
</div>

Creating custom page routes

Put your custom controllers into the controllers subdirectory. Consider the following example:

Controller example (my-contacts.js):

var express = require("express");

var controller = require("../helpers/controller");
var Tools = require("../helpers/tools");

var router = express.Router();

router.generateHTML = function() { //This method is called on startup
                                   //and every time cache regeneration is requested
    var model = {}; //Creating a model
    model.title = Tools.translate("Contacts", "pageTitle"); //Setting page title
    model.contacts = [ //Contact list
        {
            href: "https://my.home.page.com",
            text: "<Home page>"
        },
        {
            href: "irc:#my_irc_channel",
            text: "<IRC>"
        }
    ];
    return controller("my-contacts", model).then(function(data) { //Generate HTML
        return Promise.resolve({ "my-contacts": data }); //Return an object containing the generated HTML
    });
};

router.get("/contacts.html", function(req, res) {
    //This method will be called when a user opens the contacts.html page
    controller.sendCachedHTML(req, res, "my-contacts"); //Just return the previously cached HTML
});

module.exports = router;

Note: Page title in the example above will be translatable. Please, refer to II.6.c. Postform rules and translations.

Clone this wiki locally