Сайты

Сайт — это набор связанных страниц в сети Интернет, воспринимаемый пользователем как единое целое, находящийся по доменному имени.

Оглавление

• Создание сайта
• Редактирование сайта
• Работа со страницами сайта
  • Добавление страниц
  • Редактирование страниц
• Шаблоны сайта
• Добавление нового шаблона
• Редактирование шаблона
  • Раздел Шаблон
  • Раздел Head
  • Раздел Файлы
• Пример шаблона

Создание сайта

1. Авторизуйтесь в роли администратора.
2. Войдите в раздел Сайты главного меню.
3. Нажмите Добавить сайт.
   Откроется форма Создать новый сайт с полями Заголовок, Домен, выпадающим списком Шаблоны сайта.
4. В диалоговом окне введите параметры нового сайта.
5. Нажмите Создать.
   Сайт создан.
6. Проверьте, что на введенном домене развернута версия Витраж CMS.

Важно: Поле Домен заполняется латинскими буквами. На домене должен быть развернут frontend CMS.

Редактирование сайта

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

Работа со страницами сайта

Добавление страниц

1. Авторизуйтесь в роли администратора.
2. Войдите в раздел Сайты главного меню.
   Отобразится страница Сайты.
3. Нажмите на выбранный сайт.
   Отобразится форма со страницами сайта.
   
4. Нажмите Добавить страницу.
   Отобразится форма с полями Заголовок, SEO Тег, URL, Родитель, выпадающими списками Роли, Тип страницы и поле Содержимое страницы.
   
5. Заполните поля формы.
6. Нажмите Создать.
   Изменения будут сохранены.

Важно: 1) Поле SEO Тег заполняется латинскими буквами. Это параметр указания ключевых
слов для поисковых систем в сети Интернет. 2) URL - это короткий адрес страницы, задающий ее место на сайте. Формат — /page3/page4/page7 . (См. рисунок выше.) 3) В поле Родитель задается место страницы в иерархии страниц по отношению к Главной. 4) В списке Роли задаются параметры доступа пользователей. Виды ролей предустановлены и регулируются ролевой моделью. 5) В списке Тип доступны два значения: Динамическая и Статическая. Динамический тип страниц необходим для динамических сущностей, которые нужно отображать одинаково. Вместо слова articles (См. рисунок выше) может быть указано любое сочетание знаков, которое позволит ссылаться на эту страницу.

Редактирование страниц

1. Авторизуйтесь в роли администратора.
2. Войдите в раздел Сайты главного меню.
   Отобразится страница Сайты.
3. Нажмите на выбранный сайт.
   Отобразится форма со страницами сайта.
4. Переместитесь по полю страницы сайта вправо и нажмите .
   Отобразится форма редактирования страницы.
   
5. Внесите необходимые изменения в поля формы.
6. Переместитесь в поле Содержимое страницы.
   При наведении отобразятся управляющие кнопки блочного редактора: + для добавления и для удаления элементов.
7. Нажмите + для добавления.
8. Добавьте любые базовые блоки (текстовые, виджеты, формы) из галереи.
   
9. Нажмите Обновить.
   Изменения будут сохранены.

Шаблоны сайта

Шаблон сайта – это предварительно разработанный макет веб-страницы или набора страниц, который включает в себя HTML-код, CSS-стили и графические элементы, определяющие внешний вид и структуру сайта. Он служит основой для создания сайта, позволяя легко менять его контент, сохраняя при этом единый стиль и дизайн.

Добавление нового шаблона

1. Авторизуйтесь в роли администратора.
2. Войдите в раздел Шаблоны сайта главного меню.
3. Нажмите Добавить группу шаблонов.
   Откроется форма Создать новую группу шаблонов.
4. Заполните поля Код и Заголовок.
5. Нажмите Создать.
   Новый шаблон отобразится на странице Шаблоны сайта.

Важно: Поле Код заполняется латинскими буквами и его значение не должно начинаться с цифры. Это машиночитаемый параметр для возможных ссылок на этот шаблон в скриптах. Имеет низкий приоритет.

Редактирование шаблона

Раздел Шаблон

1. Авторизуйтесь в роли администратора.
2. Войдите в раздел Шаблоны сайта главного меню.
3. Выберите нужный файл шаблона.
   Откроется форма редактирования шаблона c кнопками перехода в разделы Шаблон, Head и Файлы. Вы находитесь в разделе Шаблон.
   Страница редактирования шаблона сайта. Раздел Шаблон. Тип Текст.
4. Заполните поля формы необходимой версткой.
5. Наведите на поле Блочный редактор.
   Отобразятся управляющие кнопки + для добавления и для удаления элементов.
6. Нажмите +.
   Отобразится список предустановленных базовых элементов редактора.
7. Вставьте виджеты и формы.
8. Нажмите Сохранить.
   Появится сообщение Файл обновлен.

Важно: 1) Каждый сайт использует основной HTML-шаблон, общий для всех его страниц. 2) В шаблоне должна быть указана точка вставки содержимого страницы — с помощью ключевого слова {content}. 3) После определения этой точки, содержимое страниц будет подставляться в указанное место шаблона. 4) В шаблон можно включать виджеты и формы — они будут отображаться на всех страницах сайта. 5) Шаблон представляет собой постоянный (общий) контент, в который подставляется уникальное содержимое каждой страницы. 6) Тип шаблона Текст — считается устаревшим и не рекомендуется к использованию, а тип Файл не используется вовсе. 7) Сейчас шаблон сайта собирается из виджетов в блочном редакторе. Если у вас есть 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 — код столбца в таблице, которая привязана к виджету.

Так выглядит страница примера шаблона выше.