Add custom content that only appears on your homepage

A very common situation you’ll find yourself in as a theme developer is the need to create content that only shows on the homepage of your community.

You might add some HTML to the “After Header” section of your theme, which will then appear on every page. You can jump through some hoops in CSS to hide this everywhere except the homepage… but instead let’s use a Discourse theme to create a component with content that is only visible on your homepage.

If you’re unfamiliar with Discourse themes check out Beginner's guide to using Discourse Themes and Structure of themes and theme components

In your Discourse theme you’ll need to setup the following directory structure:

:file_folder: javascripts/discourse/components/
:file_folder: javascripts/discourse/connectors/

From here we’re going to create an Ember component. You can find more about Ember components from their documentation: Ember.js Guides - Guides and Tutorials - Ember Guides

But for now this will be a simple component. The component will consist of two files, one containing the logic and another the template.

:page_facing_up: javascripts/discourse/components/custom-homepage-content.js

import Component from "@glimmer/component";
import { inject as service } from "@ember/service";
import { defaultHomepage } from "discourse/lib/utilities";

export default class CustomHomepageContent extends Component {
  @service router;

  get isHomepage() {
    const { currentRouteName } = this.router;
    return currentRouteName === `discovery.${defaultHomepage()}`;
  }
}

This creates a isHomepage getter, which checks the router service for the currentRouteName — if the route name matches your homepage (as dictated by site settings) then it will return true

Now we need our template

:page_facing_up: javascripts/discourse/components/custom-homepage-content.hbs

{{#if this.isHomepage}}
  <h1>This is my homepage HTML content</h1>
{{/if}}

The template checks the isHomepage getter, and will display your content if it’s true. You can add any HTML you want between the {{#if}} blocks.

Now that our component is created, we need to add it to Discourse somewhere. For this step you’ll need to decide which plugin outlet to utilize. These are areas throughout Discourse where we’ve added a little code for developers to hook into. You can search Discourse for these on Github, or browse for them using the Plugin outlet locations theme component.

For custom homepages, above-main-container is a common choice, so let’s use that.

We need to create our connector file in the correct directory:

:page_facing_up: javascripts/discourse/connectors/above-main-container/custom-homepage-connector.hbs

<CustomHomepageContent />

:point_up: and that’s all, it just needs a single line calling for your component :tada:

45 Likes

Hi @awesomerobot,

Thanks for the explanation. I tried the steps you suggested but the after_header I implemented is still showing in the post detail pages. Can you recommend how I can fix this to show only on my home page?

1 Like

Hi @Cornelius, is it alright to view your code?

2 Likes

It would be great to rewrite this for modern use of the filesystem rather than sticking everything in the header tags.

Most of these old guides for themes are out of date with your things are done now.

4 Likes

Yes, this was fairly outdated! I’ve updated it to reflect the structure of remote themes and our modern Ember components.

6 Likes

That’s awesome!

And that getter is the same thing as this http://ember-cli-page-object.js.org/docs/v1.11.x/api/getter.html? I know just enough to be dangerous. If it is the same, then I’ll edit the OP to link to it.

3 Likes

@awesomerobot Hi kris, I have installed discourse locally on my system. What is the right path to add these files in my local instance of discourse. I wanted to add a new theme-component in my local instance of discourse.

1 Like

You would create your theme component and install it through the ux.

Install a theme or theme component

Install the Discourse Theme CLI console app to help you build themes

4 Likes