Category Archive: MODx уроки

Subcategories: Нет рубрик

Сниппеты MODx

Что такое сниппет (snippet) MODx?

Сниппет – это код элемента сайт требующего динамики на странице, который встраивается в страницу (гостевая книга, форма обратной связи, поиск по сайту и т. д.). Сниппеты  хорошо расширяют возможности системы управления. Сниппет может быть “серьезным” и многофункциональным, либо простым и несложным. Но оба они будут выполнять важную функцию. Возможность написанию собственных сниппетов дает большие возможности в “сайтостроении” на MODx.

Встроенные сниппеты в MODx

AjaxSearch — Назначение: позволяет пользователям производить поиск по сайту, не покидая страницы, на которой они находятся. Результаты возвращаются посредством запроса ajax и выводятся в окно результата ниже формы поискового запроса. (Если у пользователя отключен JavaScript, результаты выводятся в отдельном окне).

Breadcrumbs — 0.9d readcrumb (англ. «Хлебные крошки») — элемент навигации по сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь. Действие: представляет собой полосу в верхней части страницы примерно такого вида: Главная страница → Раздел → Подраздел → Текущая страница.

Ditto — Среди его основных функций — разбивка на страницы, вывод краткой версии статьи со ссылкой «далее», генерирование архива, сортировка по дате, заголовку и т. д.

eForm — Отвечает за обработку данных, которые пользователи вводят в формы на сайте. Полученные данные можно отослать по электронной почте используя формат html, вложения, автоответчик, а также расширенную обработку данных и генерацию настраиваемых отчетов.

FirstChildRedirect — Автоматически переводит на первый дочерний документ в папке.

Jot — 1.1.2 Коментарии пользователей, с возможностью модерирования и подписыванием на е-мэйл (вероятно при появлении ответа приходит уведомление на емэйл).

ListIndexer — Показывает самые недавние документы, Очень гибкая.

MemberCheck — Выборочно показывает чанки based on logged in Web User’ group memberships.

NewsPublisher — Публикация новостных статей прямо из web.

Personalize — Простая Персонализация для web пользователей.

Reflect — Используется с Ditto, создаёт архивы статей, записей блога, галлерей изображений.

UltimateParent — Travels up the document tree from a specified document and returns the «ultimate» parent.

Wayfinder — Основное назначение Wayfinder — генерировать навигационные меню, автоматически отражающие изменения в структуре сайта, однако он может быть использован и с другими целями. Wayfinder — сниппет, сканирующий заданную часть дерева документов MODx, находящий все документы, отвечающие заданным условиям, и выводящий форматированный список этих документов. Формат вывода определяется шаблонами, он может включать любые комбинации HTML, CSS и JavaScript, что дает невероятную степень гибкости. Эти шаблоны являются чанками (то есть для задания какого-либо шаблона следует создать новый чанк, он то и будет являться шаблоном) На одной странице может присутствовать несколько вызовов Wayfinder, соответственно можно создавать несколько независимых меню и списков документов.

WebChangePwd — Сниппет смены пароля для web user’ов.

WebLogin — Сниппет входа на сайт web user’ов.

WebSignup — Сниппет регистрации на сайте web user’ов.

Как вызвать сниппет на странице сайта на MODx?

Обычно есть несколько вариантов добавления сниппета на страницу:

  • Для того чтобы вызвать сниппет на странице сайта в шаблоне сайта, надо вставить в код шаблона сайта [[name]], где вместо name необходимо вставить имя созданного или используемого сниппета.
  • Для того чтобы вызвать сниппет в теле документа в области [*content*], необходимо также вставить код вызова сниппета [[name]], где вместо name необходимо вставить имя созданного или используемого сниппета.

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

Где скачать сниппеты на MODx?

Сниппеты для MODx я обычно качаю с официального сайта – http://modx.com в разделе Extras. Несмотря на то, что многие сниппеты на английском, обычно присутствует инструкция по установке на английском языке. Поэтому с установкой проблем не возникало. Если необходим сниппет на русском языке, то стоит на этом же сайте в разделе форума поискать соответствующий языковой пакет.

Основные теги ,

MODx установка шаблона

modx установка шаблонаИногда при создании сайта на MODx можно найти уже готовый дизайн, который будет не в точности (иногда и в точности) соответствовать техническому заданию, но будет по структуре очень похож. Например, надо будет изменить только “шапку” сайта и изменить текст ссылок. В таком случае будет проще и быстрее использовать готовое решение.

Шаблоны для MODx

В интернете есть ресурсы, которые позволяют скачать готовые шаблоны для MODx. Как правило, все эти ресурсы предлагают сделать это бесплатно. Не буду останавливаться на этом моменте в будущем посвещу этому отдельную статью :-)

Исходники шаблона для установки на MODx

Под шаблоном для системы управления подразумевается набор файлов:

  • файл с кодом шаблона для размещения его в шаблоне MODx
  • файл со стилями CSS
  • папка с изображениями для данного шаблона
  • файлы JavaScript (не обязательно)
  • другие необходимые для работы шаблона файлы (не обязательно)

Последовательность установки шаблона на MODx

Последовательность установки не строгая. Можете выполнять ее по своему усмотрению. Сам я обычно поступаю так:

  • создаем в директории сайта assets/templates/ новую директорию, например, new и закачиваем туда файл со стилями CSS, папку с изображениями. Важно! изначально не изменяйте пути к файлам в таблице стилей и коде шаблона.
  • в панели администрирования MODx выбираем Элементы -> Управление элементами -> Новый шаблон. В появившемся окне в поле Имя шаблона вводим название нового шаблона. Пускай будет тоже new. В поле Код шаблона вставляем код шаблона сайта, который мы скачали. Обычно код хранится в отдельном текстовом файле из набора скачанных файлов шаблона сайта на MODx и называется template. После этого жмем Сохранить.
  • Поздравляю! мы установиди новый шаблон на MODx :-)

Привязка нового шаблона к старнице MODx

Чтобы привязать новый шаблон к странице, необходимо в окне создания/редактирования страницы в поле Шаблон выбрать созданный шаблон (в данном случае new).

Проблемы установки на шаблона MODx

  • Некоторые шаблоны смотрятся эффектно при наличии некоторых дополнительных плагинов. Но плагины автоматически не настраиваются при установке шаблона. Решение: смотреть статьи о плагинах установить плагины :) или отредактировать код шаблона и файл стилей CSS.
  • Обычно структура меню очень сильно зависит от шаблона. И далеко не факт что новый шаблон будет отображать меню вашего сайта так, как это было при предпросмотре шаблона перед скачиванием. Решение: изменить настройки сниппета вывода меню Wayfinder в коде шаблона и файл стилей CSS.
  • Некоторые пути в файле стилей CSS и шаблоне являются абсолютными, поэтому после установки шаблона эти ссылки получаются битыми. Решение: переписать ссылки.
Основные теги , , ,

Настраиваем “дружественный URL” в MODx

Настраиваем дружественный URL в MODxДружественный URL позволяет отображать адрес страницы в виде статического текста вместо сгенерированного системой управления кода. Но в то же время дружественный URL тоже является сгенерированным. Поэтому приведу пример: вместо адреса страницы  http://site.ru/index.php?id=1/home.html. В таком случае еам необходимо выполнить ряд нехитрых действий. я хочу отображить http://site.ru

Возможные преимущества дружественного URL

  • поисковые системы научились сравнивать поисковый запрос с транслитом адреса страницы;
  • более удобное представление адреса страницы для пользователя (для ввода с клавиатуры или запоминания).

Важно!

Основное правило только одно: для каждой страницы должен быть свой уникальный адрес (url).

Настройка дружественного URL в MODx

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

Переименовываем файл ht.access

Я обычно делаю так:

  • скачиваем файл себе на компьютер из директории сайт
  • открываем файл ht.access с помощью блокнота
  • выбираем “Сохранить как..” -> Выбираем “Все файлы” -> Имя как .htacess
  • закачиваем файл в основную директорию сайта

