Настройка модуля новостей на сайте uCoz
Сегодня хотелось бы уделить время настройке и приведению в нужный мне вид такого необходимого для сайта модуля как "Новости сайта". При помощи этого модуля предполагается периодически информировать пользователей о самых интересных событиях в автомире, а также сообщать о нововведениях на сайте.

Заведем для начала три категории новостей - а именно "По региону", "По Украине" и "Мировые". Новости будут публиковаться в одной из этих категорий, но при этом на главной странице сайта будут показываться последние обновления новостей по всем категориям. Заведя категории через панель управления модулем "Новости сайта" добавим ссылки на категории в ранее созданное меню сайта. Теперь при нажатии на ссылку в меню - открывается страничка с новостями соответствующего раздела.

Следующий этап настройки модуля можно разделить на такие подзадачи:

- настроить отображение новостей на главной странице и в категориях
- настроить строку навигации по новостям
- настроить отображение новости и комментариев к ней в развернутом виде

Буду идти по порядку, выполняя подзадачу за подзадачей.

Настроить отображение новостей на главной странице и в категориях

Для того чтобы настроить отображение новостей в категории, нужно для начала добавить эти новости :) Добавлю несколько актуальных новостей в разные категории. Первое же добавление новости наглядно продемонстрировало мне, что еще нужно изменить в настройках модуля. В первую очередь изменю внешний вид материала, для того чтобы материалы красиво выглядели как на главной странице, так и в категории. Для этого мне понадобилось изменить шаблон "Вид материалов" и стили, связанные с ним. Идея состояла в том, чтобы выделить каждый материал в отдельный блок, чтобы они визуально были разделены и не сливались в общую кучу. Для этого я присвоил блоку материала фон, отличный от фона центральной колонки, взял блок материала в рамку, сделанную под стиль всего сайта, а также сделал небольшую рамку для картинок, использовав вот такие стили: 
padding:1px; margin:4px; border: solid #666666 1px;
Вот что получилось итоге:
А вот полный код шаблона "Вид материалов": 
<table width="100%" border="0" cellspacing="0" cellpadding="0" 
style="background:#EFEFEF; padding:3px; border:solid #666666 1px; 
margin-bottom:1px;">
 <tr>
 <td rowspan="2"><a href="$ENTRY_URL$"><img src="$IMG_SMALL_URL1$" 
align="left" class="newsPictures"></a></td>
 <td colspan="2" class="eTitle"><a href="$ENTRY_URL$">$TITLE$</a> 
<?if($MODER_PANEL$)?> $MODER_PANEL$<?endif?></td>
 </tr>
 <tr>
 <td colspan="2" valign="top"><?if($MESSAGE$)?><div class="eMessage" 
style="text-align:left;clear:both;padding-top:2px;
padding-bottom:2px;">$MESSAGE$</div><?endif?> </td>
 </tr>
 <tr>
 <td colspan="3" class="eDetails3">
Просмотров: $READS$ |
Дата: <span title="$TIME$">$DATE$</span>
<?if($RATING$)?>| Рейтинг: $RATING$/$RATED$<?endif?>
<?if($COMMENTS_URL$)?>| <a href="$COMMENTS_URL$">
Комментарии ($COMMENTS_NUM$)</a><?endif?>
| <a href="$ENTRY_URL$"><b>Читать далее...</b></a>
</td>
 </tr>
</table>
Также был уменьшен размер шрифта навигационной строки, а ссылка "Читать далее..." перенесена в нижнюю часть блока новости и выделена жирным. Таким образом, несмотря на небольшой шрифт, она сразу же бросается в глаза пользователю. Нажатие на картинку или заголовок новости, естественно, ведет туда же куда и ссылка "Читать далее", а именно, на страницу с полной версией новости. В качестве картинки для блока предпросмотра новости используется превью первой по порядку добавленной картинки - $IMG_SMALL_URL1$. Эти картинки создаются системой автоматически из добавленных вместе с новостью больших изображений, и их очень удобно использовать в тексте новости.

Итогом работы по настройке шаблона "Вид материалов" стал аккуратный блок, который одинаково хорошо выглядит как на главной странице сайта, так и в категориях новостей.

Настроить строку навигации по новостям

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


Небольшой ньюанс - в шаблоне "Страница материала и комментариев к нему" по умолчанию для строки навигации используется код строки вложения материала $DATE_BAR$ - он отображает путь к новости относительно календаря (год/месяц/день). Мне показалось это недостаточно удобным и я переделал путь к новости относительно категорий (главная страница/категория/новость).

Итогом этой части сегодняшней задачи стала простая, но полезная строка для навигации по сайту.

Настроить отображение новости и комментариев к ней в развернутом виде

