Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Простой шаблон</title>
<style>
body {
text-align: center; /* Центрирование текста внутри body */
}
.container {
text-align: left; /* Выравниваем содержимое внутри контейнера по левому краю */
max-width: 960px; /* Максимальная ширина контейнера */
margin: 0 auto; /* Автоматическое центрирование контейнера по горизонтали */
padding: 20px; /* Внутренний отступ контейнера */
border: 1px solid #ccc; /* Границы контейнера */
}
.header, .footer {
text-align: center; /* Центрирование текста в хедере и футере */
padding: 10px 0; /* Внутренний отступ сверху и снизу */
background-color: #f0f0f0; /* Фоновый цвет хедера и футера */
}
.content {
display: inline-flex; /* Используем inline-flex для размещения колонок в строку */
justify-content: space-between; /* Равномерное распределение пространства между колонками */
width: 100%; /* Ширина блока контента равна 100% */
}
.left-column {
width: 70%; /* Ширина левой колонки */
padding: 10px; /* Внутренний отступ левой колонки */
border: 1px solid #ccc; /* Границы левой колонки */
}
.right-column {
width: 25%; /* Ширина правой колонки */
padding: 10px; /* Внутренний отступ правой колонки */
border: 1px solid #ccc; /* Границы правой колонки */
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Название сайта</h1> <!-- Заголовок хедера -->
</div>
<div class="content">
<div class="left-column">
<h2>Левая колонка</h2> <!-- Заголовок левой колонки -->
<p>Содержимое левой колонки здесь...</p> <!-- Содержимое левой колонки -->
</div>
<div class="right-column">
<h2>Правая колонка</h2> <!-- Заголовок правой колонки -->
<p>Содержимое правой колонки здесь...</p> <!-- Содержимое правой колонки -->
</div>
</div>
<div class="footer">
<p>Футер © 2024</p> <!-- Текст футера -->
</div>
</div>
</body>
</html>
теперь нам надо его адаптировать для нашего сайта,
что нужно сделать?
меняем вот эти строки:
<h2>Левая колонка</h2> <!-- Заголовок левой колонки -->
<p>Содержимое левой колонки здесь...</p> <!-- Содержимое левой колонки -->
на вот такую конструкцию:
[[CONTENTS]]
это мы сделали, что бы в левой колонке выводился контент страницы (содержимое).
теперь мы изменим правую колонку которая отвечает за навигацию:
меняем эти строки:
<h2>Правая колонка</h2> <!-- Заголовок правой колонки -->
<p>Содержимое правой колонки здесь...</p> <!-- Содержимое правой колонки -->
на конструкцию:
[[NAVIGATION]]
теперь в нашем шаблоне будет отображаться список страниц в правой колонке.
что бы мы могли редактировать футер (подвал сайта), изменим строку:
<p>Футер © 2024</p> <!-- Текст футера -->
на конструкцию:
[[footer.txt]]
теперь на странице будет внизу отображаться текст который находится в вашей папке /includes в файле footer.txt
если у вас его там нет - создайте его (это можно сделать в админ панели, или скопировать его на хостинг через ftp).
Название сайта тоже можно редактировать из админки, для этого достаточно создать в папке /includes создать файл, например header.txt и в шаблоне изменить строку:
<h1>Название сайта</h1> <!-- Заголовок хедера -->
на конструкцию:
[[header.txt]]
то что вы напишете в файле header.txt - будет отображаться на сайте в виде названия вашей страницы.
сохраняем изменения.
теперь нам нужно ваш index.html сохранить в папку templates где хранятся ваши шаблоны, и как-то ее назвать, например new и скопировать туда наш файл.
теперь проверим как работает наш шаблон:
заходим в вашу админ панель (нужно перелогиниться что бы обновились данные), открываем любую страницу, например index и внизу админ панели выбираем ваш новый шаблон, и сохраняем страницу.
в верху админ панели видим:
Saving file index completed successfully. Saving template assertion for this page completed successfully.
что значит сохраненную страницу можно посмотреть нажав на ссылку.
смотрим результат нашей работы.
спасибо за внимание.