Свой шаблон для HamsterCMS

перед нами простой двухколоночный HTML шаблон c детальными комментариями:

<!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>

вот так он будет выглядеть если его сохранить и открыть в браузере:

[image]

теперь нам надо его адаптировать для нашего сайта,
что нужно сделать?
меняем вот эти строки:

<h2>Левая колонка</h2> 
<p>Содержимое левой колонки здесь...</p>

на вот такую конструкцию:

[[CONTENTS]]

это мы сделали, что бы в левой колонке выводился контент страницы (содержимое).

теперь мы изменим правую колонку которая отвечает за навигацию:
меняем эти строки:

<h2>Правая колонка</h2> 
<p>Содержимое правой колонки здесь...</p>

на конструкцию:

[[NAVIGATION]]

теперь в нашем шаблоне будет отображаться список страниц в правой колонке.

что бы мы могли редактировать футер (подвал сайта), изменим строку:

на конструкцию:

[[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.

что значит сохраненную страницу можно посмотреть нажав на ссылку.

смотрим результат нашей работы.

спасибо за внимание.

--
We live in the distant past, we are still not at all civilized

Tags:
HTML, HamsterCMS

Web1.0 Hosting Forum

Свой шаблон для HamsterCMS (Template engine (HamsterCMS))