Buderus-trade.ru

Теплотехника Будерус
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Modx revolution обучение. MODX Revolution — Базовый урок. Установка и настройка MODx плагинов

Modx revolution обучение. MODX Revolution — Базовый урок. Установка и настройка MODx плагинов

Признаки беременности после имплантации эмбриона

Всем привет, друзья! Это базовый урок по CMF MODX Revo lution, в котором мы познакомимся с системой MODX, выполним установку необходимых плагинов и выполним базовую настройку фреймворка.

Ресурсы базового урока MODX:

  • pdoTools Documentation: docs.modx.pro/components/pdotools/

Установка и настройка MODx плагинов

Устанавливаем Advanced версию MODx, во время установки указываем, что папка админа будет называться super .

Маст-хэв плагины MODx

Самые популярные и наиболее часто используемые дополнения для MODx:

  1. Ace — редактор кода MODx;
  2. Collections — отображение и управление коллекциями ресурсов;
  3. pdoTools — набор базовых инструментов MODx;
  4. FormIt — работа с формами в MODx;
  5. phpThumbOf — работа с изображениями в MODx;
  6. TinyMCE / CKEditor (на выбор) — текстовый WYSIWYG редактор для MODx;
  7. translit — транслитерация URL в MODx;
  8. MIGX — Добавляемые дополнительные поля в MODx;
  9. AutoTemplate — «Умное» автоматическое назначение шаблонов ресурсам.

Базовые настройки MODx Revolution

Раздел: Дружественные URL
  • Транслитерация псевдонимов: russian;
  • Использовать дружественные URL: Да;
  • Строгий режим дружественных URL: Да;
  • Проверять на дублирование URI во всех контекстах: Да;
  • Использовать вложенные URL: Да;
  • Не забудьте также переименовать ht.access в .htaccess в корне сайта.
Раздел: Панель управления
  • Показывать описание в верхнем меню: Нет.
Раздел: Сайт
  • Страница ошибки 404 «Документ не найден»: ID ресурса 404;
  • Публиковать по умолчанию: Да;
  • Название сайта: Название вашего проекта.
Раздел: Система и сервер
  • Отправлять заголовок X-Powered-By: Нет.
Пространство имен: ace
  • Размер шрифта: 18px;
  • Мягкая табуляция: Нет;
  • Размер табуляции: 2;
  • Тема редактора (на выбор): ambiance, chaos, chrome, clouds, clouds_midnight, cobalt, crimson_editor, dawn, dreamweaver, eclipse, github, idle_fingers, katzenmilch, kr, kuroir, merbivore, merbivore_soft, mono_industrial, monokai, pastel_on_dark, solarized_dark, solarized_light, terminal, textmate, tomorrow, tomorrow_night, tomorrow_night_blue, tomorrow_night_bright, tomorrow_night_eighties, twilight, vibrant_ink, xcode;
  • Ктоме того, вы можете сделать тему Material в редакторе Ace. Инструкция:

MODx Ace Material Theme 1. Системные настройки > Пространство имен «ace»: Размер шрифта: 15px Высота области редактирования: 560 Невидимые символы: Да Мягкая табуляция: Нет Размер табуляции: 2 Тема редактора: tomorrow_night 2. Файлы: Filesystem > super > templates > default > css > index.css: (Добавить в конце) .ace_editor .ace_gutter .ace_active-line,.ace_gutter-active-line .ace_scroller,.ace_gutter .ace_meta.ace_tag .ace_meta.ace_tag.ace_tag-name .ace_entity.ace_other.ace_attribute-name .ace_string 3. Очистить кеш через меню.

Создаваемые базовые ресурсы

  1. Страница 404 — страница для настройки «Документ не найден». Не показывать в меню;
  2. sitemap — ресурс для вывода [] . Пустой шаблон. Не показывать в меню. Тип содержимого: XML. Не доступен для поиска. Не использовать HTML-редактор;
  3. robots — ресурс для вывода robots.txt . Пустой шаблон. Не показывать в меню. Тип содержимого: text. Не доступен для поиска. Не использовать HTML-редактор.

