MODx Украина » Цикл статей по созданию блога на MODx » Создание блога на MODx. Часть 1. Подготовка почвы и Шаблон главной страницы

Часть 1. Подготовка почвы и Шаблон главной страницы

 

 

 

Содержание:

  1. Часть 0. Начало
  2. Часть 1. Подготовка почвы и Шаблон главной страницы
  3. Часть 2. Шаблон второстепенных страниц
  4. Часть 3. Важные настройки и Заключение

 

ДЕМО САЙТ! Статья на Google Docs!

ПЕРЕЙТИ К ВИДЕО!

Подготовка почвы

Установим MODx. Пока мы учимся рекомендую ставить на локальный компьютер. Процесс установки не такой уж сложный.

  1. Скачать и установить локальный сервер. Я рекомендую WAMP SERVER. Скачиваем тут:

    http://www.wampserver.com/en/download.php

  2. Скачать последний дистрибутив MODx Evolution (на момент написание статьи 1.0.5) на официальном сайте:

    http://modx.com/download/#ga

  3. Установить MODx. Здесь не должно возникнуть трудностей. Разве-что могу сказать про стандартные пароли Вамп: MySQL login: «root» password: «-» (значит без пароля, т.е. строку не заполнять). Если возникли трудности можете посмотреть мое видео:

    http://oros.kiev.ua/modx/install-modx-on-wamp.php

Необходимо убедиться что на вашем Apache сервере включен mod_rewrite

Переименовываем ht.access в .htaccess, а sample-robots.txt в robots.txt

 

Поработаем над структурой

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

Сделать это можно так: «Сайт->Новый ресурс»

Пока просто сделаем банальные Заголовки: «Главная» и «Блог».

В документ «блог» добавим несколько записей. Чтобы добавить документы в папку блог, необходимо нажать правой кнопкой мыши на блог и выбрать «Дочерний ресурс». Дайте им какие нибудь название, чтобы было что-то (в дизайне зовется «Рыба»).

 

Шаблон главной

Подбор дизайна

Поскольку  мы учимся будет не целесообразно платить кому-то за дизайн поэтому давайте воспользуемся бесплатными шаблонами которые предлагает сайт OSWD  (подсмотрено у Fuzzy) Хочу с облегчением заметить что для MODx подойдет любой CSS шаблон.  Мне понравился шаблон DesignCreek02

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

Скачать русифицированную и допиленную версию шаблона можно здесь: Загрузить с dropbox.com

Кстати хочу заметить:

Кодировка: UTF-8!

Небольшое лирическое отступление.

Мое твердое убеждение – все (!) веб-разработчики просто обязаны перейти на использование универсальной кодировки текстов UTF-8. Я не буду описывать преимущества данной кодировки – просто примите как данность, что мы будем работать именно с ней.

Так уж исторически сложилось, что в MODx можно использовать множество разных национальных кодировок, начиная от японской и заканчивая кириллической "windows-1251" a.k.a. "CP1251". По моему мнению – это атавизм, от которого надо жестко избавляться. Что собственно я и проделываю всегда перед установкой новой копии системы управления MODx.

(подсмотрено у Fuzzy).

 

Интеграция дизайна

Так шаблон у нас имеется теперь интегрируем его в MODx. Зальем все необходимые файлы шаблона на сайт(копируем папку DesignCreek02 сюда /assets/templates/ ). Создадим шаблон для сайта вставим туда содержимое нашего index.html. Чтобы добавить новый шаблон необходимо перейти: Элементы->Управление элементами->Шаблоны->Новый шаблон.

Теперь дабы все не поехало поменяем пути:

1) Поменяем в шаблоне пути к стилям и картинкам. Например: «images/img.jpg» меняем на «assets/templates/DesignCreek02/images/img.jpg», а «style.css» на «assets/templates/DesignCreek02/style.css»

