Вывести компонент новостей на страницу в Битрикс- заметка на сайте camouf.ru

Просмотров: 44072 | Комментариев: 8

Чтобы не усложнять эту статью, не стал вдаваться в тонкие настройки, но вот с такими базовыми параметрами, вы уже сможете начать писать новости на своем Битрикс сайте и они будут с поддержкой ЧПУ..

Итак приступим:

Для начала идем админпанель и создаем Тип инфоблока «новости» — само собой если он у вас уже создан, пропускаем этот шаг.

Создание инфоблока

1. Кликаем в структуре на «Типы инфоблоков» и нажимаем на зеленую кнопку «+ Добавить новый тип»

2. Откроется окно мастера создания инфоблока:

Задаем индентификатор, он должен состоять из латинских букв/цифр и знака подчеркивания
Русское название, в примере я поставил «Мой блог» и английское «My blog»- если вы действительно делаете для новостей пишите «Новости» и «news» (или как вам будет угодно)

3. Далее в дереве «Типы инфоблоков» находим наш свежесозданный инфоблок и кликаем по нему. Далее на зеленую кнопку «+ Добавить инфоблок».

4. Откроется мастер создания инфоблока. Заполняем примерно следующим образом:

• Символьный код: латинские буквы без пробелов со знаками подчеркивания
• Выбираем сайт (в случае многосайтовой структуры), если он всего один, все равно выбираем его чекбоксом
• Название инфоблока — собственно Новости (в примере Записная книжка)
• Все остальное оставляем как есть, конечно если понимаете что делаете можно настроить ЧПУ и прочие тонкие параметры, но в простом варианте заработает со всем по умолчанию.

5. Переходим на закладку «Доступ» и выбираем в параметре «Для всех пользователей»- Чтение, чтобы новости после вывода на сайт были доступны для просмотра.

Собственно нажимаем сохранить- инфоблок готов. Само собой вы можете донастроить размер картинок для полной новости и анонса, создание символьного кода и.т.д. однако для базого вывода новостей в Битриксе достаточно вышеобозначенных параметров.

Выводим новости на страницу в Битрикс.

Создаем новый раздел (или страницу), назовем его Новости. Не буду вдаваться в подробности, по его созданию, в крайнем случае после нажатия кнопки «Создать раздел»- запустится пошаговый мастер создания раздела, который более чем понятен. Достаточно просто заполнять поля и нажимать «Далее».

В итоге вы придете вот к такому визуальному редактору, все что вы напишите или выведете вместо фразы «Text here…» и будет отображено на сайте в этом разделе.

Удаляем «Text here…» нафиг, раскрываем слева структуру (кликая на плюсики если кто не понял)
+Контент- +Статьи и новости
И перетягиваем самый первый компонент прямо на страницу (см. картинку):

Далее два раза кликаем по иконке компонента на странице, откроется мастер настройки компонента.

Итак пишу сверху вниз как заполнить поля:

1. Шаблон компонента: выбираем .default если у вас еще нет готового шаблона для компонента новостей
2. Выводить дату элемента: оставляем если нужно выводить дату публикации новости. 
3. Выводить изображение для анонса: оставляем если нужно выводить картинку в анонсе. 
4. Выводить текст анонса: аналогично с текстом. 
5. Отображать панель соц. закладок: если нужны кнопки лайк социальных сетей то ставим галочку.
6. Тип инфоблока:
    выбираем из выпадающего списка тот самый тип что создавали выше (см. выше пункт 2).
7. Инфоблок— выбираем созданный ранее (см. выше пункт 4 начала статьи) инфоблок, в принципе он должен быть у вас всего один, но в любом случае выбираете именно тот что создавали в этом типе.
8. Количество новостей на странице: по умолчанию 20, ставите что заблогорассудится. Это колличество которое будет выводится на странице за один раз, если больше- появится постраничная навигация. Пример на моем сайте, в разделе макеты выставлено 26 новостей (да там тоже выведено через компонент статьи и новости)
9. Далее все пропускаем до пункта Включить поддержку ЧПУ (если оно вам конечно нужно), ставим чекбокс и в поле Каталог ЧПУ (относительно корня сайта): вписываем url раздела в котором выводятся новости, для примера у этого блога стоит /blog-note/ остальные поля оставляем как есть. Само собой это простая настройка для ЧПУ, более тонко вы сможете ее настроить почитав документацию. Однако работать новости итак будут.
10. Все остальное до конца, оставляем как есть и нажимаем снизу слева, зеленую кнопку сохранить. Снова увидем  (без красной стрелки конечно)

Еще раз нажимаем сохранить снизу слева. Все инфоблок новостей Битрикс создан, настроен и выведен на сайт. 

Надеюсь все понятно и доступно. 

Повторюсь еще раз- чтобы не усложнять это обьяснение, не стал вдаваться в тонкие настройки, но вот с такими базовыми параметрами, вы уже вполне сможете начать писать новости на своем Битрикс сайте и они будут с поддержкой ЧПУ.

