Скрыть/вставить контент на лендинге

Разработка
1

Я создала пользовательскую домашнюю страницу следующим образом:
a) Добавила класс .custom-homepage на целевую страницу. Я использую его, чтобы просто адресовать контент, который хочу скрыть или изменить на этой конкретной странице, через мой пользовательский CSS.
b) Добавила любые новые компоненты прямо в файл head моего пользовательского HTML темы по умолчанию.

Вот как это выглядит:

<script type="text/discourse-plugin" version="0.8">
    
  api.registerConnectorClass("above-main-container", "custom-homepage", {

    setupComponent(args, component) {

     var topMenuRoutes = 
        component.siteSettings.top_menu.split('|')
        .map(function(route) {return '/' + route});
      
     // Первая страница, указанная в настройке 'top_menu', является вашей домашней страницей
 var homeRoute = topMenuRoutes[0];
  
     // Этот код вызывается при каждом изменении страницы
     api.onPageChange((url) => {

        // Проверяем, находимся ли мы на домашней странице
        if (url === "/" || url === homeRoute ){ 
          // Если это домашняя страница, добавляем класс 'custom-homepage' к тегу HTML
          // и устанавливаем 'displayCustomHomepage' в true
          
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          // Если мы не на домашней странице, удаляем класс
          // и устанавливаем `displayCustomHomepage` в false
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
      });
    }
    
  });

</script>


<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/custom-homepage">

  {{#if displayCustomHomepage}}
 

    
    <div class="custom-homepage-wrapper mask-polygon">

       <div class="custom-welcome-banner">
        
        <h1 class="welcome-header-text">Välkommen till Sveriges idéburna byggrörelse</h1>
        
        <p>Här kan du se färdiga och planerade projekt, hitta kunskap, få råd - och få kontakt med andra som bygger och bor ihop över hela landet.</p>
       </div>
       
    </div>
    
    {{whos-online}}
    
    {{search-menu}}

<div class="two-column-layout">

  <div>
   (Мой собственный код для изображения карты находится здесь, я вас не утруждаю)
  </div>
       	

  <WANTED DIV>
  (Здесь я хочу разместить свою ленту, возможно, что-то вроде {{categories-topic-  list topics=latest filter="latest" limit="10" … }})
  </WANTED DIV>

</div>
    
  {{/if}}
</script>

Пока всё хорошо. Страница выглядит так:

Screenshot 2025-06-09 at 11.38.11
Screenshot 2025-06-09 at 11.38.111920×1142 170 KB

Проблема в том, что я не имею никакого контроля над текущей лентой. Это просто лента по умолчанию, ширину и положение которой я примерно настроила в своем пользовательском CSS с помощью .custom-homepage + класс, чтобы освободить место для левой карты. Она, например, в настоящее время бесконечна. Мне нужно, чтобы она показывала только, скажем, последние 10 постов.

Мой вопрос:

  • Какой класс следует скрыть, чтобы скрыть текущую ленту?
  • Какой правильный синтаксис для добавления моих последних постов в мой собственный код вместо этого? Пожалуйста, посмотрите раздел ‘WANTED DIV’ в коде выше.

Живой сайт: https://bygg.boihop.co/

Большое спасибо за любую помощь по этому вопросу.

2

Я бы порекомендовал вам вместо этого использовать модификатор custom-homepage, чтобы добавить отдельный маршрут главной страницы на ваш сайт: Использование новой функции custom-homepage.

Затем вы сможете создать главную страницу, используя чистый модульный подход. Вы можете добавлять компоненты в код вашей темы. Или же вы можете попробовать такой компонент, как Homepage Blocks, и добавлять элементы через его редактор.

Вот два недавних примера сайтов, которые я создал с использованием маршрута custom homepage и блоков. Вы можете изучить код, чтобы увидеть итоговую структуру. Главная страница Zolidar также демонстрирует, как можно использовать контейнерные запросы и сеточную раскладку на главной странице, чтобы получить больший контроль над её дизайном.

3

Спасибо за этот совет! Выглядит отлично. Пока у меня не будет возможности это протестировать, вы не знаете, как в настройках ограничить количество постов в текущей ленте «Последнее»? Я никак не могу это найти.

4

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

5

Спасибо!