Официальный сайт MODx

Учебные материалы по созданию сайтов на MODx

Параметры сниппетов

Последнюю версию дистрибутива можно скачать по адресу http://modx.com/download/evolution/

Последовательность создания сайта на MODx evolution

  1. Создать базу данных и пользователя с префиксом, определяемым хостером, чтобы потом не править файл config.inc.php.
  2. Установить MODx. Сделать настройки.
  3. Скопировать шаблон сайта в папку assets/templates.
  4. Код шаблона index.html скопировать в шаблон Minimal Templates.
  5. Внутри прописать путь

# 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

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

Сохраняем и переходим на главную страницу сайта.

Главная страница сейчас выглядит криво.

Это произошло потому-что, пути к скриптам и css изменились.

Правка путей

Пути сейчас выглядят так.

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

Если вы уже установили пакет ace, то можно легко и просто сделать поиск с заменой, для этого щелкните в код и затем нажмите сочетание клавиш Ctrl+H (работает на Linux и windows), в верхнее поле вводим , а в нижнее / и нажимаем all.

О том, почему именно 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.

Дальше надо или установить веб-сервер на своем компьютере или сразу начать разработку сайта на хостинге. Я предпочитаю второй вариант, так как иногда во время переноса сайта с локалхоста могут возникать непредвиденные ошибки. Это всегда так.

Публикации по теме

Как из группы сделать паблик и наоборот (обновлено)

  • Как из группы сделать паблик и наоборот (обновлено)

Я тут составляя план будущих публикаций и понял, что мало писал про социальные сети и решил начать исправляться. Помните месяца 4 назад я.

MODX Revolution

количество дочерних документов

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

Давайте посмотрим, как это можно сделать на своем сайте.

свой дизайн кнопок соц сетей

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

И когда однажды я захотела сделать блок «Поделиться» таким же красивым, как, например, у Борисова, пришлось поломать голову. Но решение нашлось!

Редирект 301 в MODX

Когда я впервые переносила сайт с WordPress на MODX, то столкнулась с проблемой настройки редиректа. Обычно для перенаправления на новые страницы в файл .htaccess прописывают стандартное правило Redirect 301 Но в MODX этот способ не сработал.

Перенос MODX

Всем привет! Все выходные занималась переездом, как в прямом, так и в переносном смысле.

Во-первых, после двух с половиной месяцев, проведенных на даче, мы снова вернулись в город.

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

дружественные URL на MODX

Добрый день, друзья!

Продолжаем реалити-шоу «Построй свой дом сайт на MODX Revolition». И в этой короткой части поговорим о том, как настроить на своем сайте красивые и понятные человеку URL.

Установка дополнений MODx Revo

Привет, дорогие читатели!

Сегодняшняя статья должна быть посвящена основным настройкам MODx Revo и в частности, настройке ЧПУ. Но когда я начала готовить скрин-шоты, поняла, что пропускаю очень важную тему. Я не рассказала вам, как загружать и устанавливать дополнения. Буду исправляться.

chainsaw

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

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

TurboPages

Расширение, с помощью которого вы сможете создать rss канал, подходящий под требования турбо страниц Яндекса.

  • Поддержка настройки и вывода поиска
  • Поддержка настройки и вывода меню
  • Поддержка настройки и вывода виджетов, формы обратной связи
  • Поддержка настройки и вывода различных кнопочек (Email, телефон и т.п.)
  • Поддержка настройки и вывода блоков рекламы
  • Поддержка настройки и вывода систем аналитики
  • Поддержка настройки и вывода социальных кнопок
  1. Скачиваем установочный пакет и устанавливаем его;
  2. Создаем новый ресурс;
  3. Добавляем сниппет [[!turbopages?]];
  4. Выполняем настройку сниппета;
  5. Устанавливаем тип содержимого rss или text или xml;
  6. Сохраняем.
  7. Загрузите получившийся RSS-файл в Яндекс.Вебмастер
  8. Включите показ Турбо-страниц.

Описание настроек сниппета turbopages:

