Меню Рубрики

Установка готового шаблона modx

Установка шаблона на MODx

В создании сайта на MODx зачастую используются уже готовые шаблоны. Благо, на данный момент таких шаблонов огромное количество. Заказчик может лично выбрать и предоставить веб-студии шаблон, который ему приглянулся, а дальше, специалисты уже берут дело в свои руки. Также готовые шаблоны (бесплатные и платные) помогают и самим разработчикам, так как некоторые шаблоны могут сильно походить на ТЗ заказчика, при этом у шаблона достаточно изменить только цвет ссылок или шапку.

В интернете существует множество порталов, где можно найти и скачать шаблоны на MODx бесплатно или купить отличную тему. Такими площадками могут стать, например, Themeforest, Template Monster и др.

Исходные данные шаблона MODx для установки

В шаблон для MODx входит определенный набор файлов:

    файл CSS, который содержит стили;
    файл(-ы) JavaScript, но как правило, они не всегда имеются;
    файл, в котором содержится код шаблона;
    файл (папка), в которой находятся изображения шаблона;
    иные файлы, необходимые для корректной работы шаблона;

Этапы установки MODx-шаблона

В директории сайта assets/templates/ создается новая директория, например, rg_template/. Затем в данную папку копируются файлы со стилями CSS, а также папка с изображениями.

Внимание. Нельзя изменять пути к файлам в коде шаблона и таблице стилей CSS.

Далее переходим к административной панели MODx. Здесь нужно зайти в раздел Новый шаблон (Элементы — Управление элементами). Появится форма для заполнения:

Имя шаблона — введите название шаблона, например, rg.
Код шаблона — вставьте скачанный код шаблона сайта. Как правило, он хранится в отдельном файле в формате txt.

Далее нажмите на кнопку «Сохранить».

Основные ошибки и проблемы

Плагины Шаблон сам по себе может выглядеть замечательно и эффектно, однако после установки некоторые элементы могут не сработать. Для этого необходимо установить соответствующие плагины.

Меню От устанавливаемого шаблона MODx зависит структура меню сайта. Для того чтобы меню выглядело именно таким, как в шаблоне, необходимо внести некоторые изменения в стилях CSS и настройках сниппета (Wayfinder).

Битые ссылки В виду того, что в фале стилей CSS все пути к стилям являются абсолютными, тогда после установки шаблона на сайт ссылки могут быть «битыми». Обратите на это внимание и лучше перепишите ссылки на относительные.

источник

Перенос HTML шаблона в MODX Revo

В прошлых уроках мы установили и настроили modx, а также установили пакеты, которые будут необходимы для создания сайта. Сегодня урок о переносе обычного HTML/CSS/JS дизайна в MODX Revo. Где можно достать дизайн я писал в статье: MODX шаблоны – что это, где их достать (скачать, заказать, купить). Для своего сайта я выбрал готовый платный адаптивный bootstrap шаблон на themeforest за 17$ под названием brightbox (кликните по названию, чтобы посмотреть его демо и описание). Можете использовать абсолютно любой, их полно и бесплатных — так скорее всего лучше поймете весь принцип натяжки.

Структура HTML тем

Практически каждая тема имеет в себе html, css, js и файлы картинок + у многих еще есть php файлы — обработчики форм.

В моем случае в папке assets находятся css и js файлы (в соответствующих директориях), в папке images — изображения и красные файлы (у вас могут быть не красными — все зависит от установленного по умолчанию браузера) — это html файлы.

Перенос шаблона в Modx

Самый простой способ — это просто закинуть все файлы с папками (кроме html) в корень веб-сайта. Но я пойду более сложным путем. Так как modx у меня закален и директории assets у меня нет, я залью содержимое из assets (подпапки css и js) в корень сайта и images тоже в корень.

Раньше я создавал директорию template и закидывал в нее все файлы — можете поступить так же.

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

В дереве слева, переходим во вкладку «Элементы» и открываем начальный шаблон (можно просто щелкнуть лкм или пкм и выбрать редактировать).

Удаляем его и заменяем на код из index.html (которые мы не закинули в корень сайта).

Открыть html файл можно при помощи обычного блокнота, но лучше использовать специальный редактор, например brackets.

Сохраняем и переходим на главную страницу сайта.

Главная страница сейчас выглядит криво.

Это произошло потому-что, пути к скриптам и css изменились.

Правка путей

К стати немного странная тема, обычно путь идет через слэш /, а \, поправим это.

