ExpandПоследние новости

ExpandПопулярное

ExpandВажно!

Уважаемые пользователи! На сайте представлены материалы по компоненту NewsGrabberJC для Joomla и скрипту NewsGrabber.

Пожалуйста, не путайте эти 2 понятия!!!


Скрипт NewsGrabber: шаблоны
Написал Administrator   
11.10.2007
Шаблоны


Заходя в раздел "шаблоны" мы видим список используемых шаблонов и CSS файлы. CSS нас не интересует, так как к принципу работы с шаблонами они не имеют отношения а служат лишь для оформления тех шаблонов которые составите вы самостоятельно.

Итак, самый ГЛАВНЫЙ Smile шаблон это index.main. Его содержимое показывается на всех, без исключений, страницах. Мы его используем для вывода начала и конца HTML кода который на всех страницах одинаков. Вот пример этого шаблона:
Код:
<html>
<head>
   <title>{meta_title}</title>
   <meta name="description" content="{meta_description}">
   <meta name="keywords" content="{meta_keywords}">
</head>
<body>
<h1>Test site header</h1>
   <tpl menuLevel1><br>
   <tpl menuLevel2>
   <tpl content>
   <tpl html_block>
   <p align="center">Copyright {_NOW_YEAR} domain.com</p>
</body>
</html>


А теперь подробнее... Вы уже заметили, что кроме привычных HTML тегов, здесь используются нестандартные теги, а также конструкции в фигурных скобках. Поэтому сразу определимся с терминологией:

{meta_title} - такая конструкция обозначает вызов какого-либо значения из базы данных. Для удобства давайте называть такую конструкцию значение. В каждом шаблоне есть такие вызовы и они будут описаны для каждого шаблона.

<tpl menuLevel2> - вызов внешнего файла. Здесь понятие файл используется образно. На самом деле это подключение шаблонов, HTML блоков а также инклюдов. В дальнейшем также будет встречаться конструкция <if ...></if ...> - это условие выполнения, а также конструкция <loop ...></loop ...> - это вывод массива. Будем называть такую конструкцию вызов

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

<tpl menuLevel1> - подключение меню первого уровня, т.е. разделы сайта (HTML код навигации описывается в шаблоне menu>
<tpl menuLevel2> - подключение меню второго уровня - подразделы сайта
<tpl content> - вызов шаблона содержания страниц. Для главной страницы это шаблон main, для страницы раздела - news.groups и т.д.
<tpl html_block> - вызов HTML блока
<include file_name.php> - вызов результата работы внешнего скрипта или вставка любой другой текстовой информации

Все вызовы, кроме <tpl content> необязательные и могут использоваться в подключаемых шаблонах.

Значения, которые могут использоваться в шаблоне index.main

{meta_title}
{meta_description}
{meta_keywords}
{_NOW_DAY} - текущая дата
{_NOW_DAY_WEEK} - текущий день недели с маленькой буквы (пятница)
{_NOW_DAY_WEEK_F} - текущий день недели с большой буквы (Пятница)
{_NOW_DAY_MONTH} - текущий месяц с маленькой буквы
{_NOW_DAY_MONTH_F} - текущий месяц с большой буквы
{_NOW_YEAR} - текущий год (2006)
{_NOW_YEAR2} - текущий год (06)

Список шаблонов, которые подключаются вызовом <tpl content>

main - шаблон главной страницы
news.groups - шаблон страницы категории
news.subgroups - шаблон страницы подкатегории
news.all - шаблон страницы доступной по адресу /asc и /desc
news.view
content - шаблон статической страницы (добавляется в структуре сайта)
search.list - шаблон результатов поиска
404 - шаблон 404 ошибки

C index.main разобрались, а теперь разберемся с главной страницей. Когда мы будем находится на главной странице, скрипт подключит шаблон main в то место где в index.main стоит вызов <tpl content>. Шаблон main выглядит следующим образом:
Код:

<if groups_mainblock_enabled>

<!-- Если вывод блока главной новости включен, то показываем его -->

<loop last_news>

<if show_news_image>
<!-- Если в настройках включено отображение картинки для главного блока, то выводим её -->
<if news_image>
<!-- если она конечно есть :) -->
<a href="{news_url}" mce_href="{news_url}"><img border="0" src="{DOWNLOAD_IMAGES_DIR_HTTP}prw_150x_of_{news_image}" mce_src="{DOWNLOAD_IMAGES_DIR_HTTP}prw_150x_of_{news_image}" alt="{news_title}" width="150" align="left"></a>
<!-- Закончили вывод картинки-->
</if news_image>
</if show_news_image>