Включаем дружественный URL в панеле управления сайта

  • В панеле управления сайта на MODx выбираем “Инструменты”->“Конфигурация”
  • далее выбираем вкладку “Дружественный URL”
  • в полеИспользовать дружественные URL” выбираем ДА

Где задать URL страницы в MODx?

Теперь необходимо каждой созданной странице присвоить свой уникальный URL. А делается это в окне создания/редактирования страницы (см. создание страниц в MODx). В поле “Псевдоним” необходимо на латинице ввести ее название. Это и будет URL-ом страницы.

Основные теги , , ,

MODx: привязка TV параметра к странице

MODx – система управления сайтом (CMS). Описание системы можно посмотреть здесь.

В данной статье будет изложена информация о таком параметре в MODx как TV (сокращенно от «template variables», что можно перевести как «изменение шаблона»).

Параметр TV является дополнительным переменным полем в структуре страницы. Т. е., проще говоря, можно добавить на страницу переменный элемент (поле), который может быть представлен в виде кнопки, текстового поля, загрузчика изображения или файла, выпадающий список и т. д. Используются практически все элементы ввода используемые в HTML. Далее рассмотрим пример создания параметра TV.

Создание TV параметра в MODx

Чтобы создать новый TV параметр, необходимо зайти в панели администрирования Элементы → Управление элементами → Параметры (TV) → Новый параметр TV. После этого должно появится меню нового параметра как на нижеприведенном изображении.

Создание нового параметра TV в MODx

Создание нового параметра TV в MODx

Имя параметра: вводим название параметра, по которому мы будем вызывать его в шаблоне. Важно: имя параметра не может содержать пробелов!

Заголовок: здесь вводится заголовок дополнительного поля, которое будет отображаться в меню создания страницы.

Описание: описание TV параметра, которое на даст в них запутаться если их будет очень много :-)

Тип параметра: с помощью этого поля вы можете выбрать, какого типа будет дополнительное поле для вашего шаблона.

Визуальный компонент: тип отображаемого компонента.

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

Выбираем в поле Права доступа “доступен для всех”.

Присваиваем категорию созданному параметру в пункте Категория и жмем Сохранить.

После того как создан параметр TV, соответствующие поля поавляются в меню создания страницы (см. ниже).

Создание новой страницы в MODx с привязанными TV параметрами

Создание новой страницы в MODx с привязанными TV параметрами

Вывод параметра TV на страницу MODx

Ну и самое главное: а где же на странице будет выводится наш параметр TV?

При создании нового шаблона (пример создания простого шаблона можно посмотреть здесь) или редактирования готового шаблона в MODx, необходимо прописать такой код [+name_tv+], где вместо name_tv необходимо вставить имя созданного TV параметра. Соответсвенно в этой области и будет вставлена информация из TV параметра страницы.

Краткий вывод

Данная возможность открывает большой простор для экспериментов. С помощью данных параметров можно сделать удобную ленту новостей, каталог товаров и т. д. Что лишний раз заставляет хорошо отозваться о данной CMS.

Основные теги , ,

Создание страниц в MODx

Данная тема посвящена основам работы с MODx, а именно созданию новой страницы на сайте. Предположим что Вам создали сайт на MODx, и спустя какое-то время появилась необходимость в создании нового раздела на сайте. Разработчик вашего сайта, помимо всего прочего, представил данные для доступа в административную панель управления данной системой управления. Эта панель управления обычно доступна по адресу http://www.vash_site.ru/manager. Здесь необходимо ввести предоставленные логин и пароль. После того как мы правильно вбили данные и прошли авторизацию, мы попадаем в панель администрирования.

Слева находится структура страниц сайта в виде древа документов (“разделы”). Элементы древа отображают название ресурса (title). Данная организация структуры сайта интуитивно понятна и удобна.

Вверху жирным шрифтом указано название сайта (“title”). Изменить название можно в панели администрирования:

Инструменты → Конфигурация → Сайт → Заголовок сайта

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

После этого в правой части появится следующее окно:

Заголовок – название страницы. Оно же по-умолчанию title и пункт меню (см. Пункт меню).