Если вы уже установили пакет ace, то можно легко и просто сделать поиск с заменой, для этого щелкните в код и затем нажмите сочетание клавиш Ctrl+H (работает на Linux и windows), в верхнее поле вводим \, а в нижнее / и нажимаем all.

Точно также удаляем из путей assets (у нас такой папки нет, и все лежит в корне).

Внимание! Я не буду использовать тег base, поэтому я оставил впереди пути / — сделал абсолютный путь, в случае традиционного использования тега base слэш в начале не нужен.

Сохраняем, если все пути поменяли корректно, то откроется нормальная страница (как в оригинале шаблона), если этого не произошло, то попробуйте обновить кэш браузера CTRL+F5 — не помогает и это тогда перепроверяйте пути (иногда нужно менять пути внутри файлов css и даже в js).

источник

Шаг 2: Импорт готового дизайна

В предыдущей статье мы полностью подготовились к работе и установили демонстрационную версию MODx. На этом шаге установим готовый дизайн в MODx, разобьем шаблон на небольшие части (чанки, chunks), сделаем некоторые основные настройки для будущего сайта…

Читайте также:  Установка запорной чеки в картридж

Установка MODx CMS…что, снова? Да!

Начнем мы с того, что удалим предыдущую установку демонстрационной версии. Да, вот так жестко, но я же предупреждал. Кто пропустил этот момент в прошлой статье, может пропустить и следующий абзац.

Забегая вперед, конечно, мы могли и не удалять демо-версию, а начать работу прямо с этим кодом, удаляя лишнее или изменяя существующий код… но сделать все с нуля будет проще и быстрее. Короче говоря, заходим в папку с установленной системой и удаляем все файлы. А также очищаем базу данных от предыдущей установки (сделать это проще всего с помощью phpMyAdmin).

Кто еще не скачал архив с установкой системы управления MODx, должен будет сделать это здесь. Напомню, что здесь я предлагаю слегка модифицированный установочный пакет, однако совершенно не настаиваю на нем. Теоретически никакой проблемы быть не должно, если вы скачаете установочный архив с официального сайта, однако в этом случае все вопросы с кодировкой и мелкими настройками, о которых я говорил ранее, нужно будет решить самому.
Дополнено: На текущий момент все проблемы с кодировками удачно решены, поэтому крайне рекомендуется скачивать последнюю стабильную версию MODx с официального сайта.

Запускаем установку системы заново. Как установить и что для этого нужно… всем поленившимся в первой статье – прошу таки пройти на Wiki. Хотя у меня будет пара замечаний, которые я, к сожалению, упустил в первой статье:

  • Чтобы использовать кодировку UTF-8 на все 100, на вашем сервере должен быть установлен PHP с расширением mbstring. Чтобы проверить наличие этого расширения на вашем сервере, загрузите на свой сервер файл info.php (переименуйте .txt в .php) и откройте его в своем браузере. Откроется длинная страница с описанием настроек вашего PHP, в том числе должен встретиться заголовок с названием “mbstring”. Если нашли, то все в порядке. Если нет, проще всего попросить поддержку хостинга включить это расширение. На домашнем сервере, извините, придется разобраться самому.
  • Версия сервера баз данных MySQL должна быть не менее 4.1, т.к. только начиная с этой версии MySQL корректно работает с кодировкой UTF-8.

Итак, дойдя до страницы “Дополнительные элементы/Optional Items”, предлагаю выбрать только самые необходимые элементы. Кроме того, если установлен флажок “Пример веб-сайта”, — снимите его. Итак, нажмем сначала кнопку “Ни один/None”, чтобы очистить все выбранные по умолчанию флажки, а затем выберем только нужные нам:

  • Модуль “Doc Manager” (модуль для гибкого управления документами внутри MODx)
  • Модуль “QuickEdit” (модуль для быстрого доступа к редактированию страницы)
  • Плагин “Bottom Button Bar” (модуль, добавляющий дополнительные кнопки внизу страницы в MODx)
  • Плагин “Forgot Manager Login” (добавляет ссылку для восстановления пароля для доступа к системе управления)
  • Плагин “Inherit Parent Template” (плагин автоматически назначает каждому дочернему документу родительский шаблон)
  • Плагин “QuickEdit” (плагин, работающий в паре с одноименным модулем)
  • Плагин “TinyMCE” (плагин, добавляющий графический редактор TinyMCE для работы с текстом внутри MODx)

И… все. Как вы заметили, ни один стандартный сниппет я не выбрал. В предыдущих статьях я говорил о том, что чаще всего (для меня) проще написать свой код для реализации небольшой функциональности, нежели подыскивать готовое и пытаться переделать это на свой лад. Хотя вполне возможно, что какие-то готовые решения мы все же используем.

