Data Life Engine. Урок 3. Оформляем комментарии

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

Без комментариев ну никак нельзя, должны же юзвери писать всякие гадости в комментах к вашим новостям Потом эти гадости индексируются поисковиками и вы получаете +немножко посещаемости. Оформлять нужно комментарии+форму добавления комментариев.

1. Оформляем сами комментарии (comments.tpl)

Для начала о том, что представляют собой комментарии - в нашем случае это будет табличка с двумя строками и столбцами. Слева будет аватар+информация о пользователе, над ним номер комментария, справа вверху - действия с комментарием (редактировать, удалить, цитировать) а так же тег news_title (о нем чуть позже расскажу). В центральной части будет вывод самого комментария, автора и его подписи.

Давайте сразу посмотрим, что здесь к чему:
#{comment-id} - выводит номер комментария 1й-2й-3й и т.д.
{group-icon} - выводит иконку группы, администратор, модератор и т.д.
Группа: {group-name} - название группы
Регистрация: {registration} - когда зарегистрирован пользователь
Публикаций: {news-num} - количество публикаций на сайте
Комментариев: {comm-num} - количество комментариев на сайте
Автор: {author} {date} - выводит автора комментария и дату размещения
{comment} - выводит текст комментария
[signature]{signature}[/signature] - выводит подпись комментатора
{news_title} - выводит ссылку на новость при просмотре последних комментариев, при выводе комментариев в новости тег вырезается
[fast] Цитировать[/fast] - цитирование, слово между тегами [fast][/fast] можно ставить любое
[com-edit] Изменить[/com-edit] - редактирование комментария, слово между тегами [com-edit][/com-edit] можно ставить любое
[com-del] Удалить[/com-del] - удаление, слово между тегами [com-del][/com-del] можно ставить любое.

{mass-action} - массовый выбор комментариев

Ну вот теперь мы все знаем, какой тег и за что отвечает, размещать их можно так как вам удобно и как того требует дизайн.<table width= 100% border= 0 align= center cellpadding= 0 cellspacing= 0 >
<tr>
<td width= 17% align= center valign= top ><b>#{comment-id}</b></td>
<td width= 83% valign= middle align= left >{news_title}<div class= comment_options align= right >{mass-action}[fast]<img width= 16 height= 16 alt= * src= {THEME}/images/quote_p.png align= absmiddle border= 0 > Цитировать[/fast] [com-edit] <img width= 16 height= 16 alt= * src= {THEME}/images/edit.png align= absmiddle border= 0 > Изменить[/com-edit] [com-del] <img width= 16 height= 16 alt= * src= {THEME}/images/delete.png align= absmiddle border= 0 > Удалить[/com-del]</div></td>
</tr>
<tr>
<td align= center valign= top ><br /> <img src= {foto} border= 0 ><br />{group-icon}<br />Группа: {group-name}<br />Регистрация: {registration}<br />Публикаций: {news-num}<br />Комментариев: {comm-num}</td>
<td width= 100% align= left valign= top >
<div class= comment_pic ><img width= 20 height= 20 alt= * src= {THEME}/images/c.jpg ></div>
<div class= comments_text ><div class= comment_info >  <img width= 9 height= 6 alt= * src= {THEME}/images/p_comment.gif >Автор: <b>{author}</b> <font color= #999999 >({date})</font></div>{comment}[signature]<br /><br />--------------------<br /><div class= slink >{signature}</div>[/signature]
</div>
</td>
</tr>
</table>
<br>

в найш файл style.css добавляем стили для комментариев:

.comments_text{
border:1px solid #CCCCCC;
margin-left: 18px;
margin-right: 0px;
padding: 5px;
}
.comment_pic {
height:20px;
padding-top: 45px;
width:20px;
float: left;
}

.comment_info{
font-size: 12px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
padding-bottom: 15px;
}
.comment_info a{
text-decoration: none;

}
.comment_info a hover{
text-decoration: none;

}

В стилях мы указали цвет, шрифт, цвета ссылок, границы и отступы.

2. Оформляем форму добавления комментариев (addcomments.tpl)

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

{title} - заголовок, он статичный, выдает надпись Добавление комментария
Ваше имя/Ваш емейл - поля для вода имени и почты
{editor} - выводит окно редактора
{sec_code} - код безопасности, защита от спам-ботов

Открываем файл addcomments.tpl, удаляем все из него, вставляем туда вот такой код<table width= 100% border= 0 cellpadding= 0 cellspacing= 0 >
<tr>
<td align= center ><div class= comments_add >{title}</div>
</td>
</tr>
<tr>
<td height= 80 ><table width= 450 align= center >
[not-logged]
<tr>
<td width= 60 height= 25 align= left class= slink >Ваше Имя:</td>
<td width= 443 height= 25 align= left style= width:380px; ><input type= text name= name2 id= name2 class= comment_user /></td>
</tr>
<tr>
<td width= 60 height= 25 align= left class= slink >Ваш E-Mail:</td>
<td height= 25 align= left ><input type= text name= mail2 id= mail2 class= comment_mail /></td>
</tr>
[/not-logged]
<tr>
<td colspan= 2 >{editor}</td>
</tr>
[sec_code]
<tr>
<td align= left class= slink >Код:</td>
<td align= left class= slink >{sec_code}</td>
</tr>
<tr>
<td width= 60 height= 25 align= left class= slink >Введите код</td>
<td align= left ><input type= text name= sec_code2 id= sec_code2 style= width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 /></td>
</tr>
[/sec_code]
<tr>
<td colspan= 2 align= left ><br />
<input onclick= doAddComments();return false; name= submit2 type= image src= {THEME}/images/send_comm.gif />
<br />
<br /></td>
</tr>
</table></td>
</tr>
</table>

Код большой но не страшный, 2 таблицы друг в друге и все+теги.

В файл style.css добавляем код:

.comments_add{
background: url(../images/comments_add.png) no-repeat;
height: 48px;
width: 250px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
padding-top: 15px;
font-weight: bold;
color: #8E2F0D;
padding-left: 50px;
}
.comment_mail{
background: url(../images/mails.png) no-repeat left #FFFFFF;
padding-left: 21px;
width:140px;
height:20px;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
border:1px solid #E0E0E0;
}
.comment_user{
background: url(../images/user.png) no-repeat left #FFFFFF;
padding-left: 21px;
width:140px;
height:20px;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
border:1px solid #E0E0E0;
}

Это стили для формы добавления комментариев.

Вот что у нас получится в итоге: