Как сделать новостную ленту на сайте html

Обновлено: 02.07.2024

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

Создаем чанк с шаблоном для вывода новостной ленты

Надеюсь, вы еще не забыли, что код новостной ленты находится в чанке SIDEBAR, а сама лента будет располагаться в левой колонке на всех страницах, кроме Главной. Открываем чанк и изучаем его содержимое. Нас интересует контейнер

А блок, который находится в левом нижнем углу с названием Testimonials я не знаю к чему приспособить и решаю с ним расстаться. Копируем код, вставляем в чанк ditto_news и подставляем плэйсхолдеры Ditto:

Создаем шаблон для ресурса с новостями и TV-параметр

Теперь идем в Элементы >> Управление элементами >> TV-параметры и создаем параметр с именем news_img_small в заголовке пишем Картинка к новостям маленькая, в описании указываем размер 80px × 60px, тип вода указываем Image

Создаем папку для ресурсов с новостями и дочерние ресурсы

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

Создаем ленту новостей

В чанк SIDEBAR помещаем следующий вызов Ditto:

Но что делать, если новостей у нас будет слишком много? Давайте и здесь добавим постраничное разбиение. После всех изменений чанк SIDEBAR примет следующий вид:

1. Начинаем с создания двух столбцов

Создание столбцов при помощи CSS всегда влекло за собой определенные трудности. На протяжении длительного времени для выполнения данной задачи широко использовались (и используются) float’ы и / или таблицы, но каждый из этих методов имел (и имеет) свои недостатки.

В свою очередь, Flexbox упрощает этот процесс, обладая рядом таких преимуществ, как:

Давайте начнем работу с создания двух столбцов, один из которых будет занимать 2/3 ширины нашего контейнера, а еще один — 1/3 его часть.

Здесь присутствуют два элемента:

— контейнер columns;
— два дочерних элемента column, один из которых имеет дополнительный класс main-column, который мы используем позже для того, чтобы сделать столбец шире.

Поскольку main-column имеет значение flex равное 2, то этот столбец займет в два раза больше места, чем второй.

Добавим немного визуального оформления и, в итоге, получим:

Кликните для просмотра в действии

2. Делаем каждый столбец flexbox-контейнером

Каждый из двух столбцов будет содержать несколько вертикально расположенных статей, поэтому из этих двух элементов мы, в свою очередь, также должны сделать flexbox-контейнеры.

Итак, нам необходимо, чтобы статьи:

— располагались вертикально внутри столбца-контейнера;
— занимали все доступное место.

Правило flex-direction: column, указанное для контейнера, вместе с правилом flex: 1, указанным для дочернего элемента, позволяет статье заполнить все свободное место по вертикали, при этом высота первых двух столбцов останется неизменной.

Кликните для просмотра в действии

3. Делаем контейнер из статьи

Теперь, чтобы еще больше расширить наши возможности, давайте представим каждую статью в виде 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 только тогда, когда в этом будет необходимость.

Вот и все! На экранах с маленьким разрешением все статьи будут располагаться друг над другом, а на экранах с разрешением свыше 800 пикселей — в два столбца.

7. Добавляем завершающие штрихи

Для того, чтобы лейаут выглядел более привлекательно на больших экранах, давайте добавим кое-какие CSS-твики:

Содержимое первой статьи выровнено по горизонтали: текст расположен по левой стороне, а картинка — по правой. Также, главный столбец теперь стал шире (75%). То же самое касается и вложенного столбца (66%).

А вот и финальный результат!

Кликните для просмотра в действии

Вывод

Теперь вы и сами видите, что использовать Flexbox в своих проектах можно даже не вникая во все его тонкости, и созданный лейаут — наглядный тому пример. По крайней мере, автор очень надеется на это.

Вы можете вывести на своем сайте ленту статей со стороннего новостного ресурса.

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

Для этого Вам необходимо будет получить адрес RSS-канала нужной Вам ленты новостей и следовать инструкции.

Шаг 1

Затем перейдите на сайт https://www.rssdog.com/ и вставьте в поле "URL RSS канала" скопированный адрес.

Шаг 2

При необходимости Вы можете задать дополнительные настройки. Мы перечислим основные из доступных:

