1. Сделать панель управления mobile friendly — 5 минут
Как известно, панель управления modx revolution далека от mobile friendly, поэтому для обеспечения удобства администрирования, было применено расширение Modx Handyman, установив которое через стандартный менеджер пакетов, удалось добиться более или менее приличного вида панели управления по ссылке сайт.ру/handyman
2. Скачать или сделать верстку всех страниц мобильной версии сайта — несколько часов
Следующим шагом была подготовка мобильной верстки. Если не учитывать время на отрисовку макета в фотошопе, то верстка обошлась мне в несколько часов времени, так как ничего сложного в ней делать не планировалось. О том, как делать верстку, здесь говорить не буду, это тема уже скорее касается html/css, чем работы с modx. Конечно, можно скачать любой бесплатный шаблон для мобильной версии, но в моем случае дизайн был довольно специфический, поэтому самому сделать ее было куда быстрее.
3. Заставить CMS ModX перенаправлять посетителя на мобильный сайт при маленьком разрешении экрана — 5 минут
Этот вопрос решился путем вставки в head страницы следующего кода:
<script>
(function checkMobile(){
var location = window.location.href,
isMobile = $(window).width() < 1024,
mobileLocation = location.replace(/(http:\/\/)?(www\.)?(m\.)?/, 'http://m.'),
desktopLocation = location.replace(/m\./g, ''),
selectedLocation = isMobile ? mobileLocation : desktopLocation;
if (selectedLocation !== location) window.location.href = selectedLocation;
})();
</script>
Данный код определяет ширину экрана посетителя и, если она меньше 1024 пикселов, считает, что пользователю будет удобнее пользоваться мобильной версией, чем десктопной. Далее происходит определение ссылок на мобильную и на десктопную версию путем удаления приставки m из домена для десктопной и добавления такой приставки для мобильной версии, а затем перенаправление на нужную версию, если мы в данный момент находимся еще не на ней. Если добавить этот код в head как мобильной, так и десктопной версии, то он будет перенаправлять и обратно при увеличении размеров экрана (например, если поменять ориентацию страницы с вертикальной на горизонтальную и обновить страницу). Для смены шаблонов будет необходимо обновлять страницу, но это не страшно, поскольку нормальный адекватный пользователь (не тестировщик) не будет часто менять разрешение экрана и переход по страницам сайта его не затруднит, так как является частью его работы с самим сайтом.
4. Заставить Modx Revolution загружать разную верстку сайта в зависимости от домена — 15 минут
Здесь можно много писать, но это будет не очень эффективно, так как не наглядно, поэтому я записал видео демонстрацию на эту тему. Она прикреплена ниже:
В этом видео используется код, который определяет мобильную версию. Его я приведу ниже, чтобы было удобно копировать:
<?
$host = $_SERVER['HTTP_HOST'];
$tpl = $modx->getObject('modTemplate', $modx->resource->get('template'));
$description = $tpl->get('description');
if ($host == "m.autospa") $description = str_replace(".tpl", "_mobile.tpl", $description);
return $modx->smarty->fetch($description);?
Этот код определяет домен, затем считывает из описания шаблона файл, в котором хранится сам шаблон, а затем, если домен является мобильным, дописывает к имени файла суффикс _mobile. Таким образом, обычная верстка сайта считывается из файлов с именами name.tpl, а мобильная — name_mobile.tpl.
При использовании вышеуказанного кода не забудьте заменить «m.autospa» на «m.(ваш домен.ру)», иначе работать не будет.
Надеюсь, что мой пост поможет тем, кто решает аналогичные задачи. Если появятся вопросы — пишите, буду корректировать статью и отвечать на них.
Комментарии (31)
demimurych
13.08.2016 21:18+1Если я верно понял код, то я всегда буду сидеть на версии для <1024 в случае если у меня <1024.
А если я хочу все же видеть полноценную версию на своем <1024?
tears
13.08.2016 23:03-3Добавить m. к адресу самостоятельно?
demimurych
13.08.2016 23:04+1я не специалист, и могу ошибаться. но судя по коду мне это никак не поможет
tears
14.08.2016 00:08Этот код (JS), насколько я понял, отвечает только за редирект. Если вы добавите к домену поддомен m., то все должно заработать. Но вообще, конечно, это костыль. Сейчас есть, например, Modernizr, с помощью которого легко и без костылей в виде <1024 можно проверять с какого устройства зашел пользователь.
demimurych
14.08.2016 14:47Да отвечающий за редирект. И этот код работает на обоих версиях проекта. Из чего следует что я не смогу открыть на устройстве <1024 что то кроме того что сделено для <1024. Потому приписка буквы или ее стирание ничего не даст кроме лишнего запроса, после которого меня редиректнет туда куда считает этот скрипт нужным.
tears
14.08.2016 14:54+1Упс, да, действительно, этот код же не только в основную версию, но ещё и в мобильную вставляется. Значит это никак не поможет. Только зачем автор так делает — не понятно :).
funnybanana
13.08.2016 22:59+3Какой ужасный костыль…
К слову есть у меня планшет, в портретном режиме у него $(window).width будет равен 978px
Но при этом мне достаточно комфортно смотреть на нём десктопные версии сайтов.
Затем телефон есть который в ландшафтном режиме будет иметь ширину экрана 1280px…
Кажется мне что тут нужно было смотреть по названию браузера и в зависимости от браузера (если используется мобильный) делать редирект на мобильную версию + ставить кнопку — которая вернёт пользователя на обычную версию…
Denai
14.08.2016 02:521280 телефон? Вы же про реальные пиксели, а не про device-width и device-height?
mrjohn0011
15.08.2016 13:02Вообще имелась в виду ширина окна браузера, т.к. было предположение, что не важно какое устройство, если маленькое окно для сайта, смотреть десктопную версию не удобно. К тому же в данном случае была разработана полнофункциональная мобильная версия и предполагалось, что пользоваться десктопной на маленьких разрешениях не будет причин.
По скрипту редиректа могу сказать, что он может быть легко изменен каждым по своему усмотрению. Основная идея этой статьи — донести способ вывода одного контента в различных шаблонах в modx revolution и сделать это максимально простым способом, не требующим почти никаких усилий
sashabeep
14.08.2016 02:06-1И вновь и снова велосипедисты со своими смешными яваскриптами и шаблонами, захардкоденными в файлах. Джумлу юзайте или вордпресс, раз так файлы любите.
Про мобайлдетект не слышал да? https://github.com/serbanghita/Mobile-Detectmrjohn0011
15.08.2016 12:48В данном примере рассматривается случай, когда проект уже готов, использование другого движка не допускается.
sashabeep
15.08.2016 13:39+1Зачем городить городильню с хардкодом, если есть контексты? https://gist.github.com/inogo/4e9b4d7dd5939655d328
mrjohn0011
15.08.2016 18:47В данном случае использование разных контекстов не удобно, поскольку контент надо выводить один и тот же, а различные контексты в modx созданы для вывода разного контента по разным доменам и подходят, скорее для деления на регионы, например, moscow.site.ru или spb.site.ru. Думаю, что использование контекстов для мобильной версии породит куда больше проблем, чем использование смарти. Например, если у нас будет необходимость продвигать сайт в разных регионах. Будет много контекстов на каждый регион. Для мобильной версии придется создавать в 2 раза больше контекстов. Считаю, что решение с использованием одного шаблона в этом случае более подходящее
sashabeep
15.08.2016 13:48+1Или modMobile. В нем используется почти mobiledetect.
Зачем там всякие смарти и тд??? Это ад!mrjohn0011
15.08.2016 18:51Смарти позволит улучшить производительность за счет уменьшения количества запросов к БД, если переложить на него существующие шаблоны и вместо чанков использовать плейсхолдеры смарти. Тестов не проводил, но знаю, что это существенно снизит нагрузку на сервер БД. Смарти подключается не только для моб.версии, а «в том числе» для мобильной версии. Просто демонстрировать в видео обзоре как я переделываю каждый чанк — это было бы отступлением от темы статьи — мобильной версии
sashabeep
16.08.2016 12:05Скорее всего, вы просто никогда до этого не пользовались и не работали с MODX
Andchir
14.08.2016 17:42Лучше в таком случае брать не размер окна, а реальное разрешение
https://developer.mozilla.org/en-US/docs/Web/API/Screen/width
Но ещё лучше вообще не использовать JavaScript, всё можно сделать на стороне сервера
https://github.com/serbanghita/Mobile-Detect
Сделать панель управления mobile friendly...
А где этот пункт в постановке задачи? Мобильная версия сайта будет наполняться через мобилу, а не мобильная версия через обычную админку? :)
Как известно, панель управления modx revolution далека от mobile friendly
Не сказал бы, что далека. На планшете вполне можно работать.Andchir
14.08.2016 17:46Посмотрел видео и тоже офигел. Ставить ModxSmarty только ради того чтобы сделать мобильную версию это точно жуткий костыль.
mrjohn0011
15.08.2016 12:46У modx smarty много преимуществ. В данном случае можно было бы с его помощью избавиться от дублирования блоков в верстке, используя блоки, избавиться от лишних запросов к бд, т.к. все чанки хранятся там, но ведь видео не об этом, а о том как максимально быстро сделать мобильную версию для уже существующего сайта на modx.
sashabeep
15.08.2016 13:43Всё понятно, вы начитались Безумкина вместо нормальных мануалов
https://rtfm.modx.com/revolution/2.x/administering-your-site/contextsmrjohn0011
15.08.2016 18:55У меня не получилось сделать так, чтобы в разных контекстах была одна и та же информация. Думаю, что контексты созданы для поддоменов с разной информацией, а считывание данных из одного контекста, находясь при этом в другом — более сомнительное решение, чем использование smarty.
sashabeep
16.08.2016 12:03Контекст может только переключать контекст, дальше в шаблонах можно так же проверять, какой контекст включен и всё.
То же самое еще более просто можно сделать одним из нескольких переключателей шаблонов из репозитория
Andchir
15.08.2016 15:49У modx smarty много преимуществ.
Как и недостатков. После замены шаблонизатора это уже не MODX. Как я понял, сайт изначально сделан другим разработчиком.
Недавно мне поставили задачу создать мобильную версию существующего сайта, написанного на ModX Revolution.
Я бы не хотел чтобы мне из MODX сделали MODX-SMARTY, перелопатили все шаблоны на новый синтаксис и вставили PHP-код туда где должен быть HTML. Плюс что-то намудрили с кэшированием, что теперь черт ногу сломит. Но это дело вкуса.mrjohn0011
15.08.2016 19:04После замены шаблонизатора это уже не MODX
Отчасти да. Парсер modx не будет использоваться в шаблонах вообще, либо будет использоваться минимально. На то есть основания. modx не эффектисно использует ресурсы сервера. Смарти — костыль, призванный это исправить. Когда разработчики modx исправят проблему производительности своего CMF, тогда и можно будет полагаться на парсер modx. Что касается остального, то это остаетя modx. Та же система управления, те же настройки. Не modx это только внутри, с точки зрения разработчика. С точки зрения заказчика — сайт стал быстрее или по крайней мере не стал медленнее, админка не поменяла привячный вид, а задача решена.Andchir
15.08.2016 19:18Когда вы говорите про повышение производительности, это должно быть доказано экспериментально и должны быть циферки, чтобы увидеть разницу. Иначе это бесполезное пустословие. Разработчик ModxSmarty циферок со сравнением тоже не приводил.
mrjohn0011
15.08.2016 19:43+1Постараюсь как-нибудь провести тест производительности modx smarty и дать сравнение с modx без смарти. Пока можно просто вывести данные из modx
[^q^] — Сколько запросов
[^t^] — Сколько времени рендерится страница
Без смарти главная страница 65 запросов; 0.5850 s
Со смарти та же страница 42 и 0.6125 s
При этом я заменил не все плейсхолдеры modx, а только те, которые проще всего быстро заменить. При более тщательном тестировании скорее всего можно будет получить лучшие результаты. Как видим, время рендеринга не изменилось (в пределах погрешности), а количество запросов сильно снизилось за счет того, что многие чанки перестали использоватьсяAndchir
16.08.2016 00:36[^q^] — в MODX Revo всегда не правильно показывал число запросов и разработчики говорили, что это очень сложно исправить Что-то изменилось? Тем более ModxSmarty может нарушать подсчет числа запросов.
mrjohn0011
16.08.2016 22:49Здесь очевидно, что оно будет меньше, поскольку были исползованы чанки из БД, а теперь будут использованы чанки из файлов. modx очень неэффективно использует базу. Например, когда я делал один сайт на нем, где было больше 9000 ресурсов, встал вопрос о производительности, начал исследовать. Выяснилось, что на каждый пункт меню, выводимый через сниппет pdoMenu делается как минимум 1 запрос к базе данных. Если меню представляет собой дерево, то это очень неэффективно
mrjohn0011
15.08.2016 12:40Мобильная версия админки будет по отдельной ссылке, если использовать дополнение handyman, так что, возможность выбора остается.
oxidmod
смотрю на код и думаю о телефонах с FHD и выше разрешениями…
а самое главное, зачем эти костыли, когда есть нормальные альтернативы?