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. Оформляем результаты поиска

Google предлагает пользователям «изобретать» приложения Компания Google продемонстрировала в прямом эфире из Google Labs свой новый сервис App Inventor, позволяющий создавать приложения для мобильных теле...

Google открывает Buzz API Firehose Сегодня Google объявила об открытии API для Google Buzz, который даст разработчикам доступ ко всей информации, опубликованной в Buzz в режиме реальн...

Chromoting – новая технология в Chrome OS В операционной системе Chrome появится новая функция, которая позволит запускать настольные приложения непосредственно в окне браузера. Это новшеств...

Google выпускает тренажер для хакеров Jarlsber Google объявила о выпуске специализированного микроблоггерского приложения Jarlsberg в рамках Google Labs и Google Code University. Его главное назн...

Microsoft сообщила об открытии исходного кода компиляторов Visual Basi В то время как конкурирующие компании анонсируют новые, «более современные» языки программирования, корпорация Microsoft продолжает трудиться над ус...