<if show_news_title>
<!-- Если в настройках включено отображение заголовка главной новости, то выводим заголовок-->
<h1><a href="{news_url}" mce_href="{news_url}" class="title">{news_title}</a></h1>
<!-- вывели заголовок -->
</if show_news_title>

<if show_news_source>
<!-- Если в настройках включено отображение источника новости, то выводим ссылку на главную страницу источника-->
<i>Source: <a href="http://{news_source}" mce_href="http://{news_source}">{rss_name}</a></i>
<!-- вывели ссылку -->
</if show_news_source>

<!-- Если в настройках включено отображение вывода категории для новости, то выводим ее. На всякий случай вывод реализован двумя способами -->
<!-- 1-й: если у категории есть подкатегория и новость относится к ней -->
<if owner_link><if show_news_group><i>category: <a href="{owner_link}" mce_href="{owner_link}">{owner_name}</a></i></if show_news_group><if show_news_subgroup> subcategory: <a href="{groups_link}" mce_href="{groups_link}">{groups_name}</a></i></if show_news_subgroup></if owner_link>
<!-- 2-й: если новость относится к категории без подкатегории -->
<if !owner_link><if show_news_group><i>category: <a href="{groups_link}" mce_href="{groups_link}">{groups_name}</a></i></if show_news_group></if !owner_link>
<!-- вывели категории -->

<if show_news_description>
<!-- Если в настройках включено отображение описание новости, то выводим его -->
<p>

<!-- Если в настройках включено отображение даты и времени получения новости, то выводим и их -->
<if show_news_datetime><if show_news_date><b>{news_date}</b><br></if show_news_date>
<if show_news_time>{news_time}<br></if show_news_time></if show_news_datetime>
<!-- вывели дату и время -->

{news_description} <if comments_enabled>Comments - {comments_count}</if comments_enabled> <a href="{news_url}" mce_href="{news_url}">Read more</a>

</p>
<!-- вывели описание новости -->
</if show_news_description>

</loop last_news>
<!-- Закончили вывод главной новости -->
<hr />
</if groups_mainblock_enabled>

<if groups_lastblock_enabled>
    <h3 class="first">Last added</h3>
    <ul>
<loop all_last_news><li>
    <if show_news_datetime><strong><if show_news_date>{news_date}</if show_news_date> <if show_news_time>{news_time}</if show_news_time></strong></if show_news_datetime>
    <if show_news_image><if news_image><a href="{news_url}" mce_href="{news_url}"><img src="{DOWNLOAD_IMAGES_DIR_HTTP}prw_150x_of_{news_image}" mce_src="{DOWNLOAD_IMAGES_DIR_HTTP}prw_150x_of_{news_image}" align="left"></a></if news_image></if show_news_image>
    <if show_news_title><a href="{news_url}" mce_href="{news_url}">{news_title}</a></if show_news_title>
    <if show_news_description><br /><i>{news_description}</i></if show_news_description>
    <if owner_link><if show_news_group><br /><b>category: <a href="{owner_link}" mce_href="{owner_link}"><b>{owner_name}</b></a></b></if show_news_group><if show_news_subgroup><p>subcategory: <a href="{groups_link}" mce_href="{groups_link}">{groups_name}</a></p></if show_news_subgroup></if owner_link>
    <if !owner_link><if show_news_group><br /><b>category: <a href="{groups_link}" mce_href="{groups_link}"><b>{groups_name}</b></a></b></if show_news_group></if !owner_link>
