Главная » MODx Evolution » Урок 8. Раздел «Новости» (Блог) на MODx

Урок 8. Раздел «Новости» (Блог) на MODx

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

Прежде чем мы начнем править код, предлагаю создать 3 тестовые новости и сделать их дочерными к пункту меню «Новости».

Вот как это сделал я.

novosti2

Обязательно заполняйте поле «Аннотация». В этом типе записей оно нам понадобится.

novosti1

Теперь переходим непосредственно к инструментам, которые мы будем использовать. Для этих целей мы применим сниппет Ditto. Я могу смело сказать, что это наиболее полезный и часто используемый сниппет в MODx. Он позволяет выводить статьи или новости в виде блога, создавать карту сайта и прочие фишки, которые улучшают весь проект.

Данный сниппет имеет множество параметров, а конструкция их применения такая же как и увсех остальных сниппетов.

[[Ditto? &параметр1=`значение` &параметр2=`значение`]]

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

Давайте сразу задействуем этот элемент. Для этого переходим к дереву материалов, и нажимаем редактировать на пункте меню «Новости».

В область с контентом вставляем вот такую конструкцию:

[[Ditto]]

novosti3

Проверяем результат на сайте.

novosti4

Достаточно хороший результат, учитывая, что мы потратили на это, не более 20 сек.

Но часто нужно изменить саму схему вывода этих новостей, например, формат даты, добавить кнопку подробнее и прочее.

Именно тут на помощь и приходят параметры Ditto.

Чтобы изменить формат вывода материалов нужно создать новый чанк и привязать его к Ditto, с помощью специальной конструкции:

[[Ditto? &tpl=`novosti`]]

, где novosti – это имя чанка который мы только что создали.

Что помещать в код этого чанка? Тут мы будем применять несколько параметров:

[+longtitle+] — будет отображать заголовок новости

[+date+] — атрибут для вывода даты публикации материала

[+introtext+] — вступительный текст статьи.

Так, что создаем чанк – «novosti» и помещаем туда наш код:

<div id="news">
<h2>[+pagetitle+]</h2>
<div class="introtext"><span class="date">[+date+]</span>[+introtext+]</div>
</div>

novosti5

А в статье «Новости» вставляем конструкцию:

[[Ditto? &tpl=`novosti`]]

Как видите, пропали ссылки с заголовков статей.

novosti6

Давайте, это исправим и заодно добавим ссылку читать далее. Для этого немного изменим чанк «nvosti».

Конечный код будет иметь вид:

<div id="news">
<h2><a href="[~[+id+]~]" title="[+pagetitle+]">[+pagetitle+]</a></h2>
<div class="introtext"><span class="date">[+date+]</span> [+introtext+] </div>
<div class="readmore" ><a href="[~[+id+]~]">Читать дальше →</a></div>
</div>

, где href=»[~[+id+]~]» – ссылка на страницу новости.

Вот пример кода, который можно использовать для вывода новостей.

[[Ditto? &tpl=`news-article` &dateSource = `pub_date` &dateFormat=`%d.%m.%Y`]]

Здесь, &dateSource – тип даты, например публикации, или последнего изменения.

&dateFormat – формат даты, который можно исправить на любой нужный для вас.

novosti7

Правим вывод новостей в нижнем блоке сайта

Я приведу примеры изменений и кое-что прокомментирую.

novosti8

Во-первых, создаем новый чанк с названием – «bottom_news». В который помещаем вот этот код:

<div class="entry">
						<div class="entry-inner">
							<div class="date">
								[+date+]
							</div>
							<div class="cnt">
								<p><a href="[~[+id+]~]" title="[+pagetitle+]">[+pagetitle+]</a></p>
								<p class="meta"><a href="[~[+id+]~]" title="Перейти к полному тексту новости">Читать дальше →</a></p>
							</div>
						</div>
					</div>

Тут все сделано по принципу рассказанном выше.

Теперь редактируем чанк – «BOTTOM» и вместо кода.

	<div class="entry">
						<h3>Latest Blog Posts</h3>
						<div class="entry-inner">
							<div class="date">
								<strong>01</strong>
								<span>2012</span>
								<em>feb</em>
							</div>
							<div class="cnt">
								<p><a href="#">Lorem ipsum dolor sit<br /> amet, consectetur dor</a></p>
								<p class="meta"><a href="#">by John Doe </a> /  <a href="#">Category Name</a></p>
							</div>
						</div>
						<div class="entry-inner">
							<div class="date">
								<strong>28</strong>
								<span>2012</span>
								<em>jan</em>
							</div>
							<div class="cnt">
								<p><a href="#">Lorem ipsum dolor sit<br /> amet, consectetur dor</a></p>
								<p class="meta"><a href="#">by John Doe </a> /  <a href="#">Category Name</a></p>
							</div>
						</div>
						<div class="entry-inner">
							<div class="date">
								<strong>11</strong>
								<span>2012</span>
								<em>feb</em>
							</div>
							<div class="cnt">
								<p><a href="#">Lorem ipsum dolor sit<br /> amet, consectetur dor</a></p>
								<p class="meta"><a href="#">by John Doe </a> /  <a href="#">Category Name</a></p>
							</div>
						</div>
					</div>

Вставляем следующий:

<div style="float:left; width:286px; padding-right:40px;">
		<h3>Новости компании</h3>
			[[Ditto? &tpl=`bottom_news` &startID=`6` &dateSource = `pub_date` &dateFormat=`<span style="font-weight:bold; font-weight:16px !important; color:#00acef; text-align:center;">%d.%m</span><br /><span style="font-weight:bold; text-align:center;font-weight:16px !important;">%Y`</span>]]
		</div>

Тут появился новый параметр Ditto &started – в значении, которого нужно указать id материала, откуда мы будем выводить новости. У меня он под номером 6.

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

novosti9

На этом сегодня все. В следующем уроке мы затронем еще одну ветку функционала MODx, а именно TV параметры.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *