Вывести компонент новостей на страницу в Битрикс- заметка на сайте camouf.ru
Просмотров: 44072 | Комментариев: 8
Чтобы не усложнять эту статью, не стал вдаваться в тонкие настройки, но вот с такими базовыми параметрами, вы уже сможете начать писать новости на своем Битрикс сайте и они будут с поддержкой ЧПУ..
Итак приступим:
Для начала идем админпанель и создаем Тип инфоблока «новости» — само собой если он у вас уже создан, пропускаем этот шаг.
Создание инфоблока
1. Кликаем в структуре на «Типы инфоблоков» и нажимаем на зеленую кнопку «+ Добавить новый тип»
2. Откроется окно мастера создания инфоблока:
Задаем индентификатор, он должен состоять из латинских букв/цифр и знака подчеркивания
Русское название, в примере я поставил «Мой блог» и английское «My blog»- если вы действительно делаете для новостей пишите «Новости» и «news» (или как вам будет угодно)
3. Далее в дереве «Типы инфоблоков» находим наш свежесозданный инфоблок и кликаем по нему. Далее на зеленую кнопку «+ Добавить инфоблок».
4. Откроется мастер создания инфоблока. Заполняем примерно следующим образом:
- Символьный код: латинские буквы без пробелов со знаками подчеркивания
- Выбираем сайт (в случае многосайтовой структуры), если он всего один, все равно выбираем его чекбоксом
- Название инфоблока
- Все остальное оставляем как есть, конечно если понимаете что делаете можно настроить ЧПУ и прочие тонкие параметры, но в простом варианте заработает со всем по умолчанию.
5. Переходим на закладку «Доступ» и выбираем в параметре «Для всех пользователей»- Чтение, чтобы новости после вывода на сайт были доступны для просмотра.
Собственно нажимаем сохранить- инфоблок готов. Само собой вы можете донастроить размер картинок для полной новости и анонса, создание символьного кода и.т.д. однако для базого вывода новостей в Битриксе достаточно вышеобозначенных параметров.
Выводим новости на страницу в Битрикс.
Создаем новый раздел (или страницу), назовем его Новости. Не буду вдаваться в подробности, по его созданию, в крайнем случае после нажатия кнопки «Создать раздел»- запустится пошаговый мастер создания раздела, который более чем понятен. Достаточно просто заполнять поля и нажимать «Далее».
В итоге вы придете вот к такому визуальному редактору, все что вы напишите или выведете вместо фразы «Text here…» и будет отображено на сайте в этом разделе.
Удаляем «Text here…» нафиг, раскрываем слева структуру (кликая на плюсики если кто не понял)
+Контент- +Статьи и новости
И перетягиваем самый первый компонент прямо на страницу (см. картинку):
Далее два раза кликаем по иконке компонента на странице, откроется мастер настройки компонента.
Итак пишу сверху вниз как заполнить поля:
- Шаблон компонента: выбираем .default если у вас еще нет готового шаблона для компонента новостей
- Выводить дату элемента: оставляем если нужно выводить дату публикации новости.
- Выводить изображение для анонса: оставляем если нужно выводить картинку в анонсе.
- Выводить текст анонса: аналогично с текстом.
- Отображать панель соц. закладок: если нужны кнопки лайк социальных сетей то ставим галочку.
- Тип инфоблока: выбираем из выпадающего списка тот самый тип что создавали выше (см. выше пункт 2).
- Инфоблок— выбираем созданный ранее (см. выше пункт 4 начала статьи) инфоблок, в принципе он должен быть у вас всего один, но в любом случае выбираете именно тот что создавали в этом типе.
- Количество новостей на странице: по умолчанию 20, ставите что заблогорассудится. Это колличество которое будет выводится на странице за один раз, если больше- появится постраничная навигация. Пример на моем сайте, в разделе макеты выставлено 26 новостей (да там тоже выведено через компонент статьи и новости)
- Далее все пропускаем до пункта Включить поддержку ЧПУ (если оно вам конечно нужно), ставим чекбокс и в поле Каталог ЧПУ (относительно корня сайта): вписываем url раздела в котором выводятся новости, для примера у этого блога стоит /blog-note/ остальные поля оставляем как есть. Само собой это простая настройка для ЧПУ, более тонко вы сможете ее настроить почитав документацию. Однако работать новости итак будут.
- Все остальное до конца, оставляем как есть и нажимаем снизу слева, зеленую кнопку сохранить. Снова увидем (без красной стрелки конечно)
Еще раз нажимаем сохранить снизу слева. Все инфоблок новостей Битрикс создан, настроен и выведен на сайт.
Надеюсь все понятно и доступно.
Повторюсь еще раз- чтобы не усложнять это обьяснение, не стал вдаваться в тонкие настройки, но вот с такими базовыми параметрами, вы уже вполне сможете начать писать новости на своем Битрикс сайте и они будут с поддержкой ЧПУ.
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'] .'&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'].'&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(' > ', $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