Data Life Engine. Урок 2. Оформляем шаблоны краткой и полной новости

Веб разработка - Уроки dle

В краткой новости главные части - это заголовок новости, дата когда она была отправлена, автор новости, количество комментариев, рейтинг новости
Краткая, да и в общем-то полная, новость представляет собой 2 таблицы, в первой у нас указывается заголовок, дата, инфо - просмотры, комментарии и т.д.+добавить в фавориты. А во второй все оставшееся - текст новости, ссылки на похожи темы, информация о редактировании.


1. Оформляем краткую новость (shortstory.tpl), в конце сообщения скриншот, как она выглядит в визуальном редакторе.

<table width= 100% border= 0 align= center cellpadding= 0 cellspacing= 0 >
<tr>
<td width= 64 ><img src= {THEME}/images/icon4.png border=0></td>
<td width= 100% align= left valign= top >
<div class= news_header > [full-link]{title}[/full-link] <div class= fav_r >{favorites}</div> {approve}</div>
<div class= news_info > {author}  Опубликовано: [day-news]{date}[/day-news]   Просмотров: {views}   [edit]<img src= {THEME}/images/page_edit.png border= 0 align= absmiddle >[/edit]
<br>Категории: {link-category} {rating}
</div>
</td>
</tr>
</table>
<table width= 100% border= 0 align= center cellpadding= 0 cellspacing= 0 class= short_s >
<tr>
<td width= 17% align= center ></td>
<td width= 83% align= center ></td>
</tr>
<tr>
<td colspan= 2 align= left ><br />
{short-story}[edit-date]<br /><span class= copy ><i>Новость отредактировал <font color= red ><b>{editor}</b></font> - {edit-date}</i></span>[edit-reason]<div class= quote_all >Причина: {edit-reason}</div>[/edit-reason]<br />[/edit-date]</td>
</tr>
<tr>
<td align= left >[full-link]<img src= {THEME}/images/p_nexbutton1.gif border=0 alt= Читать дальше width= 115 height= 20 >[/full-link]</td>
<td align= center ><br><br><div align= center ><img src= {THEME}/images/comment_blue.png border=0 alt= Комментарии width= 16 height= 16 align= absmiddle > [com-link]Комментарии ({comments-num}) [/com-link]</div></td>
</tr>
</table><br>

Тег {title} выводит сам заголовок (название) новости, тег {approve} показывает пользователю статус его новостей, ожидающих модерации:

 {title} {approve}

Самый большой участок кода:

{author}  Опубликовано: [day-news]{date}[/day-news]   Просмотров: {views}   [edit]<img src= {THEME}/images/page_edit.png border= 0 align= absmiddle >[/edit]<br>Категории: {link-category} {rating}

{author} - ссылка на автора новости

[day-news]{date}[/day-news] - date выводит дату публикации, а day-news делает эту дату ссылкой, при нажатии на которую отобразятся все новости за эту дату.

Просмотров: {views} - количество просмотров новости
Категория: {link-category} - ссылка на категорию в которой находится новость

{rating} - выводит рейтинг новости

{favorites} - выводит иконку добавления новости в избранное
Теги [edit][/edit] - выводят ссылку на редактирование новости.

Далее, тег {shortstory} выводит саму краткую новость (текст), а теги edit-date/edit-reason - информацию кто, по каким причинам и когда отредактировал эту новость

[com-link]Комментарии ({comments-num}) [/com-link] - количество и ссылка на комментарии

Фактически сейчас мы разобрали код краткой новости на составляющие, открываем файл style.css и добавляем туда такой код:

.news_header{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
padding-top: 10px;
font-weight: bold;
color: #8E2F0D;
padding-left: 5px;
}
.news_info{
width: 100%;
height: 20px;
background-image: url(../images/bg_top_menu.gif);
background-repeat: repeat-x;
color: #ffffff;
font-size: 10px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
padding-top: 5px;
padding-left: 5px;
}

