03. Pages

Pages are very important part of Total.js CMS and they are rendered for visitors. Pages use CMS editor for creating rich HTML content.

How does it work?

CMS has a very simple logic and system works with two types of pages: Page and Partial Page. Each Page can have multiple partial pages and each page can be accessed via URL directly. And partial pages can't be accessed via URL, but the system processed them automatically if the Page (with partial pages) is rendering.

CMS offers a method controller.CMSpartial() to render a partial page directly, but must be executed manually via developer.

Routing

CMS has implemented preddefined methods for controllers:

controller.CMSpage([callback], [cache]);
// Renders page according to the current URL address
// @cache {Boolean} enables "controller.memorize()", default: true
// IMPORTANT: the method assigns repository.page automatically

controller.CMSrender(url, callback(err, page));
// Renders page according to the "url" argument
// IMPORTANT: the method assigns repository.page automatically

controller.CMSpartial(url, callback(err, page));
// Renders partial page according to the "url" argument

Example:

exports.install = function() {
    
    // Now CMS will have a control for all URL addresses
    ROUTE('/*', cms);
    
    // Specific case
    ROUTE('/products/', cms_specific);
    
};

function cms() {
    // This method will handle all requests
    this.CMSpage();
}

function cms_specific() {
    var self = this;
    self.CMSrender('/products/', function(err, page) {
        // Page not found
        if (err) {
            self.throw404();
        } else {        
            // Renders page
            // BTW: here you can use own model into the view
            self.view('~cms/' + page.template);
        }
    });
}

Templates

Pages are rendered into the preddefined templates. Templates need to be created in the Pages section. Just import our preddefined template and you will understand it.

when CMS editor is saving the content it loads innerHTML from <div id="CMS"> element
rendering for visitors is cleaned without CMS classes
CMS editor saves the content as it as HTML
by default CMS editor uses layout-preview for previews
IMPORTANT: don't use JavaScript in templates
read more in CMS editor section

Partial pages

Partial pages are prepared automatically if the parent page is loaded, but in the result each partial page needs to be rendered manually according to its id or url:

var item = controller.repository.page.partial[id];
// or
var item = controller.repository.page.partial[url];

item.id;
// returns {UID}

item.url;
// returns {String}

item.name;
// returns {String}

item.title;
// returns {String}

item.icon;
// Font-awesome icon without "fa-"
// returns {String}

item.datecreated;
// returns {Date}

item.dateupdated;
// returns {Date}

item.signals;
// returns {Array String}

item.body;
// A prepared HTML for rendering
// returns {String}

Global properties

`MAIN.pages`

This property contains all registered pages without content. CMS uses this property internally to check existence of pages.

MAIN.pages;
// This property contains all registered pages.
// Pages are loaded into the memory without content.
// {Array Object}

`MAIN.sitemap`

This property contains all registered links according to the sitemap (parent --> child --> child). CMS renders a breadcrumb according to this property.

MAIN.sitemap;
// This property contains the whole sitemap (nested pages, parents, etc.).
// !IMPORTANT! Key is a relative URL address.
// {Object}

var item = MAIN.sitemap['/products/'];

item.id;
// returns {UID}

item.url;
// returns {String}

item.name;
// returns {String}

item.title;
// returns {String}

item.icon;
// Font-awesome icon without "fa-"
// returns {String}

item.parent;
// Parent item with same structure
// returns {Object}

item.links;
// Contains all pages in the path (links according to the parent)
// returns {Array Object}

`MAIN.partial`

This property contains all registered partial pages without content. CMS uses this property internally to check existence of partial pages.

MAIN.partial;
// Contains all partial pages without content.
// {Array Object}

var item = MAIN.partial[0];

item.id;
// returns {UID}

item.url;
// returns {String}

item.name;
// returns {String}

item.title;
// returns {String}

item.icon;
// Font-awesome icon without "fa-"
// returns {String}

`MAIN.variables`

+v12.0.0 contains all global variables.

Good to know:

all pages are loaded into the memory without content

Visitors

CMS captures query arguments below:

utm_medium used for advert counters
utm_user shows a user name in live table

If the website contains window.user = { name: 'USERNAME' } object or window.username property, then the value is used as a user name in live table too.

Good to know:

CMS measures visitors in 30 seconds interval for 3 minutes period, then the counter is disabled. Visitor is measured when the site is loaded, browser state must be online with enabled JavaScript and Cookies.