У нас уже полностью готовы две страницы, это Главная и Портфолио. Страницу О компании тоже можно считать готовой, там осталось только разместить информацию, которую надо поместить в поле Содержимое ресурса. Настало время заняться нашим блогом. Блог будет представлять из себя список статей с возможностью для веб-пользователей оставлять комментарии.

Создаем ленту из статей блога

Для начала давайте создадим шаблон для страниц со статьями нашего блога. Идем в Элементы >> Управление элементами >> Шаблоны открываем шаблон Внутренняя, копируем весь код в этом шаблоне, возвращаемся на закладку Шаблоны и создаем новый шаблон Статьи, вставляем скопированный код. В описании пишем - Шаблон для статей в блоге.

Теперь идем в Элементы >> Управление элементами >> TV-параметры и создаем параметр с именем blog_img в заголовке пишем Картинка к статье, в описании указываем размер 550px × 160px, тип вода указываем Image

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

Теперь открываем в Notepad++ файл blog.html который лежит в папке C:/xampp/htdocs/site/www/assets/templates/templatemo_250_chess/. Нам нужен код, который будет шаблоном для вывода статей. В Notepad++ это будут строки со 109 по 123 включительно:

            <div class="post_box">
            
            
                <h2>Morbi sed nulla ac est cursus</h2>
                <div class="post_info">Date: 14 September 2048 | Category: <a href="http://www.templatemo.com/page/1" target="_parent">CSS Templates</a> | Posted by <a href="http://www.templatemo.com" target="_parent">David</a></div>
                
                <div class="image_wrapper"><a href="http://www.templatemo.com" target="_parent"><img src="images/templatemo_image_06.jpg" alt="image" /></a></div>      

                       
              <p>Curabitur ullamcorper neque et justo aliquet at pretium orci  scelerisque. Mauris sodales tristique dignissim. Phasellus ut augue  nibh. Aliquam vel libero sit amet mauris posuere ullamcorper  sollicitudin ac eros. Vestibulum auctor euismod mi et tincidunt. Mauris  vitae ipsum diam, sagittis tempor velit. Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow">XHTML</a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow">CSS</a>.</p>
                
                <a href="#">Continue reading...</a> | <a href="subpage.html">Comments (126)</a>
            
            
            </div>

Копируем этот код и вставляем его в новый чанк blog_tpl. Добавляем плэйсхолдеры Ditto:

            <div class="post_box">                      
                <h2>[+pagetitle+]</h2>
                <div class="post_info">[+date+] | [+author+]</div>                
                <div class="image_wrapper"><a title="[+pagetitle+]" href="[~[+id+]~]" target="_parent"><img title="[+pagetitle+]" src="[+blog_img+]" alt="[+pagetitle+]" /></a></div>                                
              <p>[+introtext+]</p>               
                <a title="[+pagetitle+]" href="[~[+id+]~]">Читать далее...</a> | <a href="subpage.html">Comments (126)</a>                     
            </div>

Сохраняем чанк. Заходим в ресурс Блог о дизайне и в закладке Настройка страницы убираем галочку с Использовать HTML-редактор. Это сделано для того, чтобы HTML-редактор не подставлял теги в вызов Ditto. Сохраняем страницу и вновь заходим чтобы в Содержимом ресурса поместить вызов Ditto:

               [!Ditto? id=`blog` &parents=`2` &tpl=`blog_tpl` &paginate=`1` &display=`2` &dateSource=`pub_date` &dateFormat=`%d.%m.%Y`!]
              <div class="pagination">
<p class="pages"><small>Страница [+blog_currentPage+] из [+blog_totalPages+]</small> [+blog_previous+] [+blog_pages+] [+blog_next+]</p>               
             </div>

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

Проверяем, что у нас получилось. У меня все работает.

Подключаем систему комментариев DISQUS

Мы уже использовали несколько сниппетов, которые установлены в MODx по умолчанию. Но сниппетов для MODx Evolution существует гораздо больше. Один из них - сниппет Jot, предназначенный для подключения комментариев на вашем сайте. Английская версия этого сниппета у вас уже установлена. Можно было бы скачать русскую версию и подключить комментарии с помощью этого сниппета. Но я предлагаю другое решение. Существует бесплатный сервис DISQUS, который позволяет подключать комментарии практически на любом сайте, в том числе и на MODx. Преимуществ у этого сервиса перед штатным сниппетом довольно много, для меня же главное, что установить его проще простого, да и смотрится он на сайте вполне симпатично, и это без каких-либо дополнительных настроек.

