Part-4

 

 

[maxbutton id="14" url="#start" text="Посадка - Быстрый старт!" ]

 

[maxbutton id="12" url="#section-chanks" text="Список СЕКЦИЙ - ЧАНКОВ" ]

 

[maxbutton id="14" url="#modxsimple" text="Не полная посадка на MODX завершена!" ]

 

[maxbutton id="13" url="#zagolovok_h1" text="Выводим Заголовок -h1-" ]

 

[maxbutton id="12" url="#main_menu" text="Вывод Главного Меню" ]

 

[maxbutton id="9" url="#posadka-image" text="Выводим Картинку" ]

 

 

      WEB - STEP -  GO   

 

 

И так,  -  мы имеем настроенный  MODx:

 

Далее в статье УПОМИНАНИЕ НЕОБХОДИМЫХ КОМПОНЕНТОВ:

 

 

 

 

Теперь, у нас есть УСТАНОВЛЕННЫЙ    Open Srver 

 

Можем продолжать:

 

 

Далее:

 

 

И теперь установим  MODX  в папку домена:

 

    C:\OSPanel\domains\web5.my7life.ru   

 

 

 

Отлично - MODX Локально установлен!

 

 

 

И так, у нас есть локально установленный MODX на Open Server

 

 

 

 

Далее,

 

 

[maxbutton id="14"  text="Посадка - Быстрый старт!" ]

 

 

Копируем файлы сверстанного сайта прямо в корневую папку CMF MODX:

 

 

 

Пока у нас все в куче - но нам советовали не расстраиваться))

 

Далее: копмонуем папки

 

 

  node_modules  - пусть остаются в корне   MODX 

 

Т.е. корень нашего сайта - у нас будет корневым для нашего сервера:

 

 

 

Далее откроем:     gulpfile.js  

 

 

 

Далее нам нужно изменить пути:

 

 

Далее переходим в наш локальный домен:

 

   C:\OSPanel\domains\web5.my7life.ru  

 

Запустим консоль в директории нашего домена:

 

 

Надо искать ошибки:

 

 

И видим локальную версию:

 

 

 

 

 

Т.е.    sass    - у нас будет компилироваться

 

[maxbutton id="12" text="Посадка HTML верстки на MODx. Шаблоны и чанки" ]

 

Приступаем к посадке HTML верстки на MODx. Шаблоны и чанки

 

 

 

Все файлы, которые мы будем интегрировать в MODx - находятся тут:

 

 

 

 

Начальный шаблон, отвечает у нас

за вывод    "Главной страницы"  

 

Какая то проблема:

 

Рассыпается страница BaseTemplate(1):

 

 

 

Если использовать альтернативный запуск нашего сайта на локальном домене: web5.my7life.ru

 

   Да, похоже что именно так и нужно запускать Админку MODX  

 

 

 

 

То админка, а точнее Стартовый шаблон

   BaseTemplate(1) - работает нормально! 

 

 

В целом это просто   <ЗАГЛУШКА> 

и она нам не нужна по сути в этом виде, но тут есть полезные

   [placeholder]  

 

 

Далее,

 

Это все нам не нужно - удалим полностью содержимое Шаблона "Главной страницы" - и начнем уже интегрировать.

 

 

А точнее, сохраним у себя в папке

 

 

С помощью

 

 

 

 

Отлично, теперь можем его удалить в Админке MODX:

 

И идем в наш локальный домен:

 

 

Или откроем прямо из   Sublime3 

 

 

Затем вставляем в Стартовый шаблон MODX:

 

 

И начинаем интеграцию:

 

Для начала вставим placeholder установки кодировки:

 

 

  [[++modx_charset]]  

 

 

 

Затем вставим placeholder

 

 

     [[*pagetitle]] - [[++site_name]]    

 

 

Вообще вот где находиться наш   pagetitle

 

 

 

А       [[++site_name]]       мы задавали в настройках MODX:

 

Тут:

 

 

 

 

И вставляем сразу двойную конструкцию:

 

 

Вставили:

 

 

Теперь "Описание":

 

    [[*description]]   

 

 

Находится и задается тут:

 

 

 

Вставляем    placeholder   в наш Шаблон:

 

 

Вставили, ну и хорошо!

 

 

Со стилями пока пустые теги напишем

 

 

Далее:

 

    У нас новый путь!  

 

 