Сделать этот этап оказалось проще и быстрее, так как все основные настройки были сделаны в предыдущих частях сегодняшней задачи. Единственное что нужно сделать - это привести внешний вид блоков, в которых выводятся комментарии и форма для их добавления, к единому виду. Также потребовалось изменить цвет кнопок добавления BB-кодов - что и было сделано путем редактирования css-стиля .codeButtons

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

Результаты моей работы над сайтом вы по-прежнему можете посмотреть по адресу http://autoclub.ck.ua

Кстати, если вы не хотите "возиться с кодом", но получить полноценный новостной портал, можете выбрать себе премиум шаблон для uCoz. При желании, вам его еще и установят :)
цикл:проект
Эта статья входит в цикл статей блога "Делаем проект с нуля".
Ознакомиться с полным циклом можно по ссылке.

38 комментариев
1 2 »
avatar
-2Спам
1 Написал спинагрыз 15 Сентября 2009, 02:03
Круто, спасибо
avatar
-2Спам
2 Написал zvirus 15 Сентября 2009, 03:07
По ссылке «Редактировать профиль» — открывается страница пользователя.
И та и другая в версии «PDA» вместо PC
-11Спам
3 Написал OnMusic 15 Сентября 2009, 07:35
Круто, а почему пример привели только про автомир?
1Спам
4 Написал weiss 15 Сентября 2009, 09:29
Желтые ссылки на белом не видно.
Заголовки очень скромного размера, можно не бояться, сделать побольше))
На разрешении 1024х768 появляется горизонтальная полоса прокрутки, чуть-чуть не влезает сайт по ширине.
avatar
3Спам
5 Написал joker7am 15 Сентября 2009, 13:49
полностью согласен, лучше поменять цвет ссылок biggrin
avatar
1Спам
9 Написал crazz-unet 15 Сентября 2009, 21:27
согласен, оранжевые ссылки на сером фоне абсолютно нечитабельны
avatar
1Спам
6 Написал Admin3382 15 Сентября 2009, 14:53
Подскажите пожалуйста как сделать тоже самое, но в три колонки. уже который день пытаюсь сделать чтоб материалы располагались в три колонки, как это можно настроить с информерами. Получилось так, что пока находится три материала, они располагаются правильно, в три колонки, но когда добавляешь четвёртый, он располагается не ниже а рядом, т.е. четвёртой колонкой. Кто может помочь, напишите пожалуйста в аську 240442697 или здесь.
3Спам
7 Написал weiss 15 Сентября 2009, 17:06
Несложным (а может и сложным, для кого как) приёмом верстки, заключающемся в ограничении ширины и автоматическом переносе на другую строку элементов, которые не влезли, либо скриптом. Первое объяснять лень, а ссылку на уже написанное не помню. Второе есть на хелпере.
avatar
0Спам
12 Написал Admin3382 16 Сентября 2009, 05:48
первое как я понимаю не работает. ставлю фиксированую ширину таблицу, но толку нет.
0Спам
15 Написал weiss 16 Сентября 2009, 13:51
Не таблицей надо делать, а списком с display:inline.
avatar
2Спам
8 Написал uWeb 15 Сентября 2009, 17:54
http://helper.ucoz.ru/faq/0-0-3
avatar
0Спам
13 Написал Admin3382 16 Сентября 2009, 05:51
спасибо большое,но уже нашёл на форуме другой java скрипт.
Code
<script type="text/javascript">
var nCols=3;

var colN=0;
var row;
var table=$(document.createElement('table')).prependTo('#allEntries');

$('#allEntries > div[id^="entryID"]').each(function(){
  if(colN==0)
  row=$(document.createElement('tr')).appendTo(table);
  $(document.createElement('td')).appendTo(row).append(this);
  colN=(++colN)%nCols;
});
</script>
avatar
0Спам
14 Написал Admin3382 16 Сентября 2009, 05:52
где nCols=3 это количество колонок.
вставлять скрипт надо сразу после $BODY$.
может кому пригодится.
0Спам
10 Написал seregawaw 15 Сентября 2009, 21:55
Quote
Результаты моей работы над сайтом вы по-прежнему можете посмотреть по адресу http://autoclub.ck.ua

Описание новости можно было бы выделить ,так как оно сливается с фоном.

В целом симпатично.

-1Спам
11 Написал seregawaw 15 Сентября 2009, 21:59
кстати насчет меню считаю его не очень удобным, возможно уже прывык к своему.

Quote (weiss )
Желтые ссылки на белом не видно.

Согласен неочень

-2Спам
17 Написал =NES= 22 Сентября 2009, 21:36
глупцы, вам тут хотят показать принцип сохдания меню, принцип изменения вида материалов, а вы к желтым ссылкам придираетесь
2Спам
18 Написал seregawaw 22 Сентября 2009, 22:26
Пишите о себе, то что нам пытались донести мы оценили, спасибо автору за практические советы. Я в свою очередь высказал свое мнение. В чем проблема?

