УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Уроки MODx Revolution

Скачать материалы к учебному курсу - папка distr_MODx.zip




Урок 1. Установка и настройка CMS MODx Revo

1. Зайдите на сайт https://beget.com/ru

2. Выберите бесплатный хостинг.

Бесплатный хостинг

Рисунок 1.1

3. Зарегистрируйте аккаунт.

Бесплатный хостинг

Рисунок 1.2

4. Зайдите в панель управления по адресу https://cp.beget.com и введите свои реквизиты.

Хостинг beget

Рисунок 1.3

5. В левой части панели управления можно увидеть адрес Вашего будущего сайта. У Вас имя будет другим.

Хостинг beget

Рисунок 1.4

6. В панели управления найдите раздел CMS Установка систем управления.

Установка CMS

Рисунок 1.5

7. В списке найдите и щелкните по пункту MODx.

CMS MODx Revo

Рисунок 1.6

7. В следующем окне придумайте логин и пароль (или сгенерируйте пароль), введите электронную почту. Все реквизиты обязательно сохраните. После этого нажмите Установить.

Реквизиты CMS

Рисунок 1.7

8. Дождитесь окончания установки.

Установка CMS

Рисунок 1.8

В верхней части панели управления появится список установленных CMS.

Установка CMS

Рисунок 1.9

9. В браузере наберите адрес Вашего сайта. После установки CMS MODx 2.7.3 Revolution выглядит следующим образом.

CMS MODx Revolution

Рисунок 1.10

10. Чтобы войти в панель управления, к адресу сайта надо добавить /manager. Вот так http://адрес_сайта/manager. В нашем случае это будет http://z904981s.beget.tech/manager/

Появится форма входа в административную панель. Введите данные, которые Вы вводили на этапе установки (см. рис. 1.7).

CMS MODx Revolution

Рисунок 1.11

11. После входа в панель управления можно увидеть сообщение об ошибке:

Административная панель MODx Revolution

Рисунок 1.12

Каталог ядра в открытом доступе.

MODX обнаружил, что ваш основной каталог (частично) доступен для общественности. Это не рекомендуется из соображений безопасности.
Если ваша установка MODX выполняется на веб-сервер Apache, вам следует по крайней мере настроить файл .htaccess внутри каталога с файлами ядра: /home/z/z904981s/z904981s.beget.tech/public_html/core/. Это можно легко сделать, переименовав уже имеющийся там файл ht.access в .htaccess.

Чтобы переименовать файл ht.access в .htaccess, вернитесь в панель управления на хостинге (не путать с административной панелью сайта) и найдите пункт Файловый менеджер.

Файловый менеджер

Рисунок 1.13

12. В файловом менеджере в папке z904981s.beget.tech/public_html/core/ (у Вас часть адреса до первого слэша другая, соответствует Вашему логину) найдите файл ht.access

14. Вверху панели нажмите пункт Файл – Переименовать. Измените имя файла, как показано на рисунке, нажмите Переименовать.

Переименовать htaccess

Рисунок 1.14

15. Вернитесь в административную панель сайта и нажмите кнопку Обновить браузера. Если ошибка не исчезла, оставляем как есть, это уже надо обращаться в техподдержку.

16. В левой части админпанели сайта перейдите на ресурс Главная.

CMS MODx Revolution

Рисунок 1.15

17. В правой части откроется содержимое ресурса.

Административная панель MODx Revolution

Рисунок 1.16

18. Как видим текст страницы пока в виде html-кода. Поэтому прежде, чем перейти к созданию сайта, сделаем первоначальные настройки CMS MODx Revo и установим необходимые сниппеты для создания сайта, в том числе визуальный редактор, чтобы работать не с html-кодом, а с обычным текстом.

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

Системные настройки MODx Revolution

Рисунок 1.17

Изменение и сохранение настроек происходит автоматически, поэтому подтверждать ничего не нужно.

19. Основные настройки системы, которые сделайте после установки MODX.

Раздел «Сайт»

Название сайта: введите Моя web-студия

Сообщение о недоступности сайта: введите Сайт временно недоступен

Публиковать по умолчанию: будет ли новый документ доступен для просмотра посетителями сразу после создания и сохранения, установите Да

Раздел «Система и сервер»

Отображение RSS-канала «Новости MODX»: установите  Нет

Отображение RSS-канала «Уведомления безопасности MODX»: установите Нет

Раздел «Система управления»

Показывать текст подсказки рядом с полем: описание пунктов меню, установите Да