.news_info a {
color: #7BFDFF;
text-decoration: underline;
}
.news_info a:hover {
color: #ffffff;
text-decoration: overline;
}
.fav_r{
float: right;
padding-right: 10px;
}
.rating_r{
float: right;
}
.short_s {
padding: 12px;
font-size: 12px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.short_s a, .short_s a:visited, .short_s a:link{
color: #900;
text-decoration: none;
font-weight: bold;
}
.short_s a:hover {
color: #B35800;
text-decoration: underline;
font-weight: bold;
}

Это все оформление участков кода краткой новости - заголовка, даты, ссылок, текста и т.д.

2. Оформляем полную новость (fullstory.tpl), в конце сообщения скриншот, как она выглядит в визуальном редакторе.

Переходим к оформлению полной новости, по сути оно почти ничем не отличается от краткой, все то же самое, чуть больше информации для пользователя и все.{poll}
<table width= 100% border= 0 align= center cellpadding= 0 cellspacing= 0 >
<tr>
<td width= 64 ><img src= {THEME}/images/icon4.png border=0></td>
<td width= 100% align= left valign= top >
<div class= news_header >{title} <div class= fav_r >{favorites}</div></div>
<div class= news_info > {author} Опубликовано: [day-news]{date}[/day-news] Просмотров: {views}    [edit]<img src= {THEME}/images/page_edit.png border= 0 align= absmiddle >[/edit]
<br>Категории: {link-category}  <img src= {THEME}/images/print.png border=0 alt= Напечатать width= 15 height= 15 align= absmiddle >[print-link]Печать[/print-link]
{rating}

</div>
</td>
</tr>
</table>
<table width= 100% border= 0 align= center cellpadding= 0 cellspacing= 0 class= short_s >
<tr>
<td align= left ></td>
</tr>
<tr>
<td align= left >
{full-story} <br><div align= center ></div>[tags]<br /><div class= text_border >Ключевые теги: {tags}</div>[/tags][edit-date]<br /><br><span class= copy ><i>Новость отредактировал <font color= red ><b>{editor}</b></font> - {edit-date}</i></span>[edit-reason]<div class= quote_all >Причина: {edit-reason}</div>[/edit-reason][/edit-date]<br><br>
</td>
</tr>
<tr>
<td align= center ><img src= {THEME}/images/comment_blue.png border= 0 alt= Комментарии width= 16 height= 16 align= absmiddle /> [com-link]Комментарии ({comments-num}) [/com-link]</td>
</tr>
<tr>
<td height= 49 align= left ><div align= center ><br>{pages}</div>
[group=5]<div style= background-color: lightyellow; border-width:1; border-color:rgb(190,190,190); border-style:dotted; padding:5px; >Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.</div>[/group]<br>
<div class= other_news ><b>Другие новости по теме:</b><br /><br>{related-news}<br /><br /></div>
</td>
</tr>
</table><br>

Опишу отличия от краткой версии:

Тег {poll} - выводит голосование для статьи
отсутствует тег {approve}
[print-link]Печать[/print-link] - позволяет распечатать новость
[tags]<br /><div class= text_border >Ключевые теги: {tags}</div>[/tags] - выводит ключевые теги. которые были добавлены при написании статьи (ключевые слова)

Текст заключенный в теги [group=5][/group=5] выводиттся для группы ГОСТИ и виден только им, по сути напоминалка о регистрации.

{pages} - выводит ссылки на страницы, если новость состоит из 2-3-4-5-6 страниц и более
{related-news} - выводит список похожих новостей

Скриншот:

 

---

Читайте:
Data Life Engine. Урок 3. Оформляем комментарии Data Life Engine. Урок 5. Оформляем приватные сообщения Data Life Engine. Урок 6. Оформляем добавление новостей и регистрацию посетителей Data Life Engine. Урок 7. Оформляем результаты поиска

Go - новый язык программирования от Google Google объявил о создании Go, нового языка программирования. Go, по утверждению авторов, сочетает в себе скорость разработки, характерную для динами...

Gmail Labs: кто выйдет в свет, а кто уйдет в отставку Мы запустили Gmail Labs более полутора лет назад. Это экспериментальная лаборатория, позволяющая разработчикам предлагать новые функции, а вам – реш...

В Microsoft перенимают опыт разработки свободного ПО Компания Microsoft поддержала инициативу своего сотрудника Гаррета Серака (Garrett Serack) под названием CoApp (Common Open Source Application Publi...

Microsoft объединит разработчиков на Java и .NET Microsoft планирует приобрести технологию, которая позволит серверу Visual Studio Team Foundation Server (TFS) выступить в качестве инструмента упра...

Apple обновляет программы для Mac-разработчиков Apple опустила ценовой порог до 99 долларов для желающих вступить в сообщество Mac-разработчиков. Согласно данным компании, новая цена членства сниж...