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

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

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

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

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

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

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

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

16 Написал anothermusic 17 Сентябрь 2009, 22:55
А как ты убрал "Читать Далее...", у меня оно появляется, если текст превышает определенное количество символов. У себя на сайте проверил перенести, но в больших текстах ссылка дублируется.
Может быть для этого необходимо отключить данную функцию? И для уменьшения вывода материала использовать $CUT$?
avatar
19 Написал AlexPilgrim 23 Сентябрь 2009, 11:33
По умолчанию на главной странице выводятся последние новости из всех категорий (в шаблоне используется код $LAST_NEWS$ ). Но очень часто новости в категориях обновляются неравномерно. Поэтому на главной странице желательно делать обзор последних новостей по каждой из категорий. Как можно сделать на главной странице вывод последних новостей с группировкой по категориям, например, по 3 шт. для каждой категории?
avatar
20 Написал Топор 25 Сентябрь 2009, 17:36
Я так понял что если делать по инструкциям (Шаг за шагом) просто весь сайт испортиться,т.к. ничего из всех пунктов у меня не получилось,сайт просто уничтожен,Спасибо angry
avatar
22 Написал emilio 28 Сентябрь 2009, 23:27
А в чем проблема????
21 Написал Tanusik-1994 26 Сентябрь 2009, 23:09
люди, помоги очень нужно. как создать новую страницу с новостями подобную главной?
avatar
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
24 Написал Топор 06 Октябрь 2009, 16:44
Как картинку в новость вставить как у него(та что слева от новости)? У меня просто квадратик белый появляеться
avatar
25 Написал ali5539 18 Октябрь 2009, 03:17
Спасибо огромнейшее!
Смотрите как у меня получилось http://man.sexyall.net
Теперь проблема с основным сайтом, новостей там многовато...
Может кто поможет советом? вот http://sexyall.net
26 Написал Каралина 18 Октябрь 2009, 19:34
У меня не отображается картинка ($IMG_SMALL_URL1$) По какой причине это может быть? happy
27 Написал Fliros28 14 Ноябрь 2009, 22:16
У меня тоже не формирует уменьшенное изображение. Может это связано с настройками модуля новостей????
avatar
28 Написал Arkediy 04 Январь 2010, 22:04
люди что делать у меня фотка не показана в новости хота крепил к новости cry
avatar
29 Написал promo6272 21 Январь 2010, 22:08
Доброго времени суток
У меня в новостях есть несколько категорий, а новость добавляется только в одну из них
Подскажите как сделать так что бы новость можно было добавить в несколько категорий ??? такое возможно или нет ?
30 Написал yyvanoff 06 Февраль 2010, 18:04
Здрасти! Мне очень понравился предложенный вид материалов и вот вопрос: если я хочу у себя на сайте сделать так де мне можно прямо от сюда скопировать или я должен сам все прописать? wacko Спасибо...
31 Написал diyakov-vlad 10 Февраль 2010, 14:55
Я вот что имею сказать:
Дополнительные поля при добавлении/редактировании материалов не срабатывают.
Более того, не срабатывают предустановленные системой поля, как-то: ссылка на источник материала, прочие поля.
Прошу исправить.
avatar
32 Написал bendjamin 20 Март 2010, 22:41
Здравствуйте всем! Чет у меня не получается с картинками. Там где они должны быть пустые квадраты с ссылкой, а сама картинка как и раньше выводиться вместе с текстом. Подскажите пожалуйста что исправить чтоб было как показано выше.
За ранее благодарен.
1-20 21-24
Ваш комментарий