- Сообщения
- 5.543
- Реакции
- 512
- Баллы
- 383
- Я езжу на
- Кроссовере
как сделать бесконечную подгрузку новых анонсов на странице рекомендуемый контент без перехода на следующую страницу
Чтобы сделать бесконечную подгрузку (Infinite Scroll) анонсов на странице рекомендуемого контента, вам не нужно устанавливать тяжелые сторонние плагины. В XenForo 2.3 встроен мощный JavaScript-класс динамической подгрузки (xf-click="infinitescroll" или data-xf-init="infinite-scroll"), который работает на чистом JS без jQuery.
Движок XenForo умеет сам отправлять скрытый AJAX-запрос на следующую страницу пагинации, вытаскивать оттуда блоки с темами и бесшовно вставлять их в конец текущего списка, когда пользователь прокручивает страницу вниз.
Вот пошаговое руководство, как настроить это в шаблонах XenForo 2.3.
Шаг 1. Модификация контейнера списка (Шаблон featured_content_list)
Вам нужно зайти в шаблон, который отвечает за вывод списка рекомендуемого контента (обычно это featured_content_list или featured_threads_list в зависимости от того, встроенный это функционал или плагин), и добавить специальные HTML-атрибуты для JS-фильтра.
html
<div class="structItemContainer js-featuredContentContainer" data-xf-init="infinite-scroll" data-target=".js-featuredContentContainer" data-item-selector=".structItem">
<!- Здесь идет стандартный цикл xf:foreach, выводящий анонсы ->
</div>
Используйте код с осторожностью.
Разбор атрибутов:
Шаг 2. Адаптация блока пагинации (Кнопка «Показать еще» вместо страниц)
Бесконечной прокрутке XenForo обязательно нужны ссылки на следующие страницы, чтобы знать, откуда брать контент. Но мы можем скрыть стандартные кнопки страниц 1, 2, 3... и превратить их в одну кнопку «Показать еще» (или сделать подгрузку полностью автоматической при скролле).
Найдите блок постраничной навигации <xf😛agenav> в этом же шаблоне и оберните его в класс-триггер:
html
<div class="js-infiniteScrollTrigger u-hidden">
<xf😛agenav
page="{$page}"
perPage="{$perPage}"
total="{$total}"
link="featured"
wrapperclass="js-pageNavWrapper" />
</div>
Используйте код с осторожностью.
Добавление класса u-hidden скроет стандартные кнопки страниц от пользователей, но встроенный JS-скрипт XenForo продолжит видеть ссылку на «Следующую страницу» в коде и будет использовать её для AJAX-подгрузки.
Шаг 3. Если вы хотите сделать подгрузку по кнопке «Показать еще»
Если автоматический скролл вам не подходит (например, пользователи жалуются, что не могут докрутить страницу до футера сайта), можно вывести кнопку, которая будет подгружать анонсы по клику без перезагрузки:
Выведите кнопку сразу под контейнером анонсов:
html
<div class="block-footer js-infiniteScrollButtonContainer">
<span class="button button--link js-infiniteScrollButton" data-xf-click="infinite-scroll-click" data-target=".js-featuredContentContainer">
{{ phrase('show_more') }}
</span>
</div>
Используйте код с осторожностью.
Связь с прошлыми доработками (Важно!)
Так как на предыдущих шагах мы создавали модификации для очистки сниппетов (удаляли списки, схлопывали <br> до двух штук и увеличивали длину до 2000 символов), встроенный AJAX-запрос бесконечной прокрутки XenForo будет автоматически запрашивать следующую страницу.
Поскольку страница генерируется сервером «на лету», новые подгружаемые анонсы будут приходить уже идеально очищенными, с правильными отступами и нужной длины. Никаких дополнительных JS-скриптов для очистки писать не придется.
Если вы используете для рекомендуемого контента кастомный плагин (например, от AddonFlare или ThemeHouse) и не можете найти точные названия классов в шаблоне featured_content_list, пришлите код этого шаблона, и я заменю в нем классы на нужные триггеры для бесконечной ленты.
Чтобы сделать бесконечную подгрузку (Infinite Scroll) анонсов на странице рекомендуемого контента, вам не нужно устанавливать тяжелые сторонние плагины. В XenForo 2.3 встроен мощный JavaScript-класс динамической подгрузки (xf-click="infinitescroll" или data-xf-init="infinite-scroll"), который работает на чистом JS без jQuery.
Движок XenForo умеет сам отправлять скрытый AJAX-запрос на следующую страницу пагинации, вытаскивать оттуда блоки с темами и бесшовно вставлять их в конец текущего списка, когда пользователь прокручивает страницу вниз.
Вот пошаговое руководство, как настроить это в шаблонах XenForo 2.3.
Шаг 1. Модификация контейнера списка (Шаблон featured_content_list)
Вам нужно зайти в шаблон, который отвечает за вывод списка рекомендуемого контента (обычно это featured_content_list или featured_threads_list в зависимости от того, встроенный это функционал или плагин), и добавить специальные HTML-атрибуты для JS-фильтра.
- Перейдите в Панель управления XF → Внешний вид → Шаблоны (Appearance → Templates).
- Найдите шаблон featured_content_list.
- Найдите тег, который оборачивает список элементов (обычно это блок с классом structItemContainer или featuredItems-list).
- Добавьте к этому контейнеру уникальный ID и атрибут инициализации бесконечной прокрутки.
html
<div class="structItemContainer js-featuredContentContainer" data-xf-init="infinite-scroll" data-target=".js-featuredContentContainer" data-item-selector=".structItem">
<!- Здесь идет стандартный цикл xf:foreach, выводящий анонсы ->
</div>
Используйте код с осторожностью.
Разбор атрибутов:
- data-xf-init="infinite-scroll" - активирует встроенный обработчик бесконечной ленты XenForo 2.3.
- data-target=".js-featuredContentContainer" - указывает класс контейнера, в который нужно добавлять новые подгруженные анонсы.
- data-item-selector=".structItem" - указывает класс конкретного блока анонса (статьи), который нужно скопировать со следующей страницы.
Шаг 2. Адаптация блока пагинации (Кнопка «Показать еще» вместо страниц)
Бесконечной прокрутке XenForo обязательно нужны ссылки на следующие страницы, чтобы знать, откуда брать контент. Но мы можем скрыть стандартные кнопки страниц 1, 2, 3... и превратить их в одну кнопку «Показать еще» (или сделать подгрузку полностью автоматической при скролле).
Найдите блок постраничной навигации <xf😛agenav> в этом же шаблоне и оберните его в класс-триггер:
html
<div class="js-infiniteScrollTrigger u-hidden">
<xf😛agenav
page="{$page}"
perPage="{$perPage}"
total="{$total}"
link="featured"
wrapperclass="js-pageNavWrapper" />
</div>
Используйте код с осторожностью.
Добавление класса u-hidden скроет стандартные кнопки страниц от пользователей, но встроенный JS-скрипт XenForo продолжит видеть ссылку на «Следующую страницу» в коде и будет использовать её для AJAX-подгрузки.
Шаг 3. Если вы хотите сделать подгрузку по кнопке «Показать еще»
Если автоматический скролл вам не подходит (например, пользователи жалуются, что не могут докрутить страницу до футера сайта), можно вывести кнопку, которая будет подгружать анонсы по клику без перезагрузки:
Выведите кнопку сразу под контейнером анонсов:
html
<div class="block-footer js-infiniteScrollButtonContainer">
<span class="button button--link js-infiniteScrollButton" data-xf-click="infinite-scroll-click" data-target=".js-featuredContentContainer">
{{ phrase('show_more') }}
</span>
</div>
Используйте код с осторожностью.
Связь с прошлыми доработками (Важно!)
Так как на предыдущих шагах мы создавали модификации для очистки сниппетов (удаляли списки, схлопывали <br> до двух штук и увеличивали длину до 2000 символов), встроенный AJAX-запрос бесконечной прокрутки XenForo будет автоматически запрашивать следующую страницу.
Поскольку страница генерируется сервером «на лету», новые подгружаемые анонсы будут приходить уже идеально очищенными, с правильными отступами и нужной длины. Никаких дополнительных JS-скриптов для очистки писать не придется.
Если вы используете для рекомендуемого контента кастомный плагин (например, от AddonFlare или ThemeHouse) и не можете найти точные названия классов в шаблоне featured_content_list, пришлите код этого шаблона, и я заменю в нем классы на нужные триггеры для бесконечной ленты.
