Выбор читателей
Популярные статьи
О том, почему именно MODx и как я докатился до жизни такой, я не пишу. Кому интересно - добро пожаловать на мою . Также будем считать, что если вы пришли на этот урок, то вам интересно не просто создание сайтов, а именно создание сайтов на MODx. Давайте будем считать, что у вас уже есть по-умолчанию:
Кстати, это все довольно хорошо умещается в таком устройстве, как ноутбук. И если вы планируете часто работать на даче - лучше купить его. Устраивайтесь поудобнее и повторяйте то, о чем я буду писать дальше и все у вас получится!
Для начала мы расставляем все точки и запятые - план занятий. Так как нельзя так сразу взять и сделать сайт, то будем учиться этому постепенно. Поэтому может быть первые уроки покажутся вам немного скучными или простыми - по мере приобретения навыков, задачи будут усложняться.
Изучение MODx лучше всего начинать с создания сайта-визитки. Это поможет вам не только разобраться в основных принципах системы, но и узнать отличительные особенности, которые требуются для постановки более сложных и интересных задач. Кстати, это один из трех китов заработка веб-студии и именно на них можно не только набить руку, но и неплохо подзаработать (если делать быстро и находить много клиентов).
Что такое сайт-визитка?
Сайт визитка это небольшой по объему сайт, состоящий из нескольких веб-страниц и содержащий основную информацию об организации, товарах или услугах, прайс-листы и контактную информацию.(с) Википедия
По сути, сайт-визитку из 4 страниц можно сделать и на голом html, но вот поддерживать такой сайт гораздо тяжелее - при добавлении хоть одной страницы будет необходимо переделывать все. Так что системы управления контентом значительно облегчают жизнь рядового контент-менеджера или владельца сайта.
Перед тем, как приступить к разработке сайта, нам необходимо подготовить рабочее место. Поэтому мы идем на официальный сайт с последней версией системы MODx CMS/CMF , и качаем ее. Официальный сайт русским владеет слабо, но это не помешает нам взять и скачать последнюю версию MODx Evolution.На момент написания статьи последняя версия MODx 1.0.8. (Буквально на следующий день после выхода этого урока была анонсирована новая версия MODx Evolution 1.0.9. Подробности на хабре http://habrahabr.ru/post/173667/)
Будьте бдительны: MODx 1.0.8 тоже является последней версией, но другой ветки системы управления, поэтому, если только начинаете знакомство с MODx, не спешите ставить Revolution 2. Уроки в этом курсе будут написаны специально для Evolution.
Дальше надо или установить веб-сервер на своем компьютере или сразу начать разработку сайта на хостинге. Я предпочитаю второй вариант, так как иногда во время переноса сайта с локалхоста могут возникать непредвиденные ошибки. Это всегда так.
В прошлых уроках мы установили и настроили modx, а также установили пакеты, которые будут необходимы для создания сайта. Сегодня урок о переносе обычного HTML/CSS/JS дизайна в MODX Revo. Где можно достать дизайн я писал в статье: MODX шаблоны – что это, где их достать (скачать, заказать, купить). Для своего сайта я выбрал готовый платный адаптивный bootstrap шаблон на themeforest за 17$ под названием brightbox (кликните по названию, чтобы посмотреть его демо и описание). Можете использовать абсолютно любой, их полно и бесплатных - так скорее всего лучше поймете весь принцип натяжки.
Практически каждая тема имеет в себе html, css, js и файлы картинок + у многих еще есть php файлы - обработчики форм.
В моем случае в папке assets находятся css и js файлы (в соответствующих директориях), в папке images — изображения и красные файлы (у вас могут быть не красными - все зависит от установленного по умолчанию браузера) — это html файлы.
Самый простой способ - это просто закинуть все файлы с папками (кроме html) в корень веб-сайта. Но я пойду более сложным путем. Так как modx у меня закален и директории assets у меня нет, я залью содержимое из assets (подпапки css и js) в корень сайта и images тоже в корень.
Раньше я создавал директорию template и закидывал в нее все файлы — можете поступить так же.
В дереве слева, переходим во вкладку «Элементы» и открываем начальный шаблон (можно просто щелкнуть лкм или пкм и выбрать редактировать).
Удаляем его и заменяем на код из index.html (которые мы не закинули в корень сайта).
Открыть html файл можно при помощи обычного блокнота, но лучше использовать специальный редактор, например .
Сохраняем и переходим на главную страницу сайта.
Главная страница сейчас выглядит криво.
Это произошло потому-что, пути к скриптам и css изменились.
Пути сейчас выглядят так.
К стати немного странная тема, обычно путь идет через слэш /, а \, поправим это.
Если вы уже установили пакет ace, то можно легко и просто сделать поиск с заменой, для этого щелкните в код и затем нажмите сочетание клавиш Ctrl+H (работает на Linux и windows), в верхнее поле вводим \, а в нижнее / и нажимаем all.
Официальный сайт MODx
http://modx.com/
Учебные материалы по созданию сайтов на MODx
Параметры сниппетов
http://wiki.modxcms.com/index.php/Category:Snippets
Последнюю версию дистрибутива можно скачать по адресу http://modx.com/download/evolution/
Последовательность создания сайта на MODx evolution
# Default modx exclusions
User-agent: *# права индексации распространяются на любого робота
Disallow: /assets/cache/
Disallow: /assets/docs/
Disallow: /assets/export/
Disallow: /assets/import/
Disallow: /assets/modules/
Disallow: /assets/plugins/
Disallow: /assets/snippets/
Disallow: /assets/packages/
Disallow: /assets/tvs/
Disallow: /install/
Disallow: /manager/
# For sitemaps.xml autodiscovery. Uncomment if you have one.
Host: сайт
Sitemap: http://сайт/sitemap.xml
Всем привет, друзья! Это базовый урок по CMF MODX Revolution, в котором мы познакомимся с системой MODX, выполним установку необходимых плагинов и выполним базовую настройку фреймворка.
Класснуть
Запинить
Устанавливаем Advanced версию MODx, во время установки указываем, что папка админа будет называться super .
Самые популярные и наиболее часто используемые дополнения для MODx:
Переходим в "Системные настройки".
MODx Ace Material Theme 1. Системные настройки > Пространство имен "ace": Размер шрифта: 15px Высота области редактирования: 560 Невидимые символы: Да Мягкая табуляция: Нет Размер табуляции: 2 Тема редактора: tomorrow_night 2. Файлы: Filesystem > super > templates > default > css > index.css: (Добавить в конце) .ace_editor{line-height: 1.4!important;font-family: "Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace!important} .ace_gutter{color:#666E79!important} .ace_active-line,.ace_gutter-active-line{background-color:#2A2F38!important} .ace_scroller,.ace_gutter {background-color: #272B33!important} .ace_meta.ace_tag{color:#A6B2C0!important} .ace_meta.ace_tag.ace_tag-name{color:#DF6A73!important} .ace_entity.ace_other.ace_attribute-name{color:#D2945D!important} .ace_string{color:#90C378!important} 3. Очистить кеш через меню.
Статьи по теме: | |
Мобильный телефон Nokia N93i Nokia n93 год выпуска
Nokia N93 безусловно знаковый аппарат для Nokia, его выход открывает... Детальный обзор Meizu M3 Note
Meizu M3 Note — красивый, современный и производительный смартфон... Прошивка планшета Билайн М2 Планшет билайн м2 прошивка 4
После первого появления планшета на рынке компьютерных устройств, не... |