Первым делом идем на сайт disqus.com и проходим несложную регистрацию.

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

В форме, расположенной ниже, вам необходимо ввести имя, пароль и почтовый адрес для регистрации в системе.

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

На третьем шаге вам предложат выбрать систему, на которой построен ваш сайт. MODx здесь нет, но нам и не нужно, выбираем нижнюю строчку с универсальным кодом.

После этого вы попадаете на страницу с инструкцией по установке.

В графе Before you start отобразится короткое имя, которое вы вводили на первом шаге, видимо, как напоминание.

В следующей графе Embed code как раз и находится тот волшебный код, который мы должны разместить у себя на сайте. Копируем его, затем создаем новый чанк disqus и вставляем код. Теперь этот код надо немного подправить. Первым делом правим строчку:

var disqus_shortname = 'example'; // required: replace example with your forum shortname

вместо example вы должны написать то короткое слово, которое было подсказано в предыдущей графе. Затем нужно раскомментировать две строки, т.е. убрать две наклонные черты вначале строчки:

// var disqus_identifier = 'unique_dynamic_id_1234';
// var disqus_url = 'http://example.com/permalink-to-page.html';

disqus_identifier - уникальный идентификатор, который нам очень настоятельно рекомендуют использовать, так как в случае изменения названия страницы, где находятся комментарии, дискус может потерять путь к этой странице. Для каждой страницы disqus_identifier должен быть уникальным. Сделаем его таким же, как id наших страниц, так как на нашем сайте он тоже уникален для каждой из страниц, а чтобы небыло совпадений с другими потоками с других сайтов, добавим перед кодом название своего сайта. Нам в этом помогут специальные теги MODx. В значении этого параметра пишем [(site_url)][*id*].

var disqus_url - сообщает службе Disqus URL текущей страницы. Нам тоже настоятельно рекомендуют его использовать. По умолчанию используется window.location. Я думаю, сюда тоже можно подставить конструкцию из специальных тегов MODx, только выведем не id документа, а путь к нему: [(site_url)][~[*id*]~].

Есть еще один параметр disqus_title - который не обязателен к применению. Он передает службе Disqus название страницы. По умолчанию в качестве названия берется информация из тега <title>. Если по каким-то причинам вас это не устраивает, то можно передать дискусу другое название, к примеру, таким образом:

var disqus_title = '[(site_name)] | [*longtitle*]';

Есть еще параметр, который мы добавим в этот код:

var disqus_developer = 1;  - используется при тестировании системы на локальном компьютере, т.е. когда сайт недоступен из сети интернет. Не забудьте только его убрать при переносе на хостинг.

У нас получится следующее:

var disqus_identifier = '[(site_url)][*id*]';
var disqus_url = '[(site_url)][~[*id*]~]';
var disqus_developer = 1;

Сохраняем код. Возвращаемся на страницу дискуса к графе Comment count. Здесь находится код для страниц, на которых мы будем выводить счетчик комментариев, в нашем случае это ресурс Блог о дизайне. Копируем код и вставляем его в новый чанк, который так и назовем Comment_count. В этом коде тоже нужно в строчке

var disqus_shortname = 'example'; // required: replace example with your forum shortname

заменить example на ваш идентификатор. Сохраняем чанк. Теперь открываем шаблон Статьи и вставляем вызов чанка disqus сразу под вызовом чанка CONTENT:

{{disqus}}

А в шаблоне Внутренняя перед закрывающим тегом </body> вставляем вызов чанка

{{Comment_count}}

Теперь нам надо добавить счетчик комментариев. Открываем чанк blog_tpl и находим строчку

<a title="[+pagetitle+]" href="[~[+id+]~]">Читать далее...</a> | <a href="subpage.html">Comments (126)</a>

меняем ее на

<a title="[+pagetitle+]" href="[~[+id+]~]">Читать далее...</a> | <a href="[(site_url)][~[+id+]~]#disqus_thread"></a>

Где #disqus_thread как раз и ищет в ссылке, к которой он добавлен количество комментариев.

Сохраняем и можем посмотреть, что у нас получилось.

Осталось только изменить в настройках дискуса текст который сопровождает показ количества комментариев. Заходим в административную панель дискуса далее Settings >> Appearance и опускаемся до Comment Count Link, справа нам предлагают выбрать текст, который будет отображаться в счетчике если комметариев будет 0, 1 или множество. Я сделал так: Комметарии 0, Комментарии 1, Комментарии {num}. Вы можете сделать по своему.

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