Верстаем новостной сайт с помощью Flexbox
Поверьте, нет никакой необходимости в детальном разборе всех аспектов работы с Flexbox, если вы хотите начать им пользоваться уже сейчас. В этом руководстве автор собирается познакомить вас с некоторыми свойствами Flexbox и сделать «новостной лейаут» наподобие того, который вы могли видеть на сайте The Guardian.
Причина, по которой автор использует Flexbox – это большое количество возможностей, которые он предоставляет:
— легкость в создании адаптивных столбцов;
— создание столбцов одинаковой высоты;
— возможность прижатия содержимого к низу контейнера.
1. Начинаем с создания двух столбцов
Создание столбцов при помощи CSS всегда влекло за собой определенные трудности. На протяжении длительного времени для выполнения данной задачи широко использовались (и используются) float’ы и / или таблицы, но каждый из этих методов имел (и имеет) свои недостатки.
В свою очередь, Flexbox упрощает этот процесс, обладая рядом таких преимуществ, как:
— написание более «чистого» кода: от нас лишь требуется создать контейнер с правилом display: flex;
— гибкость: мы можем изменять размер, растягивать и выравнивать столбцы путем изменения пары строк CSS;
— семантическая разметка;
— кроме того, с использованием Flexbox отпадает необходимость отменять обтекание во избежание непредсказуемого поведения лейаута.
Давайте начнем работу с создания двух столбцов, один из которых будет занимать 2/3 ширины нашего контейнера, а еще один — 1/3 его часть.
Здесь присутствуют два элемента:
— контейнер columns;
— два дочерних элемента column, один из которых имеет дополнительный класс main-column, который мы используем позже для того, чтобы сделать столбец шире.
Поскольку main-column имеет значение flex равное 2, то этот столбец займет в два раза больше места, чем второй.
Добавим немного визуального оформления и, в итоге, получим:
Кликните для просмотра в действии
2. Делаем каждый столбец flexbox-контейнером
Каждый из двух столбцов будет содержать несколько вертикально расположенных статей, поэтому из этих двух элементов мы, в свою очередь, также должны сделать flexbox-контейнеры.
Итак, нам необходимо, чтобы статьи:
— располагались вертикально внутри столбца-контейнера;
— занимали все доступное место.
Правило flex-direction: column, указанное для контейнера, вместе с правилом flex: 1, указанным для дочернего элемента, позволяет статье заполнить все свободное место по вертикали, при этом высота первых двух столбцов останется неизменной.
Кликните для просмотра в действии
3. Делаем контейнер из статьи
Теперь, чтобы еще больше расширить наши возможности, давайте представим каждую статью в виде flexbox-контейнера. Каждый такой контейнер будет содержать:
— заголовок;
— параграф;
— информационную панель с именем автора и количеством комментариев;
— какую-нибудь адаптивную картинку.
Здесь мы используем Flexbox для того, чтобы «прижать» информационную панель к низу элемента. Вот, посмотрите, какой результат мы ожидаем получить.
А вот и сам код:
Элементы внутри статьи расположены вертикально благодаря использованию правила flex-direction: column.
Также мы применили свойство flex: 1 к элементу article-content, тем самым растянув его на все свободное место и прижав article-info к низу. Высота столбцов в этом случае не имеет значения.
Кликните для просмотра в действии
4. Добавляем несколько вложенных столбцов
На самом деле, нам нужно, чтобы левый столбец включал в себя еще несколько столбцов. Поэтому нам необходимо заменить второй элемент, отвечающий за статью, контейнером columns, который мы использовали ранее.
Поскольку мы хотим, чтобы первый вложенный столбец был шире, добавим к элементу класс nested-column, а в CSS укажем:
Теперь этот столбец будет вдвое шире второго.
Кликните для просмотра в действии
5. Делаем первую статью с горизонтальным лейаутом
Первая статья у нас на самом деле большая. Дабы эффективно использовать место на экране монитора, давайте изменим ее ориентацию на горизонтальную.
Свойство order в данном случае играет большую роль, поскольку оно позволяет изменять очередность HTML-элементов без изменения HTML-разметки. В действительности, article-image в коде идет перед элементом article-body, но ведет себя так, будто стоит после него.
Кликните для просмотра в действии
6. Делаем адаптивный лейаут
Теперь все выглядит так, как мы хотели, хотя и немного сплющено. Давайте исправим это, добавив нашему лейауту гибкости.
Одной из замечательных вещей в Flexbox является то, что достаточно удалить правило display: flex в контейнере для того, чтобы полостью отключить его (Flexbox), в то время, как остальные его свойства (такие, как align-items или flex) останутся рабочими.
В результате, мы можем активировать адаптивный лейаут, задействовав Flexbox только тогда, когда в этом будет необходимость.
Итак, мы собираемся удалить display: flex из селекторов .columns и .column, вместо этого «запаковав» их в медиа-запрос:
Вот и все! На экранах с маленьким разрешением все статьи будут располагаться друг над другом, а на экранах с разрешением свыше 800 пикселей — в два столбца.
7. Добавляем завершающие штрихи
Для того, чтобы лейаут выглядел более привлекательно на больших экранах, давайте добавим кое-какие CSS-твики:
Содержимое первой статьи выровнено по горизонтали: текст расположен по левой стороне, а картинка — по правой. Также, главный столбец теперь стал шире (75%). То же самое касается и вложенного столбца (66%).
А вот и финальный результат!
Кликните для просмотра в действии
Как добавить RSS ленту на сайт
Имеющаяся на сайте RSS-лента даёт возможность оперативно транслировать новости и обновления читателям. Формат этот несколько устаревший, но аудитория пользователей всё ещё большая. Возможность организации RSS-лент заложена во многие популярные движки, такие как WordPress, Joomla, Drupal и многие другие. Где-то эта возможность является штатной, а где-то реализуется с помощью плагинов. Рассматривать процесс установки плагинов не имеет особого смысла, поэтому мы попробуем разобраться, как организовать RSS-ленту своими силами, не используя плагины.
RSS-лента для статического сайта на html
Для начала мы рассмотрим ручной способ, позволяющий реализовать трансляцию новостей на любом сайте, даже на статичном, построенном на голых html-страницах. Данный функционал будем создавать с помощью простого кода, который размещается в файле rss.xml в корне сайта:
При необходимости, в данном коде можно указать язык ленты, что необходимо при её регистрации в некоторых каталогах RSS-лент, а также добавить дополнительные элементы.
Представленный код обновляется в ручном режиме. То есть, для внесения изменений необходимо открыть файл rss.xml и вписать в него новые данные. Нужно несколько новостей? Тогда редактируемый файл с лентой должен содержать в себе несколько конструкций следующего вида:
Каждая такая конструкция – это отдельная новость, которая располагается между тегами item. По мере добавления новостей, старые записи можно удалять. Количество записей может быть любым, но прописывать больше 10 последних новостей не стоит – вряд ли кому-то понадобятся устаревшие записи.
Автоматизируем создание RSS-ленты
Предположим, что наш сайт создан на самописной CMS, либо на CMS, у которой RSS-лента отсутствует. В этом случае необходимо разобраться в структуре базы MySql, используемой для хранения данных, и выяснить, как производится хранение данных о заголовках страниц, их адресах и содержимом страниц с новостями. Разобравшись со структурой базы, необходимо несколько модернизировать файл с RSS-лентой. Для начала, дадим ему другое расширение, чтобы в нём мог исполняться php-код, необходимый для работы с базой MySql. В противном случае наша RSS-лента не заработает. Необходимо переработать и внутреннее содержимое файла:
- Реализуем подключение к базе данных;
- Делаем выборку нужных данных, установив ограничение на 10 последних записей;
- Выводим в цикле содержимое полученных переменных;
С первым пунктом всё понятно – нам нужно выполнить подключение к базе данных для забора оттуда информации. Второй пункт тоже понятен – нам нужно получить 10 дат, 10 id ссылок на страницы с новостями, 10 заголовков новостей и 10 тел новостей. В третьем тексте мы последовательно выводим всё то, что мы публиковали между тегами item в ручном формате нашей RSS-ленты. Таким образом, разобравшись в структуре базы данных, мы можем организовать RSS-ленту для любого ресурса. Такой подход хорош тем, что мы не касаемся исходного кода CMS и не создаём дополнительных нагрузок на хостинг – этим грешат некоторые плагины, нагружающие сайты километрами ненужного кода. Кроме того, наша методика позволит избавиться от возможных ошибок в функциональности действующего сайта на этапе внедрения RSS-ленты. Максимум, что может произойти, так это получение не тех данных, что нужны для формирования ленты на нашем сайте.
Теперь рассмотрим сам код:
Первые строки данного кода схожи с вышеописанным ручным кодом и содержат в себе общую информацию о нашей новостной ленте – это название, описание и полный адрес ленты. Даты последнего обновления ленты нет, но её можно реализовать, модернизировав исходный код. Далее производится выборка необходимых данных из MySql-базы и запускается цикл формирования RSS-ленты.
С датой новости, её текстом и заголовком всё понятно – они выводятся из переменных $title , $text и $date . Что касается ссылки на полную новость, то здесь берётся её id, после чего мы можем сформировать полную ссылку, опираясь на структуру формирования ссылок на нашем сайте. Например, ссылки могут иметь вид http://site.ru/news.php?id=48 . Здесь мы описываем лишь общий принцип формирования ссылок, поэтому при практической реализации в вышеуказанный код необходимо внести соответствующие изменения.
Как только формирование файла rss.php будет готово, мы можем заливать его на хостинг и приступать к тестированию.
Полезные советы
Заходя на некоторые сайты, мы можем видеть в адресной строке браузера прямую ссылку на RSS-ленту этих сайтов. Для того чтобы не отставать от моды, проведём ещё одну модернизацию нашего сайта и добавим в него всего одну строчку кода:
RSS-ленты: как настроить, чтобы читать все в одном месте
RSS (англ. Rich Site Summary – обогащённая сводка сайта) – это группа файлов в формате xml, которые нужны для описания информации (анонсов статей, лент новостей, изменений в блогах и т. п)
В различных версиях сокращение RSS имело различные расшифровки:
Rich Site Summary (RSS 0.9x) – обогащённая сводка сайта;
RDF Site Summary (RSS 0.9 и 1.0) – сводка сайта с применением инфраструктуры описания ресурсов;
Really Simple Syndication (RSS 2.x) – очень простое распространение.
Документ в формате RSS могут называть по-разному, например: RSS-каналом, RSS-лентой или RSS-фидом, RSS-новостью и т. д.
Можно выделить следующие преимущества RSS-лент:
- Благодаря RSS-ленте пользователи могут смотреть обновления и новости с разных сайтов, на которые подписаны в одном месте.
- Вы быстро получаете информацию о новых публикациях.
- С помощью RSS можно увеличить количество пользователей на сайте.
- Также для пользователей, которые используют мобильный интернет, RSS – это экономия трафика.
Также можно выделить и самый главный минус RSS – информация становится легкодоступной для копирования.
RSS-лента сайта: каким сайтам стоит настроить?
RSS полезно иметь тем сайтам, у которых часто появляется новый контент, например, такой как: статьи в блоге, новости, подкасты т.п.
Применение у RSS различное:
- Например, RSS-лента нужна, для добавления сайта в Яндекс.Дзен. Подробнее об этом вы можете прочитать в нашей статье.
- Кроме того, с помощью RSS можно подключить турбо-страницы к сайту. За подробностями сюда.
- Мы подключили RSS-ленту, когда начали создавать подкасты и добавлять их на сторонние площадки.
Чтение RSS-ленты: какие приложения нужны
Читать RSS-каналы можно с помощью программ агрегаторов (программа/приложение/расширение для автоматического сбора обновлений ленты).
Newsflow
Это программа для чтения новостей для смартфонов, планшетов и компьютеров с windows 10. Через нее можно читать форматы: RSS, ATOM, RDF. Приобрести программу можно на сайте.
- Синхронизация с Feedly.
- Если функция отложить материал, чтоб прочитать потом.
- Добавление материала в избранное.
- Поддержка видео.
- Импорт и экспорт ленты новостей в формате OPML.
В целом пользоваться программой можно бесплатно, но за дополнительные функции придется заплатить.
Новостной агрегатор (его используют как альтернативу GoogleReader). Ленту можно читать на ПК через браузер и на смартфонах через мобильное приложение (есть для iOSи Android).
Зайти в Feedly легко – достаточно использовать можно любой аккаунт: Google, Facebook, Twitter, Apple, Microsoft, Evernote.
Чтобы подписаться на канал и читать его, просто добавьте в строку поиска ссылку на нужный блог и, когда он найдется, нажмите кнопку «подписаться» (Follow).
Затем нажмите «Новый фид» (Newfeed).
Готово, вы подписались.
Вы можете подписаться на несколько каналов и просматривать статьи по мере их появления. Также вы можете просматривать статьи либо одного выбранного сайта, либо статьи всех сайтов, на которые вы подписаны сразу.
- Добавление материала на доску (в избранное).
- Возможность отложить материал, чтоб прочитать потом.
- Пометка материал как прочитанного с возможностью скрытия в ленте.
- Сохранение материала в evernote.
Еще один новостной агрегатор. Рассмотрим его с точки зрения расширения для браузера. Настраивать будем в Google Chrome.
Перейдем в магазин chrome и скачаем расширение для браузера.
Теперь можно добавлять фиды.
Нажимаем Click here to addfeeds. Далее нас перенесет на сайт feeder.co – в строке поиска добавляем сайт, за статьями и новостями которого мы хотим следить.
Далее нажимаем на кнопку следить Follow.
Во всплывающем окне выбираем настройки. Вуаля – вы подписались на канал.
Теперь мы можем добавить еще множество каналов, за которыми хотим следить.
Все каналы, на которые мы подпишемся, в дальнейшем будут отображаться слева. А сама лента новостей справа. Здесь, как и во многих RSS-агрегаторах можно, просматривать новости как отдельно одного канала, так и всех сразу.
- Отметка публикации как не прочитанной.
- Добавление материала в избранное.
- Из остальных настройках можно менять цвет фона, на котором отображаются материалы ленты. Также можно включить компактный режим ленты.
Что касается расширения в браузере, то там будут отображаться названия фидов.
При нажатии на нужный фид будет открываться список статей в хронологическом порядке.
Так очень удобно отслеживать появление новых статей на определенном сайте.
Подписываясь на RSS-каналы всех интересных сайтов, пользователь сможет смотреть анонсы всех статей в хронологическом порядке и переходить только к тем, которые ему интересны. Так читатель сможет сформировать собственную ленту новостей всех сайтов, которые читает.
Как добавить RSS-ленту на сайт
С чтением все более-менее понятно. Сложности начинаются при настройке RSS-ленты для своего сайта. Давайте разберем на примере двух популярных CMS – WordPress и Bitrix.
Настройка RSS-ленты на WordPress
По умолчанию в wordpress доступно уже несколько rss-каналов.
Чтобы посмотреть ленту записей (в хронологическом порядке), надо в браузере в адресной строке ввести:
Чтобы посмотреть последние комментарии, то в браузере следует ввести:
Стандартных настроек немного, но, чтобы их посмотреть, необходимо зайти в настройки -> чтение.
Если хотите вносить какие-либо правки в RSS, рекомендуем воспользоваться плагинами.
- Ozh’ BetterFeed
- Яндекс.Дзен (нужен, чтобы создать ленту для Яндекс.Дзен в соответствии с техническими правилами),
- Яндекс.Турбо (необходим, чтобы создать ленту для Яндекс.Турбо в соответствии с техническими правилами),
- FeedWordPress
Для CMS WordPress в принципе существует немало плагинов для этих целей, поэтому с настройкой RSS-ленты никаких проблем не будет.
Настройка RSS-ленты на Bitrix
В CMS Битрикс тоже можно настроить RSS как с использованием плагинов, так и без них.
Чтобы настроить RSS стандартными способами, необходимо в админ панели перейти в Контент -> Инфоблоки -> Типы инфоблоков и выбрать тот инфоблок, который будет участвовать в формировании RSS.
Далее нажимаем «Изменить» и во вкладке «Дополнительно» смотрим, чтобы стояла галка в поле «Использовать экспорт в RSS». Если не стоит, то следует поставить.
Затем в адресной строке добавляем следующее:
Чтобы получить доступ к RSS-файлу, необходимо выполнить запрос к скрипту /bitrix/rss.php с параметрами ID, LANG, TYPE и LIMIT.
Что обозначают эти параметры?
ID – это ID инфоблока или символьный код инфоблока;
LANG – сайт инфоблока;
TYPE – тип инфоблока;
LIMIT – количество элементов, которые следует отображать.
Но, как и в случае с WordPress, тут нет большого количества настроек для фида. Чтобы получить доступ к настройкам фида, можно воспользоваться плагинами для создания и настройки RSS:
- Яндекс.Дзен RSS – PRO,
- RSS PRO – Гибкость и простота,
- Яндекс Турбо-страницы PRO.
Создание RSS с помощью сторонних сервисов
Если у вас на сайте нельзя создать RSS с помощью стандартных средств, плагинов или модулей, рекомендуем попробовать создать его с помощью сторонних сервисов. Например:
Настройка ленты RSS с помощью Feed43
Попробуем сформировать наш фид с помощью feed43.com.
В сервисе можно сделать фид как с регистрацией, так и без создания аккаунта. Продолжим без регистрации.
Нажмем на кнопку «Создайте свой первый RSS-канал». Далее в поле адрес укажем ссылку на страницу, фид которой нам надо сделать:
Далее нажимаем кнопку «Обновить», и у нас отображается исходный код страницы (Шаг 1).
Далее необходимо задать правила извлечения данных (Шаг 2).
После того, как мы зададим правила извлечения, нажимаем кнопку «Извлечь»:
Затем следует задать шаблоны заголовка новости, ссылки на новость и шаблон тела новости (Шаг 3). Как зададим эти данные, нажимаем «Посмотреть».
На этом все. Теперь у нас есть две ссылки – одна на канал, другая на редактор:
Далее рассмотрим сервис feedfry.com.
Настройка ленты RSS с помощью Feedfry
В нем не надо регистрироваться, более того, при переходе на главную страницу сервиса у нас сразу же доступна форма, через которую можно создать rss-ленту.
В поле url страницы вводим адрес страницы и нажимаем «Создать ленту».
После чего у нас открывается страница предпросмотра с несколькими вариантами записи.
Выберем основной вариант и нажмем «Создать ленту из этого варианта».
Нас перебрасывает на страницу ленты. На ней можно открыть rss файл (код), поделиться лентой, сменить вариант отображения ленты, посмотреть саму ленту и открыть исходную страницу. Также на данной странице есть возможность задать название ленты.
Сама лента будет выглядеть так:
Делать RSS-фид через такие сервисы очень просто. Большинство сервисов бесплатные, и, чтобы сгенерировать RSS-ленту нужна только ссылка на сайт.
Правда у некоторых бесплатных сервисов может быть ограничение на количество записей в ленте. Также многие сервисы позволяют преобразовывать уже существующие ленты.
Настройка ленты с помощью FeedBurner
FeedBurner – веб-сервис, который пропускает через себя RSS-ленту, исправляет в ней мелкие ошибки и может добавить ленте дополнительный функционал.
Для начала давайте выделим некоторые возможности сервиса FeedBurner:
- умеет работать с подкастами (с видеоформатом тоже),
- можно включать контекстную рекламу,
- сервис собирает статистическую информацию лент (информацию о количестве подписчиков, информацию об активности подписчиков),
- можно защищать RSS-поток паролем,
- можно добавить форму email-подписки на обновления RSS-потока сайта,
Для использования FeedBurner следует перейти на сайт feedburner.google.com, залогиниться в аккаунте Google.
После этого появится форма, в которую нужно ввести адрес блога или фида и нажать кнопку Next.
Далее, если вы ввели верный адрес сайта, то на экране появится сообщение, что адрес блога или фида был проверен. Ниже будет два поля с настройками: в одном можно изменить название фида, а в другом изменить адрес фида.
Затем на экране появляется адрес фида. Вы можете скопировать его и добавить к себе на сайт.
На следующем шаге вам будут предлагать приобрести TotalStatusPRO. С помощью него вы сможете просматривать популярность отдельных публикаций и отслеживать охват.
В итоге 4 вкладки настроек с забавными названиями:
- анализируй,
- оптимизируй,
- публикуй,
- решай проблемы.
На вкладке «Анализируй» будет отображаться статистическая информация (количество подписчиков и даже браузеры, с которых они заходили).
На вкладке «Оптимизируй» можно посмотреть, как будет выглядеть фид. Доступны опции изменения внешнего вида и контента. Также можно будет использовать настройки по упрощению подписки, настроить подкастинг и iTunes, и т. д.
На вкладке «Публикуй» можно разместить форму подписки на сайте, создать циклический баннер, который будет показывать пять самых последних записей из фида.
Кроме того, есть возможность подключить канал к социальной сети в реальном времени, т.е. автоматически публиковать обновления из ленты в учетной записи.
Также можно поместить html-иконку в шаблон сайта, чтобы облегчить подписку на фид, и защитить фид паролем либо запретить его вообще от индексации.
На вкладке «Решай проблемы» можно посмотреть проблемы и способы их решения.
В принципе в интерфейсе FeedBurner все интуитивно понятно, и в бесплатной версии доступно большое количество настроек.
Краткий обзор сервисов по чтению RSS
Название
Возможности
Цена
Newsflow
Синхронизация с Feedly.
Если функция отложить материал, чтоб прочитать потом.
Добавление материала в избранное.
Импорт и экспорт ленты новостей в формате OPML.
Бесплатное, но за отдельные функции придется доплачивать
Feedly
Добавление материала на доску (в избранное).
Возможность отложить материал, чтоб прочитать потом.
Пометка материал как прочитанного с возможностью скрытия в ленте.
Сохранение материала в evernote.
Бесплатное, но за отдельные функции придется доплачивать
RSSFeedReader
Отметка публикации как не прочитанной.
Добавление материала в избранное.
Из остальных настройках можно менять цвет фона, на котором отображаются материалы ленты. Также можно включить компактный режим ленты.
Бесплатное, но за некоторые функции придется доплачивать
Вывод
Как мы видим, настройка RSS-канала доступна на любом сайте – как с помощью внутренних инструментов, так и с помощью сторонних сервисов.
Просматривать ленту можно с различных устройств: с мобильных и с ПК. Для этого существует множество агрегаторов – как платных, так и бесплатных.
Если вы решили настроить RSS-ленту или канал, но сомневаетесь в своих компетенциях – обращайтесь к нам, мы обязательно поможем!