Content Management System

Html components

Html components are building block for pages. Each component can have one or more files located in one folder.

For example component navbar in theme blog

Html template code file.
Javascript code.
Component properties file.
Component options file (optional).


Translation strings in diferent languages are saved in component property files with file name pattern:

{component name}-{laguage code}.json

For example transation strings for French language should be saved in file navbar-fr.json.
If file not exists in component folder default file mavbar.json are loaded.


If above component navbar is located in blog theme we can use it from any other template code with function:

{{ component('blog:navbar') }}

Loading component from javascript code{
    id: 'element_id',
    component: 'blog:navbar',
    params: {}
Property Type Description
id string required Html element Id in which html code is loaded
component string required Full componennt name
params object optional Component params

UI library arikaim-ui is required.

Component selector

For components located in extension use:

{extension name}::{path}

Template location

{theme name}:{path}

Global componnents location

{global components package name}~{path}

Primary (current) template



{{ component('blog>navbar') }}

Component with path navbar in current primary theme will be loaded. If not exists in primary theme component from extension blog are used.

Component options

Json file component.json

    "include": {
        "js": [
            { Component(s) name }
    "access": {
        "auth": "{ Authentication name }",
        "permission": "{ Permission name }"
Property Type Description
include/js array optional Include other component(s) javascript file.
access/auth string optional Authentication name.
access/permission string optional Permission name.