Основной сниппет, который отвечает за генерацию RSS фида.

  • parents — Список ID родителей ресурсов. Указывается через запятую. Если ID родителя начинается с "-", то данный родитель исключается из выборки вместе со всеми его ресурсами
  • resources — Список ID ресурсов. Указывается через запятую. Если ID начинается с "-", то данный ресурс исключается из выборки
  • showUnpublished — Показывать неопубликованные ресурсы
  • showDeleted — Показывать удаленные ресурсы
  • showHidden — Показывать скрытые ресурсы
  • hideContainers — Показывать ресурсы-контейнеры
  • itemChunk — Чанк с оформлением содержимого турбо-эллемента
  • language — Язык контента
  • liveInternetParams — Счетчик LiveInternet
  • mailRUCounterId — ID счетчика Mail RU
  • mediascopeCounterId — ID счетчика Mediascope
  • ramblerCounterId — ID счетчика Rambler
  • yAndexAdId — ID блока рекламной сети Яндекс
  • customCounterUrl — Ссылка на другой счетчик
  • adFoxAdScript — Код рекламной сети AdFox
  • fileds — Укажите через запятую коды полей, которые необходимо загрузить
  • tvs- Укажите через запятую ID или коды TV полей, которые необходимо загрузить
  • yandexMetricaId — ID счетчика Яндекс Метрики
  • tvFilters — Выборка ресурсов по tv полям. Tv-поля указываются через запятую в виде: НАЗВАНИЕ_TV_ПОЛЯ=ЗНАЧЕНИЕ
  • where — Пользовательские условия выборки в json форматe.
  • yandexMetricaParams — Параметры счетчика Яндекс Метрики
  • scheme — Схема генерации url.
  • authorName — Автор статей.

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

  • nameKey — Название MIGX поля для названия.
  • textKey — Название MIGX поля для описания.
  • migxTv — Плейсхолдер MIGX поля.

Предназначен для вывода рекламного блока внутри статьи.

  • ID — ID рекламного блока.

Предназначен для вывода кнопки, содержащий любую ссылку.

  • text — Текст кнопки.
  • action — Ссылка кнопки.
  • backgroundColor — Цвет фона.
  • color — Цвет текста.

Предназначен для вывода формы обратной связи.

  • email — Контактный email.
  • company — Название компании.
  • agreementLink — Ссылка на политику обработки персональных данных.

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

Установка Яндекс.Метрики на сайт с MODX Revolution

Установка Яндекс.Метрики на сайт с MODX RevolutionЯндекс.Метрика — популярный российский сервис оценки посещаемости сайтов (аналог Google Analytics). Сегодня рассмотрим, как добавить Метрику на сайт с CMS MODX Revolution.

Как и с другими сервисами Яндекса, для использования Метрики нужен единый аккаунт Яндекса. Зайдя в кабинет Метрики, нажмите на кнопку Добавить счётчик.

Установка Яндекс.Метрики на сайт с MODX Revolution

Заполните предлагаемые поля и выберите настройки.

Установка Яндекс.Метрики на сайт с MODX Revolution

Вы попадёте на страницу с кодом счётчика. Яндекс предлагает несколько вариантов добавления кода на сайт. Мы сделаем это вручную. Для этого выберите способ установки напрямую в HTML-код. Для удобства можно воспользоваться кнопкой Скопировать код.

Установка Яндекс.Метрики на сайт с MODX Revolution

Нам нужно вставить код в используемый шаблон (или шаблоны, если их несколько). Это можно сделать напрямую или через чанк. Чтобы не раздувать код шаблона, используем второй метод. Создадим новый чанк и скопируем код счётчика в поле Код чанка (html). Имя и описание чанка можно выбрать произвольно.

Установка Яндекс.Метрики на сайт с MODX Revolution

Не забудьте сохранить чанк.

Далее открываем шаблон (шаблоны) и вставляем туда между тегами <head> </head> или <body> </body> следующий код:

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

В кабинете Яндекс.Метрики нажмите кнопку Начать пользоваться под кодом счётчика.

Установка Яндекс.Метрики на сайт с MODX Revolution

