====== 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. \\


 \\   

{{selection_002.png | section and module}}\\

  The first picture describe the section and module. Left side of the picture indicate the section and right side indicate module.
   


{{selection_003.png | home.html}}\\

The second picture shows home.html layout file where section is indicated.

  The below picture describe the view structure.\\ 

{{selection_005.png | view hierarchy}}\\



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