Настройка главной страницы 1с битрикс
Здравствуйте. Изучаю Битрикс методом проб и ошибок. Поэтому загадок и проблем хватает. Сверстал шаблон, шапку и футер раскидал по файлам header и footer, а вот контент запихнул в idex.php. Переход по ссылкам показал, что это не верно (контент главной отображался и на других страницах). Принцип работы я понял, нужно подключить модули какие тебе нужно и все. Но вот как мне сделать этот нужный модуль, компонент? Создавал инфоблок с модулем "каталог", но отображалось это все не так как нужно (при этом не подключал к главной странице). Так вот помогите разобраться, что нужно создать, и подключить к главной странице, чтобы это отображалось только на главной странице.
PS рис1 искомый шаблон, рис2. красным выделено то что нужно запрятать в файл и подключить.
создание главной страницы
Здравствуйте. Сильно извиняюсь, но нужно помощь. Честно сказать я чайник в базах данных. но.
Создание главной страницы сайта
Всем привет! Делаю сайт на HTML про остров и его описание. Хочу сделать так, как это показано на.
Создание простой главной страницы
Помогите создать главную страницу с помощью HTML, CSS, JAVASCRIPT. Не знаю как сделать. Хотела.
Создание слайда для главной страницы
Добрый день! Помогите сделать интерактивный слайд с возможность добавления описания к каждому.
1. Открываете главную страницу. Заходите в редактирование страницы ИЗМЕНИТЬ СТР. в виз. редакторе.
Компоненты - Служебные - Включаемые области - Вставка включаемой области,
ВСЁ оставляете как есть:
Параметры компонента
Показывать включаемую область: для страницы
2. Создаете включаемую область - туда скидываете материал для главной.
3. Включаемая область выглядит в админке файл с суффиксом _inc.php. Или в публичке вкл. режиме правки (эрмитаж), щелкаете на вкл. область и добавляйте материал.
Спасибо, то что нужно. Только поехали немного стили, но это поправимо.
Добавлено через 1 час 56 минут
Еще есть вопрос, как убрать картинку-ссылку "домик" в меню? Искал в файлах php самого меню, но не нашел где это строка. Подскажите кто знает.
Нашли ошибку? Выделите мышкой и нажмите Ctrl+Enter
Управление расположением блоков на главной
Все блоки вашего сайта — это единый организм, где каждая часть дополняет друг друга. Чтобы структура сайта выглядела органично, продумайте стратегию расположения блоков. Покажем на примере.
Как управлять расположением блоков
- Открыть виджет настроек.
- Перейти на вкладку «Главная».
- Ухватить левой кнопкой мыши вертикальные стрелки рядом с ползунком, который отключает отображение блока, и переместить строку вверх или вниз.
Элементы сместятся в сторону освободившегося пространства — вверх или вниз, в зависимости от того, откуда вы перетащили строку.
Вы можете отключить отображение определенного блока. Для этого используйте виджет настроек и в блоке «Главная» деактивируйте ненужный блок.
Управлять блоками можно в административной части. Для этого зайдите административную часть сайта: Аспро (1) → Allcorp3 (2) → Настройки (3).
Откройте список настроек и найдите блок «Главная» (1). В блоке есть параметры отображения и порядок блоков на главной (2). Возле полей, активирующих отображение блоков, располагаются вертикальные стрелки (3). С их помощью можно менять блоки местами (так же, как в виджете).
Чтобы не отображать определенный блок на главной странице, снимите галку рядом с его названием. Для сохранения изменений нажмите «Применить».
Курс предназначен для базовой подготовки пользователей, осуществляющих администрирование порталов, созданных на коробочной версии сервиса Битрикс24. Изучение курса позволяет освоить основные методы администрирования системы. Если вы хотите ознакомиться с тем как внедрить наш сервис в работу вашей компании, то для вас создан курс Внедрение корпоративного портала.
Курс предусматривает обучение по двум ролям администраторов: Администратор корпоративного портала и Администратор системы.
Администратор корпоративного портала - пользователь, осуществляющий текущее администрирование уже настроенного и сданного в эксплуатацию портала.
Разные роли созданы в связи с тем, что для администрирования настроенного и отлаженного корпоративного портала нет необходимости в работе профессионала высокого уровня. Вполне достаточно пользователя успешно изучившего данный курс в рамках роли Администратор КП.
При условии качественного изучения материалов курса, по его окончании специалист должен уметь:
- настраивать модули системы;
- использовать возможности интерфейса по управлению системой;
- управлять доступом к системе, сайтами, пользователями, группами пользователей;
- управлять содержимым портала;
- работать с инструментами системы;
Начальные требования
Для прохождения курса необходимо:
- наличие базовых навыков компьютерной грамотности и навыков работы с ОС Windows;
- наличие представлений о WWW и организации доступа к веб-серверу;
- базовые навыки установки и администрирования *nix-систем.
Если вам предстоит самостоятельная установка системы, то рекомендуется к изучению курс Установка и настройка.
Администратору системы будет полезно ознакомиться с курсом Разработчик Bitrix Framework, рассказывающем о принципах работы Bitrix Framework.
Примечание. Битрикс24 создан на основе платформы Bitrix Framework, на которой ранее был создан другой продукт "1С-Битрикс: Управление сайтом". В административной части системы сохранена терминология, относящаяся к этому продукту. Поэтому в текущем курсе понятие "сайт" нужно рассматривать как синоним слова "портал".
У нас часто спрашивают, сколько нужно заплатить
Курс полностью бесплатен. Изучение курса, прохождение итоговых тестов и получение сертификатов - ничего из этого оплачивать не нужно.
Ещё у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.
Баллы опыта
В конце каждого урока есть кнопка Прочитано! . При клике на неё в Вашу итоговую таблицу опыта добавляется то количество баллов, которое указано в прочитанном После нажатия кнопки Прочитано! появится
окно подтверждения:
уроке.
Периодически мы заново оцениваем сложность уроков, увеличивая/уменьшая число баллов, поэтому итоговое количество набранных Вами баллов может отличаться от максимально возможного. Не переживайте! Отличный результат - это если общее число набранных Вами баллов отличается от максимального на 1-2%.
Тесты и сертификат
После изучения курса вам будет предложено пройти тесты на сертификацию. При успешной сдаче линейки тестов на странице Моё обучение можно просмотреть результат обучения и загрузить сертификат в формате PDF.
Для преподавания офлайн
Если данный курс берётся в качестве основы для офлайнового преподавания, то рекомендуемая продолжительность: 10 дней (70 академических часов).
Если нет интернета
iPhone:
FBReader
CoolReader
iBook
Bookmate
Windows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google Chrome
iOS
Marvin for iOS
ShortBook
обновляются периодически, поэтому возможно некоторое отставание их от онлайновой версии курса. Версия файла - от 04.05.2022.
Настройка любой площадки для CMS — это рутинный процесс, который должен быть доведен до автоматизма в каждой уважающей себя компании. А потому частенько воспринимается, как восход солнца — это происходит само собой. На самом деле, нельзя так относиться и надеяться на разработчиков, особенно если часть команды работает на субподряде. Они могут потратить кучу времени и денег проекта на переносах, багах и конфликтах кода.
Задача тимлида — создать команде среду для разработки и правильные условия для написания кода. Чтобы помочь с этим я решил опубликовать напоминалку, основанную на внутренних регламентах компании где я работаю.
Итак, наша задача: развернуть рабочие стенды девелоперов (dev), тестовое окружение(stage), боевой сервер (prod), наладить процесс разработки и тестирования, доставки артефактов по цепочке и деплоя стабильной версии. Для этого необходимо формализовать, привести к единому алгоритму процесс настройки площадки для разработчика, чтобы не возникало ситуации, когда каждый сам решает, что и где «подкрутить». Золотое правило управленца — если процесс повторяется больше одного раза, на этот процесс должна быть инструкция или регламент.
Расскажу на примере архитектуры, которую используем мы: main — наша основная площадка для тестов и показов. В дополнение используем несколько площадок для каждого из разработчиков — d1, d2 и так далее. Настройкой среды для Битрикс-приложения в нашей компании занимается сисадмин. Здесь нет универсального способа настройки, поэтому подробности опущу.
Шаг 1. Разворачиваем ядро Битрикс (базовое или своей версии):
Проверить кодировки. Устанавливайте сайт СТРОГО в кодировке UTF-8. При проверке сайта (Инструменты – проверка системы) шестым пунктом проверки должно выводиться «Параметры настройки UTF».
Проверить ключи. Ни в коем случае не оставляйте сайт на демо-ключе. Нужно запрашивать некоммерческий ключ для разработки у менеджера проекта, а в случае непредставления — останавливать проект. Об этом должен позаботиться тимлид, иначе про ключ все забудут и в один прекрасный момент сайт перестанет работать.
Поставить галку на версиях разработчиков. После установки продукта в админке нужно отметить, что сайт используется для разработки, а не для коммерческих целей.
Обновить до актуального состояния. Сразу после развертывания необходимо зайти в настройки Битрикс и установить все обновления системы, поскольку в аутсорс-продакшнах часто пользуются готовыми сборками (образами).
После разворачивания сайта необходимо пройти проверку системы и проверку тестирования конфигурации /bitrix/admin/site_checker.php?lang=ru. Ошибок и предупреждений не должно быть. По умолчанию агенты на тестовых площадках Extyl должны выполняться на хитах, а на бою переведены на cron (тимлид проекта решает, когда на тесте надо перевести агента на cron).
Шаг 2. Следим за тем, чтобы площадки для разработки не оказались в индексе поисковиков
Программисты, как правило, вообще не задумываются о поисковиках и последствиях индексации площадки для разработки. Нужно напоминать, что стенды разработки — это те же сайты в сети, а значит их видят роботы, Нам не нужно, чтобы служебная информация оказалась доступна в поиске. Сразу после установки не забываем изменить настройки на боевом сервере.
И в robots.txt прописать правило:
– запрещена индексация сайта;
Во время переноса сайта на боевой сервер, файл должен быть изменен (оставить запрет на индексацию только на системные папки, страницы, файлы, такие как bitrix, upload, auth и т.п.).
Шаг 3. Устанавливаем модуль миграции сущностей БД
Когда у нас уже есть ядро и мы начали делать сайт, появляются данные, с которыми нужно работать и не терять их. Возникает необходимость переноса на бой и обратно изменений сущностей БД (инфоблоки, формы и т.д.).
Ничего не вводим руками, пользуемся миграциями. Причина — миграции дают возможность сделать все, что можно сделать руками, но при этом процесс можно в любой момент времени повторить. Когда команда состоит из нескольких разработчиков, количество забытых данных растет в геометрической прогрессии. Если у заказчика есть предпрод или сроки приемки затягиваются, то без миграций невозможно обойтись в принципе.
Не ленитесь и облегчите себе жизнь установкой мигратора. Он поможет восстановить работоспособность сайта, даже если кто-то удалил базу без возможности восстановления.
Шаг 4. Настраиваем Git
В современных реалиях без GIt не может существовать не один проект, даже очень маленький. Писать код без системы версионирования сегодня невозможно — командная работа на то и командная.
Сразу после развертывания Битрикс — надо установить Git на проект и правильно его настроить:
Не все должно попадать в репозиторий, настраиваем gitignore.
.gitignore может быть изменен и дополнен в зависимости от потребностей проекта.
robots.txt, как и sitemap*.xml, .htaccess должен быть в .gitignore на бою и всех тестовых площадках.
Пара слов о гигиене процессов:
На предпроде должна быть включена ветка stage, а на бою master. В ветках stage и master мы не работаем.
Все ненужные страницы и разделы необходимо удалить перед первым коммитом.
В Git не должны попадать отладочные скрипты, логи, медиафайлы, регистрируемые в БД и др.
Очень важно первично правильно настроить Git и сделать площадку main (stage) чистой — без незакоммиченных файлов. Далее эта площадка будет копироваться на тестовые хосты, и если не выполнить эти предписания, то будут проблемы с тем, что невнимательные разработчики станут коммитить конфигурационные файлы, отладку, ядро и другие вещи, которые не должны попадать в Git. Вообще, когда в истории коммитов видно, как удаляют отладку или то, чего не должно там быть — это говорит о низкой квалификации разработчика. Подробнее о работе с Git я расскажу в следующей статье.
Шаг 5. Настраиваем CI/CD на проекте
CI/CD технология непрерывной интеграции и развертывания сегодня практически стандарт для отрасли, хотя единого алгоритма действий тут нет, и пожалуй быть не может — слишком много разных переменных для каждого проекта, каждый раз настраивать приходится по своему. Но общий алгоритм един — пишется код, покрывается тестами, отправляется в систему контроля версий (не обязательно Git), при поступлении нового коммита — тригерится запуск развертывания тестового окружения и самих тестов. Если все успешно — тригерится деплой артефактов на прод.
Разумеется, это только каркас, и этапов может быть гораздо больше, как и проверок (и автоматических и ручных) на возможность перехода к следующему этапу. Но в рамки этой статьи разбор CI/CD не укладывается, это отдельная и большая тема.
Большие проекты подразумевают настройку CI/CD, но процесс сильно зависит от потребностей проекта.
В этом мире всё, включая разработку, стремится к хаосу, а тимлиды его сдерживают и структурируют работу. Описанные мной шаги банальные, но, как ни странно, снимают огромное количество проблем. Не выполненные вовремя пункты инструкции ведут к негативу заказчика и потере драгоценного времени тимлида. Надеюсь, что материал поможет читателю сделать настройку площадок проще, а работу в команде продуктивнее.
Уважаемый читатель, данная статья является по сути своей продолжением статьи «Как сверстать веб-страницу. Часть 2 — Bootstrap» и здесь мы отойдём от собственно вёрстки, занявшись интеграцией HTML шаблона в CMS 1С-Битрикс.
В предыдущей части Хабраюзер Mirantus сверстал шаблон Corporate Blue от студии Pcklaboratory с помощью Bootstrap 3.
Для данной статьи мы воспользуемся одним из форков репозитория на GitHub, приведённого в конце предыдущей статьи, поскольку в нём были исправлены некоторые баги.
Создание каркаса шаблона
Шаблон сайта с точки зрения 1С-Битрикс – это папка с набором определённых файлов внутри, поэтому шаблон может быть создан как через файловую структуру (инструментами 1С-Битрикс, по FTP или SSH), так и с помощью раздела.
- Первым делом создадим в папке /bitrix/templates/ раздел, название которого в дальнейшем будет использоваться в качестве ID нашего шаблона, например whitesquare-bootstrap (в дальнейшем в рамках статьи мы будем всегда по умолчанию подставлять именно это значение в качестве ID шаблона).
- Перенесём в папку шаблона общие ресурсы (JS, CSS, изображения, шрифты) из шаблона страницы:
- /bitrix/templates/whitesquare-bootstrap/header.php
- /bitrix/templates/whitesquare-bootstrap/footer.php
(это будет пример рабочей страницы на котором мы будем проверять работоспособность нашей рабочей области) в котором помимо Html разметки мы добавим вызов header’а и footer’а (они создадутся автоматически, если создавать страницу средствами 1С-Битрикс):
Элементы 1С-Битрикс
Фактически мы создали статичный HTML каркас с минимальным набором элементов 1С-Битрикс, который уже работает.
Дальнейшая наша задача – перевод отдельных функциональных блоков на работу с компонентами 1С-Битрикс.
Компоненты 1С-Битрикс
В рамках данной статьи мы остановимся только на процессе интеграции вёрстки со стандартными компонентами 1С-Битрикс. Мы не будем создавать свои компоненты и не будем кастомизировать типовые.
Мы создадим отдельную страницу (например, 1.php) на которой будем размещать по 1 компоненту для упрощения работы средствами 1С-Битрикс.
Разместим компонента (например, форму поиска — bitrix:search.form) с помощью визуального редактора:
Используя включенный режим правки скопируем шаблон компонента в шаблон сайта. Для этого наведём курсор мыши на область с компонентом, дождёмся пока появится контекстное меню с шестерёнкой и нажмём на стрелку выпадающего списка:
В появившемся диалоге нам необходимо указать имя шаблона компонента и выбрать шаблон сайта в котором будет хранится шаблон компонента (в нашем случае это whitesquare-bootstrap):
В результате наших действий в Шаблоне компонента /bitrix/templates/whitesquare-bootstrap/ появилась ещё одна папка – components – в ней будут находиться шаблоны всех компонентов, используемых в рамках шаблона сайта.
Первый появившийся шаблон компонента будет расположен по адресу /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/
Опытные разработчики могут сразу создавать шаблон компонента, копируя его в шаблон сайта из компонента.
Иногда для дальнейшей работы больше подходит один из шаблонов компонента, поставляемых вместе с системой. Тогда имеет смысл посмотреть каждый из них в работе. Это можно сделать в визуальном редакторе по нажатию на кнопку шестерёнки:
Включаемые области (лого, копирайт, соц сети)
Компонент включаемой области позволяет вложить внутрь себя любой текст, HTML или php код, а так же другие компоненты и вывести этот контент для определённой страницы, раздела или везде, где вызывается включаемая область.
Для всех указанных выше объектов мы считаем рациональным использование включаемой области с целью вынести эти блоки из шаблона. Т.е. для их редактирования по прежнему необходимо будет владеть минимумом познаний в HTML.
Профессионалы могут возразить, что для блока с кнопками соц сетей следовало бы сделать свой компонент, однако нам это кажется не рациональным. Проще загнать этот блок за 10 минут во включаемую область и отредактировать при необходимости, ведь адрес сообщества Facebook не меняется каждый день!
- /bitrix/templates/whitesquare-bootstrap/include/bottom-logo.php
- /bitrix/templates/whitesquare-bootstrap/include/copyright.php
- /bitrix/templates/whitesquare-bootstrap/include/social-networks.php
- /bitrix/templates/whitesquare-bootstrap/include/top_logo.php
Внутри файла включаемой области просто помещаем кусок HTML кода:
Мы не будем в данной статье рассматривать вопрос интеграции Twitter Ленты, поскольку самое простое решение – положить виджет твиттера во включаемую область, аналогично описанным выше решениям.
Так же в Marketplace 1С-Битрикс хватает компонентов, выводящих твиттер ленту, которыми вы так же можете воспользоваться.
Форма поиска
Мы воспользовались компонентом bitrix:search.form и скопировали suggest шаблон компонента в шаблон сайта.
HTML код шаблона компонента находится в файле /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/template.php
Как видим, у нас не простой, а комплексный компонент (т.е. компонент в состав которого входят другие компоненты). В данном случае это сама форма в которую производится ввод поискового запроса.
Скопируем её шаблон в шаблон сайта.
К сожалению, это не очень красиво – в публичке мы используем 1 компонент, а шаблонов у нас 2. Воспользуемся обычной схемой для комплексных компонентов:
Комплексный компонент
- Создадим в папке /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/ папку bitrix
- Переместим шаблон компонента /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.suggest.input/ в /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/. Таким образом получив:
/bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/ - В параметрах компонента bitrix:search.suggest.input укажем шаблон top:
Вернёмся к форме поиска
- /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/template.php
- /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/template.php
- Как вы можете видеть, мы заменили фразы “GO” и “Search” в компонентах на вызов GetMessage – таким образом, мы вынесли фразы в языковые файлы и можем задать разные значения для русского и английского сайтов, использующих общий шаблон и общий компонент.
- /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/lang/ru/template.php
- /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/lang/en/template.php
- /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/lang/ru/template.php
- /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/lang/en/template.php
Верхнее меню
Для упрощения работы над сайтом перед началом работы над каждым меню мы будем создавать файл меню с актуальным контентом для упрощения работы.
Для создания верхнего меню воспользуемся компонентом bitrix:menu. Скопируем шаблон .default этого компонента в шаблон нашего сайта под именем top. Он практически не содержит ничего лишнего, поэтому мы легко адаптируем его под нашу вёрстку:
Теперь заменим блок верхнего меню в шаблоне на вызов компонента меню:
Левое меню
Аналогично верхнему меню возьмём за основу компонент компонентом bitrix:menu. Скопируем шаблон .default этого компонента в шаблон нашего сайта под именем left.
После правки шаблона получим:
Заменим блок левого меню в шаблоне вызовом компонента:
Пользуясь тем, что в 1С-Битрикс меню наследуется мы можем положить файлы левого меню .left.menu.php во все разделы, где они нужны с разным содержимым, а в корне, например, вовсе убрать. Вёрстка не пострадает, а меню будет отображаться лишь там, где это необходимо.
Нижнее меню
Нижнее меню (в разделе SiteMap) отображается в 2 колонки. Можно конечно сделать универсальный компонент меню в шаблоне которого пункты будут делиться по столбцам (автоматически, либо по наличию какого-либо параметра, установленного для пунктов в режиме расширенного редактирования меню).
Однако, мы понимаем, что подвал – не самая часто редактируемая часть и нет смысла тратить значительные усилия на его разработку.
Поэтому мы пойдём по простому пути (за который любители идеального кода, вероятно, нас проклянут) – мы создадим 2 меню: bottomL и bottomR.
Несмотря на то, что меню будет 2 шаблон мы для них будем использовать 1.
Вновь возьмём за основу компонент компонентом bitrix:menu. Скопируем шаблон .default этого компонента в шаблон нашего сайта под именем bottom.
Шаблон:
Сайдбар – наши офисы
Честно говоря без демо контента не понятно какую функцию оный сайдбар выполняет. Рискнём предположить, что всё-таки в нём показывается не картинка (уж больно несовременно), а полноценная карта Google. Наверное она маловата, чтобы располагать на ней элементы управления, так что она будет манималистичной.
Если же я не прав, то пожалуй один из самых простых способов реализации сайдбара – включаемая область, о которых мы уже говорили.
Возьмём компонент bitrix:map.google.view и скопируем шаблон .default в шаблон сайта, переименовав в sidebar-map.
Мы весь сайдбар сделаем частью компонента, включая заголовок. А значит, чтобы упростить работу редакторов необходимо вынести текст заголовка в параметры компонента.
Создадим в шаблоне компонента файл .parameters.php следующего содержания:
- RU (/bitrix/templates/whitesquare-bootstrap/components/bitrix/map.google.view/sidebar-map/lang/ru/.parameters.php):
- EN (/bitrix/templates/whitesquare-bootstrap/components/bitrix/map.google.view/sidebar-map/lang/en/.parameters.php):
Шаблон компонента в таком случае модифицируется совсем незначительно (поместим карту внутрь сайдбара и добавим заголовок):
Теперь можно поместить вызов компонента сайдбара в шаблон сайта (если он должен выводиться на всём сайте, а лишь в определённых разделах, то достаточно обернуть его во включаемую область):
Теперь пришла пора взяться за рабочую область!
Список членов команды
- Имя
- Фото (миниатюра)
- Должность
- Порядок относительно других членов команды
- Символьный код инфоблока – TEAM
- Символьный код свойства «Должность» — POSITION
Может показаться, что на этом этапе нам подойдёт компонент catalog.section с шаблоном board (этот шаблон генерирует таблицу с заданным количеством столбцов), однако в процессе эксплуатации такое решение весьма вероятно окажется сложнее. Поэтому мы всё же воспользуемся bitrix:news.list (скопировав шаблон .default в шаблон сайта под именем team-list) и допишем немного собственного кода.
Добавим в .parameters.php нашего шаблона новое значение:
Не забудем добавить значения в языковые файлы!
Теперь возьмёмся за шаблон компонента. Тут нам понадобится простенький счётчик, который будет закрывать строчные блоки row и ставить отступ для 2,3,4 и 5 блоков в одной строке.
Помимо счётчика нам понадобится вывести значение нашего свойства «Должность», для которого мы задали код POSITION. В массиве с данными, которые отдаёт компонент это свойство хранится в $arResult[«ITEMS»][«PROPERTIES»][«POSITION»][«VALUE»], поскольку мы будем выводить свойство в перебираемом по ITEMS элементам, то это будет выглядеть:
Сам шаблон тогда будет выглядеть так:
Мы не стали заморачиваться с выносом кода свойства в параметры, а так же с настройкой количества элементов в строке, чтобы не усложнять шаблон компонента.
Как видите, в нём практически ничего не осталось от первоначального шаблона списка новостей (и он гораздо легче громоздкого компонента каталога).
Не забудьте удалить ненужную более папку /bitrix/templates/whitesquare-bootstrap/images/team/ с картинками в шаблоне после перевода блока с персонами на инфоблок!
Текст страницы ABOUT
Поскольку у нас нет понимания какие функции выполняют остальные элементы страницы, должна ли появляться случайная цитата или, скажем, должны ли картинки вести в фотогалерею, мы пойдём по простому пути.
Весь контент останется статичным, мы лишь добавим несколько стилей, чтобы будущие редакторы могли работать со страницей с большим удобством.
Для этого воспользуемся файлом стилей сайта, приложенном к нашему шаблону /bitrix/templates/whitesquare-bootstrap/styles.css (или административным разделом):
Поскольку этот файл используется для применения CSS к контенту в том числе в визуальном редакторе, нам придётся «забыть» о каскадности CSS и прописать стили без учёта вложенности элементов.
Например, цитата станет выглядеть так:
Для того, чтобы редакторы могли сами применить этот стиль с помощью виз редактор необходимо добавить в файл .styles.php в корне шаблона массив стилей:
Или через инструмент редактирования шаблона (вкладка «стили сайта»):
Наводим марафет
С целью немного облегчить работу редакторов можно создать в шаблоне сайта папку /page_templates/, где будут находиться шаблоны страниц, которые можно создавать ан проекте по умолчанию.
Шаблон страницы представляет из себя обычный php файл, идентичный странице в публичной части.
Помимо шаблонов необходимо так же разместить файл .content.php с массивом всех возможных шаблонов страниц. В нашем случае это будет:
- /bitrix/templates/whitesquare-bootstrap/lang/ru/page_templates/.content.php
- /bitrix/templates/whitesquare-bootstrap/lang/ru/page_templates/.content.php
- Описание — description.php в корне шаблона
- Скриншот — screen.jpg в корне шаблона
Вот собственно и всё!
Мы натянули готовую HTML вёрстку Bootstrap на 1С-Битрикс, сверстали страницу и получили полноценный шаблон!
Послесловие
Статья получилась очень длинная, поэтому очень непросто вычитать все неточности и опечатки. Если вы нашли ошибку – напишите мне в личку, и я с удовольствием её исправлю!
Огромное спасибо Mirantus за оригинальную статью и готовую вёрстку, которую я смог взять за основу!
В качестве небольшого бонуса в GitHub проекте помимо собственно шаблона и страниц я разместил папку IMPORT_DATA, в которой содержится дамп демо-данных для единственного инфоблока с членами команды, фигурировавшего в статье. Вы можете импортировать его как XML на странице /bitrix/admin/iblock_xml_import.php?lang=ru
Читайте также: