CMS / 04. Pages
Updated: 10. March 2018
Author: Peter Širka

03. Pages

Professional Support Chat with contributors

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 registered in the Settings.

Page templates

Each template needs to be stored /themes/CURRENT_THEME_NAME/views/cms/ directory as a view and CMS stores a page data into the variable: controller.repository.page.

Template example:

<!-- DETERMINES CMS EDITOR -->
@{if repository.preview}

    <!-- IMPORTANT: ALL CMS CONTENT (FOR EDITOR) MUST BE WRAPPED IN <div id="CMS"> -->
    <div id="CMS">

        @{if repository.page && repository.page.body}
            <!-- RENDERS UPDATED/SAVED CONTENT -->
            @{!repository.page.body}
        @{else}
            <!-- A DEFAULT CONTENT FOR THIS TEMPLATE -->
            <div class="CMS_widgets" data-cms-category="Content,Layout,Component"></div>
        @{fi}

    </div>

@{else}

    <!-- RENDERING FOR VISITORS -->
    @{if repository.page && repository.page.body}
        <h1>@{repository.page.title}</h1>
        @{!repository.page.body}
    @{fi}

@{fi}
  • 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

F.global.pages

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

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

F.global.sitemap

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

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

var item = F.glboal.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}

F.global.partial

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

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

var item = F.global.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}

F.global.variables

+v12.0.0 contains all global variables.


Good to know:

  • all pages are loaded into the memory without content