Меню Рубрики

Установка готового сайта на modx

Урок 1. Установка MODX Revolution

CMS MODX Revolution достаточно проста в работе. Еще проще процесс ее установки на хостинг. Все, что вам потребуется, это создать базу данных, не забыв записать реквизиты доступа к ней (имя базы данных, имя пользователя базы данных, пароль для доступа к БД); загрузить на сервер установочные файлы пакета; произвести саму установку.

Скачивать установочный пакет MODX Revolution следует непосредственно у разработчиков: на странице загрузки – https://modx.com/download.

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

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

Загрузка на хостинг установочного пакета может выполнена по-разному. При наличии файлового менеджера в панели управления вашего хостинг-провайдера загрузите на сервер архив и разархивируйте его. Если вы любитель FTP-клиентов, воспользуйтесь одним из них, например, FileZilla, бесплатным и надежным.

А непосредственно к самой установке мы сейчас и приступим…

Для начала установки MODX (при условии, что доменное имя в наличии, хостинг зарегистрирован, база данных создана, а файлы установщика размещены на сервере в нужном месте) запускаем процесс, введя в адресной строке следующее:

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

Выбираем нужный язык, нажимаем «Выбрать» и переходим к экрану, на котором только кнопку нажать. Конечно, предварительно прочтя буквы-приветствия от разработчиков MODX:

На этом экране нам предлагается выбрать тип установки. Новый сайт, значит, установка «Новая». Дополнительные параметры, связанные с назначением прав доступа к файлам и каталогам, оставляем как есть, по умолчанию, опцию «Отправлять заголовок x-Powere-by» отключаем, продолжаем процесс с помощью кнопки «Далее».

Следующий этап состоит из трех шагов и окажется чуть более трудоемким.

На первом шаге настраивается подключение к нашей базе данных. Вводим имя пользователя (именно базы данных, созданной нами на сервере), пароль пользователя, также базы данных, имя самой базы данных.

Для повышения безопасности рекомендуется изменить и значение префикса таблиц, на что-нибудь, мало схожее с «modx».

Покончив с вводом данных, нажимаем «Проверить соединение с сервером базы данных и отобразить список доступных сопоставлений»

При успешном соединении с БД можно переходить к следующему шагу: проверить кодировку и сопоставление символов. Если значения по умолчанию вас устраивают (как правило, это так, за исключением каких-то особых требований), выполняем проверку «Попытка создания или выборки из базы данных».

Положительный результат проверки приводит нас к третьему шагу этапа: вводу данных администратора – логина, адреса электронной почты и пароля. Именно эта пара «Логин/пароль» будет требоваться для входа в панель управления сайтом.

Следующий этап – отчёт о проверке выполнения требований к серверу.

Если все в порядке, нажимаем кнопку «Установить» и совсем недолго ожидаем сообщения об успешном окончания процесса установки ядра.

Кнопка «Далее» завершит процесс установки полностью.

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

Следите за тем, чтобы опция удаления каталога и файлов программы установки оставалась включенной. Если Вы не удалите файлы установки, то любой желающий сможет получить доступ к сайту!

Вводим данные администратора – «Имя пользователя (логин)» и «Пароль».

Все, мы в административной части сайта, панели управления MODX Revolution.

В дальнейшем, чтобы попасть в панель управления, в адресной строке браузера необходимо вводить следующий адрес – http://адрес_Сайта/manager

MODX Revolution имеет особенность: для работы самого сайта панель управления не нужна. Ее можно безболезненно (?) отключить, удалив на сервере папку «manager». Но для этого нужны определенные и веские основания. Просто знайте о такой возможности.

На этом с установкой покончено. Ничем не сложнее знаменитой пятиминутной установки WordPress.

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

источник

Шаг 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 кода, который может быть включен в шаблон. Так оно и есть. Хотя на практике часто чанки могут быть также составной частью сниппетов, но об этом мы поговорим позднее в следующих статьях.

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

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

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

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

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

Читайте также:  Установка cor 1 mhie 403 em

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

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

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

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

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

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

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

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

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

источник

Перенос 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).

источник