Find and display only items containing keyword - тут Вы можете перечислить ключевые слова, по которым публикации должны попадать в ленту.
Max items - максимальное количество публикаций в ленте (0 - выводятся все).
Descriptions - выберите "Show", если хотите, чтобы в ленте выводились описания статей. Выберите "Hide", если хотите, чтобы выводились только заголовки без описаний.
Limit description to - укажите количество символов, выводимых в описании к статье в ленте (0 - описание выводится целиком).
Table width - задайте ширину блока с лентой.
Show Publish Date - отметьте галочку, если хотите, чтобы в ленте выводились даты публикации статей.

Прочие параметры задайте на свое усмотрение или оставьте значения по умолчанию.

Обратите внимание!

В блоке "Colors" Вы можете задать цвета для таблицы rss-ленты (границ, фонов и текста).

Шаг 3

После того как Вы введете адрес канала и зададите настройки, нажмите кнопку "Make The Code".

Шаг 4

В блоке "Using it" (отобразится под настройками) скопируйте значение из поля с HTML-кодом.

Шаг 5

Далее перейдите в систему управления.

Шаг 6

Затем перейдите к редактированию текста страницы на вкладке "Содержимое".

Обратите внимание!

Если Вы планируете разместить ленту в общих блоках страницы (т.е. лента в этом случае будет отображаться на всех страницах сайта) - перейдите к вкладке "Общие блоки", выберите нужный блок и перейдите к редактированию его содержимого.

Шаг 7

И в рабочей области открывшегося текстового редактора нажмите на кнопку редактирования HTML-кода.

Шаг 8

Теперь вставьте скопированный ранее код в HTML-код страницы и сохраните изменения.

После серии статей о том, что такое RSS, у многих владельцев сайтов, у которых нет RSS (а таких не так уж и мало, как могут думать некоторые), может возникнуть желание заполучить его себе:-) В этой статье я хочу перечислить способы организации RSS-канала для своего сайта. Начиная с самых простых способов и заканчивая сложными.

Использование сторонних сервисов (блогов)

То есть идея в том, что где бы вы не содержали свой сайт, вы можете параллельно поддерживать на другом сайте (сервисе, о них чуть позже) актуальную новостную ленту. На своем же сайте вы можете указать ссылку на RSS-документ, которой смогут воспользоваться посетители, желающие следить за вашими новостями.

Использование сервисов генерации RSS из обычных страниц

Этот способ так же не требует навыков программирования и подходит в первую очередь людям, которые имеют свой сайт и имеют на нем некую страницу новостей, которые они могут обновлять тем или иным способом, но, тем не менее, не имеют на этом сайте RSS-канала.

Создание RSS-документа вручную

Если по каким-либо причинам вы не хотите, чтоб RSS-документ обитал вне вашего сайта, и при этом вы не программист, остается еще один способ: создавать и обновлять этот документ у себя на сайте вручную (здесь уже понадобится опыт работы с html). В случае использования хостинга без поддержки скриптов и при не слишком частом появлении новостей (иначе вся эта затея будет очень утомительной), это вполне востребованный вариант.

Для создания и редактирования такого файла лучше всего использовать редактор Notepad++ или любой другой редактор, поддерживающий работу с кодировкой UTF-8 (без BOM). Документ должен быть в кодировке UTF-8 (без BOM). Вот пример того, как может выглядеть RSS-документ внутри (пример снабжен комментариями):

Автоматическая генерация RSS-документа на своем сервере

Этот способ подходит уже только для более искушенных веб-программированием людей. Если информация на сайте хранится в базе данных, а сами страницы являются серверными скриптами (а ля PHP), тогда становится возможным использовать самый автономный и не обременяющий в дальнейшем способ – создавать в автоматическом режиме RSS-документ при запросе оного пользователями. Описывать, как создать подобный скрипт, не имеет смысла, так как уже есть достаточно статей на эту тему с готовыми примерами и разъяснениям к ним. Вот одни из них (для языка PHP): ссылка 1, ссылка 2, ссылка 3, ссылка 4, ссылка 5.

Скромный посредник — Feedburner

Эта схема поможет придать больше наглядности вышеописанному:

О настройках feedburner можно прочесть здесь. А так же здесь, здесь и здесь.

Читайте также: