# 03. __Pages__

[![+Professional Support](https://www.totaljs.com/img/badge-support.svg)](https://www.totaljs.com/support/) [![+Chat with contributors](https://www.totaljs.com/img/badge-chat.svg)](https://messenger.totaljs.com)

Pages are very important part of __Total.js CMS__ and they are rendered for visitors. Pages use [CMS editor](@17111321360002unp0) 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:

```javascript
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__:

```javascript
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](@17111321360002unp0)

## 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`:

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.