- 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" : "Default Template",
"description" : "A simple template contains heading and gallery and staff and contact",
"components" : [
{
"name" : "toolbar",
"description" : "",
"defaultStatus" : "enabled",
"props" : [
{
"name" : "website_title" ,
"title" : "Website Title" ,
"description" : "Browser title of website ( head's title) " ,
"default" : "Bookatreat Website",
"type" : "string",
"rules" : ""
},
{
"name" : "website_logo" ,
"title" : "Toolbar Logo" ,
"description" : "Image that shown in toolbar" ,
"default" : "http://google.com/logo.png",
"type" : "file",
"rules" : "min=10,max=100"
},
{
"name" : "header_type" ,
"title" : "Style of Header" ,
"description" : "" ,
"default" : "small",
"type" : "enum=small,large,medium",
"rules" : "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.