Последнее обновление: 10.02.2013 в 21:16
Подпишись на RSS
rss Подпишитесь на RSS, чтобы всегда быть в курсе событий.

Комментарии

Присоединяйтесь к обсуждению
  • Евгений: Доброго времени суток. Кто-то подскажет, как правильно настроить вывод мета-тэгов в результатах поиска. На...
  • Евгений: Доброго времени суток. Возник вопрос по специфике движка SilverStripe. Есть основное зеркало сайта вида...
  • Вадим: Спасибо помогло, сделал так date_timezone = Europe/Kiev
  • John Doe: Не помогло, шаблон все ровно всегда такой же как у главной страницы ((
  • Алексей: Здравствуйте. Спасибо за статью. Собираюсь осваивать MODx (сейчас сижу на WP) и статья очень пригодилась!...
25 Март 2011 · MODx, о работе

Проанализировав то, по каким запросам люди приходят на мой сайт, возникла идея написать пост на тему, что нужно сделать в MODx сниппете, что бы получилось как в evo. Раз возникла идея её надо реализовывать В этой статье я постараюсь не лезть в глубины xPDO т.к сам не особо разобрался с ним. Это будет взгляд на [...]


7 Июль 2010 · о работе

При работе над одним из достаточно долгосрочных проектов меня возникла необходимость сохранять  данные в виде файлов, которые можно было бы правит в Экселе и в последствии заливать обратно на сервер.Первым, что пришло на ум в данной ситуации был формат CSV. Просто и со вкусом, но в связи с достаточно сложной структурой которую приходилось бы хранить [...]


21 Декабрь 2009

Руководство по созданию MODx шаблонов

Рубрика: MODx, о работе. Метки: ,
Vote This Post DownVote This Post Up (No Ratings Yet)
Loading ... Loading ...

Обещанная статья по созданию шаблонов на MODx.

Данная статья написана мною исходя из достаточно большого практического опыта работы с MODx. Идеи изложенные здесь далеко не новы и опытный разработчик, вероятно не найдет здесь для себя ни чего нового.А вот новичкам изложенный здесь материал может быть не только интересен, но и полезен :)

На мой взгляд проще всего будет создать шаблон из готового HTML взятого здесь Шаблон взят абсолютно мной произвольно, вы можете взять любой другой, алгоритм описанный в данной статье, может быть использован для любого шаблона.

Шаг 1: Подготовка

Итак подключаемся к серверу на котором у нас уже стоит MODx и переходим в папку с системой(в случае если вы работаете на локальном компьютере убедитесь, что сервер запущен). переходим в папку с установленным MODx. Далее идем в папку assets/templates и создаем в ней папку, которая будет содержать все файлы в дальнейшем я буду использовать имя dark, используемые для шаблона: css, изображения, внешние JavaScript файлы.

Каким образом вы будете организовывать внутреннюю структуру этой директории остается на ваше усмотрение, но я, обычно, создаю папки css,img и js для хранения соответствующих частей шаблона.

для нашего шаблона копируем файл default.css в поддиректорию css, предварительно заменив все /img на ../img, а содержимое каталога img в соответствующий на сервере.

Шаг 2: Создание шаблона

Далее нам надо создать собственно сам шаблон. Для этого заходим в админ панель MODx, в верхнем меню выбираем пункт «Ресурсы(Resources)» -> «Управление Ресурсами(Manage Resour)» и нажимаем «Создать шаблон(New template)» видим следующую форму:

Заполняем поля «имя шаблона(Template name)», «Описание(Description)», выбираем если надо категорию шаблона или создаем новую. В поле Код Шаблона(Template code)
вставляем содержимое файла index.html из нашего тестового шаблона.

Для сокращения количества лишнего кода добавим сразу за тегом
<head>

<base href="[(site_url)]" />

что бы в дальнейшем,не приходилось указывать адрес сайта в ссылках на изображения, стили и JavaScript файлы. После чего заменим все пути для нашего шаблона следующим образом.

  • для таблиц стилей
    <link rel=»stylesheet» type=»text/css» href=»default.css» media=»screen»/> заменяем на <link rel=»stylesheet» type=»text/css» href=»/assets/templates/dark/css/default.css» media=»screen»/>
  • для изображений
    <img src=»img/[имя файла]«> на <img src=»/assets/templates/dark/img/[имя файла]«>
  • для JavaScript файлов
    <script src=»img/[имя файла]«> на <script src=»/assets/templates/dark/img/[имя файла]«>

Далее, в том месте где должно быть основное содержимое страницы заменяем текст шаблона на следующую конструкцию:
[*#content*]

т.е в нашем случае

	<div class="main">
 
		<div class="padded">
 
			<h1>Porttitor posuere</h1>
			<p class="meta">October 24th, 2006 by Duis porttitor</p>
 
			<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
 
			<blockquote><p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p></blockquote>
 
			<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
 
			<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.
			</p>
 
 
			<h1>Adipiscing</h1>
			<p class="meta">September 31st, 2006 by Mauris</p>
 
			<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam. Phasellus rutrum elit vel nisi. Cras mauris nulla, egestas quis, cursus at, venenatis ac, ante. Fusce accumsan enim et arcu. Duis sagittis libero at lacus. Suspendisse lacinia nulla eget urna.</p>
 
			<ul>
				<li>Tristique</li>
				<li>Aenean</li>
				<li>Pretium</li>
			</ul>
 
			<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p>	
		</div>
	</div>

заменяем на

	<div class="main">
 
		<div class="padded">
				[*#content*]
		</div>
 
	</div>

Так же содержимое тега <title> можно заменить на [*pagetitle*] для того, что бы в заголовке браузера вместо Dark Ritual отображалось название текущего документа.

Шаг 3: Создание примитивной навигации

Рассмотрим создание простейшей навигации. Здесь я не буду приводить примеры создания динамических меню на wayfinder-е перечислять все его параметры илл описывать, как можно создать меню навигации без использования стандартных сниппетов MODx. Все гораздо проще. Для начала давайте посмотрим на наш шаблон.
Точнее вот на эту его часть:

		<h1>Something</h1>
		<ul>
			<li><a href="index.html">pellentesque</a></li>
			<li><a href="index.html">sociis natoque</a></li>
			<li><a href="index.html">semper</a></li>
			<li><a href="index.html">convallis</a></li>
		</ul>

Если приложить немного фантазии, то можно использовать подобную структуру, как меню навигации по сайту.
Давайте посмотрим теперь, на админ-панель нашего сайта, в частности на дерево документов.

Вся информация, необходимая нам для создания простейшего меню находится здесь. Ниже приведен кусок кода меню, а потом я объясняю, как это работает.

		<h1>Меню</h1>
		<ul>
			<li><a href="[~1~]">На главную</a></li>
			<li><a href="[~7~]">О компании</a></li>
			<li><a href="[~8~]">контакты</a></li>
		</ul>

как можно заметить, ссылки указывают на некую конструкцию [~x~], где x некое число. На самом деле это число, идентификатор документа если посмотреть на рисунок выше то можно заметить, что это число, которое указывается в скобках рядом с названием документа. А сама конструкция означает ссылку на документ с идентификатором x. Таким образом, можно добавить простейшую навигацию на ваш сайт. Конечно для создания сложной навигации лучше использовать Wayfinder или собственную систему навигации, но, если надо сделать простой сайт или создать прототип то такой способ вполне можно использовать.

Шаг 4: Декомпозиция, чанки

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

  1. выделяем код нашего меню и вырезаем его из кода шаблона
  2. вместо вырезанного кода пишем следующее {{menu}}
  3. жмем «сохранить»
  4. верхнее меню жмем «Ресурсы»->»управление ресурсами»
  5. Чанки, создать чанк
  6. имя menu, код чанка вставляем из буфера обмена

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

сохраняем и смотрим что получилось. Если все сделано правильно, то… ни чего не должно произойти. :) . Сейчас мы изменили только внутреннюю структуру шаблона, но не его внешний вид. Теперь точно так-же можно вынести в отдельные чанки заголовок, подвал страницы и часть между тегами <header> и </header> В идеале в шаблоне у нас должен остаться только скелет описывающий, взаимное расположение слоев на странице. В дальнейшем это сильно упростит изменение и редактирование сайта.
Все это гораздо лучше понимаешь на опыте, когда приходится править в подвалах пятнадцати шаблонов телефон компании, а на следующий день выясняется что надо было поправить ещё и e-mail и надо править все по новой.
Для себя я ввел правило: «Любой часть сайта содержимое которой может измениться должна быть размещена в чанке».

Вот в принципе и все. Первая попытка описать процесс создания простенького шаблона для MODx можно сказать состоялась. Все вопросы, сообщения об ошибках, замечания и благодарности прошу в коментарии или на почту
P.S: Если вы хотите, что бы я сделал установку сверстанного шаблона на ваш сайт, просто напишите мне цена вопроса 100$

Читайте так же:



  • http://mrezhin.ru Сергей

    Спасибо за статью! Завтра почитаю, на «свежую» голову, сегодня уже сил нет…
    P.s. кстати с обновлением (про дизайн блога) :)

  • rusl

    Скажи как применить уже имеющийся шаблон(скачанный)!?скачал у Andreasa!lдобавлял в assets\templates!ничего не получается!если можно пришли ответ на почту! с меня причитается web-money!

  • http://www.mytyper.ru/ TypeR

    Спасибо за руководство. Сейчас как раз разбираюсь с MODx, чтобы перенести на него свой блог с WP, т.к. он более гибок в индивидуальных подстройках.

    • http://loom-studio.net Денис

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

  • http://belpremier.ru/ belpremier

    Очень помогла статья, спасибо. Хочу перейти с joomlЫ на MODx. Осваиваю)

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

Счетчик