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

navbar.html
Html template code file.
navbar.js
Javascript code.
navbar.json
Component properties file.
component.json
Component options file (optional).

Localization

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.

Usage

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:

 arikaim.page.loadContent({
        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 path

For components located in extension use:

'{extension name}::{path}'

For components in theme use:

'{theme name}:{path}'

Global components:

'components:{path}'

Loading component from primary theme:

'{extension name}>{path}'

For example:

{{ 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.