camouf.ru

Инфоблок новостей bitrix:news.list — bitrix:news.detail

По работе пришлось осваивать Bitrix от 1с в редакции Старт. До этого дел с bitrix не имел.

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

 

Можно сказать, что это часть первая, отображение информации:

Задача была следующая, необходимо использовать компонент для вывода новостей bitrix:news.list для общего списка, т.к. к нему очень просто прикрутить умный фильтр (smart-filter).

И страницу для детального отображения новостей — компонент «bitrix:news.detail»

Первое, что необходимо сделать — создать инфоблок. В сети достаточно много ресурсов расказывают про создание инфоблока, я подробно расписывать не буду, расскажу в кратце:

В админке я создал инфоблок. По умолчанию в инфоблоке битрик указывает следующие параметры:

URL страницы информационного блока:  #SITE_DIR#/zapros/index.php?ID=#IBLOCK_ID#
URL страницы раздела: #SITE_DIR#/zapros/list.php?SECTION_ID=#SECTION_ID#
URL страницы детального просмотра: #SITE_DIR#/zapros/detail.php?ID=#ELEMENT_ID#

Далее, в главном меню, я создал страницу запрос (zapros). В файл index расположеннный в разделе запрос, я поместил компонент bitrix:news.list.

Т.е. структура получилась следующая: zapros/index.php (на этой странице расположен просмотр новостей bitrix:news.list.)

Теперь для просмотра детальной новости нам нужна отдельная страница, я назвал её detail , zapros/detail.php. — скажу сразу, чпу я еще не настроил, но обязательно это сделаю.

На страницу zapros/detail.php я добавляю bitrix:news.detail — для отображения детальной новости.

Теперь самое важное при проверке — новости в общем списке отображаются, но при переходе к детальной новости , мы получаем 404 страницу или элемент не найден.

Для решения данной проблемы, необходимо в инфоблоке поправить URL.

URL страницы инофблока - я поставил /zapros/

URL страницы раздела: #SITE_DIR#/zapros/list.php?SECTION_ID=#SECTION_ID# - оставил, как есть.

URL страницы детального просмотра: #SITE_DIR#/zapros/detail.php?ELEMENT_ID=#ELEMENT_ID#

 

Все. Новость отображается, страница детального просмотра работает. Так же сверху расположен умный фильтр, который достаточно удобно сортирует(фильтрует) материалы.

 

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

 

lite-blog.ru

Создание раздела новостей на битрикс — Битрикс блог

Сегодня мы будем создавать раздел новостей на нашем сайте с CMS  Битрикс. Надеюсь, сам сайт уже создан.

Для начала потребуется создать инфоблок в котором будут наши новости. Если у нас ещё не создан тип инфоблоков, то идём в админку -> контент -> инфоблоки -> типы инфоблоков
Жмем «добавить новый тип». Назвать можно этот тип как угодно, т.к. в нашем случае это будет что-то вроде папки, в которой будет наш инфоблок с новостями. Не создавая тип инфоблока, мы не сможем создать сам инфоблок.
После этого создаем инфоблок с новостями. Заходим в созданный тип инфоблока и жмем «добавить инфоблок»
Все поля для заполнения мы сейчас рассматривать не будем, для начала нам хватит следующих:

• Сайты — ставим галочку, если сайтов несколько, то ставим галочку напротив того сайта, на котором будем использовать инфоблок, также один инфоблок может использоваться на нескольких сайтах.
• Название — название инфоблока
• URL страницы информационного блока — вставляем раздел в котором у нас будут новости. Часть «#SITE_DIR#/» и «/index.php?ID=#IBLOCK_ID#» оставляем без изменений.
• URL страницы детального просмотра — то же самое, только Часть «#SITE_DIR#/» и «/detail.php?ID=#ID#» оставляем без изменений.

Инфоблок готов, создадим пару новостей.
Жмем добавить элемент. в разделе «Элемент» заполняем название
В разделе «Анонс» заполняем «описание для анонса» и картинку для анонса по желанию
В разделе «подробно» аналогично только уже полный текст новости. Тестовые новости готовы, приступим к показу новостного раздела на сайте. Создадим раздел «news»
после этого откроется окно визуального редактора
удаляем «Text here…» и переносим на его место компонент «новости»
дважды кликаем на компонент, появляются его настройки. Выбираем наш тип инфоблока и сам инфоблок «новости»
сохраняем. Готово, новости выведены.
Конечно, существует множество настроек, параметров вывода новостей на сайте и т.д., но об этом мы поговорим в отдельном посте.
Вот и всё, до связи.

bxguru.ru

Битрикс. Комплексный компонент «Новости». Категория: Web-разработка • CMS Битрикс

Создаем раздел blog и в визуальном редакторе, в правой колонке выбираем комплексный компонент «Контент • Новости • Новости» и добавляем его на страницу. Это комплексный компонент, предназначен для решения нескольких задач: показывать список новостей, показывать отдельную новость и т.д.

