Tvorba jednoduchého webu pomocí frameworku Slim a šablon Twig 2. díl přidáme si Bootstrap a použijeme šablony Twig
Nejprve si upravíme soubor app/routes.php přidáme si další routy a také místo textu vykreslíme pro jednotlivé routy šablony.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php $app->get('/', function () use($app) { $app->render('home.twig'); })->name('home'); $app->get('/sluzby', function () use($app) { $app->render('sluzby.twig'); })->name('sluzby'); $app->get('/kontakt', function () use($app) { $app->render('kontakt.twig'); })->name('kontakt'); |
Mohli bychom napsat šablonu pro každou stránku celou, ale většinou se část šablony opakuje takže si vytvoříme tzv. layout šablonu. Z nastavení v minulém týdnu víme, že šablony jsou v adresáři app/views. deafultní layout vytvoříme v app/views/template/default.twig. Aby stránky byly responzivní použijeme Twitter Bootstrap
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Slim site with Twig and Boostrap</title> <!-- Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/flatly/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- Static navbar --> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="{{ urlFor('home') }}">Slim site</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li{% if active_page== 'home' %} class="active"{% endif %}><a href="{{ urlFor('home') }}">Home</a></li> <li{% if active_page== 'sluzby' %} class="active"{% endif %}><a href="{{ urlFor('sluzby') }}">Služby</a></li> <li{% if active_page== 'kontakt' %} class="active"{% endif %}><a href="{{ urlFor('kontakt') }}">Kontakt</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> {% block content %}{% endblock %} </div> <!-- /container --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html> |