Open source CMS

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

navbar.html
Html template code file.
navbar.js
Javascript code.
navbar.css
Css code.
navbar.json
Component properties file.
component.json
Component options

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 name

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 name }
        ],
        "css": [
            { Component name }
        ]
    },
    "access": {
        "auth": "{ Authentication name }",
        "permission": "{ Permission name }"
    }
}
Property Type Description
include/js array optional Include other component(s) javascript file.
include/css array optional Include other component(s) css file.
access/auth string optional Authentication name.
access/permission string optional Permission name.