Будем считать, что установка завершена.

Заходим в систему управления по адресу “/manager/” с введенными ранее логином и паролем. При первом входе в систему необходимо сделать следующие настройки:

  • Установить “Заголовок сайта”/“Site name”: Демонстрационный сайт MODx CMS.
  • Выбрать “Язык системы управления”/ “Language”: Russian-UTF8 (обязательно проверить, что выбран именно этот языковый пакет, а не просто Russian).

На закладке “Семантические URL”/“Friendly URLs”:

  • Выбрать “Использовать семантические URL ”/“Use friendly URLs ”: “Да” (включаем дружественные/семантические ссылки).
  • Выбрать “Использовать псевдонимы в URL”/“Use friendly aliases”: “Да” (включаем алиасы/псевдонимы).
  • Выбрать “Использовать вложенные URL”/“Use friendly alias path”: “Да” (разрешаем создавать вложенные ссылки).

Все остальные параметры пока оставляем без изменений и жмем кнопку “Сохранить”/“Save”. На этом шаге можно считать систему управления установленной и настроенной для дальнейшей работы.

Установка своего шаблона в MODx CMS

При установке MODx, даже если не выбирать установку демонстрационного сайта, автоматически устанавливается шаблон по умолчанию, называемый “Minimal Template”. Этот шаблон доступен здесь: закладка “Ресурсы” -> “Управление ресурсами” -> Закладка “Шаблоны”.

Откроем сайт для просмотра через закладку “Сайт” -> “Предпросмотр” и увидим что-то похожее на следующий рисунок:

Хм… не совсем то, что хотелось бы. Но это уже кое-что, не так ли? Так давайте продолжим и сделаем все еще круче.

Итак, вставим подготовленный шаблон в MODx. Взглянем еще раз на него – что шаблон из себя представляет? Один HTML файл “index.html”, две папки “css” и “design”, содержащие набор CSS файлов и набор изображений для нашего дизайна соответственно. Файл “index.html” собственно и будет основой для шаблона внутри MODx.

Теперь нам необходимо загрузить все составные части нашего шаблона в рабочую директорию MODx. Практически не имеет разницы, куда именно мы загрузим свои файлы, т.е. мы могли бы загрузить эти файлы прямо в основную папку, где установлена система управления MODx. И даже более того, если мы так сделаем, как ни странно, все будет замечательно работать. Однако теоретически подразумевается, что для шаблонов в MODx должна использоваться специальная директория по адресу “/assets/templates/”.

Читайте также:  Установка батареи с картинами

Мы будем использовать именно эту директорию для работы, как это нам предлагают разработчики. Кроме того, мой личный опыт показывает, что если хранить все файлы в корневой директории MODx, постепенно при росте объема сайта накапливается множество разных файлов. Эти файлы в итоге вносят большой информационный шум, проще говоря, захламляют систему, и позже становится все сложнее разобраться в этой куче разнообразных документов.

Зайдя по указанному выше адресу, мы увидим пару папок, называемых “default” и “modxhost”. Это папки, содержащие набор файлов, которые используются для шаблонов демонстрационных сайтов. В том числе директория “default” используется для той зелененькой странички, которую мы видели ранее при предпросмотре.

Смело удаляем обе директории “default” и “modxhost”, поскольку они нам больше не понадобятся. И создаем новую, назовем ее “crystalx” по названию нашего HTML шаблона. Теперь скопируем папки “css” и “design” в эту новую директорию.

