Настройка новостной ленты

Начнем с того, что создадим новую новостную ленту специально для новостей нашей CMS.

Заходим в модуль "Новостная лента".

Делается это так: "Меню пользователя" -> "Информационное наполнение" -> "Новостная лента".

Добавляем в модуле новый раздел. Он и будет новой новостной лентой:

В открывшемся окне вводим название раздела и псевдостатический адрес:

Псевдостатический адрес или ЧПУ (человеко-понятный УРЛ), это когда вместо адреса http://www.domain.ru/news.php?rid=3&nid=345 Вы видите что-то типа http://www.domain.ru/news/cms_sbuilder/new_version/

Раздел мы создали. Теперь нужно добавить в него несколько новостей, чтобы нам было с чем работать.

Выбираем только-что созданный раздел и в рабочей области в контекстном меню выбираем "Добавить новую новость":

В открывшемся окне вводим:

• Заголовок новости
• Дату новости
• Псевдостатический адрес (ЧПУ) - что это такое я уже объяснял. Если Вы ЧПУ использовать не будете, можете оставить это поле пустым.
• Тематические теги - в этом поле Вы можете указать любые слова или словосочетания, относящиеся к данной новости. Обычно используются для поиска, составления облака тегов и т.д.
• Индекс сортировки - вообще-то новости обычно сортируются по дате. Но если Вам вдруг понадобится отсортировать их в произвольном порядке, Вы можете сделать сортировку по этому полю.
• Публиковать на сайте -  тут все просто. Стоит галочка - видим новость на сайте. Не стоит - не видим.
• Публиковать в период - можно задать период пуликации новости. В этом случае, новость сама появится в заданный период на сайте и когда нужно пропадет.

 Переходим на следующую закладку и вводим краткий текст новости:

При нажатии кнопки "Редактор" откроется визуальный редактор типа Ворда, с помощью которого Вы сможете визуально отформатировать текст, вставить в него картинки, таблицы и т.д.

В поле "Изображение для анонса новости" можно указать картинку, которая будет отображаться вместе с анонсом.
У нас такой картинки не будет, поэтому оставим поле пустым.

Переходим на закладку "Полный текст".

Не буду приводить скриншот, т.к. поля этой закладки абсолютно аналогичны  закладке "Анонс". В ней Вы должны ввести подробный текст новости, который откроется, если кликнуть по анонсу новости.

Нажимаем "Сохранить" и получаем первую новость!

Как видите, эту новость можно редактировать, переносить, копировать, ставить ярлыки и т.д.

Но я не стану сейчас добавлять новые новости или копировать это. На нашем старом сайте уже имеется более сотни новостей и мне в любом случае они будут нужны на новом. Поэтому я сейчас их все перенесу, и работать дальше мы будем уже с ними.

Переходим к настройке макета дизайна новостей.

Настраиваем дизайн новостной ленты

Начнем с настройки вывода новостей списком на главной странице сайта.

Переходим в модуль настройки макета дизайна новостной ленты: "Макеты дизайна компонентов" -> "Новостная лента" -> "Вывод новостной ленты"

Создаем новый макет дизайна новостной ленты:

В открывшемся окне вставляем название макета:

Количество новостей на странице оставляем 10. Мы их ограничим всего пятью, когда будем настраивать вывод компонента на странице.

Затем переходим на закладку "Список новостей" (закладку "Поля новости" не трогаем. Там пока все нас устраивает).

Итак, в открывшемся окне мы видим два поля "Верх вывода" и два поля "Низ вывода".
Я думаю, Вам и так уже понятно, что эти поля используются для вывода кода, который должен выводиться ДО вывода самих новостей.
Например, открываться и закрываться таблица.

Но почему их по два?

Дело в том, что Вы можете выводить не только один конкретный раздел новостей, а сразу несколько разделов (или все, что есть в Системе).
Например:

• Новости сайта
• Новости культуры
• Новости политики
• и т.д.

В этом случае Вы можете выводить все новости из этих разделов в произвольном порядке. Или, если в поле "Верх вывода (раздел)" есть какое-то наполнение, все новости будут разбиваться по разделам и сортироваться внутри них! Т.е. будут выведены сначала все новости из раздела "Новости сайта", затем "Новости культуры" и т.д.

Естественно, редактируемый блок для вывода названия раздела в этом поле есть:

Также, как и количество новостей в разделе, его уровень ID.

 Подробнее по полям:

• Кол-во новостей в строке - поле используется для вывода новостей в несколько колонок. 2, 3, ..., N.
  Происходит это следующим образом:
  Выводится N новостей из поля "Анонс новости", затем вывод кода из поля "Разделитель строк".
  
  Рассмотрим этот вопрос на простейшем примере:
  Если мы в поле "Кол-во новостей" поставим цифру 3.
  В поле  "Верх вывода (любой)" поставим: <table></tr>
  В поле "Анонс новости" поставим: <td>[код]</td>
  В поле "Разделитель строк" поставим: </tr><tr>
  В поле "Низ вывода (любой)" поставим: </tr></table>
  
  То, при текущих настройках выводя 5 новостей, мы получим код:
  <table></tr>
  <td>[код]</td><td>[код]</td><td>[код]</td>
  </tr><tr>
  <td>[код]</td><td>[код]</td>
  </tr></table>
  
  Примерно так...
   