Ну во первых у нас не указан тэг   "base" 

 

Прошипим его:

 

     <base href="[[!++site_url]]" />    

 

   !     - восклицательный знак, означает, что мы не кэшируем данный вывод.

 

  ++     - два плюса говорят, что мы вводим какое то системное значение или системную переменную.

 

   site_url      - это адрес нашего домена    web5.my7life.ru 

 

 

Т.е. - если у нас задан    base    - то мы в начале наших путей -

     слэш - не ставим!   

 

И любой путь - будет расчитываться начиная от    base   

 

     Теперь уточним путь до стилей:   

 

 

 

Отлично! Стили стали доступны в верстке интегрированной в MODX:

 

 

И далее, мы также уточняем пути, добавляя:

 

    assets/app/    

 

 

 

отлично - появилась favicon:

 

 

 

Затем сделаем Авто-Замену:

 

Путей до картинок на:

 

    src="assets/app/img/   

 

 

 

Сохраним - и посмотрим!

 

Отлично! Картинки появились!

 

 

Далее:

 

 

Очень АККУРАТНО с Автозамено href -

Мы случайно переписали все src - До сих пор не ясно как такое могло произойти! 

    Иной раз лучше делать замену в Полу-Автомате!   

 

 

   Теперь уточняем пути для всех библиотек!  

 

 

 

 

 

Обратим внимание - что КАК НИ СТРАННО, но Иконки  - у нас

    ПОДКЛЮЧЕНЫ!  

 

 

 

 

У нас ПРОБЛЕМА ПОДКЛЮЧЕНИЯ      common.js   

 

 

 

 

Пока исправим проблему вывода картинок в галерее:

 

   Искать НУЖНО в АДМИНКЕ MODX:   

 

 

 

 

Еще удобно искать ошибки      Ctrl + U 

 

 

Исправили - порядок!

 

Теперь лечим наши скрипты:

 

 

И теперь посмотрим на внешний вид сайта уже на MODX:

 

 

 

     Отлично!  Можем продолжать посадку нашего сайта на MODX!   

 

 

 

Это он новый проект делает)

 

 

Не будем отвлекаться)

 

Далее

 

[maxbutton id="12" text="Список Секций-Чанков" ]

 

 

 

 

 

Кроме разбивки СЕКЦИЙ на ЧАНКИ - существует еще ОСНОВНАЯ РАЗБИВКА.

 

ОСНОВНАЯ РАЗБИВКА - это отделение:

 

<HEAD>      и        <FOOTER>  

 

т.е. - шапки и подвала.

 

Работаем в нашем Шаблоне MODX:

 

 

Затем: даем имя вырезанному куску - т.е. чанку:

 

 

 

   СОХРАНЯЕМ!    

 

И смотрим - Внешний вид сайта у нас не изменился!

Но Шапка сайта выводится уже при помощи ЧАНКА!

 

 

 

Рекомендуется посмотреть урок про чанки:

 

 

Отметим одну особенность:

 

Весть КОД ЧАНКА    [[$head]]  

мы можем использовать везде, кроме

но не на всех страницах   BODY   - будет иметь класс   <ishome> 

 

Поэтому внутри чанка     [[$head]]   

мы зададим - еще и   placeholder 

 

 

 

Далее возвращаемся в ШАБЛОН:

 

Давайте зададим параметры чанка:

 

 

 

 

 

 

 

 

и заполним его

 

 

ПОКА ПРОБЛЕМА!

 

Параметр     isnohome    - не ХОЧЕТ ПРИМЕНЯТЬСЯ!!!  

 

Пока пропускаем это недоразумение.

 

Во всяком случае ЭТО можно обойти - используя несколько ЧАНКОВ в которых будет указано раздельно и ЯВНО:

    ishome    - Главная

   isnohome    - Вложенная

 

Продолжим разбивать нашу главную страницу на ЧАНКИ:

 

Вырезаем весь   <HEADER> 

 

 

 

 

 

 

    Все отлично!

Продолжаем Резать страницу на ЧАНКИ:   

 

 

 

Укажем заменяющий    placeholder  

 

 

 

 

 

  ПАРАМЕТРЫ ЧАНКА:  (ПОНЯТНО В ЧЕМ ТУТ ДЕЛО)  

 

Главная страница ->    [[$head?]]  

head (чанк) ->    <body class="[[+bodyClass]]">  

 

На выводе получим:

 

 

 

 

Главная страница ->    [[$head? &bodyClass=ishome]]  

head (чанк) ->    <body class="[[+bodyClass]]">  

 

На выводе получим:

 

 

 

Далее,

 

 

[maxbutton id="14" text="Не полная посадка на MODX завершена!" ]

 

 

    Посадка HTML верстки шапки на MODx     

 

 

 

 

Поработаем с чанком     [head]  

 

 

 

Далее работаем над чанком    [header]  

 

 

Настроим всю шапку - что бы она выводилась из MODX Revolution

 

Открываем чанк    [header]   

 

 

Будем идти по коду чанка - и смотреть что как сделано у нас:

 

делаем вывод имени сайта:

 

 

 

 

Затем нам нужно вывести    ТЕЛЕФОН: 

 

Это можно сделать через СИТЕМНЫЕ ПЕРЕМЕННЫЕ

 

 

Создадим новый параметр (СИСТЕМНУЮ ПЕРЕМЕННУЮ)

 

 

 

 

 

 

 

Далее будем делать

 

 

[maxbutton id="12" text="Вывод Главного Меню" ]

 

 

 

 

 

Выводить будем через   PdoTools   - но перед заполнением, нам необходимо заполнить соответствующие ресурсы:

 

Создадим новый ресурс:

 

 

 

Поэтому "Монтаж"

 

 

 

Создаем:

 

 

Создали:

 

 

 

И заменяем его на    [ placeholder ] 

 

 

 

 

 

 

   Отлично!   Мы вывели Главное МЕНЮ из MODX!   

 

 

 

и видим:

 

 

И поскольку у нас МЕНЮ - дублируется (для мобильных устройств) - мы также заменим его код на  [ placeholder ]  

 

 

 

 

 

Далее,

 

 

[maxbutton id="14" text="Выводим ЗАГОЛОВОК  - h1 -" ]

 

 

 

Укажем     [ placeholder ]   

 

 

 

 

И зададим расширенный заголовок:

 

 

Гут!

 

 

 

Далее будем выводить СПИСОК:

 

 

 

GO в Админку MODX:

 

 

 

 

Что нам теперь необходимо сделать!

 

Нужно создать дополнительное поле:

 

 

и заполним поля:

 

 

   А точнее ПАРАМЕТРЫ ВВОДА!!!  

 

 

НО! прежде чем двигаться дальше, нам необходимо

 

   УСТАНОВИТЬ ПОЛЯ MIGX  

 

GO к инструкции:

 

 

   Установили MIGX!    Можем продолжать.

 

 

И нам понадобиться для конфигурации  migx-sample:

 

 

 

И кладу сразу сюда:

 

 

 

 

 

 

Тут наиболее часто используемые   ТИПЫ ПОЛЕЙ:  

 

 

Поэтому копируем TAB-бы:

 

 

И вставляем:

 

 

Далее копируем  код в  Table:

 

 

 

и еще настройка:

 

 

 

Сохранили даше Дополнительное поле   home-list 

 

И переходим сюда:

 

 

добавляем элементы:

 

 

 

И тперь собственно сделаем вывод нашего

СПИСКА ПРЕИМУЩЕСТВ:

 

Используя:

   [ placeholder ]  

 

 

 

 

 

 

 

И видим - наш Список уже выводится из MODX:

 

 

 

 

Далее,

 

[maxbutton id="9" url="#posadka-image" text="Выводим Картинку" ]

 

 

Нам нужно создать ДОПОЛНИТЕЛЬНОЕ ПОЛЕ - для нашей картинки:

 

 

 

Далее заполняем:

 

 

 

   [ placeholder ]  

 

 

 

 

 

 

 

 

 

И еще

 

 

 

 

   Особенности вывода картинок MODX:

 

Если мы выводим изображения [Image] то Автор советует выводить их с помощью    Phptumboff  

 

   НО!    

 

Если выводимая картинка больше отведенных рамок или она является частью дизайна - (как в нашем случае) - то не обязательно ее выводить, через    Phptumboff     . Но при этом контент-менеджер, должен понимать, что картинка должна иметь подходящий размер.

А если речь о картинках-фото: (фото товаров например, или иконки для Items - которые могут наполнятся, репититься), то такие ИЗОБРАЖЕНИЯ - всегда выводить через   Phptumboff