Рядом с комплексным компонентом есть несколько простых, которые предназначены для решения одной задачи:

• Список новостей
• Новость детально

В настройках компонента оставляем шаблон .default, выбираем тип инфоблока и сам инфоблок, которые были предварительно созданы в панели управления. Отмечаем checkbox-ы «Включать раздел в цепочку навигации» и «Устанавливать статус 404». В принципе, больше можно ничего не менять, остальные настройки можно поменять позже. В результате файл /blog/index.php будет таким:

<?php
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Блог");
?>
<?php
$APPLICATION->IncludeComponent(
    "bitrix:news",
    "",
    Array(
        // настройки компонента
    )
);
?>
<?php require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php"); ?>

Сам компонент расположен в bitrix/components/bitrix/news. В папке templates видим три шаблона, и среди них .default, который мы выбрали. Теперь надо скопировать этот шаблон в папку шаблона сайта, чтобы адаптировать его под свои нужды. Для раздела «Блог» предусмотрен отдельный шаблон local/templates/blog, именно в эту папку и будем копировать. Для шаблона компонента используем имя blog:

После копирования шаблона компонента, файл /blog/index.php был перезаписан:

<?php
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Блог");
?>
<?php
$APPLICATION->IncludeComponent(
    "bitrix:news",
    "blog",
    Array(
        "ADD_ELEMENT_CHAIN" => "N",                   // Включать название элемента в цепочку навигации
        "ADD_SECTIONS_CHAIN" => "Y",                  // Включать раздел в цепочку навигации
        "AJAX_MODE" => "N",                           // Включить режим AJAX
        "AJAX_OPTION_ADDITIONAL" => "",               // Дополнительный идентификатор
        "AJAX_OPTION_HISTORY" => "N",                 // Включить эмуляцию навигации браузера
        "AJAX_OPTION_JUMP" => "N",                    // Включить прокрутку к началу компонента
        "AJAX_OPTION_STYLE" => "Y",                   // Включить подгрузку стилей
        "BROWSER_TITLE" => "-",                       // Установить заголовок окна браузера из свойства
        "CACHE_FILTER" => "N",                        // Кешировать при установленном фильтре
        "CACHE_GROUPS" => "Y",                        // Учитывать права доступа
        "CACHE_TIME" => "36000000",                   // Время кеширования (сек.)
        "CACHE_TYPE" => "N",                          // Тип кеширования
        "CHECK_DATES" => "Y",                         // Показывать только активные на данный момент элементы
        "DETAIL_ACTIVE_DATE_FORMAT" => "M j, Y",      // Формат показа даты
        "DETAIL_DISPLAY_BOTTOM_PAGER" => "Y",         // Выводить под списком
        "DETAIL_DISPLAY_TOP_PAGER" => "N",            // Выводить над списком
        "DETAIL_FIELD_CODE" => array(                 // Поля
            0 => "",
            1 => "",
        ),
        "DETAIL_PAGER_SHOW_ALL" => "Y",               // Показывать ссылку "Все"
        "DETAIL_PAGER_TEMPLATE" => "",                // Название шаблона
        "DETAIL_PAGER_TITLE" => "Страница",           // Название категорий
        "DETAIL_PROPERTY_CODE" => array(              // Свойства
            0 => "AUTHOR",
            1 => "",
        ),
        "DETAIL_SET_CANONICAL_URL" => "N",            // Устанавливать канонический URL
        "DISPLAY_BOTTOM_PAGER" => "Y",                // Выводить под списком
        "DISPLAY_DATE" => "Y",                        // Выводить дату элемента
        "DISPLAY_NAME" => "Y",                        // Выводить название элемента
        "DISPLAY_PICTURE" => "Y",                     // Выводить изображение для анонса
        "DISPLAY_PREVIEW_TEXT" => "Y",                // Выводить текст анонса
        "DISPLAY_TOP_PAGER" => "N",                   // Выводить над списком
        "HIDE_LINK_WHEN_NO_DETAIL" => "N",            // Скрывать ссылку, если нет детального описания
        "IBLOCK_ID" => "1",                           // Идентификатор инфоблока
        "IBLOCK_TYPE" => "content",                   // Тип инфоблока
        "INCLUDE_IBLOCK_INTO_CHAIN" => "N",           // Включать инфоблок в цепочку навигации
        "LIST_ACTIVE_DATE_FORMAT" => "j F Y",         // Формат показа даты
        "LIST_FIELD_CODE" => array(    // Поля
            0 => "",
            1 => "",
        ),
        "LIST_PROPERTY_CODE" => array(                // Свойства
            0 => "AUTHOR",
            1 => "",
        ),
        "MESSAGE_404" => "",                          // Сообщение для показа (по умолчанию из компонента)
        "META_DESCRIPTION" => "-",                    // Установить описание страницы из свойства
        "META_KEYWORDS" => "-",                       // Установить ключевые слова страницы из свойства
        "NEWS_COUNT" => "2",                          // Количество новостей на странице
        "PAGER_BASE_LINK_ENABLE" => "N",              // Включить обработку ссылок
        "PAGER_DESC_NUMBERING" => "N",                // Использовать обратную навигацию
        "PAGER_DESC_NUMBERING_CACHE_TIME" => "36000", // Время кеширования страниц для обратной навигации
        "PAGER_SHOW_ALL" => "N",                      // Показывать ссылку "Все"
        "PAGER_SHOW_ALWAYS" => "N",                   // Выводить всегда
        "PAGER_TEMPLATE" => ".default",               // Шаблон постраничной навигации
        "PAGER_TITLE" => "Новости",                   // Название категорий
        "PREVIEW_TRUNCATE_LEN" => "",                 // Максимальная длина анонса для вывода (только для типа текст)
        "SEF_MODE" => "N",                            // Включить поддержку ЧПУ
        "SET_LAST_MODIFIED" => "Y",                   // Устанавливать в заголовках ответа время модификации страницы
        "SET_STATUS_404" => "Y",                      // Устанавливать статус 404
        "SET_TITLE" => "N",                           // Устанавливать заголовок страницы
        "SHOW_404" => "N",                            // Показ специальной страницы
        "SORT_BY1" => "ACTIVE_FROM",                  // Поле для первой сортировки новостей
        "SORT_BY2" => "SORT",                         // Поле для второй сортировки новостей
        "SORT_ORDER1" => "DESC",                      // Направление для первой сортировки новостей
        "SORT_ORDER2" => "ASC",                       // Направление для второй сортировки новостей
        "STRICT_SECTION_CHECK" => "N",                // Строгая проверка раздела
        "USE_CATEGORIES" => "N",                      // Выводить материалы по теме
        "USE_FILTER" => "N",                          // Показывать фильтр
        "USE_PERMISSIONS" => "N",                     // Использовать дополнительное ограничение доступа
        "USE_RATING" => "N",                          // Разрешить голосование
        "USE_REVIEW" => "N",                          // Разрешить отзывы
        "USE_RSS" => "N",                             // Разрешить RSS
        "USE_SEARCH" => "N",                          // Разрешить поиск
        "USE_SHARE" => "N",                           // Отображать панель соц. закладок
        "VARIABLE_ALIASES" => array(
            "ELEMENT_ID" => "ELEMENT_ID",
            "SECTION_ID" => "SECTION_ID",
        )
    ),
    false
);
?>
<?php require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php"); ?>