• Верх вывода (общий) - Про это поле я писал выше. Выводится общий код, который идет до вывода самих новостей. Если он есть конечно.
• Верх вывода (раздел) - Про это поле я тоже писал. Выводится, если новости нужно поделить на разделы.
• Анонс новости - самое главное поле макета дизайна! Выводится сама новость.
• Пустая ячейка - в приведенном выше примере есть один нюанс. При выводе 5 новостей по 3 столбца у нас во втором столбце оказывается 2 ячейки вместо 3-х. Поле "Пустая ячейка", если оно задано, достраивает количество столбцов в последней строке до нужного. Т.е., если в приведенном выше примере мы впишем в это поле: <td>&nbsp;</td>, то получим более правильный код:
  
  <table></tr>
  <td>[код]</td><td>[код]</td><td>[код]</td>
  </tr><tr>
  <td>[код]</td><td>[код]</td><td>&nbsp;</td>
  </tr></table>
  
   
• Разделитель строк - в основном разбивает столбцы на строки. См. пример выше.
• Низ вывода (раздел) - закрывается код, вставленный в поле "Верх вывода (раздел)".
• Низ вывода (общий) - закрывается код, вставленный в поле "Верх вывода (общий)".

Теперь вернемся непосредственно к нашей задаче.

Берем код новости из верстки главной страницы:

     <ul class="news_list">
                <li>
                  <div class="news_head"> <span class="date">20.04.2007:</span> VIA анонсирует
                    референс-дизайн системной
                    платы форм-фактора Pico-ITX </div>
                  <div class="news_anons"> VIA Technologies анонсировала референс-дизайн системной платы форм-фактора Pico-ITX VIA VT6047 - самой маленькой полнофункциональной материнской платы для архитектуры x86 Подразделение VIA Platform Solutions Division объявит о начале продаж материнских плат в форм-факторе Pico-ITX </div>
                  <div class="news_more"><a href="#">подробнее...</a></div>
                </li>
       </ul>

 В поле "Верх вывода (общий)" помещаем код:

     <ul class="news_list">

В поле "Анонс новости" помещаем код (заменив текст на редактируемые блоки конечно):

                <li>
                  <div class="news_head"> <span class="date">:</span> </div>
                  <div class="news_anons"></div>
                 
                </li>

В поле "Низ вывода (общий)" помещаем код:

       </ul>

Дизайн вывода конопки или ссылки "Подробнее" (редактируемый блок ) можно настроить во вкладке "Поля новости".
Если у новости нет подробного текста, то ссылка "Подробнее" у данной новости не появится.

Сохраняемся, но на  страницу пока новостную ленту не выводим.

Перед этим шагом нам нужно настроить вывод подробного текста новости, т.к. при размещении на страницу списка анонсов новостей нам нужно будет указать страницу для вывода подробного текста новости.

Настраиваем дизайн подробной новости

Переходим в "Вывод полного текста новости": "Макеты дизайна компонентов" -> "Новостная лента" -> "Вывод полного текста новости"

С помощью контекстного меню создаем новый макет дизайна (скриншот приводить не буду. Итак понятно, как это делается).
Даем ему название:

И переходим в закладку "Полный текст новости".

Шаблона вывода подробного текста у нас нет, да он настолько простой, что нам и не нужен. Поэтому вставляю следующий код:

<div>&nbsp;</div>
<div align="right"><i></i></div>

Т.е. выводим сам подробный текст и дату. В дальнейшем мы возможно добавим сюда автора и возможность комментировать новости для зарегистрированных пользователей. Но пока не будем.

Сохраняемся и идем в модуль управления страницами сайта:

В корневом разделе создаем страницу, назвав ее "Новости CMS". Имя файла news_full.php.
Подробно описывать весь процесс не буду, т.к. описывал его в одной из первых статей.

После сохранения страницы открываем ее на редактирование и переходим во вкладку "Связанные компоненты".

Там у редактируемого блока   проставляем компонент: "Вывод заголовка новости (без форматирования)".
Теперь сюда автоматически будет подставляться заголовок новости, из которого будет вырезан весь HTML-код.
То же самое желательно сделать для рабочего блока , чтобы заголовок новости попадал в TITLE документа.

Свойств у данного компонента нет, поэтому сразу проставляем для рабочего блока компонент: "Вывод полного текста новости".

И нажимаем иконку свойств.

В открывшемся окне выбираем нужный макет дизайна подробного вывода новости. Он сейчас у нас один.

Сохраняемся. Все! Страница готова.

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

Переходим в макеты дизайна страниц. Открываем на редактирование макет "Для главной страницы" и у закладки "Связанные компоненты" связываю редактируемый блок с компонентом "Вывод новостной ленты":

Нажимаем иконку свойств и в открывшемся окне выбираем в закладке:

• Раздел
  Нужный раздел или разделы.
  
  
  
  
   
• Свойства
  • Нужный макет дизайна
  • Страницу для вывода полного текста новости
  • Поля, по которым новости будут сортироваться
  • Выводить или нет новости из подразделов выбранных разделов
  • Устанавливать связь с выводом разделов
  
  Последний пункт рассмотрим позже.
  
  

  

  
  
   
• Фильтр
  В фильтрах зададим то, что выводится в последние 3 новости.
  
  
  

 Смотрим, что получилось на сайте:

Первые 2 новости не имеют подробного текста, последняя имеет. Поэтому только у нее есть ссылка "Подробнее...".

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

Точно таким же образом мы создаем отдельную страницу с полным списком новостей. Расписывать опять весь процесс подробно, думаю не имеет смысла.