</li>
</loop all_last_news>
</ul>

<p><a href="/desc/" mce_href="/desc/">All news</a> [<a href="/asc/" mce_href="/asc/" class="more">News archive</a>] <a href="/desc/?rss=1" mce_href="/desc/?rss=1" class="rss">RSS</a></p>
</if groups_lastblock_enabled>
<hr>
<if groups_newsblock_enabled>

<loop groups>

<h3><a href="{groups_link}" mce_href="{groups_link}">{groups_name}</a></h3>

<loop main_news{groups_id}>

<if show_news_title>
<h2><a href="{news_url}" mce_href="{news_url}" title="{news_title}">{news_title}</a></h2>
</if show_news_title>

<if show_news_image><if news_image>
<a href="{news_url}" mce_href="{news_url}"><img src="{DOWNLOAD_IMAGES_DIR_HTTP}prw_150x_of_{news_image}" mce_src="{DOWNLOAD_IMAGES_DIR_HTTP}prw_150x_of_{news_image}" align="left" alt="{title}" border="0" /></a>
</if news_image></if show_news_image>

<if show_news_datetime>
<if show_news_date>{news_date}</if show_news_date>
<if show_news_time>{news_time}</if show_news_time></if show_news_datetime>
<if owner_link><if show_news_group>- category: <a href="{owner_link}" mce_href="{owner_link}">{owner_name}</a></if show_news_group>
<if show_news_subgroup>: <a href="{groups_link}" mce_href="{groups_link}">{groups_name}</a></if show_news_subgroup></if owner_link>
<if !owner_link><if show_news_group>- category: <a href="{groups_link}" mce_href="{groups_link}">{groups_name}</a></if show_news_group></if !owner_link>
<if show_news_source>- <a href="http://{news_source}" mce_href="http://{news_source}" rel="nofollow" target="_blank">{rss_name}</a> - </if show_news_source>
               
<if show_news_description>
{news_description} <a href="{news_url}" mce_href="{news_url}">Read more</a>
</if show_news_description>

</loop main_news{groups_id}>
<if groups_newsblock_lastnews_enabled>

<p>Last added in <a href="{groups_link}" mce_href="{groups_link}" class="plink">{groups_name}</a></p>

<loop latest_news{groups_id}>

<if show_news_datetime>
<if show_news_date><i>{news_date}</i></if show_news_date>
<if show_news_time><i>{news_time}</i></if show_news_time>
</if show_news_datetime>
<if show_news_title><a href="{news_url}" mce_href="{news_url}">{news_title}</a></if show_news_title><br>

</loop latest_news{groups_id}>

</if groups_newsblock_lastnews_enabled>

</loop groups>
</if groups_newsblock_enabled>


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

{HTTP_HOST} - выводит хост на котором работает сайт (без http://) в данном шаблоне не используется, но вдруг кому нибудь пригодится

Первая группа вызовов - это описание разделов и ссылок на них. К этой группе надо добавить то, что данные значения обязательно должны работать в связке с условиями:
<if owner_link> - если новость принадлежит к подкатегории
<if !owner_link> - если новость принадлежит к категории
В шаблоне показано как создавать подобную конструкцию.

{owner_name} - выводит название категории к которой относится новость
{owner_link} - выводит относительный путь на сервере к категории. Не включает в себя http:// и хост. Т.е. выводит, например, /category1/
{groups_name} - выводит название подкатегории к которой относится новость
{groups_link} - выводит относительный путь на сервере к подкатегории. Не включает в себя http:// и хост. Т.е. выводит, например, /category1/subcat2/

Вторая группа это собственно вызовы описывающие новость

{rss_name} - выводит название источника
{news_source} - выводит URL главной страницы источнику
{news_date} - выводит дату получения новости
{news_time} - выводит время получения новости
{news_url} - выводит URL новости на вашем сайте (полный с http:// и с хостом)
{news_title} - выводит заголовок новости
{news_description} - выводит описание новости
{news_image} - имя файла изображения из новости
{comments_count} - выводит кол-во комментариев оставленных для новости

Теперь я объясню для чего нужны конструкции <if></if> и <loop></loop>.

Вобще инструкции <if ...></if ...> необязательны, обязательно их использование только при выводе ссылок на группу к которой относится новость. Если их не использовать, просто перестанут работать настройки из админки, в которых вы указываете что должно и что не должно отображаться при формировании страницы. Если вы имеете четкое представление о том как должен и будет выглядеть ваш сайт то можно ими пренебречь этими условиями.

С конструкцией <loop ...></loop ...> всё строже. Собственно она выводит всю информцию на страницу. Т.е. если вы случайно удалите эту конструкцию то на сайт ничего не будет выводиться в этом месте. Так что эти инструкции лучше не отменять

Давайте разберем шаблон main по кусочкам и всё встанет на свои места.

1-й блок - это вывод главной новости (для понимания сути я немного прокоментировал код):
Код:
<if groups_mainblock_enabled>

<!-- Если вывод блока главной новости включен, то показываем его -->

<loop last_news>

<if show_news_image>
<!-- Если в настройках включено отображение картинки для главного блока, то выводим её -->
<if news_image>
<!-- если она конечно есть :) -->
<a href="{news_url}" mce_href="{news_url}"><img border="0" src="{DOWNLOAD_IMAGES_DIR_HTTP}prw_150x_of_{news_image}" mce_src="{DOWNLOAD_IMAGES_DIR_HTTP}prw_150x_of_{news_image}" alt="{news_title}" width="150" align="left"></a>
<!-- Закончили вывод картинки-->
</if news_image>
</if show_news_image>

<if show_news_title>
<!-- Если в настройках включено отображение заголовка главной новости, то выводим заголовок-->
<h1><a href="{news_url}" mce_href="{news_url}" class="title">{news_title}</a></h1>
<!-- вывели заголовок -->
</if show_news_title>

<if show_news_source>
<!-- Если в настройках включено отображение источника новости, то выводим ссылку на главную страницу источника-->
<i>Source: <a href="http://{news_source}" mce_href="http://{news_source}">{rss_name}</a></i>
<!-- вывели ссылку -->
</if show_news_source>

<!-- Если в настройках включено отображение вывода категории для новости, то выводим ее. На всякий случай вывод реализован двумя способами -->
<!-- 1-й: если у категории есть подкатегория и новость относится к ней -->
<if owner_link><if show_news_group><i>category: <a href="{owner_link}" mce_href="{owner_link}">{owner_name}</a></i></if show_news_group><if show_news_subgroup> subcategory: <a href="{groups_link}" mce_href="{groups_link}">{groups_name}</a></i></if show_news_subgroup></if owner_link>
<!-- 2-й: если новость относится к категории без подкатегории -->
<if !owner_link><if show_news_group><i>category: <a href="{groups_link}" mce_href="{groups_link}">{groups_name}</a></i></if show_news_group></if !owner_link>
<!-- вывели категории -->

<if show_news_description>
<!-- Если в настройках включено отображение описание новости, то выводим его -->
<p>

<!-- Если в настройках включено отображение даты и времени получения новости, то выводим и их -->
<if show_news_datetime><if show_news_date><b>{news_date}</b><br></if show_news_date>
<if show_news_time>{news_time}<br></if show_news_time></if show_news_datetime>
<!-- вывели дату и время -->

{news_description} <if comments_enabled>Comments - {comments_count}</if comments_enabled> <a href="{news_url}" mce_href="{news_url}">Read more</a>

</p>
<!-- вывели описание новости -->
</if show_news_description>

</loop last_news>
<!-- Закончили вывод главной новости -->
<hr />
</if groups_mainblock_enabled>


Итак, условие <if groups_mainblock_enabled> - говорит шаблонизатору о том, что если в настройках скрипта включен вывод главной новости на стартовой странице, то надо выполнять код который следует дальше. Если вывод главного блока отключить в настройках, но оставить код главного блока в шаблоне, то скрипт при выводе проигнорирует этот код и наоборот будет его выводить если отображение главного блока включено. Далее я буду говорить просто условие вызова и опускать всю писанину так как смысл везде одинаков.

Итак, в настройках скрипта вывод главного блока включен и мы начинаем выводить первую новость в этот блок.

<loop last_news> - говорит о тот что мы начинаем вывод. Главная новость в шаблонизаторе называется last_news

Сначала мы выводим картинку

Код:

<if show_news_image>
<if news_image>
<a href="{news_url}" mce_href="{news_url}"><img border="0" src="{DOWNLOAD_IMAGES_DIR_HTTP}prw_150x_of_{news_image}" mce_src="{DOWNLOAD_IMAGES_DIR_HTTP}prw_150x_of_{news_image}" alt="{news_title}" width="150" align="left"></a>
</if news_image>
</if show_news_image>



<if show_news_image> - с этим условием понятно всё
<if news_image> - а вот это условие говорит о том, что дальнейший код выполняется если к новости действительно привязана картинка

Затем формируем HTML код: ссылка и вызов картинки:
Код:
<a href="{news_url}" mce_href="{news_url}"><img border="0" src="{DOWNLOAD_IMAGES_DIR_HTTP}prw_150x_of_{news_image}" mce_src="{DOWNLOAD_IMAGES_DIR_HTTP}prw_150x_of_{news_image}" alt="{news_title}" width="150" align="left"></a>

Тут все понятно, кроме того, откуда взялась конструкция
Код:
src="{DOWNLOAD_IMAGES_DIR_HTTP}prw_150x_of_{news_image}" mce_src="{DOWNLOAD_IMAGES_DIR_HTTP}prw_150x_of_{news_image}"

Объясняю {DOWNLOAD_IMAGES_DIR_HTTP} - вставляется имя папки в которой хранятся все графические изображения (вы ее указывали при установке). Что такое {news_image} я описал выше, а вот что такое 150... А это как раз уменьшенная копия картинки для анонса, 150 - это размер (ширина), который выставляется в главных настройках сайта, об этом я писал в одном из первых постов этой ветки. Здесь можно было использовать конструкцию уменьшения картинки "на лету"... Но это уже эксперементируйте, вся информация по этому поводу есть.

Вывод картинки, это наверно единственное что могло ввести в ступор при составлении шаблона. Далее по точно такому же принципу выводим всю остальную информацию к новости, пока не достигнем </loop last_news> здесь скрипт смотрит сколько новостей для вывода указано в настройках, если только одна то переходит к следующим блокам, если 2 и более то возвращается к началу этого блока и всё начинает заново только для следующей новости.

Точно по такому же принципу мы выводим остальные блоки.

Могу только добавить пример упрощения шаблона, в случае если вы точно знаете что вы используете в выводе и согласны принебречь функциями настройки отображения блоков. На примере выше рассмотренного блока... Мы знаем, что нам для главной новости надо вывести заголовок и описание. Тогда кусок шаблона для вывода блока главной новости будет выглядеть так:
Код:
<if groups_mainblock_enabled>
<loop last_news>
<h1><a href="{news_url}" mce_href="{news_url}" class="title">{news_title}</a></h1>
<p>{news_description} <a href="{news_url}" mce_href="{news_url}">Read more</a></p>
</loop last_news>
<hr />
</if groups_mainblock_enabled>
 
След. >