Формат даты в панели управления: напишите наш формат d-m-Y

Первый день недели: установите 1

Раздел «Дружественные URL» – режим ЧПУ

Транслитерация псевдонимов: напишите russian (для включения транслитерации дополнительно требуется установить расширение translit, мы его установим позже)

Суффикс контейнера: удалите слэш /

Использовать дружественные URL: установите Да

Строгий режим дружественных URL: установите Да

Проверять на дублирование URI во всех контекстах: установите Да

Использовать вложенные URL: установите Да

Включив на сайте ЧПУ (режим дружественных URL), убедитесь в файловом менеджере, что в корне сайта файл ht.access переименован в .htaccess, иначе при попытке перехода на страницы, отличные от главной, получите ошибку 404.

Если файл не переименован, измените его имя прямо в файловом менеджере.

Файловый менеджер

Рисунок 1.18

Примечание: можно через главное меню админки «Содержимое – Типы содержимого» в параметре HTML очистить поле «Расширение файла». Теперь адрес страниц станет без расширения, то есть http://адрес_сайта/about вместо http://адрес_сайта/about.html.

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

20. Сначала установим дополнение translit, который необходим для дружественных URL.

В верхнем меню административной панели зайдите Пакеты – Установщик. В окне Менеджер пакетов нажмите кнопку Загрузить пакеты.

Менеджер пакетов CMS MODx Revolution

Рисунок 1.19

21. Затем в строке поиска введите translit, нажмите Enter и нажмите кнопку Загрузить рядом с именем пакета.

Установка translit

Рисунок 1.20

22. Загрузка пакета не означает его установку. Устанавливать пакет надо вручную. Поэтому после загрузки перейдите на вкладку Вернуться в «Менеджер пакетов» и нажмите Установить.

Установка translit

Рисунок 1.21

23. Затем нажмите Продолжить и в консоли нажмите ОК.

Установка пакетов в CMS MODx Revolution

Рисунок 1.22

В столбце Установлен должна быть зеленая надпись Установлено.

Установка translit

Рисунок 1.23

24. Вернитесь в установщик командой Пакеты – Установщик.

25. Нажмите Загрузить пакеты и установите TinyMCE –  это визуальный редактор веб-страниц, чтобы работать не с html кодом (см. рис. 1.16), а с обычным текстом.

Сейчас у нас установлено два пакета.

Менеджер пакетов CMS MODx Revolution

Рисунок 1.24

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

CMS MODx Revo

Рисунок 1.25

27. Перейдите в ресурс Главная. У нас теперь установлен визуальный редактор, но на панели инструментов есть не все возможные инструменты.

Визуальный редактор Tiny MCE

Рисунок 1.26

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

Зайдите в настройки системы. Шестеренка в правом верхнем углу – Системные настройки.

Выберите tinymce в выпадающем меню, где по умолчанию стоит "core".

Настройки TinyMCE

Рисунок 1.27

И скопируйте следующие значения вместо существующих или в пустые поля:

– в поле Custom Buttons Row 1

save,newdocument,separator,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,styleselect,formatselect,fontselect,fontsizeselect

– в поле Custom Buttons Row 2

cut,copy,paste,pastetext,pasteword,separator,search,replace,separator,bullist,numlist,separator,outdent,indent,blockquote,separator,undo,redo,separator,link,unlink,anchor,image,cleanup,help,code,separator,insertdate,inserttime,preview,separator,forecolor,backcolor

– в поле Custom Buttons Row 3

tablecontrols,separator,hr,removeformat,visualaid,separator,sub,sup,separator,charmap,emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen

– в полеCustomButtonsRow 4 (возможно это поле уже на следующей странице настроек)

insertlayer,moveforward,movebackward,absolute,separator,styleprops,spellchecker,separator,cite,abbr,acronym,del,ins,attribs,separator,visualchars,nonbreaking,template,blockquote,pagebreak,separator,insertfile,insertimage

– в поле Custom Plugins в разделе General

autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template

Вернитесь в ресурс Главная. После подключения всех плагинов и кнопок получаем полный набор инструментов TinyMCE.

Настройки кнопок TinyMCE

Рисунок 1.28

Примечание: можно удалить кнопку Сохранить (т.е. стереть параметр save, ) в поле Custom Buttons Row 1, т.к. кнопка работает некорректно (вместо сохранения закрывает документ). Также можно стереть параметр newdocument, за ненадобностью, а также separator, до параметра bold, чтобы не было отступа от края на панели инструментов.