После этого запустится автоматическая проверка сайта. В случае успеха индикация сменится с оранжевой на зеленую.

Установка Яндекс.Метрики на сайт с MODX Revolution

Установка Яндекс.Метрики на сайт с MODX Revolution

Вручную выполнить проверку корректности установки можно, нажав на данную иконку со стрелкой.

Promods — баннер вверху страницы

Подойдет для кнопки согласия с политикой конфиденциальности сайта (демо баннера). Сообщение будет выводиться до тех пор пока пользователь не согласиться с политикой.

Основные особенности:

  • Быстрый старт, просто вставьте в любую часть шаблона: [[!promoDs]] и баннер появится в вверхней части
  • Из коробки доступены 2 готовых шаблона баннеров: promoDsBanner — рекламный баннер и promoDsBannerConfidentiality — с кнопкой для политики конфедециальности
  • Вывод баннер в любом месте с автоматическим развертыванием
  • Установка целей для яндекс метрики.
  • В сниппет можно передавать любые другие данные [[!promoDs? &myparams=`Имя баннера`]]
  • Можно показывать баннер только 1 раз. После нажатия на крести баннер больше не будет показываться. Для авторизованных пользователей показы хранятся в extended
  • Можно выводить любой контент с помощью плейсхолдера content
  • Вы можете использовать стандартный BannerY для показа: [[!promoDs? &content=`[[!BannerY? &postion=`1` &limit=`1`]]`]]
  • Защищен от блокиратора AdBlock
  • Цели для яндекс метрики (при нажатии на сссылку информация о нажатии улетает в яндекс метрику)

Внимание. На странице можно показывать только 1 баннер.

По умолчанию идентификатор баннер установлен name = promoDsBanner чтобы показать следующий баннер необходимо указывать новое название:

Установка баннера на сайта

Установка баннера с политикой конфедециальности

Параметры

ПараметрПо умолчаниюОписание
tplPromodsBannerЧанк с баннером
contentИспользуется в место указания чанка. Можно вывести готовый комнет к примеру &content=Текст баннера`
resetfalseСбросит записи о просмотре баннеро у текущего пользователя
target_yandexfalseВключить отправку целей в яндекс метрику. (для этого необходимо заранее создать новую цель)
target_target_yandex_counterНомер счетчика яндекс метрики в виде: yaCounter37321225
namepromoDsBannerУникальное имя баннер для фиксации какой баннер был показан.
pageToptrueАвтоматическая регистрация контенера в верхней части сайта. Если выключить то баннер появится в том же месте где размещен сниппет
showAllfalseПоказывать баннер всегда не зависимо от закрытия
showFastfalseБыстрый показ баннер без ожидания
hide_clickfalseСкрыть баннер после нажатия пользователе на рекламную ссылку и больше не показывать.
hide_timeout100Таймаут до появления баннера
hide_timeout_redirect100Время ожидания редиректа после нажатия на рекламную ссылку
pageShowЕсли пуст то баннер будет показыватся на всех страница. Для показа баннер на определенных страницах перечислите id страниц через запятую
link_target.promo_ads_link_targetКласс для ссыки при нажатии на которую произойдет отправка целей в метрику и автоматический редирект (любое количество)
closed.promo_header__closedКласс для скрытия окна и фиксации что баннер был показан
selectorpromo_headerid тега куда будет загружатся баннер
frontend_css[[+assetsUrl]]css/web/default.csscss для фронтенда
frontend_js[[+assetsUrl]]js/web/default.jsjs для фронтенда

Настройка целей для Yandex Метрики

  • Включить цели: target_yandex = 1
  • Указать счетчик: target_yandex_counter = yaCounter37222325
  • Наименование цели по умолчанию: name = bannerDs
  • Cоздать цель JavaScript-событие в метрике: инструкция по созданию целей

События JS

Добавлены события для js

total time: 0,7704 s
query time: 0,0571 s
queries: 41

голоса
Рейтинг статьи
Читайте так же:
Виджет счетчик посещений сайта wordpress
Ссылка на основную публикацию
Adblock
detector