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

 

 

 

Содержание:

0. Часть 0. Начало
1. Часть 1. Подготовка почвы и Шаблон главной страницы
2. Часть 2. Шаблон второстепенных страниц
3. Часть 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>Создание блога на MODx. Часть 1. Подготовка почвы и Шаблон главной страницы | MODx Украина</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="[ *introtext *]" />
<meta name="keywords" content="{ {keywords}}" />
<base href='http://oros.kiev.ua/'/>
    

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

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

 

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

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

<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>

</ul>
</div>
    

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

<li>
<a href="" title=""></a>

</li>

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

Главная
Описание системы
Сниппеты
Об авторе
Глоссарий

 

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

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

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

<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="/[~~]"></a></h2>
<h3>  </h3>

</div>
    
    

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

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

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

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

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

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

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

 

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

 – Кнопка «Следующее»
 – Кнопка «Предыдущее»
 – Разделитель если всегда показывается 0
 – Список страниц
 – Общее количество страниц
 – Номер первой показываемой страницы
 – Номер последней показываемой страницы
 – Номер показываемой текущей страницы
 – Общее количество страниц
 – Сформированный вывод индивидуального документа
    

Видео: