Создание "правильного" шаблона для сайта: различия между версиями
Перейти к навигации
Перейти к поиску
Olga (обсуждение | вклад) |
Olga (обсуждение | вклад) |
||
| Строка 13: | Строка 13: | ||
<meta name="description" content="<?= $page->description ?>"> | <meta name="description" content="<?= $page->description ?>"> | ||
<meta name="keywords" content="<?= $page->keywords ?>"> | <meta name="keywords" content="<?= $page->keywords ?>"> | ||
| + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> | ||
</head> | </head> | ||
<body> | <body> | ||
| − | <main> | + | <header> |
| − | </main> | + | </header> |
| + | <main> | ||
| + | <section> | ||
| + | <div class="container"> | ||
| + | <div class="row"> | ||
| + | <div class="col-12"> | ||
| + | <h1><?= $page->h1 ?></h1> | ||
| + | </div> | ||
| + | <div class="col-12"> | ||
| + | <p><?= $page->content ?></p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </section> | ||
| + | </main> | ||
| + | <footer> | ||
| + | </footer> | ||
| + | |||
| + | <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> | ||
| + | <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> | ||
| + | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> | ||
</body> | </body> | ||
</html> | </html> | ||
</pre> | </pre> | ||
Версия 12:11, 29 октября 2020
Для компактности HTML кода буду использовать библиотеку Bootstrap4 - пользуйтесь своими любимыми фреймворками, если не нравится. Итак, сделаем код нашего шаблона несколько более полным:
<?php $page = $variables['full:page']; ?> <!DOCTYPE html> <html> <head> <base href="/templates/default/"> <title><?= $page->title ?></title> <meta charset="utf-8"> <meta name="description" content="<?= $page->description ?>"> <meta name="keywords" content="<?= $page->keywords ?>"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <header> </header> <main> <section> <div class="container"> <div class="row"> <div class="col-12"> <h1><?= $page->h1 ?></h1> </div> <div class="col-12"> <p><?= $page->content ?></p> </div> </div> </div> </section> </main> <footer> </footer> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </body> </html>