User Tools
CMTS- Overview of config.yml
site/config/config.yml — this YML file contain the basic of the website of CMTS system.
Details of config.yml file:
config.yml file contain the site layout that is shown by browser. there are several section we need to define for details.
Site:
site contain the language specification and set the default language. if site contain more language we have to specify them into this section . we have to set the default language, meta of the website and google analytics id in this section(if needed).
Example:
site:
languages: de
defaults:
language: de
home:
de: /de
meta:
description:
de: Dolce Vita Hotel Lindenhof
robots: index/follow
analytics:
ua: UA-52476633-1
Styles:
style contains all the stylesheet we are going to use into our website. stylesheets for the frontend cmts and backend fmts.
Example:
styles:
- frontend: &styles001
# global css for frontend
common:
- "[SITE_LESS_ROOT]config.less"
- "[SITE_LESS_ROOT]mixins.less"
# starting from here output is generated
- "[SITE_LESS_ROOT]fonts.less"
- "[SITE_LESS_ROOT]frontend.less"
# editor css for both frontend and backend
- "[MODULES_ROOT]editor/views/editor.less"
- "[MODULES_ROOT]editor/views/address/address.less"
- "[MODULES_ROOT]editor/views/content/content.less"
- "[MODULES_ROOT]editor/views/frame/frame.less"
# global less mixins for modules
modules:
- "[SITE_LESS_ROOT]config.less"
- "[SITE_LESS_ROOT]mixins.less"
# common css for backend
backend:
- "[SITE_LESS_ROOT]config.less"
- "[SITE_LESS_ROOT]mixins.less"
# starting from here output is generated
- "[SITE_LESS_ROOT]fonts.less"
- "[SITE_LESS_ROOT]backend.less"
# editor css for both frontend and backend
- "[MODULES_ROOT]editor/views/editor.less"
- "[MODULES_ROOT]editor/views/address/address.less"
- "[MODULES_ROOT]editor/views/content/content.less"
- "[MODULES_ROOT]editor/views/frame/frame.less"
Scripts:
In this section contains all the scripts that is used in website. if we need script we have to add the script location in this section.
Example:
scripts:
- frontend: &scripts001
common:
- "[SITE_LIB_ROOT]jquery/1.8.3/jquery.min.js"
- "[SITE_LIB_ROOT]jquerytools/1.2.7/jquery.tools.min.js"
- "[SITE_LIB_ROOT]jquery/plugins/swiper/idangerous.swiper.js"
- "[SITE_LIB_ROOT]jquery/plugins/jail/jquery.jail.js"
- "[SITE_JS_ROOT]common.js"
Plugin:
This plugin section contain all the plugin that is used in website. The example gives a available plugin that we use in our development. add if need more plugin. the syntax of adding plugin is
plugins:
[1]
scripts:
- “[2]”
styles:
- “[3]”
requires:
- [4]
1.define the name of the plugin. 2.define the location of the scripts 3.define the location of the styles if needed 4.define the supporting plugin name if needed using “requires” tag.
Example:
plugins:
jqueryui:
scripts:
- "[SITE_LIB_ROOT]jqueryui/1.10.3/jquery-ui.min.js"
- "[SITE_LIB_ROOT]jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js"
styles:
- "[SITE_LIB_ROOT]jqueryui/1.10.3/jquery-ui-1.10.3.custom.css"
- "[SITE_LIB_ROOT]jqueryui/1.10.3/themes/lindenhof/jquery-ui.css"
multiselect:
scripts:
- "[SITE_LIB_ROOT]jquery/plugins/multiselect/jquery.multiselect.js"
requires:
- jqueryui
Keep concern from here in config.yml
Layout:
Layout section contain the layout of the website.
In “httpdocs/site/common/html folder contains all the layout file that is available for the website. Normally there are 3 html files
- cmts.html: contain the full body of the page. it defines the language,head, title, meta tag, link, and body. all the data are fetch by using TBS(Tiny But Strong)
- home.html: contains the home page layout.
- inner.html: contains inner page layout.
Syntax:
layouts:
#[1]
-&layouts[2]
template: [3]
styles: *styles[2]
scripts: *scripts[2]
1.“#” indicates comments. Must write the name of the layout. 2.number of layout/styles/scripts. such as 001,002,003 ect. the number should contain 3 digits. 3.write down the template name from the html folder to define which template you are using for this layout.
Example:
layouts:
# home layout ("layout A")
- &layouts001
template: home
styles: *styles001
scripts: *scripts001
# inner page layout ("layout B")
- &layouts002
template: inner
styles: *styles001
scripts: *scripts001
if we look at the example we define
- &layouts001 → as this one is the first layout so we define the layout number 001.
- template: home → here we set the layout file-home. it will contain home.html layout.
- styles: *styles001→ we add style001 association with our layout.
- scripts: *scripts001→ we add scripts001 association with our layout.\\
Redirects:
All the pages redirects is done here. it is important for SEO.
Syntax:
redirects: - url: /[1] 301: /[2]
1. contain the last part of the address to redirect.*** 2. contain the where to redirect.
last part of the address means suppose the address is http://www.lindenhof.it/index.de.htm then we have to take /index.de.htm. Example:
redirects:
- url: /index.de.htm
301: /de
- url: /style-spa-resort.de.htm
301: /de/dolce-vita-hotel
Pages:
It contains the description of the pages for the whole website. it contains page definition, language independent, title, description, layout etc
syntax:
pages:
- &pages[1]
title:
de:[2]
meta:
description:
de:
layout: *[3]
1. number of the page 2. name of the page. 3. layout number
number of the page like layout part, we use 001, 002 etc. for an instance - &pages001.
some more attribute: after title→ de
breadcrumb:
de:
Home
don’t forget to write page name in comment for every page for an instance: #Home, # Der Lindenhof.
Example:
# Home
- &pages001
title:
de: Hotel Lindenhof - Style & Spa Resort in Naturns - Südtirol
breadcrumb:
de:
Home
meta:
description:
de: Ihr Südtirol Urlaub im 4 Sterne S Hotel Lindenhof in Naturns
layout: *layouts001
# Der Lindenhof
- &pages002
title:
de: Hotel Lindenhof in Südtirol - 4 Sterne S Wellness & Sport
meta:
description:
de: Südtirol Urlaub im Wellness Hotel Lindenhof in Naturns
layout: *layouts002
Routes:
Routes(links) pointing to pages. it defines the url of the menu items, links etc.
Syntax:
routes:
-&routes[1]
url:
de: [2]
1. number of the routes** 2. url link last part***
reference to page element for explanation. reference to redirect element for explanation.
Example:
# Home
- &routes001
url:
de: /de
# Der Lindenhof
- &routes002
url:
de: /de/dolce-vita-hotel
# Design & Ambiente
- &routes003
url:
de: /de/dolce-vita-hotel/design-ambiente
Menus:
Menus linking to the routes pointing to pages. In this section we have to define all the menu that the web page contains such as header menu, main menu,sidebar menu, footer menu etc.
syntex:
menus:
- &menus[1]
title: [2]
item:
- caption:
de:[3]
route: *routes[4]
- caption:
de:[3]
route: *routes[4]
1. number of the menu 2. name of the menu 3.text (caption) to show as menu item. 4.link of the menu item.
exception: we can use url instead of our defined route. For an instance
route: url: htt://www.google.com target: _blank
Example:
# Header menu
- &menus001
title: Header Menu
items:
- caption:
de: Lage
route: *routes007
- caption:
de: Bewertungen
route: *routes010
- caption:
de: Wetter
route: *routes100
# Main menu
- &menus002
title: Main menu
items:
- caption:
de: Home
route: *routes001
- caption:
de: Der Lindenhof
route: *routes002
items:
- caption:
de: Design & Ambiente
route: *routes003
items:
- caption:
de: Lage des Hotel
route: *routes007
- caption:
de: Gastgeber-Familie
route: *routes008
we can add nested menu. As YAML is a data serializable standards, it consider whitespace as a block of data. it doesn’t support any type of bracket like curly bracket, square bracket. if you look at the example, the red text- Der Lindinhof has nested menu- Design & Ambiente, Lage des Hotel and Gastgeber-Familie.
if you look carefully at the - caption: de: Home and -caption: de: Der Lindenhof, they both have same amount of white space before each but in -caption: de: Design & Ambiente has more white space.
Data:
shared data for blocks, split by module. it contain common data with is shared with different module.
Blocks:
in our system we have divide the whole web page into some blocks to specify the layout: such as header blocks, feedback blocks, sidebar block etc. understanding blocks is very important for our system.
Before describing Blocks, let's have a look some picture below.
The first picture describe the section and module. Left side of the picture indicate the section and right side indicate module.
The second picture shows home.html layout file where section is indicated.
The below picture describe the view structure.\\
Syntax:
blocks:
- &blocks[1]
module: [2]
section: [3]
view: [4]
1. number of blocks 2. name of the module* 3. name of the section** 4. name of the view***
In cmts system we have module folder where modules are created as a component. for an instance we have header module which contain all the header information html file, required less file, javascript file, php file to control header section. so name of the module means which module it derives of this block. suppose in -&blocks001 module: sidebar→ this blocks contain sidebar module. so later when we call the block001, it will look for the sidebar module.
in the layout folder (site/common/html/) home.html contain all the layout with TBS code where we define the section such as header, content, sidebar, footer etc. so in the section name we have to define the section this blocks belongs to.
view indicate from which folder it will take the html, less and (if required) js file in the module folder. suppose if the module is menu, in the view folder it may contain subfolder- header, main, footer which is denoted as header menu, main menu and footer menu. For each subfolder has corresponding html, less and js file.so view will indicate which menu you want to show in this block.
Example:
blocks:
#general header
- &blocks001
module: header
section: header
view: header
nls:
1:
de: mehr erfahren
# editor content
- &blocks002
module: editor
section: content
view: content
#main menu
- &blocks003
module: menu
section: header
view: main
nls:
1:
de: Best-Preis Garantie
data:
bestprice:
fmtsid: 119
Map:
The full sitemap of the website, brings blocks, menu, routes, page together.
Syntax:
map:
-route:*routes[1]
page: *pages[2]
content:
#[3]
-block: *blocks[4]
data: [5]
1. number of the routes 2. number of the pages 3. must made comment to understand which part this content belogs to. 4. number of the block 5. data items*
data item may contain various types of data. it may be the name of the menu, may be some title of the page, may be fmtsid,
Example:
map:
#Home
-route: *routes001
page: *pages001
content:
# header menu
- block: *blocks005
data: *menus001
# main menu
- block: *blocks004
data: *menus002
# header
- block: *blocks001
data:
fmtsid: 5
# welcome home
- block: *blocks102
data:
title:
de: Willkommmen im Lindenhof
# offers home
- block: *blocks103
# footer menu
- block: *blocks006
data: *menus011
