Создание "правильного" шаблона для сайта: различия между версиями
Olga (обсуждение | вклад) |
Olga (обсуждение | вклад) |
||
| Строка 86: | Строка 86: | ||
</pre> | </pre> | ||
| − | + | А main.phtml вот так: | |
<pre> | <pre> | ||
| Строка 92: | Строка 92: | ||
$page = $variables['full:page']; | $page = $variables['full:page']; | ||
?> | ?> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<main> | <main> | ||
<section> | <section> | ||
| Строка 111: | Строка 106: | ||
</section> | </section> | ||
</main> | </main> | ||
| + | </pre> | ||
| + | |||
| + | Теперь в шаблоне можно просто подключить эти фрагменты: | ||
| + | |||
| + | <pre> | ||
| + | <!DOCTYPE html> | ||
| + | <html> | ||
| + | <?= $this->render($variables, 'layout/head') ?> | ||
| + | <body> | ||
| + | <?= $this->render($variables, 'layout/header') ?> | ||
| + | <?= $this->render($variables, 'layout/main') ?> | ||
<?= $this->render($variables, 'layout/footer') ?> | <?= $this->render($variables, 'layout/footer') ?> | ||
Версия 13:19, 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>
Теперь главная страница сайта приобрела более "причёсанный" вид:
Заметим, что Title у страницы пустой, что не слишком хорошо. Можно прописывать это поле для каждой страницы. Но есть способ получше.
Настраиваем Title и другие SEO-параметры
В шаблоне меняем строки заголовка, описания и ключевых слов на:
<title><?= $this->escape($variables['title']) ?></title>
<meta name="description" content="<?= $variables['meta']['description'] ?>">
<meta name="keywords" content="<?= $variables['meta']['keywords'] ?>">
и видим теперь заголовок <title>UMI.CMS - Страница 1</title>. Нам "UMI.CMS - " ни разу не нужно. Чтобы настроить параметры по умолчанию, в модулях (под бабочкой) находим раздел SEO, в нем справа вверху видим ссылку "Настройка модуля", жмём и настраиваем, там всё просто. Заменяю "UMI.CMS - " на "Демонстрационный сайт - ".
Чем отличается от прежнего варианта шаблона? Тем, что мы не выводим тупо поле из данных конкретной страницы, а позволяем CMS сформировать для нас эти параметры, используя настройки по умолчанию.
Делим шаблон на части
Чтобы не мучиться с длинной простынёй кода, существует хорошая практика делить его на разумные фрагменты. Скажем, сразу хочется выделить <head>, <header> и <footer>.
В директории /templates/default/php/ создает поддиректорию layout, а в ней файлы наших фрагментов:
- head.phtml
- header.phtml
- main.phtml
- footer.phtml
Помещаем в эти файлы фрагменты кода шаблонов, например, head.phtml будет выглядеть вот так:
<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>
А main.phtml вот так:
<?php
$page = $variables['full:page'];
?>
<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>
Теперь в шаблоне можно просто подключить эти фрагменты:
<!DOCTYPE html>
<html>
<?= $this->render($variables, 'layout/head') ?>
<body>
<?= $this->render($variables, 'layout/header') ?>
<?= $this->render($variables, 'layout/main') ?>
<?= $this->render($variables, 'layout/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>
Заметим, что в качестве первого параметра при вызове метода render() мы передаем массив $variables конкретной страницы. Второй параметр - это адрес шаблона относительно папки php и без расшмрения ".phtml". Поэтому делать у файлов шаблона именно такое расширение - обязательно! Иначе не найдет.