Из папок шаблонов все удаляем, оставляем только файлы шаблонов и файлы стилей:

• /local/templates/blog/components/bitrix/news/blog/bitrix/news.list/.default/template.php
• /local/templates/blog/components/bitrix/news/blog/bitrix/news.detail/.default/template.php

• /local/templates/blog/components/bitrix/news/blog/bitrix/news.list/.default/style.css
• /local/templates/blog/components/bitrix/news/blog/bitrix/news.detail/.default/style.css

Шаблон списка новостей

Файл шаблона /local/templates/blog/components/bitrix/news/blog/bitrix/news.list/.default/template.php. Этот шаблон используется как для показа всех статей блога, так и для показа статей выбранного раздела инфоблока. Странно, но в шаблоне не предусмотрен вывод заголовков и вывод подразделов текущего раздела инфоблока. Давайте это исправим и создадим файл result_modifier.php:

<?php
/**
 * Файл local/templates/blog/components/bitrix/news/blog/bitrix/news.list/.default/result_modifier.php
 */
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();

/*
 * Получаем информацию о текущем разделе инфоблока. Здесь возможны две ситуации:
 * - первая — мы имеем дело с обычным разделом инфоблока, который выводит список
 *   элементов этого раздела и всех его потомков
 * - вторая — мы имеем дело с корневым разделом инфоблока, который выводит список
 *   всех элементов, которые есть в инфоблоке
 * Для обоих случаев используется простой компонент bitrix:news.list и нам надо
 * как-то различать эти две ситуации. Но в любом случае у страницы должен быть
 * заголовок и список подразделов текущего раздела — для навигации. Потому как в
 * стандартном компоненте Битрикс этого не предусмотрено. Или я чего-то не понял.
 */

$arParams['PARENT_SECTION'] = intval($arParams['PARENT_SECTION']);

if ($arParams['PARENT_SECTION'] > 0) { // это обычный раздел инфоблока
    /*
     * Сначала получаем инфомацию о текущем разделе
     */
    $arResult['SECTION_DATA']['ROOT'] = false;
    // какие поля раздела инфоблока выбираем
    $arSelect = array(
        'NAME',
        'DESCRIPTION',
    );
    // условия выборки
    $arFilter = array(
        'IBLOCK_ID' => $arResult['ID'],      // идентификатор инфоблока
        'IBLOCK_ACTIVE' => 'Y',              // инфоблок должен быть активен
        'ID' => $arParams['PARENT_SECTION'], // идентификатор раздела
        'ACTIVE' => 'Y',                     // раздел должен быть активным
    );
    // сортировка
    $arSort = array(
        'SORT' => 'ASC'
    );
    // выполняем запрос к базе данных
    $dbResult = CIBlockSection::GetList(
        $arSort,
        $arFilter,
        false,
        $arSelect
    );
    if ($arSection = $dbResult->GetNext()) {
        $arResult['SECTION_DATA'] = $arSection;
    }
    /*
     * А потом информацию о подразделах текущего раздела
     */
    // какие поля подразделов выбираем
    $arSelect = array(
        'ID',
        'NAME',
        'DESCRIPTION',
        'SECTION_PAGE_URL'
    );
    // условия выборки подразделов
    $arFilter = array(
        'IBLOCK_ID' => $arResult['ID'], // идентификатор инфоблока
        'IBLOCK_ACTIVE' => 'Y',         // инфоблок должен быть активен
        'ACTIVE' => 'Y',                // только активные разделы
        'SECTION_ID' => $arParams['PARENT_SECTION']
    );
    // сортировка разделов
    $arSort = array(
        'SORT' => 'ASC'
    );
    // выполняем запрос к базе данных
    $dbResult = CIBlockSection::GetList(
        $arSort,
        $arFilter,
        false,
        $arSelect
    );
    // шаблон ссылки на страницу с содержимым подраздела
    $dbResult->SetUrlTemplates('', $arParams['SECTION_URL']);
    while ($arSection = $dbResult->GetNext()) {
        $arResult['SECTION_DATA']['CHILDS'][] = $arSection;
    }
} else { // это корень, делаем виртуальный раздел
    /*
     * Сначала получаем инфомацию о корневом разделе
     */
    $arResult['SECTION_DATA']['ROOT'] = true;
    // в качестве имени корневого раздела используем имя инфоблока
    $arResult['SECTION_DATA']['NAME'] = $arResult['NAME'];
    // в качестве описания корневого раздела используем описание инфоблока
    $arResult['SECTION_DATA']['DESCRIPTION'] = $arResult['DESCRIPTION'];
    /*
     * А потом информацию о подразделах корневого раздела
     */
    // какие поля подразделов выбираем
    $arSelect = array(
        'ID',
        'NAME',
        'DESCRIPTION',
        'SECTION_PAGE_URL'
    );
    // условия выборки подразделов
    $arFilter = array(
        'IBLOCK_ID' => $arResult['ID'], // идентификатор инфоблока
        'IBLOCK_ACTIVE' => 'Y',         // инфоблок должен быть активен
        'ACTIVE' => 'Y',                // только активные разделы
        'SECTION_ID' => false           // выбираем разделы верхнего уровня
    );
    // сортировка разделов
    $arSort = array(
        'SORT' => 'ASC'
    );
    // выполняем запрос к базе данных
    $dbResult = CIBlockSection::GetList(
        $arSort,
        $arFilter,
        false,
        $arSelect
    );
    // шаблон ссылки на страницу с содержимым подраздела
    $dbResult->SetUrlTemplates('', $arParams['SECTION_URL']);
    while ($arSection = $dbResult->GetNext()) {
        $arResult['SECTION_DATA']['CHILDS'][] = $arSection;
    }
}

Теперь можно заняться шаблоном списка статей блога:

<?php
/*
 * Файл /local/templates/blog/components/bitrix/news/blog/bitrix/news.list/.default/template.php
 */

if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();

$this->setFrameMode(true);
?>

<h2><?= $arResult['SECTION_DATA']['NAME']; ?></h2>

<?php if (!empty($arResult['SECTION_DATA']['CHILDS'])): /* подразделы текущего раздела */ ?>
    <ul>
    <?php foreach ($arResult['SECTION_DATA']['CHILDS'] as $arSection): ?>
        <li><a href="<?= $arSection['SECTION_PAGE_URL'] ?>"><?= $arSection['NAME'] ?></a></li>
    <?php endforeach; ?>
    </ul>
<?php endif; ?>

<?php if ($arParams['DISPLAY_TOP_PAGER']): /* постраничная навигация вверху */ ?>
    <?= $arResult['NAV_STRING']; ?>
<?php endif; ?>

<section>
<?php foreach ($arResult['ITEMS'] as $arItem): /* список статей блога */ ?>
    <article>
        <div>
            <a href="<?= $arItem['DETAIL_PAGE_URL']; ?>">
                <img src="<?= $arItem['PREVIEW_PICTURE']['SRC']; ?>"
                     title="<?= $arItem['PREVIEW_PICTURE']['ALT']; ?>" />
            </a>
        </div>
        <div>
            <h3><a href="<?= $arItem['DETAIL_PAGE_URL']; ?>"><?= $arItem['NAME']; ?></a></h3>
            <ul>
                <li>Добавлено: <?= $arItem['DATE_CREATE']; ?></li>
                <li>Автор: <?= $arItem['PROPERTIES']['AUTHOR']['VALUE']; ?></li>
            </ul>
        </div>
        <div>
            <p><?= $arItem['PREVIEW_TEXT']; ?></p>
        </div>
        <div>
            <ul>
                <li><span>Просмотров: <?= $arItem['SHOW_COUNTER']; ?></li>
                <li><a href="<?= $arItem['DETAIL_PAGE_URL']; ?>">Читать дальше</a></li>
            </ul>
        </div>
    </article>
<?php endforeach; ?>
</section>

<?php if ($arParams['DISPLAY_BOTTOM_PAGER']): /* постраничная навигация внизу */  ?>
    <?= $arResult['NAV_STRING']; ?>
<?php endif; ?>

Постраничная навигация

Чтобы кастомизировать постраничную навигацию, надо скопировать один из шаблонов системного компонента system.pagenavigation. Все содержимое папки modern копируем в папку pager:

• bitrix/components/bitrix/system.pagenavigation/templates/modern
• local/templates/.default/components/bitrix/system.pagenavigation/pager

Удаляем файл стилей style.min.css и создаем файл .description.php:

<?php
/*
 * Файл local/templates/.default/components/bitrix/system.navigation/pager/.description.php
 */
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();

$arTemplateDescription = array(
    "NAME" => GetMessage("SYS_PAGER_TMPL_NAME"),
    "DESCRIPTION" => GetMessage("SYS_PAGER_TMPL_DESCR"),
);

<?php
/*
 * Файл local/templates/.default/components/bitrix/system.navigation/pager/lang/ru/.description.php
 */
$MESS['SYS_PAGER_TMPL_NAME'] = 'Постраничная навигация';
$MESS['SYS_PAGER_TMPL_DESCR'] = 'Шаблон постраничной навигации';

И теперь нам надо отредактировать файл template.php. Распечатаем массив $arResult с помощью функции print_r():

Array
(
    [NavShowAlways] => 
    [NavTitle] => Статьи
    [NavRecordCount] => 11
    [NavPageCount] => 6
    [NavPageNomer] => 3
    [NavPageSize] => 2
    [bShowAll] => 
    [NavShowAll] => 
    [NavNum] => 1
    [bDescPageNumbering] => 
    [add_anchor] => 
    [nPageWindow] => 5
    [bSavePage] => 
    [sUrlPath] => /blog/
    [NavQueryString] => 
    [sUrlPathParams] => /blog/?
    [nStartPage] => 1
    [nEndPage] => 5
    [NavFirstRecordShow] => 5
    [NavLastRecordShow] => 6
)

В нашем случае показывается список из 11 статей, по две статьи на страницу. Всего получается 6 страниц, но на последней странице только одна статья.

• NavShowAlways — всегда показывать постраничную навигацию
• NavTitle — название списка элементов, например «Статьи» или «Новости»
• NavRecordCount — общее количество статей (записей)
• NavPageCount — общее количество страниц
• NavPageNomer — номер текущей страницы
• NavPageSize — количество статей на одну страницу
• bShowAll — разрешено или нет показывать ссылку «Все статьи»
• NavShowAll — равен true, если показываются все статьи, без постраничной навигации
• NavNum — номер постраничной навигации (PAGEN_1, PAGEN_2, …)
• bDescPageNumbering — использовать или нет обратную постраничную навигацию
• nPageWindow — количество страниц, которые отображаются в постраничной навигации
• bSavePage — равна true если в главном модуле отмечена опция запоминать последнюю открытую страницу
• sUrlPath — путь к странице относительно корня
• NavQueryString — строка GET-параметров
• nStartPage — номер первой страницы слева для текущей страницы
• nEndPage — номер первой страница справа для текущей страницы
• NavFirstRecordShow — порядковый номер первой статьи на текущей странице
• NavLastRecordShow — порядковый номер последней статьи на текущей странице

По поводу переменной bSavePage:

// Пример запрещает сохранение в сессии номера последней страницы при стандартной
// постраничной навигации. По умолчанию в сессии запоминается последняя открытая
// страница постраничной навигации. 
CPageOption::SetOptionString("main", "nav_page_in_session", "N");

По поводу переменных nStartPage и nEndPage. Если текущая страница — третья (NavPageNomer=3), а показывается пять ссылок (nPageWindow=5), тогда nStartPage=1, а nEndPage=5:

<a href="...">1</a> <a href="...">2</a> <span>3</span> <a href="...">4</a> <a href="...">5</a>

Если текущая страница — четвертая (NavPageNomer=4), а показывается пять ссылок (nPageWindow=5), тогда nStartPage=2, а nEndPage=6:

<a href="...">2</a> <a href="...">3</a> <span>4</span> <a href="...">5</a> <a href="...">6</a>

По поводу переменных NavFirstRecordShow и NavLastRecordShow. У нас всего 11 статей на 6 страницах, по две статьи на страницу. Если текщая страница — третья, то NavFirstRecordShow=5, а NavLastRecordShow=6. На первой странице будут первая и вторая статьи, на второй странице — третья и четвертая, на третьей странице (текущей) — пятая и шестая.

