Адаптация HTML шаблона (текст страницы)
Адаптируем код текста с страницы.
Текст страницы
Основной контент страницы имеет блоговую структуру и расположен в div-е класса mainbar:
<div class="mainbar">
<div class="article">
<h2><span>Template</span> License</h2>
<div class="clr"></div>
<p>Posted on 18. Sep, 2015 by Sara in Filed under templates, internet, with Comments 18</p>
<img src="images/img_1.jpg" width="613" height="193" alt="image" />
<div class="clr"></div>
<p>This is a free CSS website template...</p>
<p><a href="#">Read more </a></p>
</div>
<div class="article">
...
</div>
</div>
<div class="article">
<h2><span>Template</span> License</h2>
<div class="clr"></div>
<p>Posted on 18. Sep, 2015 by Sara in Filed under templates, internet, with Comments 18</p>
<img src="images/img_1.jpg" width="613" height="193" alt="image" />
<div class="clr"></div>
<p>This is a free CSS website template...</p>
<p><a href="#">Read more </a></p>
</div>
<div class="article">
...
</div>
</div>
Выполняем замену
Заменяем его на блок текста текущей страницы и выведем все элементы принадлежащие ей. Это могут быть Фрагменты, а так же Ссылки, Разделы и другие страницы, если текущий элемент является Разделом.
<div class="mainbar">
<div class="article">
<h2>{title}</h2>
<div class="clr"></div>
{?isItem(feed)}<p>Дата: {date()}</p>{/?}
<!--{photo}--><img src="{thumb(613,193,t)}" width="613" height="193" alt="{title}" /><!--{/}-->
<div class="clr"></div>
{text}
</div>
<!--{items}-->
<div class="article">
<h2>{title}</h2>
<div class="clr"></div>
{?isItem(feed)}<p>Дата: {date()}</p>{/?}
<!--{image}--><img src="{thumb(613,193,t)}" width="613" height="193" alt="{title}" /><!--{/}-->
<div class="clr"></div>
{description}
{?hasUrl}<p><a href="{url}">Читать далее...</a></p>{/?}
</div>
<!--{/}-->
</div>
<div class="article">
<h2>{title}</h2>
<div class="clr"></div>
{?isItem(feed)}<p>Дата: {date()}</p>{/?}
<!--{photo}--><img src="{thumb(613,193,t)}" width="613" height="193" alt="{title}" /><!--{/}-->
<div class="clr"></div>
{text}
</div>
<!--{items}-->
<div class="article">
<h2>{title}</h2>
<div class="clr"></div>
{?isItem(feed)}<p>Дата: {date()}</p>{/?}
<!--{image}--><img src="{thumb(613,193,t)}" width="613" height="193" alt="{title}" /><!--{/}-->
<div class="clr"></div>
{description}
{?hasUrl}<p><a href="{url}">Читать далее...</a></p>{/?}
</div>
<!--{/}-->
</div>
Следует отметить ряд моментов. Для решения вывода даты используется условие isItem(feed) - входит ли элемент в новостной канал. Изображение выводится в виде эскиза с обрезкой функцией: thumb(613,193,t). Для элементов страницы выполняется вывод только описания и дополнительно выводится ссылка Читать далее, если она есть у элемента.
