Cabloy-CMS uses ejs template engine for page rendering, a context object is created before rendering, and collects related data and methods for use in template files

Context Object Structure

  ctx: [Object],
  site: [Object],
  require: [Function],
  url: [Function],
  css: [Function],
  js: [Function],
  env: [Function],
  text: [Function],
  util: {
    time: {
      now: [Function],
      today: [Function],
      formatDateTime: [Function],
      formatDate: [Function],
      formatTime: [Function]
    formatDateTime: [Function],
    safeHtml: [Function], 
    escapeHtml: [Function],
    escapeURL: [Function]
  article: [Object],
  _path: [String]
Name Type Description
ctx property perform backend APIs via ctx
site property site configuration
require method require module
url method create an absolute link
css method declare css files for final merging and minimization
js method declare js files for final merging and minimization
env method inject environment variables for frontend usage
text method text i18n
util property util functions
util.safeHtml method create safe HTML
util.escapeHtml method create safe escaped HTML content
util.escapeURL method create safe URL
article property current article object
_path property indicates the relative path of the current template file (relative to the directory intermediate)

Perform Backend APIs

Backend APIs can be performed via object ctx

For example, in order to render the menu, you can retrieve the category tree as follows:

const res = await ctx.performAction({
  url: '/a/cms/category/tree',
  body: { language:site.language.current, hidden:0 },
const tree=res.list;

Require Module

In the .ejs file, you can also require the module as in NodeJS

// require module in node_modules
const moment=require('moment');
// require module in the project
const test=require('./test.js');

Absolute URL Link

It is recommended that URL links of all resources in the page are rendered as absolute link

// relative to the website root path
// relative to the current file

Merge and Minimize CSS & JS

During the rendering process, the CSS and JS files are declared at first and then merged and minimized at the end. A placeholder is provided in the rendering template, which will be replaced with the actual generated URL link

Declare CSS & jS

// css
// js

If the referenced CSS, JS file suffix is .ejs, it will also be rendered as an ejs template



<link rel="stylesheet" href="_ _CSS_ _">


<script src="_ _JS_ _"></script>


<link rel="stylesheet" href="">
<script src=""></script>

Inject Environment Variables

In order to facilitate the flexible and rich functional logic of the frontend, some environmental variables need to be injected into the frontend

The backend declares environment variables via env, which are finally merged into the frontend

Similarly, a placeholder also need to be provided in the rendering template, which will be replaced with the actual generated environment variables





_ _ENV_ _


<script type="text/javascript">
var env={
  "base": ...,
  "language": ...,
  "format": ...,
  "comment": ...,
  "site": ...,
  "index": {
    "main/index/index": 20


If you want to support multi-language for themes and plugins, you need to i18n the text resources used in them

Because the theme and plugin are essentially EggBornJS modules, you can use the i18n mechanism provided by EggBornJS directly

For example, the plugin cms-pluginbase provides the feature of infinite scrolling, Which will display the prompt of Load error, try again when failed, you can do the following

Define Language Resources


module.exports = {
  'Load error, try again': '加载失败,请重试',

Use Language Resources


const $buttonTry = $('<button type="button" class="btn btn-warning btn-xs"><%=text("Load error, try again")%></button>');

Path Indication: _path

A common ejs template file may be referenced by different master ejs template files. With _path, you can know which master ejs template file reference this common ejs template file in order to perform different logical processing



Safe Handling: safeHtml/escapeHtml/escapeURL

When outputting any resources in the ejs template, you should keep in mind the safe handling

1. safeHtml

Note that you need to use safeHtml to handle the rich text (which contains the text of the HTML code) as a variable directly in the template. Use safeHtml to output HTML tags, while executing XSS filtering, then it can filter out illegal scripts

The processing process is more complicated, the performance loss is larger, please use only if you need to output html content

2. escapeHtml

The HTML string is processed safely and replaced with the following characters:

Original Character Replaced with
& &amp;
< &gt;
> &gt;
" &quot;

3. escapeURL

The URL string is processed safely and replaced with the following characters:

Original Character Replaced with
< %3C
> %3E
" %22