И вновь вернемся к системе управления. Снова откроем закладку “Ресурсы” -> “Управление ресурсами” -> Закладка “Шаблоны” и кликнем по ссылке с названием шаблона “Minimal Template”. Нам откроется новая страница для редактирования этого шаблона, где мы увидим несколько полей ввода. Но сейчас нас будут интересовать только следующие поля, которые мы будем сразу редактировать:

  • Имя шаблона – назовем наш шаблон “Основной шаблон”.
  • Описание – пусть будет что-то в этом духе: “Основной шаблон, используемый для сайта”. Не очень креативно, согласен… кому не нравится, может просто оставить это поле пустым.
  • Код шаблона (html) – большое поле ввода, в котором находится основной код HTML шаблона вместе с некоторыми управляющими конструкциями MODx, например,[(site_name)] или [*#content*]. Бесстрашно удаляем отсюда весь старый код, копируем содержимое файла “index.html” и вставляем его в это поле, после чего жмем кнопку “Сохранить”.

Посмотрим, что же у нас получилось. Открываем закладку “Сайт” -> “Предпросмотр” и… ой, какой ужас. Мы видим, что вроде бы что-то изменилось, но на первый взгляд – “шеф, все пропало!”. Т.е. наблюдаем мы примерно такую картинку:

Да, действительно не совсем то, что ожидали. Но не все так плохо, как то могло показаться на первый взгляд. Когда мы готовили шаблон для сайта, не учитывали, что пути к картинкам и CSS файлам могут измениться. А они изменились! Как вы помните, мы перенесли эти файлы в папку “assets\templates\crystalx”, поэтому сейчас нам нужно заменить все пути с учетом этого переноса.

Снова открываем шаблон для редактирования (“Ресурсы” -> “Управление ресурсами” -> Закладка “Шаблоны”). Теперь он у нас называется “Основной шаблон”. И меняем все пути к CSS файлам и картинкам на новые, например, так для CSS файлов:

Сделали? Отлично. Тогда сохраняем измененный шаблон в MODx и заново открываем главную страницу сайта… Ну вот теперь получилось то, что нужно, ага? Для крайне ленивых нетерпеливых вот готовый шаблон index-modified.html с уже измененными путями к файлам.

Деление на чанки (chunks)… или на первый-второй рассчитайсь!

Судя по глоссарию на нашем сайте, чанк (chunk) – это кусок HTML кода, который может быть включен в шаблон. Так оно и есть. Хотя на практике часто чанки могут быть также составной частью сниппетов, но об этом мы поговорим позднее в следующих статьях.

А на данном этапе мы просто разделим свой шаблон по небольшим частям, где каждая часть будет представлена отдельным чанком.

Для чего это делается? Ведь у нас и так имеется рабочий шаблон, нужно только запрограммировать динамические элементы и вперед… Да, в принципе можно поступить и так. И снова, как это не удивляет, система будет работать!

Но мы себя с самого начала приучаем к порядку. Разделив свой готовый шаблон на отдельные кирпичики – чанки , мы сможем лепить новые шаблоны на его основе, просто добавляя или удаляя этот строительный материал без какого-либо дополнительного создания кода. Кроме того, такое логическое разделение на части реально помогает в дальнейшей работе над сайтом (объяснить сложно, это нужно просто почувствовать).

Итак, давайте в который раз взглянем на внешний вид нашего сайта и прикинем, на какие части его можно было бы логически разделить?

Начнем с того, что у нашего шаблона имеется хорошо заметный темно-синий заголовок сайта, в коде шаблона он представлен в блоке с > “Управление ресурсами” -> Закладка “Чанки” (мы используем сейчас только поле “Название чанка”), а после скопируем сюда код всего блока с >

Аналогично мы можем выделить отдельный блок с >

И так мы пройдем до последнего логического блока. Так, например, блок основного содержимого ( >

Также следует иметь ввиду, что название чанка может быть даже на русском языке. Например, чанк <> мы вполне могли переименовать в <<ОСНОВНОЙ-ТЕКСТ-САЙТА>>, при этом , конечно, не забывая указать в своем шаблоне точно такое же название чанка. Однако я рекомендую все же использовать унифицированный английский язык, как это, например, обычно делается с названиями идентификаторов >

В результате у нас получится вот такой шаблон (index-modified3.html) и набор небольших кусков HTML кода – чанков:

Чтобы сделать наш шаблон еще более универсальным, выделим в отдельный чанк <> (head-chunk.txt) программный заголовок HTML кода в шаблоне ( . ). В итоге получится совсем короткий шаблон (index-modified4.html). Скопируйте его код и замените текущий шаблон в MODx, а также создайте все оставшиеся чанки и заполните их соответствующим кодом (код каждого чанка доступен по ссылкам выше).

Читайте также:  Установка горизонтального бурения мощность

Ну что ж… откроем наш сайт снова через предпросмотр или просто обновим страницу. Ничего не изменилось? Отлично! Это значит, что мы все сделали правильно. Ура, товарищи!

За сим будем считать сегодняшний урок оконченным. Подведем его итоги:

  • Мы установили настройки в MODx, которые желательно сделать перед началом работы над новым сайтом.
  • Узнали о принципах работы с шаблонами в MODx – где хранятся шаблоны в системе, как их создавать и редактировать.
  • Научились импортировать свой готовый HTML шаблон в систему управления.
  • Определили назначение чанков и использовали их функционал в своем шаблоне.

Всем спасибо за внимание, комментарии и пожелания приветствуются.

источник

Урок 1. Подтягиваем дизайн сайта на CMS MODx

10 марта 2014 By Сергей Нечипорук 5 комментариев

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

Отличительной особенностью является то, что для MODx используются самые обыкновенные html шаблоны, а их в интернете десятки тысяч экземпляров, да к тому же, большинство из них совершенно бесплатны. Так что если вы выбрали данный движок для своего проекта, то проблем с дизайном возникнуть не должно.

Так как эта серия уроков посвящена созданию сайта визитки на MODx, то шаблон я старался подбирать более современный, который был бы универсальный и легко затачивался под компании различных направлений.

Мы с вами будем разрабатывать сайт на основе шаблона Retina — Free Template от производителя – chocotemplates. Скачать его можно по этой ссылке – ссылка на шаблон.

Я выбрал бесплатную версию этого шаблона, но для ее использования нужно оставлять копирайт производителя. Но нам это не так важно. Главная задача – научится работать с шаблонами.

Архив включает в себя следующие файлы.

Index.html – этот файл нам не нужен, разработчики сделали его, чтобы демонстрировать работу шаблона на различных устройствах.

А папка «defaul» в свою очередь имеет вложение директории.

В папке «css» — хранятся стили и изображения, используемые в данной теме (папка «images»).

В папке «js» — содержатся файлы библиотеки jquery, а также скрипты подключения слайдера на главной странице сайта.

Файл home.html – основной файл html шаблона именно его мы и будем использовать.

Как вы видите, здесь нет готовых внутренних страниц, но я обязательно покажу вам как их добавить, в следующих уроках. А пока давайте разбираться с главной.

Непосредственная работа с движком MODx

После того, как вы разберетесь со структурой шаблона, можно приступать к работе с системой. Все шаблоны для MODx хранятся в папке /assets/templates/, именно туда нам и нужно залить папку с шаблоном. Директорию я назову «Retina». В эту папку заливаем все файлы которые находятся в директории «default». У вас должно получится следующее.

Теперь переходим в административную панель сайта в раздел и авторизуемся. Сделать это можно по адресу http://вашсайт.com/manager.

После авторизации вам нужно перейти в раздел «Элементы» – «Управление элементами» – Вкладка «Шаблоны».

Сейчас там есть шаблон с демо данными, его мы трогать не будем, а чуть ниже размещен шаблон под именем – «Minimal Template». Именно его мы и будет начинать править.

Нажимаем на ссылку этого шаблона и переходим в раздел его редактирования. Этот шаблон мы назовем «Главная», так как в следующих уроках мы будем делать и несколько внутренних страниц с различной структурой.

Чуть ниже, в поле – «Код шаблона HTML», нужно вставить код страницы index.html, которая размещена у вас на сервере по адресу — /assets/templates/retina/home.html.

После чего в верхнем правом углу жмем кнопку «Сохранить». И идем на сайт смотреть, что у нас получилось.

Как видите, структура сайта подключилась, стили и скрипты не подключены. Дело в том, что у нас поменялся путь ко всем этим файлам. Сейчас мы это исправим.

Для этого опять переходим в админ панель в раздел «Элементы» – «Управление элементами» – Вкладка «Шаблоны» и нажимаем редактировать шаблон «Главная».

Для начала между тегами , прописываем базовый путь для шаблона, делается это с помощью этого кода:

Также необходимо подправить все имеющиеся в коде пути к файлам: стилей, скриптов, изображений. Нужно внимательно проверит все элементы, для того чтобы шаблон подключился.

Маленькое отступление – на CMS MODx, придется много работать с кодом, поэтому советую вам поставить редактор Notepad++, он отлично подойдет для правки шаблонов.

Итак, для примера, если изображение в оригинальном шаблоне подключается вот таким образом.

То в MODx нужно изменить его на вот такую конструкцию.

То есть во всех путях добавляем приставку:

Если вы называли папку шаблона по другому, то «retina» нужно изменить на ваше название.

Для облегчения работы можете использовать в редакторе Notepad++ поиск по слову «src». Так вы сможете проверить, все ли элементы подключены.

После проделанной работы сохраняем наш шаблон «Главная» и идем на сайт смотреть на результат. Если вы сделали все правильно, вы должны увидеть следующую картину.

На этом сегодня все, дизайн подключен, а вот все остальные элементы дизайна мы будем подтягивать в следующих уроках.

Подписывайтесь на обновления, чтобы ничего не пропустить.

источник