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

К сайту можно подключить любой HTML-шаблон, но есть несколько рекомендаций, отступления от которых редко будут критичными:

• Адреса файлов с изображениями, скриптами, стилями и др. файлов, для которых необходимо указание относительного URL, а также ссылки на страницы лучше начинать с ведущего слеша / в src и href
• Изображения, необходимые только для дизайна желательно сохранять в папке /upload/image/design/default/
• CSS-стили желательно сохранять в папке /css/
• JS-скрипты желательно сохранять в папке /js/
• Содержимое любых редактируемых полей должно быть одинаково оформлено в CSS, как без помещения всего целиком в тег p или div, так и без этого, т.к. эти теги могут добавлять различные WYSIWYG-редакторы контента. Это в том числе относится к:
  • основному тексту страницы,
  • контактным данным, которые видны на всех страницах
  • информации об авторских правах, которые видны на всех страницах
  • и т.п.
• Аналогично предыдущему пункту, учитывайте, что какой-то блок может быть скрыт или отображён при выполнении или невыполнении, каких-то условий. Важно, чтобы соседствующие или другим образом связанные блоки, продолжали отображаться корректно

Первый запуск

После того, как сайт установлен на хостинг или виртуальный веб-сервер, и Вы уже перейшли в административный интерфейс по адресу вида http://(ваш-домен)/admin.php, до того, как задать параметры для доступа к базе данных нажмите по кнопке Создать администратора и укажите логин (e-mail) и пароль, которые далее будете использовать для входа в "админку".

Здесь же можно настроить кэширование, нажав по соответствующей кнопке

Настройка шаблонов

Прежде, чем перейти к дальшейшей настройки, ознакомьтесь со следующими статьями:

1. Что такое Комплект поставки?
2. Что такое Шаблон контента?
3. Что такое Вкладки?
4. Что такое Элементы?
5. Что такое Свойства?
6. Что такое Плагины?

При установке CMS в комплекте будет доступно сразу же несколько шаблонов. Можно их сразу удалить, но пока лучше рассмотрим вариант с их использованием и переделкой под цели Вашего сайта.

1. Через меню администратора перейдите в раздел Справочники \ Шаблоны и нажмите Редактировать (карандашик) напротив шаблона Обычная страница.
2. Перейдите на вкладку Структура веб-страницы и в поле HTML-код веб-страницы замените всё, что в нём есть, HTML-кодов обычной страницы Вашего сайта. Страницы новостей, товаров, титульную и другие страницы - позже. Начинте именно с обычной страницы, т.к. она обычно содержит основные элементы интерфейса, доступные и на других страницах.
3. Сохраните всё пока в таком виде

При установке CMS в комплекте будет доступно сразу же несколько страниц. Можно их сразу удалить, но пока лучше рассмотрим вариант с их использованием и переделкой под цели Вашего сайта.

1. Через меню администратора перейдите в раздел Контент \ Страницы и нажмите Редактировать напротив страницы О компании. Можно выбрать другую страницу, напротив которой указан шаблон Обычная страница, либо сделать копию любой из таких страниц, сразу указва нужные названия и ID.
2. На вкладке Основные параметры можете изменить то, что написано в полях Название и Основной текст (например, можете вставить текст для страницы О компании)
3. Сохраните всё пока в таком виде

Далее на панели инструментов вверху нажмите по кнопке Просмотреть (глаз) и увидите результат. Если что-либо не правили наперёд, то название и основной текст будут такими, как в HTML-коде, который Вы вставили в шаблон, а не такими, которые были указаны при правке страницы. Сейчас мы это  (и не только это) исправим. Пока не закрывайте просмотр страницы (пригодится).

Не закрывайте и редактор страницы, а также нажмите на панели инструментов по кнопке Перейти к шаблону. В результате в одной вкладке браузера должен быть редактор страницы, в другой её просмотр, а в третьей - редактор шаблона.

1. В шаблоне в поле HTML-код веб-страницы в теге <h1> (или в другом теге, в котором должен отображаться главный заголовок страницы) вставьте код {content_name}, чтобы получилось <h1>{content_name}</h1> (опять же с поправкой на нужный Вам тег).
2. Там же вместо основного текста страницы вставьте код {content_maintext_value}.
3. Сохраните всё пока в таком виде и посмотрите как стала выглядеть страница.

Если всё сделали правильно, то должны появиться нужные нам заголовок и основной текст страницы.

Прежде, чем продолжить, ознакомьтесь со следующими статьями:

1. Как оптимизировать сайт под поисковые системы? (часть про sitemap.xml и robots.txt здесь пока не так важны)
2. Плагин Menu (все параметры заучивать ненужно - важно понимать возможности в целом)

SEO-параметры

Если в комплекте поставки не пакета Zion SEO Booster, то в теге head вставьте или поправьте следующие теги:

<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta http-equiv=Content-Language content="ru">
<title>{content_seo_title}</title>
<meta name=keywords content="{content_seo_keywords}">
<meta name=description content="{content_seo_description}">
<link rel=icon href=/favicon.svg type=image/svg+xml>
<link rel=icon href=/favicon.ico type=image/x-icon>
<meta name="Generator" content="{project_cms_name}">
<meta name="Publisher-URL" content="https://webzion.ru/">

Если Zion SEO Booster доступен, то вместо перечисленных тегом можно просто вставить код {plugin:meta}. Код вызова плагина можно скорректировать под свои цели в разделе Инструменты \ Мастеры для вставки плагинов.

По части SEO - пока всё. Теперь наладим навигацию (хлебные крошки, менюшки и другие списки)...

Навигация

При установке CMS в комплекте будет доступно сразу же заготовок меню и списков. Можно их сразу удалить, но пока лучше рассмотрим вариант с их использованием и переделкой под цели Вашего сайта.

Начнём с так называемых "хлебных крошек" (пути к открытой странице).

Допустим на сайте путь к будет выглядеть примерно так: Главная \ О компании \ Наши партнёры

А HTML-код пути организован примерно так:

<p class="path">
  <a href="/">Главная</a>  
  \
  <a href="/about/">О компании</a>  
  \
  <a href="/about/partners/" class="current">Наши партнёры</a>  
</p>

1. Через меню администратора перейдите в раздел Навигация \ Варианты оформления меню и нажмите Редактировать напротив записи Путь для контента с ID path. Можно выбрать другую запись или создать новую, в том числе через клонирование, но пока не будет этого делать.
2. Заполните сделующие поля следующими кодами:
   • HTML-код до меню: <p class="path">
   • HTML-код после меню: </p>
   • HTML-код обычной записи: <a href="{content_url_value}">{content_name}</a>
   • HTML-код активной записи: <a href="{content_url_value}" class="current">{content_name}</a>
   • HTML-код между записями: \ (слева и справа по одному пробелу)
   • Остальные поля оставьте пустыми!
3. Обратите внимание, что мы никак не меняем суть HTML-кода, но вместо URL-адресов мы вставляем свойство {content_url_value}, а вместо названий - свойство {content_name}
4. Далее в шаблоне вместо HTML-кода хлебных крошек вставляем следующий код: {plugin:menu;id:path;select:path}, то есть
   • Мы вызываем плагин menu,
   • В параметре id указываем ID варианта оформления path,
   • И в параметре select указываем, по какому принципу нам нужно выбирать записи - path - "путь".
5. Готово, но, если например, Вам нужно скрыть из пути активный раздел, отобразив только надразделы, то добавьте к команде вызова плагина параметр exclude (исключить) со значением {content_id} (ID активной страницы). Тогда вся команда будет иметь вид: {plugin:menu;id:path;select:path;exclude:{content_id}}.
6. Сохраните изменения в варианте оформления меню и в шаблоне

Далее разберёмся с главным меню, которое есть в Вашем коде с большей вероятностью, чем хлебные крошки...

Допустим HTML-код главного меню организован примерно так:

<nav>
  <ul>
    <li>
      <a href="/page1/" class="active">Страница 1</a>
    </li>
    <li>
      <a href="/page2/">Страница 2</a>
    </li>
    <li>
      <a href="/page3/">Страница 3</a>
      <nav>
        <ul>
          <li>
            <a href="/page3/subpage3-1/">Страница 3.1</a>
          </li>
          <li>
            <a href="/page3/subpage3-2/">Страница 3.2</a>
          </li>
          <li>
            <a href="/page3/subpage3-3/">Страница 3.3</a>
          </li>
        </ul>
      </nav>
    </li>
    <li>
      <a href="/page4/">Страница 4</a>
    </li>
    <li>
      <a href="/page5/">Страница 5</a>
    </li>
    <li>
      <a href="/page6/">Страница 6</a>
    </li>
  </ul>
</nav>

В данном примере мы исходим из следующего:

• Страница 1 описывает то, как выглядит код активной страницы
• Страница 3 описывает то, как выглядит код страницы с подразделами
• Код подменю (для подразделов) не отличается от кода надменю (для надразделов). Варианты с отличающимся кодом также рассмотрим, но позже.

Делаем следующее:

1. Через меню администратора перейдите в раздел Навигация \ Варианты оформления меню и нажмите Добавить новую запись над списком записей. Можно также изменить имеющуюся запись или сделать копию. Но пока будем исходить из того, что будет новая запись с ID mainmenu. Название - любое, например, Главное меню.
2. Заполните сделующие поля следующими кодами:
   • HTML-код до меню:
     <nav>
  <ul>
   • HTML-код после меню:
     </ul>
</nav>
   • HTML-код обычной записи:
     <li>
      <a href="{content_url_value}">{content_name}</a>
      {plugin:menu;id:mainenu;factor:{content_id}}
    </li>
   • HTML-код активной записи:
     <li>
      <a href="{content_url_value}" class="active">{content_name}</a>
      {plugin:menu;id:{menu_params_id};factor:{content_id}}
    </li>
3. Обратите внимание:
   • Мы также вместо URL-адресов вставляем свойство {content_url_value}, а вместо названий - свойство {content_name}
   • При оформлении обычной и активной записи мы пишем разный код (чтобы выделить активный пункт меню на фоне остальных), но в обоих случаях вызываем подменю. Оно одно и то же, но делаем мы это немного по-разному (это необязательно - просто для примера):
     • Мы также вызываем плагин menu,
     • В параметре id в первом случае мы указываем mainmenu, а во втором случае для того же параметра пишем {menu_params_id} - сюда автоматически будет подставлено ID этого меню - то есть mainmenu. Подход второго варианта может быть полезен, если мы в будущем решим сделать копию этого меню, тогда вызов подменю (для указания корректного ID подменю) нам править не придётся.
     • Параметр select мы не указываем, так как автоматически будет подставлено нужное нам значение - children - непосредственные подразделы.
     • При этом мы явно задаём значение {content_id} для параметра factor. Если этого не сделать, то при вызове подменю будут отображены подразделы открытой в данный момент страницы, а нам нужны подразделы для каждого подраздела надменю.
4. Далее в шаблоне вместо HTML-кода главного меню вставляем очень знакомый код: {plugin:menu;id:mainenu;factor:main}, то есть
   • Мы вызываем плагин menu,
   • В параметре id указываем ID главного меню mainmenu,
   • И в параметре factor явно указываем, подразделы, какой страницы нам нужны. Например, это страница с ID main. Если в Вашем случае нужны подразделы верхнего уровня, то вместо main, укажите точку .
5. Сохраните изменения в варианте оформления меню и в шаблоне

Готово. Можете наладить навигацию в остальных необходимых шаблонах. Все меню и списки создаются примерно также. Рассмотрим ещё несколько примеров:

1. Код надменю должен отличаться от кода надменю:
   • В примере выше мы создавали один общий вариант меню и вызывали его сначала из шаблона, а потом из самого себя. Если HTML-код надменю и подменю должен быть разным, то просто создайте два отдельных варианта меню. Главный вызывайте из шаблона, а второстепенный - из главного.
2. Код пунктов без подразделов отличается от кода пунктов с подразделами:
   • При правке меню обратите внимание на то, что написано под полями HTML-код обычной записи и HTML-код активной записи. Можно заметить там блок Доступные условия. Они позволяют по-разному оформить HTML-код для разных пунктов при соблюдении (или несоблюдении тех или иных условий).
   • Допустим часть кода для пункта без подразделов нужно оформить так:
     <a href="{content_url_value}" class="without-sub">{content_name}</a>
     А часть кода для пункта с подразделами нужно написать так:
     <a href="{content_url_value}" class="with-sub">{content_name}</a>
   • Мы можем, например, использовать условие [IS_TREE??истина::ложь] (если у данного пункта есть подразделы), которое в случае выполнения вернёт то, что указно вместо истина. Иначе - вернёт то, что указано в ложь.
   • Если учесть, что в нашем случае код пунтка с подразделами и без них отличаются только именем класса (without-sub либо with-sub) или даже только частью имени класса (наличие или отсутсвие в нём out), то нам нужен такой код:
     <a href="{content_url_value}" class="with[IS_TREE??::out]-sub">{content_name}</a>. То есть, если у пункта есть подразделы (выполнится истина), из условия вернётся "пустота". А если подразделов нет (выполнится ложь), из условия вернётся код out.
   • Аналогично можно использовать, например, условие <a href="{content_url_value}" class="with[IS_TREE??::out]-sub">{content_name}</a>. Оно выполнится, если у пункта есть подразделы такого типа, который указан в тип.
3. Код каких-либо пунктов должен сильно отличаться от кода других пунктов:
   • Всё аналогично предыдущему примеру. Просто подберите более подходящее условие при выполнении (или невыполнении), которого должен быть возвращён разный код - вариантов очень много...
4. Нужно отобразить в списке только записи определённых типов, скрывая все остальные:
   • При формировании команды вызова плагина menu перечислите нужные типы в параеметре types через запятую.
   • А если нужно, чтобы подменю отображало записи тех же типов, что и надменю, при этом подменю заранее "не знает", какого типа будут надразделы, то можно сделать так: types:{menu_params_types}. То есть при вызове подменю в параметр types будет автоматически прописано то же, что было указано при вызове надменю.
5. Нужно разбить список на несколько блоков:
   • Обратите внимание на параметры blocks, inblock и fixblocks.
   • Блоки могут быть полезны, например, при табличной вёрстке. В этом в полях до-после меню можете указать тег table, в полях до-после блока можно указать тег tr. А уже сами записи - теги td.
   • В случае с блочной/адаптивной вёрсткой лучше использовать возможности вёрстки. Но, если их не хватает, то перечисленные параметры - Вам в помощь.
6. Нужно разбить список на несколько подстраниц:
   • При формировании команды вызова списка используйте параметр inlist, укав в нём число равное тому, сколько записей нужно отобразить на одной подстранице.
   • Попутно можно задать (необязательно) параметры, listing, subpages, maxsubpages.
   • При оформлении HTML-кода списка заполните поля до-после списка подстраниц, а также обычного-активного пунктов и того, что между ними.
   • При оформлении HTML-кода списка Вам точно пригодятся следующие свойства меню: {menu_subpage} и {menu_subpage_url}, а также возможно пригодятся {menu_subpage_firsturl}, {menu_subpage_lasturl} и {menu_subpages}.
7. Нужно отобразить список новостей или товаров:
   • Здесь всё аналогично, но у новостей, скорее всего должна быть дата, а также краткий текст (помимо основного) и, возможно, изображение:
     • Добавьте в шаблон новостей (если их там ещё нет, но в комплекте поставки изначально они созданы) элементы Дата, (для краткого тексты) Многострочное поле с редактором (если в нём планируется HTML-оформление текста) или Многострочное поле без редактора (если там будет только текст без HTML), а также Изображение (для него также можно указать сразу несколько размеров, до которых необходимо обрезать изображения).
     • Для формирования команды отображения даты Вам может пригодиться мастер по вставке плагина TimeMashine (смотрите раздел меню администратора Инструменты \ Мастеры для вставки плагинов). Код может быть примерно таким: {plugin:timemashine;value:{content_date_3_value}}.
     • Для краткого текста используйте свойство наподобии {content_multistringfieldwitheditor_4_value}.
     • Для картинок используйте свойства уменьшенных копий, например, {content_pic_5_100x100}, а в ссылках для просмотра оригинала уже что-то вроде {content_pic_5_original}.
     • Подсказки по тому, какие точно нужно использовать свойства Вы найдёте при правке соответствующих записей
   • У товаров также может быть изображение, а также цена и какие-либо другие характеристики:
     • Удалите из шаблона ненужные элементы, либо переименуйте и настройте их, добавив недостающие (числа, однострочные текстовые поля, выбор из вариантов и т.п.). Сохраните шаблон. Подсказки появятся при правке товаров.
     • Для цены (это элемент Число, для которого установлена отметка Это цена) будет доступно несколько подсказок. В большинстве случае можно использовать что-то вроде: {content_number_6_value}. Но также есть варианты с учётом или без учёта скидок. Об этом - позже...
8. Нужно отобразить список результатов поиска:
   • Это подбно описано в статье Как наладить поиск по сайту?

Вставка других "популярных" плагинов

Ознакомьтесь со следующими статьями:

1. Плагины Mailback и Callback (чтобы узнать, как грамотно настроить и вставить плагины обратной связи и заказа обратного звонка)

Эта статья находится в стадии наполнения...