Views

Views are defined with a * glyph: The dispatcher maps the URLs to views, which are defined with a * (star). The mapping is defined in the ~ routes section. The dispatcher uses the route variables defined with moustaches f.e. {id} in the routes. See ~ section of the main router:

%import components
%inherit base

~main:
  index: '/'
  list: 'blog/posts'
  show: 'blog/post/{id}'
  edit: 'blog/post/{id}/edit'

~footer:
  userfooter: '/'
  devfooter: 'develop/'

*nav:
  ul.mainmenu:
    li:
      base-linkto action='list': 'List'
    li:
      base-linkto action='show' id=1: 'Show item with id 1'
    'li:
      base-linkto action='edit' id=1: 'Edit item with id 1'
    li:
      base-linkto action='devfooter' router='footer': 'A developer sub section with a different footer'


*index:
  p: 'index view'
  div: x: {_request.get.x}

*list:
  p: 'posts view'

*show:
  p: 'show view of id {id}'

*edit:
  p: 'edit view of id {id}'

*userfooter:
  ul.footernav:
    li: 'user footer item 1'
    li: 'user footer item 2'
    li: 'user footer item 3'

*devfooter:
  ul.footernav:
    li: 'dev footer item 1'
    li: 'dev footer item 2'
    li: 'dev footer item 3'

Open http://127.0.0.1:5000/ in your browser. The rendered result depends on the url you enter:

http://localhost:5000/blog/posts shows the posts view.

http://localhost:5000/blog/1 shows the detail view.

http://localhost:5000/blog/post/1/edit shows the edit view.