<?php
/*
 * Файл local/templates/.default/components/bitrix/system.pagenavigation/pager/template.php
 */
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true) die();

$this->setFrameMode(true);

// ссылка на первую страницу
$firstPageUrl = $arResult['sUrlPath'];
if (!empty($arResult['NavQueryString'])) {
    $firstPageUrl = $firstPageUrl.'?'.$arResult['NavQueryString'];
}
// ссылка на последнюю страницу
$lastPageUrl = $arResult['sUrlPath'];
if (!empty($arResult['NavQueryString'])) {
    $lastPageUrl = $lastPageUrl.'?'.$arResult['NavQueryString']
                   .'&amp;PAGEN_'.$arResult['NavNum'].'='.$arResult['NavPageCount'];
} else {
    $lastPageUrl = $lastPageUrl.'?PAGEN_'.$arResult['NavNum'].'='.$arResult['NavPageCount'];
}
?>

<ul>
    <?php if ($arResult['NavPageNomer'] > 1): /* ссылка на первую страницу */ ?>
        <li>
            <a href="<?= $firstPageUrl ?>" title="Первая">«</a>
        </li>
    <?php endif; ?>
    
    <?php for ($i = $arResult['nStartPage']; $i <= $arResult['nEndPage']; $i++): ?>
        <?php
        // ссылка на очередную страницу
        $pageUrl = $arResult['sUrlPath'];
        if (!empty($arResult['NavQueryString'])) {
            $pageUrl = $pageUrl.'?'.$arResult['NavQueryString'].'&amp;PAGEN_'.$arResult['NavNum'].'='.$i;
        } else {
            $pageUrl = $pageUrl.'?PAGEN_'.$arResult['NavNum'].'='.$i;
        }
        ?>
        <?php if ($arResult['NavPageNomer'] == $i): /* если это текущая страница */ ?>
            <li><span><?= $i; ?></span></li>
        <?php else: ?>
            <li><a href="<?= $pageUrl; ?>"><?= $i; ?></a></li>
        <?php endif; ?>
    <?php endfor; ?>

    <?php if ($arResult['NavPageNomer'] < $arResult['NavPageCount']): /* ссылка на последнюю страницу */ ?>
        <li>
            <a href="<?= $lastPageUrl; ?>" title="Последняя">»</a>
        </li>
    <?php endif; ?>
</ul>

/*
 * Файл local/templates/.default/components/bitrix/system.pagenavigation/pager/style.css
 */
.pager {
    overflow: hidden;
    margin: 10px 0;
}
    .pager li {
        list-style: none;
        float: left;
        margin-right: 15px;
    }
    .pager li:last-child {
        margin-right: 0;
    }
        .pager li a {
            display: block;
            width: 26px;
            height: 26px;
            text-align: center;
            background: #395985;
            font-size: 14px;
            line-height: 26px;
            color: #fff;
            text-decoration: none;
        }
        .pager li span {
            display: block;
            width: 26px;
            height: 26px;
            text-align: center;
            background: #e9751f;
            font-size: 14px;
            line-height: 26px;
            color: #fff;
        }

Шаблон готов, давайте его применим. Для этого заходим в настройки компонента и выбираем в выпадающем списке наш шаблон pager:

Теперь постраничная навигация выглядит так:

ЧПУ (SEF)

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

• Каталог ЧПУ (относительно корня сайта): /blog/
• Страница общего списка: [пусто]
• Страница раздела: category/#SECTION_ID#/
• Страница детального просмотра: category/#SECTION_ID#/post/#ELEMENT_ID#/

Теперь URL будут иметь вид:

• Страница раздела блога: http://www.host.ru/blog/category/3/
• Страница просмотра статьи: http://www.host.ru/blog/category/3/post/12/

Еще один вариант — использовать символьные коды (транслитерация названия) разделов и элементов инфоблока:

• Каталог ЧПУ (относительно корня сайта): /blog/
• Страница общего списка: [пусто]
• Страница раздела: category/#SECTION_CODE#/
• Страница детального просмотра: category/#SECTION_CODE#/post/#ELEMENT_CODE#/

Теперь URL будут иметь вид:

http://www.host.ru/blog/category/vtoraya-kategoriya/
http://www.host.ru/blog/category/vtoraya-kategoriya/post/sedmaya-statya-bloga/

Если категории блога имеют вложенность, можно использовать #SECTION_CODE_PATH# вместо #SECTION_CODE#:

http://www.host.ru/blog/category/tretya-kategoriya/dochernyaya-kategoriya/
http://www.host.ru/blog/category/tretya-kategoriya/dochernyaya-kategoriya/post/vosmaya-statya-bloga/

Шаблон отдельной новости

Файл шаблона /local/templates/blog/components/bitrix/news/blog/bitrix/news.detail/.default/template.php

<?php
/*
 * Файл /local/templates/blog/components/bitrix/news/blog/bitrix/news.detail/.default/template.php
 */

if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();

$this->setFrameMode(true);
?>

<article>
    <h2><?= $arResult['NAME']; ?></h2>
    <ul>
        <li>Добавлено: <?= $arResult['DATE_CREATE']; ?></li>
        <li>Автор: <?= $arResult['PROPERTIES']['AUTHOR']['VALUE']; ?></li>
    </ul>
    <?php if (!empty($arResult['DETAIL_PICTURE'])): ?>
        <img src="<?= $arResult['DETAIL_PICTURE']['SRC']; ?>"
            alt="<?= $arResult['DETAIL_PICTURE']['ALT']; ?>"
            title="<?= $arResult['DETAIL_PICTURE']['TITLE']; ?>" />
    <?php endif; ?>
    <div>
        <?= $arResult['DETAIL_TEXT']; ?>
    </div>
    <ul>
        <li>Количество просмотров: <?= $arResult['SHOW_COUNTER'] ? $arResult['SHOW_COUNTER'] : 0; ?></li>
        <li><a href="<?= $arResult['SECTION']['SECTION_PAGE_URL']; ?>">Назад в раздел</a></li>
    </ul>
</article>

И добавим стили для страницы детального просмотра:

/*
 * Файл /local/templates/blog/components/bitrix/news/blog/bitrix/news.detail/.default/style.css
 */
#blog-article {

}
    #blog-article > ul {
        overflow: hidden;
        margin: 10px 0 !important;
        padding: 15px;
        font-size: smaller;
        background: #eee;
        border-radius: 5px;
        list-style: none;
    }
        #blog-article > ul > li:first-child {
            float: left;
        }
        #blog-article > ul > li:last-child {
            float: right;
        }
#blog-article > img {
    float: right;
    padding: 10px;
    border: 1px solid #ddd;
    width: 30%;
    margin-left: 10px;
    border-radius: 5px;
}

Хлебные крошки

Для полноты картины не хватает еще хлебных крошек. Давайте откроем шаблон сайта local/templates/blog/header.php и добавим компонент «Навигационная цепочка»:

$APPLICATION->IncludeComponent(
    "bitrix:breadcrumb",
    "",
    Array(
        "PATH" => "",
        "SITE_ID" => "s1",
        "START_FROM" => "0"
    )
);

Выглядит неплохо, но есть лишний элемент «Блог». Это потому, что второй элемент цепочки — «Блог» — Битрикс добавляет из файла /blog/.section.php, а третий элемент — «Статьи о домашних животных» — добавляет комплексный компонент «Новости». Сейчас файл .section.php имеет вид:

<?php
$sSectionName = "Блог";
$arDirProperties = array();

Внесем исправления:

<?php
$sSectionName = "";
$arDirProperties = array();

Но хотелось бы еще подправить шаблон компонента «Навигационная цепочка». Создадим свой шаблон с именем chain в папке общего шаблона сайта .default:

• local/templates/.default/components/bitrix/breadcrumb/chain/template.php
• local/templates/.default/components/bitrix/breadcrumb/chain/style.css

Распечатаем массив $arResult:

Array
(
    [0] => Array
        (
            [TITLE] => Главная страница
            [LINK] => /
        )
    [1] => Array
        (
            [TITLE] => Статьи о домашних животных
            [LINK] => /blog/
        )
    [2] => Array
        (
            [TITLE] => Породы кошек
            [LINK] => /blog/?SECTION_ID=16
        )
    [3] => Array
        (
            [TITLE] => Длинношерстные
            [LINK] => /blog/?SECTION_ID=17
        )
)

<?php
/*
 * Файл local/templates/.default/components/bitrix/breadcrumb/chain/template.php
 */
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();

if(empty($arResult)) {
    return '';
}

$items = array();
foreach ($arResult as $item) {
    if (!empty($item['LINK'])) {
        $items[] = '<a href="'.$item['LINK'].'">'.htmlspecialchars($item['TITLE']).'</a>';
    } else {
        $items[] = '<span>'.htmlspecialchars($item['TITLE']).'</span>';
    }
}
$result = '<div>' . implode('&nbsp;&gt; ', $items) . '</div>';

return $result;

/*
 * Файл local/templates/.default/components/bitrix/breadcrumb/chain/style.css
 */
#breadcrumbs {
    border: 1px solid #d1d1d1;
    border-top: 5px solid #395985;
    padding: 15px;
    margin-bottom: 20px;
}
    #breadcrumbs a, #breadcrumbs span {
        font-size: smaller;
    }

Теперь можно использовать этот шаблон:

$APPLICATION->IncludeComponent(
    "bitrix:breadcrumb",
    "chain", /* используем шаблон chain */
    array(
        /* параметры компонента */
    )
);

Поиск: $arResult • CMS • Web-разработка • init.php • Битрикс • Инфоблок • Компонент • Новости • Постраничная навигация • ЧПУ • Шаблон компонента • Навигация

tokmakov.msk.ru