- Ability to select diffrent templates
- Ability to fill and change template variables ( like images and texts)
- Ability to enable or disable any section or part of template
- We can define templates that use handlebars syntax and save it to db or file system
- Every template contains a config.json file and contains template configuration
- A Template is consis of components and every component has props
Every template is contains a index.hbs
and config.json
{
"name":"Theme",
"description":"A simple template contains heading and gallery and staff and contact",
"components":[
{
"name":"toolbar",
"description":"simple toolbar",
"settings":{
"defaultStatus":"enabled",
"colors":{
"black":"#000000",
"white":"#ffffff",
"grey":"#d3d3d3"
}
},
"props":[
{
"name":"website_title",
"title":"Website Title",
"description":"Browser title of website ( head's title) ",
"default":[
{
"value":"Bookatreat Website"
}
],
"type":{
"title":"string"
},
"rules":{
"default":""
}
},
{
"name":"website_logo",
"title":"Toolbar Logo",
"description":"Image that shown in toolbar",
"default":[
{
"value":"http://google.com/logo.png"
}
],
"type":{
"default":"file"
},
"rules":{
"pattern":"min=10,max=100"
}
},
{
"name":"header_type",
"title":"Style of Header",
"description":"",
"default":[
{
"value":"small"
}
],
"type":{
"default": ["small","large","medium"]
},
"rules":{
"pattern":"min=10,max=100"
}
},
{
"name":"staff_list",
"title":"List of staff",
"description":"array of staff list",
"default":[
{
"name":"Mohsen Kairmi",
"image":"https://google.com/imag1.png",
"job_title":"Makeup Artist"
}
],
"type":{
"name":"string",
"image":"url",
"job_title":"string"
},
"rules":{
"name":"len=10",
"image":"regexp=^[a-zA-Z]*$",
"job_title":"min=3,max=40"
}
}
]
}
]
}
- Component design gives ability to use only some compoents that we need and maybe we can change order of components
- We can bind variables to components and use that naming like componentname.propsname like
toolbar.name
Page Editor use config.json file and show's the variable that organization must be fill.