Расширенный заголовок - название говорит само за себя. Необязательно поле для заполнения.

Описание - необязательно поле.

Псевдоним – если используете дружественный URL, то данное поле необходимо заполнить.

Атрибуты ссылки – необязательное поле.

Summary – аннотация.

Шаблон – привязка шаблона к странице.

Пункт меню – пункт меню страницы. Можно не заполнять, тогда пунктом меню будет описание.

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

Основные теги , ,

MODx установка

С того времени, когда я первый раз ставил свой первый сайт на  MODx (его ещё иногда называют ьщвч – порядка двухсот запросов в месяц   ) прошло уже несколько лет. Не скажу что первый раз был комом, но помучатся пришлось. Давайте разберемся как поставить  MODx  на сайт с минимальными затратами времени и нервов.

Сначала необходимо обозначить требования к хостингу, на который будем ставить нашу CMS

  • поддержка PHP;
  • наличие СУБД MySQL.

По сути это главное что должно быть (после головы, конечно   )

Теперь необходимо загрузить исходные файлы MODx

Сделать это можно на официальном сайте по адресу http://modxcms.com/download/

Далее закачиваем исходные данные MODx на хостинг-сервер

Закачать файлы на сервер можно при помощи веб-интерфейса FTP (обычно таковой присутствует на хостинге), либо закачать при помощи дополнительного програмного обеспечения, например TotalCommander (как закачать файлы на FTP при помощи TotalCommander?).

Отлично! Теперь набираем в браузере www.имя_вашего_сайта/install/

Если все сделано правильно, то откроется окно  установки   MODx  и предложит установить  MODx . Мы конечно же соглашаемся и кликаем «Install now».

Выбираем язык. Конечно же «русский»

Теперь нам предложат выбрать тип  установки . Будем считать что у нас новая установка и выбираем пункт Новая установка и жмем Далее (не пугайтесь что у меня на картинках язык английский, просто по аналогии я использовал картинки с дружественного ресурса http://www.1two.ru/

В следующем окне необходимо ввести данные доступа к базе данных для установки. Эти данные можно взять на хостинге. Обычно они находятся в разделе Управление СУБД MySQL. После этого необходимо проверить соединение с хостингом.

Если все вышеуказанное сделано правильно, то вы увидите следующие окно, где вам предложат ввести имя базы данных, префикс таблиц в базе и выбрать кодировку сайта. Обычно я работаю в UTF-8 (не забудьте проверить кодировку на сервере-хостинге – они должны совпадать). Далее проводим тест базы данных и задаем данные пользователя административной части.

Здесь основная работа заканчивается. Далее вам будет предложено выбрать компоненты для  установки . Оставляем по-умолчанию.

Поздравляю! Вы установили CMS MODx на свой хостинг .

Сайт будет доступен по адресу www.имя_вашего_сайта/

Административная панель расположена по адресуwww.имя_вашего_сайта/manager

Для входа в панель используйте ранее заданные параметры пользователя.

Основные теги , , , ,

Шаблоны MODx. Создание простого шаблона

Сложно найти другую систему управления, которая была бы так же удобна в настройке и изменении дизайна сайта. Несмотря на то, что система управления работает с динамическим контентом, можно достаточно успешно “натянуть” на MODx любой HTML-шаблон. Для этого необходимо вставить в нужные места специальные теги MODx.

Простой шаблон для MODx выгладит примерно так:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<title>[*pagetitle*]</title>//выводит title страницы. Сам заголовок прописывается  в панели администрирования

<base href=”[(site_url)]“></base>//устанавливаем базовый URL

<style type=”text/css” media=”screen” >

…………..//здесь описаны стили

</style>

</head>

<body>

<div id=”header”>

<div id=”menu”>

[[Ditto]]//плагин, который выводит активное меню

</div>

</div>

<div id=”content”>

<h2>[*longtitle*]</h2>//выводит заголовок страницы в документе

[*#content*]//выводит содержимое документа

</div>

<div id=”bottom”>//так называемый “подвал” для счетчиков, копирайта и т. д.

</div>

</body>

</html>

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

Основные теги , ,