Сайты
Сайт — это набор связанных страниц в сети Интернет, воспринимаемый пользователем как единое целое, находящийся по доменному имени.
Оглавление
- Создание сайта
- Редактирование сайта
- Работа со страницами сайта
- Шаблоны сайта
- Добавление нового шаблона
- Редактирование шаблона
- Пример шаблона
Создание сайта
- Авторизуйтесь в роли администратора.
- Войдите в раздел Сайты главного меню.
- Нажмите Добавить сайт.
Откроется форма Создать новый сайт с полями Заголовок, Домен, выпадающим списком Шаблоны сайта.
- В диалоговом окне введите параметры нового сайта.
Важно: Поле Домен заполняется латинскими буквами. На домене должен быть развернут frontend CMS.
- Нажмите Создать.
Сайт создан.
- Проверьте, что на введенном домене развернута версия Витраж CMS.
Редактирование сайта
После создания можно продолжить работать со страницами сайта, изменяя внешний вид и наполняя содержанием.
Работа со страницами сайта
Добавление страниц
- Авторизуйтесь в роли администратора.
- Войдите в раздел Сайты главного меню.
Отобразится страница Сайты.
- Нажмите на выбранный сайт.
Отобразится форма со страницами сайта.
- Нажмите Добавить страницу.
Отобразится форма с полями Заголовок, SEO Тег, URL, Родитель, выпадающими списками Роли, Тип страницы и поле Содержимое страницы.
- Заполните поля формы.
Важно: 1) Поле SEO Тег заполняется латинскими буквами. Это параметр указания ключевых
слов для поисковых систем в сети Интернет. 2) URL - это короткий адрес страницы, задающий ее место на сайте. Формат — /page3/page4/page7 . (См. рисунок выше.) 3) В поле Родитель задается место страницы в иерархии страниц по отношению к Главной. 4) В списке Роли задаются параметры доступа пользователей. Виды ролей предустановлены и регулируются ролевой моделью. 5) В списке Тип доступны два значения: Динамическая и Статическая. Динамический тип страниц необходим для динамических сущностей, которые нужно отображать одинаково. Вместо слова articles (См. рисунок выше) может быть указано любое сочетание знаков, которое позволит ссылаться на эту страницу.
- Нажмите Создать.
Изменения будут сохранены.
Редактирование страниц
- Авторизуйтесь в роли администратора.
- Войдите в раздел Сайты главного меню.
Отобразится страница Сайты.
- Нажмите на выбранный сайт.
Отобразится форма со страницами сайта.
- Переместитесь по полю страницы сайта вправо и нажмите
.
Отобразится форма редактирования страницы.
-
Внесите необходимые изменения в поля формы.
-
Переместитесь в поле Содержимое страницы.
При наведении отобразятся управляющие кнопки блочного редактора: + для добавления и
для удаления элементов.
- Нажмите + для добавления.
- Добавьте любые базовые блоки (текстовые, виджеты, формы) из галереи.
- Нажмите Обновить.
Изменения будут сохранены.
Шаблоны сайта
Шаблон сайта – это предварительно разработанный макет веб-страницы или набора страниц, который
включает в себя HTML
-код, CSS
-стили и графические элементы, определяющие внешний вид и структуру
сайта. Он служит основой для создания сайта, позволяя легко менять его контент, сохраняя при этом
единый стиль и дизайн.
Добавление нового шаблона
- Авторизуйтесь в роли администратора.
- Войдите в раздел Шаблоны сайта главного меню.
- Нажмите Добавить группу шаблонов.
Откроется форма Создать новую группу шаблонов.
- Заполните поля Код и Заголовок.
Важно: Поле Код заполняется латинскими буквами и его значение не должно начинаться с цифры. Это машиночитаемый параметр для возможных ссылок на этот шаблон в скриптах. Имеет низкий приоритет.
- Нажмите Создать.
Новый шаблон отобразится на странице Шаблоны сайта.
Редактирование шаблона
Раздел Шаблон
- Авторизуйтесь в роли администратора.
- Войдите в раздел Шаблоны сайта главного меню.
- Выберите нужный файл шаблона.
Откроется форма редактирования шаблона c кнопками перехода в разделы Шаблон, Head и Файлы. Вы находитесь в разделе Шаблон.
Страница редактирования шаблона сайта. Раздел
Шаблон. Тип Текст.
<!-- Скрин с кодом из исходника не актуальный. Отображается другой тип меню. -->
<!-- заменить на годный скриншот с Лого-->
- Заполните поля формы необходимой версткой.
Важно: 1) Каждый сайт использует основной HTML-шаблон, общий для всех его страниц. 2) В шаблоне должна быть указана точка вставки содержимого страницы — с помощью ключевого слова
{content}
. 3) После определения этой точки, содержимое страниц будет подставляться в указанное место шаблона. 4) В шаблон можно включать виджеты и формы — они будут отображаться на всех страницах сайта. 5) Шаблон представляет собой постоянный (общий) контент, в который подставляется уникальное содержимое каждой страницы. 6) Тип шаблона Текст — считается устаревшим и не рекомендуется к использованию, а тип Файл не используется вовсе.
- Наведите на поле Блочный редактор.
Отобразятся управляющие кнопки + для добавления и для
удаления элементов.
- Нажмите +.
Отобразится список предустановленных базовых элементов редактора.
- Вставьте виджеты и формы.
Важно: Сейчас шаблон сайта собирается из виджетов в блочном редакторе. Соответственно, если у вас есть
HTML
-верстка сайта, то вам надо разбить ее по виджетам.
<!-- При необходимости разбейте ваши шаблоны на файлы, добавляя их кнопкой **+** в правой части
экрана. -->
- Нажмите Сохранить.
Появится сообщение Файл обновлен.
Раздел Head
В разделе редактора Head находятся технические параметры и ссылки (css
, шрифты, дополнительные
файлы name.js
), которые войдут в HTML файл в раздел head
.
Страница редактирования шаблона сайта. Раздел Head. Тип
Текст.
Раздел Файлы
В раздел Файлы можно добавлять любое количество файлов двух видов: текстовый ( например набрать
вручную file_name.css
) и графический ( например image.jpg
) Файлы можно добавить из компьютера
или выбрать предустановленные из галереи. Страница редактирования
шаблона сайта. Раздел Файлы. Тип Текст.
Важно: После добавления в шаблон к файлам можно обращаться по
URL
.
Пример шаблона
<div style="padding: 40px 20px; background: linear-gradient(to bottom, #f8f9fa, #e9ecef);">
<div style="max-width: 1200px; margin: 0 auto;">
<h2 style="font-family: 'Helvetica Neue', Arial, sans-serif; color: #2c3e50; margin-bottom: 20px; text-align: center; font-size: 28px;">
Интерактивная карта
</h2>
<div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
<!-- Контейнер для карты -->
<div style="border-radius: 8px; overflow: hidden;">
[widget:map]
<!-- вставить виджет с кодовым словом map -->
</div>
</div>
<div style="text-align: center; margin-top: 15px; color: #6c757d; font-size: 14px; font-family: Arial, sans-serif;">
© Карта обновляется в реальном времени
</div>
</div>
</div>
<div style="padding: 40px; background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);">
<div style="max-width: 600px; margin: 0 auto;">
<!-- Заголовок формы -->
<div style="text-align: center; margin-bottom: 30px;">
<h2 style="color: #2d3436; font-family: 'Segoe UI', Arial, sans-serif; font-size: 28px; margin-bottom: 10px;">
Заполните форму
</h2>
<p style="color: #636e72; font-size: 16px; line-height: 1.5;">
Пожалуйста, внимательно заполните все поля
</p>
</div>
<!-- Контейнер для формы -->
<div style="background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.08);">
[form:4444]
<!-- вставить виджет с кодовым словом 4444 -->
<!-- Дополнительная информация -->
<div style="margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #edf0f2;
font-size: 14px;
color: #8395a7;
text-align: center;">
<p>Ваши данные защищены и используются согласно политике конфиденциальности</p>
</div>
</div>
</div>
</div>
<div class="list-widget">
<style>
.list-widget {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
font-family: Arial, sans-serif;
}
</style>
[widget:list]
<!-- вставить виджет с кодовым словом list -->
</div>
Важно: В языке виджетов можно использовать теги:
[widget:map]
— вставить виджет с кодовым словомmap
,[form:user]
— вставить виджет с кодовым словомuser
. В виджетах типаlist
иmap
можно добавлять{name}
, гдеname
— код столбца в таблице, которая привязана к виджету.
Так выглядит страница примера шаблона выше.