### Author:  [@aas](https://meta.discourse.org/u/aas)
#### Post date: [April 16, 2025, 1:29pm UTC](https://meta.discourse.org/t/customizing-the-about-page-with-user-bios/362093/1 "2025-04-16T13:29:02Z")
The default `/about` page for a Discourse site that displays info for moderators and admins only displays each user’s username, name, and title. How do I customize the about page so that it also displays the contents of each user’s About me section of their profile?
I understand the general idea outlined here:
> [@Add custom content that only appears on your homepage](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415?silent=true):
>
> 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 …
- define a component
- define a template
- create a connector file to make use of an existing outlet
However, there is no outlet that works more for my use case, as far as I can tell. Further, it seems that overriding the template for `/about` or using the `modifyClass` functionality in the plugin API isn’t recommended. So I’m not sure what to do. I would really appreciate some guidance on the best practice here. Thanks!
Discourse AI seems to think I should go ahead and override the template. Does that seem right?
> **Discourse AI's response**
>
> > **Add "About Me" to Discourse /about Page
> AI**
> >
> > **aas:**
> >
> > The default `/about` page for a Discourse site that displays info for moderators and admins only displays each user’s username, name, and title. How do I customize the about page so that it also displays the contents of each user’s About me section of their profile?
> >
> > I understand the general idea outlined here:
> >
> > [Add custom content that only appears on your homepage](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415?silent=true)
> >
> > - define a component
> > - define a template
> > - create a connector file to make use of an existing outlet
> >
> > However, there is no outlet that work more my usecase, as far as I can tell. Further, it seems that overriding the template for `/about` or using the `modifyClass` functionality in the plugin API isn’t recommended. So I’m not sure what to do. I would really appreciate some guidance on the best practice here. Thanks!
> >
> > **HelperBot:**
> >
> > Okay, I can help you look into the best practices for customizing the `/about` page to include user profile information like the “About me” section.
> >
> > You’re right that directly overriding core templates or using `modifyClass` can be complex and potentially break with updates. It’s generally preferred to use theme components and outlets when possible. Since you mentioned there might not be a specific outlet on the `/about` page itself, let’s search for discussions on customizing this page or adding user fields.
> >
> > First, I’ll search for discussions about customizing the `/about` page, specifically adding profile fields.
> >
> > > **Search Meta Discourse**
> > >
> > > Found 14 [results](https://meta.discourse.org/search?q=customize+about+page+profile+field+category%3Adev) for 'customize about page profile field category:dev'
> >
> > > **Search Meta Discourse**
> > >
> > > Found 4 [results](https://meta.discourse.org/search?q=customize+about+page+profile+field+category%3Atheme-component) for 'customize about page profile field category:theme-component'
> >
> > Okay, let’s break this down. You want to add the “About me” content from user profiles to the staff list on the default `/about` page.
> >
> > You’re correct that the standard theme component approach involves using plugin outlets, and it seems there isn’t a specific, granular outlet _within_ the staff list table on the `/about` page to easily inject this data.
> >
> > Based on the search results and common practices, while using outlets is preferred for not breaking future updates, sometimes the only feasible way to customize specific core templates like the `/about` page is to override them directly within a theme component.
> >
> > Here’s the likely best approach using a theme component:
> >
> > 1. **Create a Theme Component:** If you haven’t already, create a new theme component.
> > 2. **Override the Template:**
> > - You need to override the `about.hbs` template.
> > - In your theme component, create the file `common/templates/about.hbs`.
> > - Copy the content of the original `about.hbs` file into your new file. You can find the original [here on GitHub](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/templates/about.hbs).
> > - Modify your copy of `about.hbs`. Find the sections where it iterates through `model.admins` and `model.moderators`. Inside the loop (likely within the `{{#each}}` block), you can access the user object. The “About me” content is usually in `user.profile.bio_raw` or a similar property. Add this property to the template where you want it displayed for each user.
> >
> > 3. **Enable the Component:** Add the theme component to your theme and activate it.
> >
> > **Why this approach?**
> >
> > - **Direct Control:** It gives you direct control over the HTML structure of the `/about` page.
> > - **Feasibility:** Since there isn’t a dedicated outlet _inside_ the user list on that page, this is the most straightforward way to inject content per user in that specific location.
> >
> > **Downsides (as you noted):**
> >
> > - **Maintenance:** If Discourse updates the core `about.hbs` template significantly in the future, your overridden version won’t get those updates automatically. You might need to manually compare and merge changes later. This is the trade-off for customizing core templates without specific outlets.
> >
> > While the search didn’t turn up an exact example for the `/about` page, modifying templates to add profile information is a common pattern, as seen in customizations for user cards and profiles:
> >
> > - [Normalized Profile Links](https://meta.discourse.org/t/normalized-profile-links/345494) adds custom fields to user cards/profiles via template modification in a component.
> > - [Quick Profile Links Menu](https://meta.discourse.org/t/quick-profile-links-menu/338591) adds elements to user profile pages.
> >
> > These examples show that theme components often involve template customization when specific outlets aren’t available. Overriding `about.hbs` follows this pattern for your specific use case.
> >
> > **aas:**
> >
> > It seems there is no `about.hbs` template in the `discourse/discourse` repository. However, the `about.gjs` template appears to be located at [app/assets/javascripts/discourse/app/templates/about.gjs](https://github.com/discourse/discourse/blob/cb64b37070452f71741992df326e74063064b965/app/assets/javascripts/discourse/app/templates/about.gjs).
> >
> > **HelperBot:**
> >
> > You are absolutely right! Thank you for the correction. Discourse has indeed transitioned to using `.gjs` (GlimmerJS) templates for many components, including the `/about` page.
> >
> > My apologies for referencing the older `.hbs` format.
> >
> > The correct path for the template is indeed `app/assets/javascripts/discourse/app/templates/about.gjs` in the core code.
> >
> > To override this using a theme component, the process remains conceptually the same, but the file path and syntax are updated:
> >
> > 1. **Create/Use a Theme Component:** As before.
> > 2. **Override the Template:**
> > - In your theme component, create the file at the corresponding path: `assets/javascripts/discourse/app/templates/about.gjs`.
> > - Copy the _entire content_ of the original `about.gjs` file ([link you provided](https://github.com/discourse/discourse/blob/cb64b37070452f71741992df326e74063064b965/app/assets/javascripts/discourse/app/templates/about.gjs)) into your theme component’s `about.gjs` file.
> > - Modify your copy. Look for the sections iterating through admins and moderators, likely using `{{#each this.admins as |admin|}}` and `{{#each this.moderators as |moderator|}}`. Inside these loops, you can access the user object (e.g., `admin` or `moderator`). Add the “About me” field, which should be accessible via a property like `admin.profile.bio_raw` or `moderator.profile.bio_raw`. You’ll need to integrate this into the GlimmerJS template structure. For example, you might add a new `` or `
` tag within the user’s display block:
> >
> > ```glimmer
> > {{#each this.admins as |admin|}}
> >
> > {{!-- Existing user info like avatar, username, name --}}
> >
> >
> >
{{admin.username}}
> > {{#if admin.name}}
{{admin.name}}{{/if}}
> > {{#if admin.title}}
{{admin.title}}{{/if}}
> >
> > {{!-- Add the About Me section --}}
> > {{#if admin.profile.bio_raw}}
> >
> > {{{admin.profile.bio_cooked}}} {{!-- Use bio_cooked for rendered HTML --}}
> > {{!-- Or use bio_raw if you need the raw text:
{{admin.profile.bio_raw}}
--}}
> >
> > {{/if}}
> >
> >
> > {{/each}}
> > {{!-- Repeat similar modification for the moderators loop --}}
> >
> > ```
> >
> > _(Note: Use `bio_cooked` if you want the rendered HTML version of the bio, or `bio_raw` for the plain text. Adjust the HTML structure as needed for your layout.)_
> >
> > 3. **Enable the Component:** Ensure the theme component is added to your theme and active.
> >
> > The downside remains the same: overriding core templates like this means you might need to manually update your theme component’s version if the original `about.gjs` file changes significantly in future Discourse updates. However, given the lack of a more specific outlet, this is the standard way to achieve this level of customization.
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [April 16, 2025, 1:39pm UTC](https://meta.discourse.org/t/customizing-the-about-page-with-user-bios/362093/2 "2025-04-16T13:39:01Z")
> [@aas](#):
>
> How do I customize the about page so that it also displays the contents of each user’s About me section of their profile?
You would use css to hide the “Our Moderators” section and then add your own at the about-after-moderators outlet. You can use `app/assets/javascripts/discourse/app/components/about-page-user.gjs` as a starting point and then add whatever you want to it.