Nascondere/inserire contenuti nella landing page

[OsaIsacson]

Ho creato una homepage personalizzata in questo modo:
a) aggiungendo la classe .custom-homepage alla pagina di destinazione. La uso per selezionare semplicemente il contenuto che voglio nascondere/modificare in quella pagina specifica tramite il mio CSS personalizzato.
b) aggiungendo nuovi componenti direttamente nel file head del mio tema predefinito, HTML personalizzato.

Ecco come appare:

<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});
      
     // La prima pagina elencata nell'impostazione 'top_menu' è la tua homepage
 var homeRoute = topMenuRoutes[0];
  
     // Questo chiama il nostro codice ogni volta che la pagina cambia
     api.onPageChange((url) => {

        // Controlla se siamo sulla homepage 
        if (url === "/" || url === homeRoute ){ 
          // Se è la homepage aggiunge la classe 'custom-homepage' al tag HTML
          // e imposta 'displayCustomHomepage' su true
          
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          // Se non siamo sulla homepage rimuove la classe
          // e imposta `displayCustomHomepage` su 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>
   (Il mio codice per l'immagine della mappa è qui, vi risparmio)
  </div>
       	

  <WANTED DIV>
  (Questo è dove voglio mettere il mio feed, forse qualcosa come {{categories-topic- list topics=latest filter=“latest” limit=“10” … }})
  </WANTED DIV>

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

Fin qui tutto bene. La pagina appare così:

Il problema è che non ho alcun controllo sul feed attuale. È semplicemente il feed predefinito che ho approssimativamente adattato in larghezza e posizione nel mio CSS personalizzato con .custom-homepage + classe per fare spazio alla mappa a sinistra. È, ad esempio, attualmente infinito. Ho bisogno che mostri solo, diciamo, gli ultimi 10 post.

La mia domanda è:

• Quale classe devo nascondere per nascondere il feed attuale?
• Qual è la sintassi corretta per aggiungere invece i miei ultimi post nel mio codice? Si prega di vedere la sezione ‘WANTED DIV’ nel codice sopra.

Sito live: https://bygg.boihop.co/

Grazie mille per qualsiasi aiuto su questo.

[manuel (Manuel Kostka)]

Ti consiglierei piuttosto di utilizzare il modificatore custom-homepage per aggiungere un percorso dedicato alla home page alla tua pagina: Utilizzo della nuova funzionalità custom-homepage.

Quindi puoi costruire la tua home page con un approccio modulare pulito. Puoi aggiungere componenti nel codice del tuo tema. Oppure potresti provare un componente come Homepage Blocks e aggiungere componenti tramite il suo editor.

Ecco due esempi recenti di siti che ho costruito con il percorso della home page personalizzato e i blocchi. Potresti ispezionare il codice per vedere la struttura risultante. La home page di Zolidar fornisce anche un esempio di come puoi utilizzare le container queries e un layout a griglia sulla home page, in modo da avere un maggiore controllo sul layout della tua home page.

ScyllaDB Community NoSQL Forum

Zolidar Forum

[OsaIsacson]

Grazie per questo consiglio! Sembra fantastico. Fino a quando non avrò avuto la possibilità di provarlo, conosci un modo per limitare nelle impostazioni il numero di post che il feed ‘più recenti’ corrente ha? Non riesco proprio a trovarlo.

[manuel (Manuel Kostka)]

Gli elenchi di argomenti sono generalmente elenchi infiniti che si estendono quando si scorre fino in fondo. Non sono sicuro di quale sarebbe la soluzione più semplice… Probabilmente nasconderei l’elenco predefinito sulla homepage e utilizzerei un componente come Elenchi in primo piano. Quindi hai il controllo sulla lunghezza dell’elenco, ecc. senza interferire con il comportamento dell’elenco predefinito.

[OsaIsacson]

Grazie!