Переходим на документ «Главная», даем ей наш новоиспеченный шаблон(находим поле «шаблон» и из выпадающего списка выбираем нужный шаблон) ну и наконец набираем адрес сайта и смотрим(на локале это будет http://localhost/): вы видите точно такой шаблон какой и выбрали без изменений. Это конечно хорошо, но надо заставить шаблон плясать под нашу дудку. Т.е. сделать из статики динамику

 

  1. Добавление специальных тегов MODx

Найдем основное содержимое оно у нас заключено в <div class="left">, скопируем его, зайдем на главную под полем содержимое отключим редактор, а после вставим наш код.

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

[*content*]

Теперь смотрим в секцию HEAD нашего шаблона. Находим там

<title>DesignCreek02</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Your Website Description" /> <meta name="keywords" content="keywords, go, here" />

 

Так меняем на вот это:

<title>[*pagetitle*] | [(site_name)]</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="[*introtext*]" /> <meta name="keywords" content="{{keywords}}" /> <base href='[(site_url)]'/>

Так что же мы сделали:

  1. Мы сделали динамичный заголовок вида: Название страницы | Название сайта
  2. Добавили динамичный Мета-тег Description
  3. Добавили ключевики. Они у нас одни и будут храниться в чанке(этому не стоит пределять особого внимания, т.к. сейчас этот тег не влияет на ранжирование страниц в поисковиках)
  4. Мы добавили тег base, он нужен для того чтобы в будущем у нас корректно работали ЧПУ. Этот тег как бы говорит сайту: все относительные пути должны быть просчитаны относительно корня сайта.

 

  1. Добавим динамичное меню

Как мы видим наше меню состоит из такого кода:

<div id="menu"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Портфолио</a></li> <li><a href="#">Реклама</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Конкурсы</a></li> <li><a href="#">О нас</a></li> </ul> </div>

Надо сделать это меню динамичным! В этом нам поможет сниппет Wayfinder.

Создаем чанк wf_out пишем в него:

<div id="menu"> <ul> [+wf.wrapper+] </ul> </div>

Создаем чанк wf_row с таким содержимым:

<li[+wf.classes+]> <a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a> [+wf.wrapper+] </li[+wf.classes+]>

Теперь вместо кода меню пишем вызов Wayfinder:

[!Wayfinder?startId=`0` &outerTpl=`wf_out` &rowTpl=`wf_row` &level=`1` &hideSubMenus=`1`!]

 

Динамичное меню работает!

  1. Добавим динамичный вывод блоков(постов блога)

Каждый пост на главной сейчас выглядит так

<div class="post"> <h2><a href="#">DesignCreek02</a></h2> <h3>Шаблон # 2 для вас</h3> <div class="img_left"><img src="images/img.jpg" alt="" /></div> <p>Привет это новый шаблон от <a href="http://www.designcreek.com">DesignCreek</a>. Этот красочный шаблон просто отличный. У этого шаблона:</p> <ul> <li>Валидный xHTML</li> <li>Валидный CSS</li> <li>Кросс браузерность(Протестирован в современных браузерах)</li> <li>Фиксированный шаблон по ширине.</li> <li>Весит всего 52kb (с картинками и стилями)</li> </ul> </div>

Нам надо чтобы выводились последние записи блога по этому шаблону. Для этого существует сниппет Ditto. Давайте создадим для него шаблон. (Примечание: шаблоны для сниппетов хранятся в чанках). Создадим новый чанк назовем его «ditto_tpl» (Элементы->Управление Элементами->Чанки->Новый чанк)

Он будет выглядеть так:

<div class="post"> <h2><a href="[(base_url)][~[+id+]~]">[+pagetitle+]</a></h2> <h3>[+description+]  [+date+]</h3> [+introtext+] </div>

Теперь в документе «Главная» вместо содержимого вставим вызов Ditto:

[!Ditto? &parents=`2` &tpl=`ditto_tpl` &sortBy=`createdon` &summarize=`5` &dateFormat=`%d.%m.%Y` &paginate=`1` !]

Так добавим пагинацию(pagination - разбиение на страницы).

Сразу после вызова Ditto пишем такой код:

[+pages+]

Это глобальный плейсхолдер(placeholder - подстановщик) Ditto который будет заменен ссылками на страницы.

Кстати если у вас будет несколько вызовов Дитто, то необходимо привязать пагинацию к нужному. Делаеться так: к вызову добавляеться &id=`ourid`, а плейсхолдер будет выглядеть так

[+ourid_pages+]

(Вместо ourid может быть любое латинское слово без пробелов и знаков)

 

Все глобальные плейсхолдеры Ditto:

[+next+] – Кнопка «Следующее» [+previous+] – Кнопка «Предыдущее» [+splitter+] – Разделитель если всегда показывается 0 [+pages+] – Список страниц [+totalpages+] – Общее количество страниц [+start+] – Номер первой показываемой страницы [+stop+] – Номер последней показываемой страницы [+current+] – Номер показываемой текущей страницы [+total+] – Общее количество страниц [+item[x]+] – Сформированный вывод индивидуального документа

Видео:

   

Понравилась статья?

Тогда подпишитесь на:

  1. RSS-ленту
  2. Email рассылку
  3. Twitter ленту
  4. Facebook ленту или нашу Facebook страницу!

Также вас могут заинтересовать:


Комментариев
Комментарии работают на Disqus

Поиск по сайту

Подпишитесь на обновления

Что такое RSS?

Подписка на RSS ленту

Введите email адрес:


MODx

 
Описание Сниппеты
Установка - Jot
Настройка - Ditto
  - Wayfinder
  - eForm
   

Последние публикации

Facebook

Анонсы последних статей

Облако тегов

Для корректного отображения этого элемента вам необходимо установить FlashPlayer и включить в браузере Java Script.

Друзья сайта

Система Orphus
SliceFactory Extension Factory