Создание "правильного" шаблона для сайта: различия между версиями

Материал из Wiki from ADT Web Solutions
Перейти к навигации Перейти к поиску
Строка 86: Строка 86:
 
</pre>
 
</pre>
  
Теперь в шаблоне можно просто подключить эти фрагменты:
+
А main.phtml вот так:
  
 
<pre>
 
<pre>
Строка 92: Строка 92:
 
$page = $variables['full:page'];
 
$page = $variables['full:page'];
 
?>
 
?>
<!DOCTYPE html>
 
<html>
 
<?= $this->render($variables, 'layout/head') ?>
 
<body>
 
<?= $this->render($variables, 'layout/header') ?>
 
 
     <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>

Теперь главная страница сайта приобрела более "причёсанный" вид:

Screenshot 2020-10-29 Главная.png

Заметим, что 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". Поэтому делать у файлов шаблона именно такое расширение - обязательно! Иначе не найдет.