Шаблон для Modx, структура шаблона сайта, предварительная подготовка, настройки
В этом уроке рассмотрим структура шаблона и сделаем предварительную подготовку для дальнейшей работы.
Вот и пришло время познакомить вас с установкой бесплатных шаблонов на CMS MODX Revolution. Как известно, в этой системе нет как таковых готовых шаблонов, т.е. не имеется волшебной кнопки, кликнув на которую он установится, а пользователь будет наслаждаться им. Конечно, некоторое подобие готовых тем существует, но таких решений очень мало, а мы будет рассматривать универсальный подход, чтобы любой бесплатный шаблон после скачивания стал основой для нашего сайта.
Предположим, что вам не нужно объяснять, как установить CMS на хостинг и подключиться к FTP, на эту тему существует множество руководств, а наш урок совершенно не об этом. Мы рассмотрим вариант, что Modx успешно установлен, и к FTP мы успешно подсоединились. Далее будем рассматривать установку шаблона на примере из категории Бизнес и услуги.
Возьмем за основу шаблон Arbitrary. Посмотреть демо и скачать его вы можете по ссылке.
Откройте полученный архив и разархивируйте его себе на компьютер. Ниже представлена файловая система данного шаблона. Пройдемся по ней подробнее.
Обратим внимание на папки css, fonts, images, js. Их необходимо будет перенести на хостинг в папку assets свеже установленного Modx Revo. После перенесения их в нужную папку наблюдаем такую картину.
На этом подготовительная часть по части файлов заканчивается. Перейдем к основным настройкам CMS Modx, которые будут полезны. Я описываю то, как обычно делаю сама, но все субъективно, никому не навязываю свое мнение и не говорю, что это единственный верный путь разработки. Возможно, вы внесете ряд своих изменений.
Заходим в админку нового сайта, переходим на вкладку Приложения-Установщик и загрузим ряд основных расширений, которые очень пригодятся для дальнейшей работы.
Среди них Ace, GoogleSiteMap, pdoTools, SimpleSearch, TinyMCE, translit, Wayfinder(меню можно формировать и pdoTools, тут дело вкуса и привычки).
Это то, чем я пользуюсь из проекта в проект, далее будем устанавливать еще приложения, если это будет нужно. Стоит ли описывать процесс установки? Надеюсь, тут не возникнет сложностей, ведь все приложения от стандартного поставщика modx.com. Нужно просто кликнуть кнопку Загрузить дополнения, затем в поиске найти нужное, кликнуть на найденном Загрузить, затем перейти в Управление пакетами, там появится новый пакет, кликнем Установить и все готово. Можно сразу загрузить все пакеты, затем перейти в управление ими и установить их за раз. Получаем примерно такую картину.
Далее рассмотрим основные системные настройки Modx. Наводим курсор на шестеренку в правом верхнем углу и выбираем соответствующий пункт. Далее опишу настройки, которые делаю обычно. Иногда требуется что-то поменять дополнительно, но это по обстоятельствам. На второй странице пагинации есть настройки Визуального редактора. Там в соответствующих полях должны стоять названия редакторов, которые мы скачали в разделе с пакетами.
Это Ace(редактор кода с подсветкой, гораздо удобнее работать с элементами) и TinyMCE(визуальный редактор для работы с ресурсами, его можно настроить для работы с таблицами отдельно, но я обычно этого не делаю, в интернете хватает информации на эту тему, либо можно выбрать другой редактор, тут дело вкуса. Мне же хватает стандартных средств).
Следующие настройки, которые нужно изменить находятся на третьей странице пагинации и называются Дружественные URL. Думаю, тут и так понятно что и зачем, поэтому не буду рассматривать отдельно каждый пункт, а просто приложу скрин со своими настройками. Отдельно только скажу по поводу пункта Транслитерация псевдонимов, здесь нам поможет приложение, которое мы устанавливали, translit. Оно на лету создает человекопонятный URL, что очень важно для SEO и пользователей, пункт заполняем значением russian.
Далее заполняем настройки Сайт на 7 странице пагинации. Важные пункты: Страница ошибки 404 (здесь выберете номер ресурса, который отвечает за 404, но у нас он не создан), Публиковать по умолчанию (Обычно отмечаю Да, мне так удобнее), Название сайта (Будет выводится при входе в админку и в левом верхнем углу панели, так красивее, согласитесь).
Собственно все, может что-то и забыла, будем разбираться по ходу.
Далее в меню панели администратора выбираем пункт Содержимое-Типы содержимого. У пункта HTML убираем .html и оставляем поле пустым. Это делается для того, чтобы modx в конец урлов не добавлял расширение. Мне так нравится больше визуально, хотя есть мнение, что поисковики больше любят страницы с .html, но это спорный вопрос.
Еще один момент, который нужно сделать для нормальной работы и функционирования ЧПУ, это переименовать файл ht.access в .htaccess. Это скрытый конфигурационный файл сервера, находится он в корне установленной системы. У меня почему-то при установку уже был этот файл с нужным названием, но он был пуст, собственно я переименовала ht.access, заменила пустой, все хорошо работает.
На этом завершается подготовительная часть и можно переходить к следующем уроку. Удачи, надеюсь, у вас все получилось.
Урок 4. Работа с шаблонами в MODx Revolution MODX
Добро пожаловать на 4 урок MODX Revolution для новичков.
На последнем занятии мы сделали некоторые настройки конфигурации сайта и посмотрели как выставлять некоторые глобальные установки. Также мы исследовали как устанавливать дополнения из репозитория MODX с помощью менеджера пакетов. В этой записи мы рассмотрим как работать с шаблонами в MODX Revolution. Мы собираемся начать со статичного HTML/CSS шаблона и через несколько уроков переделаем его в полноценный MODX Revolution шаблон.
Что такое MODX шаблоны?
MODX шаблоны это простые HTML/CSS шаблоны с тегами MODX внутри для динамичной функциональности. Это очень упрощенное определение, но в моей голове сложилось именно такое определения для MODX шаблона. Если вы знаете как программировать HTML/CSS или можете разобраться в таком коде, то остальное для вас не будет проблемой. Вот что делает
Для этого урока я решил использовать тему студии Themeforest для своего сайта.
Если вы хотите следовать точно моим шагам, то можете взять этот же шаблон или же взять другой шаблон, вашу собственную разработку либо скачанный с другого ресурса (в Google поищите ‘бесплатные css шаблоны’). Порядок действий для разработки шаблона будет аналогичным.
В этом уроке я буду использовать 7 in 1 Business Success Site шаблон потому что он имеет отличный вид и в то же время достаточно сложный, чтобы его было интересно портировать в сайт MODX . В комплекте 7 различных цветовых стиля, я буду использовать синий, а вы выбирайте какой вам нравится. Ну что ж начнем!
Первое, что я хочу отметить: способ построения шаблона показанный в этом уроке — это не единственный или единственноверный способ, это просто один из способов, которые я использую. MODX не ограничивает ни в том куда положить файлы или как разбивать шаблон… Как вам удобно, так вы и делайте ваш шаблон или как удобно вашему клиенту. Поэтому держите это в уме и можете отступать в порядке построения и изобретать свои более оптимальные способы, как говорится — делай как я, делай лучше меня.
1. Загрузка файлов шаблона
Любой шаблон содержит в себе много файлов – css файлов, яваскрипт, рисунков, флеш файлов… Все это нужно где-то хранить на вашем сервере, чтобы ваш шаблон имел к этим файлам доступ. Я предпочитаю хранить все файлы, которые относятся к шаблону в середине директории assets. Вы можете положить куда угодно и установить соответствующие пути в вашем шаблоне.
Распакованные файлы шаблона имеют приблизительно вот такую файловую структуру:
Таким образом 1 шагом в нашей разработке шаблона является копирование трех папок с файлами шаблона на сервер, это папки sample-data/, scripts/ и styles/. Я создал папку в середине assets и назвал ее templates, а также я создал папку 7in1, в которую поместил вышеназванные папки с файлами шаблона. Если вы запутались, то посмотрите на картинку и все станет понятно:
Теперь эти файлы доступны для любого шаблона, который вы будете делать.
2. Создание шаблона
После загрузки папок с файлами мы можем начать создание нашего MODX шаблона.
В админке нажмите на вкладку Elements слева, откроется панель с различными элементами сайта — шаблонами, чанками, переменными шаблона и другими. Нажмем на templates и увидим, что уже есть в наличии один базовый шаблон с названием Base Template. Если вы на него нажмете, то вы можете увидеть код данного шаблона. Видим HTML код с тегами [[++site_name]], [[*pagetitle]].
Эти тэги трансформируют статичный HTML/CSS код в динамичный MODX шаблон и мы собираемся узнать как его сделать и приложить к этому свои руки.
Давайте продолжим и сделаем наш шаблон. Для создания нового MODX Revolution шаблона нажмите правой кнопкой мышки Templates, а далее New Template.
Можете также нажать на иконке New Template:
В следующем окне задайте название для вашего шаблона и описание. Вы можете разместить его в категории для лучшего порядка вашего сайта. Ну и как вы разместите элементы сайта зависит от вас и вашего вкуса.
Я обычно создаю категорию для основного шаблона, где я сохраняю все шаблоны и чанки для этого шаблон, далее делаю то же самое для навигации и так далее. Вы можете организовать свой сайт по своему.
Для создания категории, нажмите правой кнопкой мыши на Categories в закладке Elements.
Ну вот можно добавить код в наш новый шаблон. Начнем мы с создания шаблона для главной страницы. Сейчас я могу сказать, что дизайн главной страницы будет отличаться от дизайна внутренних страниц, поэтому я назову этот шаблон каким-то своим именем, например «7in1 Home». Код домашней страницы находится в файле index.html в папке с шаблонами, которую мы загрузили с Themeforest, поэтому открываем этот файл в редакторе (я использую Notepad++) и копируем его содержимое в наш новосозданный шаблон в MODX. Можно (и это на мой взгляд даже более удобнее) отредактировать вначале код вне MODX Revolution и только потом перенести отредактированный код исправленного шаблона, но исходя из целей данного урока, все эти действия проведём внутри редактора MODX.
3. Отредактируйте пути
Поменяем в нашем коде пути к папкам шаблона. Мы скопировали наш шаблон в папку assets/templates/7in1. Поэтому нам нужно изменить пути ссылок к css файлам, js файлам, изображениям и др. на корректные пути на нашем сервере. Этот элемент вашей работы для ускорения можно сделать до того как копировать код шаблона в редактор MODX. Сейчас просто посмотрев на код, я могу сказать, что мне нужно искать папку styles/ и заменить ее на assets/templates/7in1/styles/, и так далее. Заменим все необходимые пути и сохраним наш шаблон. Вы можете обнаружить, что что-то упустили и есть ошибка в выводе страницы, поэтому возвращайтесь и снова откорректируйте пути.
4. Назначение шаблона
Итак мы закончили портирование шаблона, давайте назначим шаблон страницы и посмотрим, что же мы наделали. Для определения шаблона для страницы нам необходимо перейти на вкладку Resource и открыть ресурс для которого мы хотим определить шаблон (в нашем случае это страница Home).
После выбора шаблона нажмите Save появится сообщение о том, действительно ли вы хотите изменить шаблон, подтверждаем. Важность этого прояснится после того, как мы сделаем разные шаблоны, у которых будет множество чанков и переменных шаблона и которые мы по-разному разместим, поэтому вам необходимо быть уверенным в правильности выбора шаблона, ресурс для которого вы редактируете в данный момент.
После сохранение, мы можем просмотреть страницу и увидеть как она теперь выглядит. Вот снимок экрана, на котором видна верхняя часть страницы:
Вот нижняя часть:
Как вы видите, наш сайт приобретает нужный вид, а мы всего лишь изменили пути к файлам. В то же время, контент, тег названия страницы, навигация и остальное — остались статичными, поэтому дальше мы начнем вставлять теги и использовать инструментарий MODX.5.
Синтаксис тегов MODX Revolution
Для того, чтобы сделать шаблон MODX Revolution динамичным, нам необходимо научится работать с тегами MODX. В движке MODX много различных тегов, которые можно использовать для создания и добавления изменяемых элементов контента на вашем сайте. Полный список доступных тегов MODX Revolution можно найти в руководстве. Если вы использовали до этого MODX Evolution, то вы поймете концепцию тегов, но все же вам необходимо посмотреть в документацию и усвоить новый синтаксис.
Если вы до этого никогда не использовали MODX, то не волнуйтесь, мы изучим как использовать эти теги в процессе построения сайта. Для начала посмотрите на таблицу сверху, на ней представлены синаксис тегов для разных версий
В данном уроке мы в основном будем использовать теги системных установок.
6. Изменения заголовка сайта в MODX Revolution
Первое, что мы сделаем — это изменим тег заголовка сайта, чтобы он выводил имя нашего сайта, а не имя шаблона, как сейчас:
Чтобы сделать это, нам нужно просто переместится в область кода, отвечающего за вывод заголовка сайта и заменить его системным тегом.
Давайте взглянем на элемент <head> нашего шаблона:
Нам нужно просто заменить текст Business Success в заголовке на системный тег, который передаст текущий заголовок сайта с наших системных настроек. Заменим таким образом Business Success на [[++site_name]]. Также сделаем еще одну вещь, тип переменных можно определить в системных настройках нашего сайта, поэтому заменим UTF-8 на [[++modx_charset]]. Таким образом приведенный выше код приобретёт следующий вид:
Сохраните шаблон и посмотрите на изменения: теперь заголовок сайта выводит имя нашего сайта.
Дополнительно, если вы посмотрите на код, вы увидите, что парсер MODX взял установки нашего сайта для типа данных и вставил динамически правильный тип данных.
Это случилось таким же образом как и с нашим шаблоном, но все происходит динамически и тип данных не является статической величиной.
Еще одна важная деталь: к нашему элементу <head> необходимо добавить тег <base>.
Данный тег мы используем для определения адреса по умолчанию для всех ссылок на странице. Поэтому в моём случае мы внесем следующие изменения:
Это сработает отлично, но снова вместо тяжело-набираемого адреса, лучше использовать тег системных настроек. Используем этот тег и код будет выглядеть так:
Теперь посмотрим исходный код сгенерированной MODX Revolution страницы и увидим, что парсер вставил правильный адрес сайта:
Ну что ж, на этом мы закончим. Мы сделали значительный прогресс и теперь у нас есть начальные знания в построении шаблона MODX Revolution. Мы увидели пример того как делаются начальные настройки, создали новый шаблон, добавили его в категорию и начали добавлять теги MODX Revolution для начала преобразования нашего статического шаблона в динамический шаблон MODX.
Следующий урок
В следующем мы продолжим работу над нашим динамичным шаблоном, поговорим подробнее о чанках, что они из себя представляют, как их использовать для упрощения и организации нашего шаблона и многое многое другое.
Дополнительные источники:
- MODX Revolution Tag Syntax
- MODX Revolution Общепринятые теги
Советы для начинающих веб-разработчиков Урок 5. Работа с чанками MODx Revolution
Please enable JavaScript to view the comments powered by Disqus.
html — Как мне структурировать страницы modx, чтобы они не все находились в корневом URL-адресе, а были организованы в папку в менеджере?
Задавать вопрос
спросил
Изменено 9 лет, 4 месяца назад
Просмотрено 434 раза
Я разрабатываю свой сайт в modx, и у меня есть несколько пользовательских страниц ошибок, которые я хочу сгруппировать в папку с именем «ошибка», и я хочу, чтобы они были доступны только через domain.
com/error/page.html. Я уже поместил пользовательские страницы ошибок в контейнер с именем error, который в основном выглядит так, как показано на рисунке ниже.
Только страницы по-прежнему доступны только из корня (т. е. с домена.com/page.html), даже несмотря на то, что теперь они находятся в контейнере «ошибка». Как мне изменить его, чтобы когда люди видели мои страницы ошибок, они видели URL-адрес: » domain.com/error/page.html «? Кто-нибудь знает, как это сделать?
p.s.: Я уже понял, что могу влиять на URL-адрес страницы, введя нужный URL-адрес в ее» alias». Таким образом, псевдоним «error/page» означает, что его можно найти по адресу «domain.com/error/page.html».
Но странно то, что это больше не работает, когда я помещаю страницы в папке «ошибка». Когда я это делаю, я могу получить доступ к самой папке через domain.com/error, но больше не к страницам в папке по адресу domain.com/error/page.html
- HTML
- modx
- modx-революция
- modx-ресурсы
1
Найдите в настройках системы страницу с ошибкой и страницу с отказом в доступе, просто установите для них идентификаторы созданных вами пользовательских страниц.
Если вам нужны настраиваемые страницы для других кодов ошибок, возможно, вам придется использовать некоторые правила перенаправления в файле конфигурации htaccess или apache. Некоторые из них, вероятно, никогда не будут работать [например, 500 ошибок], и в этом случае вам придется использовать статический html-файл и конфигурацию сервера, чтобы указать на него.
что касается установки пути — вам нужно будет установить свои настройки [дополнительные системные настройки] на «использовать дружественный путь псевдонима»
также — очистить кеш, с помощью modx, если есть сомнения, очистите кеш…
2
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Информация для getimages — SiteDash, возьмите под контроль свои сайты MODX
getImages — это дополнение от jerry325, впервые выпущенное 08.
11.2016.
Описание пакета
Этот фрагмент извлекает файлы изображений из каталога, обрабатывает их с помощью фрагмента шаблона и возвращает результаты.
Это произошло из-за того, что я переписал свой сниппет «myGallery». Меня разочаровали пакеты Галереи, так как я хотел иметь возможность просто добавлять изображения и эскизы в каталог через FTP и чтобы они отображались. Это работало хорошо, но по мере того, как я добавлял все больше и больше каталогов, я обнаружил, что мне нужно создавать новые страницы, а я слишком ленив для этого. Я хотел иметь возможность создавать страницы, просто сканируя структуру папок, которые были загружены через FTP, и использовать имена папок в качестве имен страниц. Я использовал свой фрагмент getFolders, чтобы получить структуру папок, и мой фрагмент getFoldersList, чтобы создать меню из этой структуры папок. Затем я использовал свой сниппет getImagesFolder, чтобы извлечь нужную папку из URL-адреса, который передал меню, а затем передал результаты через отличный сниппет getPage Джейсона Кауарда, и я был в деле.
Это звучит намного сложнее, чем есть на самом деле, и работает как сон. Начиная с версии 2.0 больше нет необходимости в фрагменте getImagesFolder (не знаю, о чем я думал с этим куском). Как всегда, буду признателен за любые предложения по улучшению. Поддержка/комментарии должны быть размещены здесь: http://forums.modx.com/thread/81713/support-comments-for-getimages
Инструкции по использованию/установке
Установка с помощью управления пакетами.
Детали
- Разработчик(и)
- Джерри325
- Выпущено
- 08.11.2016
- Первое появление
- 08.11.2016
- Лицензия
- GPLv3
- Поддерживаемые базы данных
- MySQL
- Минимальные требования MODX
- 2
Выпуски getImages
| Поставщик | Подпись | Выпущено |
|---|---|---|
MODX. Оставить комментарий
|