Hide/insert content on landing page

Dev
1

I have made a custom homepage by:
a) adding the class .custom-homepage to the landing page. I use this to simply target the content I want to hide/adjust on that specific page via my custom css.
b) add any new components straight in the head file of my default theme custom html.

This is what it looks like:

<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});
      
     // The first page listed in the 'top_menu' setting is your homepage
 var homeRoute = topMenuRoutes[0];
  
     // This calls our code whenever the page changes
     api.onPageChange((url) => {

        // Check if we're on the homepage 
        if (url === "/" || url === homeRoute ){ 
          // If it's the homepage add the 'custom-homepage' class to HTML tag
          // and set 'displayCustomHomepage' to true
          
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          // If we're not on the homepage remove the class
          // and set `displayCustomHomepage` to 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>
   (My own code for the map image is here, I'll spare you)
  </div>
       	

  <WANTED DIV>
  (This is where I want to put my feed, perhaps something like {{categories-topic-  list topics=latest filter=“latest” limit=“10” 
 }})
  </WANTED DIV>

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

So far so good. The page looks like this:

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

The problem is that I don’t have any control of the current feed. It is simply the default feed that I’ve roughly targeted the width and position of in my custom css with .custom-homepage + class to make room for the left hand map. It is, for example, currently infinite. I need it to only show say the latest 10 posts.

My question is:

  • Which class should I hide in order to hide the current feed?
  • What is the correct syntax for adding my latest posts in my own code instead? Please see the ‘WANTED DIV’ section in the code above.

Live site: https://bygg.boihop.co/

Many thanks for any help on this.

2

I’d recommend you rather use the custom-homepage modifier to add a dedicated homepage route to your page: Using the new custom-homepage feature.

Then you can build out your homepage in a clean modular approach. You can add components in your theme code. Or you could try a component like Homepage Blocks and add components through its editor.

Here’s two recent examples of sites I built with the custom homepage route and blocks. You could inspect the code to see the resulting structure. The Zolidar homepage also gives an example of how you can make use of container queries and a grid layout on the homepage, so you have better control over your homepage layout.

3 Likes
3

Thank you for this tip! It looks great. Until I’ve had the chance to test it out, do you know of a way to in the settings limit how many posts the current ‘latest’ feed have? I cannot for the life of me find it.

4

Topic lists are generally endless lists that extend when you scroll to the bottom. I’m not sure what the easiest fix would be.. I’d likely just hide the default list on the homepage and use a component like Featured Lists. Then you have control over the list length etc without messing with the default list behavior.

3 Likes
5

Thank you!