ЗЫ: Кстати потренируйте грамматику уважаемый.

0Спам
16 Написал anothermusic 17 Сентября 2009, 22:55
А как ты убрал "Читать Далее...", у меня оно появляется, если текст превышает определенное количество символов. У себя на сайте проверил перенести, но в больших текстах ссылка дублируется.
Может быть для этого необходимо отключить данную функцию? И для уменьшения вывода материала использовать $CUT$?
avatar
0Спам
19 Написал AlexPilgrim 23 Сентября 2009, 11:33
По умолчанию на главной странице выводятся последние новости из всех категорий (в шаблоне используется код $LAST_NEWS$ ). Но очень часто новости в категориях обновляются неравномерно. Поэтому на главной странице желательно делать обзор последних новостей по каждой из категорий. Как можно сделать на главной странице вывод последних новостей с группировкой по категориям, например, по 3 шт. для каждой категории?
avatar
0Спам
20 Написал Топор 25 Сентября 2009, 17:36
Я так понял что если делать по инструкциям (Шаг за шагом) просто весь сайт испортиться,т.к. ничего из всех пунктов у меня не получилось,сайт просто уничтожен,Спасибо angry
avatar
1Спам
22 Написал emilio 28 Сентября 2009, 23:27
А в чем проблема????
0Спам
21 Написал Tanusik-1994 26 Сентября 2009, 23:09
люди, помоги очень нужно. как создать новую страницу с новостями подобную главной?
avatar
0Спам
23 Написал emilio 28 Сентября 2009, 23:32
Не думал, что кого то можно удивить модулем новостей....Ниже приведу свой вариант вид материалов.Было сделано до обновлений последних.
В модуле есть и краткое описание и полное.

<table border="0" cellpadding="0" cellspacing="0" width="100%" class=""><tr><td style="padding:3px;">
<?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?>
<div class="eTitle" style="text-align:left;"><span style="color:#000000;font:9pt bold Verdana,Tahoma;"><b><a href="$ENTRY_URL$">$TITLE$</a></b></span> </div><br>
<?if($MESSAGE$)?><div class="eMessage" style="text-align:left;clear:padding-top:2px;padding-bottom:2px;">
<?if($IMG_URL1$)?><img border="0" src="$IMG_URL1$" width="100" align="left" hspace="5" align="left" alt="Фото"><?else?><?endif?>

$MESSAGE$</div><?endif?>

</td></tr></table><hr style="border-top:2px dotted ;width:100%px;"/>

avatar
0Спам
24 Написал Топор 06 Октября 2009, 16:44
Как картинку в новость вставить как у него(та что слева от новости)? У меня просто квадратик белый появляеться
avatar
0Спам
25 Написал ali5539 18 Октября 2009, 03:17
Спасибо огромнейшее!
Смотрите как у меня получилось http://man.sexyall.net
Теперь проблема с основным сайтом, новостей там многовато...
Может кто поможет советом? вот http://sexyall.net
0Спам
26 Написал Каралина 18 Октября 2009, 19:34
У меня не отображается картинка ($IMG_SMALL_URL1$) По какой причине это может быть? happy
0Спам
27 Написал Fliros28 14 Ноября 2009, 22:16
У меня тоже не формирует уменьшенное изображение. Может это связано с настройками модуля новостей????
avatar
0Спам
28 Написал Arkediy 04 Января 2010, 22:04
люди что делать у меня фотка не показана в новости хота крепил к новости cry
avatar
0Спам
29 Написал promo6272 21 Января 2010, 22:08
Доброго времени суток
У меня в новостях есть несколько категорий, а новость добавляется только в одну из них
Подскажите как сделать так что бы новость можно было добавить в несколько категорий ??? такое возможно или нет ?
0Спам
30 Написал yyvanoff 06 Февраля 2010, 18:04
Здрасти! Мне очень понравился предложенный вид материалов и вот вопрос: если я хочу у себя на сайте сделать так де мне можно прямо от сюда скопировать или я должен сам все прописать? wacko Спасибо...
0Спам
31 Написал diyakov-vlad 10 Февраля 2010, 14:55
Я вот что имею сказать:
Дополнительные поля при добавлении/редактировании материалов не срабатывают.
Более того, не срабатывают предустановленные системой поля, как-то: ссылка на источник материала, прочие поля.
Прошу исправить.
avatar
0Спам
32 Написал bendjamin 20 Марта 2010, 22:41
Здравствуйте всем! Чет у меня не получается с картинками. Там где они должны быть пустые квадраты с ссылкой, а сама картинка как и раньше выводиться вместе с текстом. Подскажите пожалуйста что исправить чтоб было как показано выше.
За ранее благодарен.
1-20 21-25
Ваш комментарий
Войдите: