Extending the About page

Support
1

Is there a way to extend the About page (e.g. About - Discourse Meta)?

At the moment, the page appears to include the “site description” which is also used for the meta description. That’s okay, but I want to expand on that and add more information between that block and the “Our Admins” section.

Concept

about-more
about-more.png972×506 49 KB

2

You’ll need to edit the handlebars template to add content there. You can add this to your </head> at admin > customize > themes > edit CSS/HTML

I’ve added a comment <!-- Add additional HTML here --> where you’d want to add your content. It’s possible to create a component that will pull in post content here, but if you’re not going to be updating it often it’s much easier to add the content to the page manually.

Also check out Developer’s guide to Discourse Themes for more information about customization.

<script type="text/x-handlebars" data-template-name="about">

{{#d-section pageClass="about"}}
  <div class='container'>
    <div class='contents clearfix body-page'>

      <ul class="nav-pills">
        <li class="nav-item-about">{{#link-to 'about' class="active"}}{{i18n 'about.simple_title'}}{{/link-to}}</li>
        {{#if faqOverriden}}
          <li class="nav-item-guidelines">{{#link-to 'guidelines'}}{{i18n 'guidelines'}}{{/link-to}}</li>
          <li class="nav-item-faq">{{#link-to 'faq'}}{{i18n 'faq'}}{{/link-to}}</li>
        {{else}}
          <li class="nav-item-faq">{{#link-to 'faq'}}{{i18n 'faq'}}{{/link-to}}</li>
        {{/if}}
        <li class="nav-item-tos">{{#link-to 'tos'}}{{i18n 'tos'}}{{/link-to}}</li>
        <li class="nav-item-privacy">{{#link-to 'privacy'}}{{i18n 'privacy'}}{{/link-to}}</li>
      </ul>

      <section class='about description'>
        <h2>{{i18n 'about.title' title=model.title}}</h2>
        <p>{{model.description}}</p>

        <!-- Add additional HTML here -->         

      </section>

      {{#if model.admins}}
        <section class='about admins'>
          <h3>{{d-icon "users"}} {{i18n 'about.our_admins'}}</h3>

          {{#each model.admins as |a|}}
            {{user-info user=a}}
          {{/each}}
          <div class='clearfix'></div>

        </section>
      {{/if}}

      {{plugin-outlet name="about-after-admins"
                    connectorTagName='section'
                    args=(hash model=model)}}

      {{#if model.moderators}}
        <section class='about moderators'>
          <h3>{{d-icon "users"}} {{i18n 'about.our_moderators'}}</h3>

          <div class='users'>
            {{#each model.moderators as |m|}}
              {{user-info user=m}}
            {{/each}}
          </div>
          <div class='clearfix'></div>
        </section>
      {{/if}}

      {{plugin-outlet name="about-after-moderators"
                    connectorTagName='section'
                    args=(hash model=model)}}

      <section class='about stats'>
        <h3>{{d-icon "bar-chart"}}  {{i18n 'about.stats'}}</h3>

        <table class='table'>
          <tr>
            <th>&nbsp;</th>
            <th>{{i18n 'about.stat.all_time'}}</th>
            <th>{{i18n 'about.stat.last_7_days'}}</th>
            <th>{{i18n 'about.stat.last_30_days'}}</th>
          </tr>
          <tr>
            <td class='title'>{{i18n 'about.topic_count'}}</td>
            <td>{{number model.stats.topic_count}}</td>
            <td>{{number model.stats.topics_7_days}}</td>
            <td>{{number model.stats.topics_30_days}}</td>
          </tr>
          <tr>
            <td>{{i18n 'about.post_count'}}</td>
            <td>{{number model.stats.post_count}}</td>
            <td>{{number model.stats.posts_7_days}}</td>
            <td>{{number model.stats.posts_30_days}}</td>
          </tr>
          <tr>
            <td>{{i18n 'about.user_count'}}</td>
            <td>{{number model.stats.user_count}}</td>
            <td>{{number model.stats.users_7_days}}</td>
            <td>{{number model.stats.users_30_days}}</td>
          </tr>
          <tr>
            <td>{{i18n 'about.active_user_count'}}</td>
            <td>&mdash;</td>
            <td>{{number model.stats.active_users_7_days}}</td>
            <td>{{number model.stats.active_users_30_days}}</td>
          </tr>
          <tr>
            <td>{{i18n 'about.like_count'}}</td>
            <td>{{number model.stats.like_count}}</td>
            <td>{{number model.stats.likes_7_days}}</td>
            <td>{{number model.stats.likes_30_days}}</td>
          </tr>
        </table>
      </section>

      {{#if contactInfo}}
        <section class='about contact'>
            <h3>{{d-icon "far-envelope"}} {{i18n 'about.contact'}}</h3>
            <p>{{{contactInfo}}}</p>
        </section>
      {{/if}}

    </div>
  </div>
{{/d-section}}
</script>
4 Likes
3

I really appreciate your quick response, @awesomerobot. Thank you.

4

I wonder if we’re missing a plugin outlet here? We have “about-after-admins” and “about-after-moderators”, maybe we need “about-after-description”?

Overriding the whole template just for that is dangerous and feels like using a bazooka to kill a fly.

4 Likes
5

Good point. @DigitalStartup if you can wait and update Discourse later today or tomorrow, I’ve just added a plugin outlet (https://github.com/discourse/discourse/commit/5cf63e43c6d0bcf604cccc9d967cf393afc1bbcd) that will simplify adding content (and make it more future-proof).

You’ll instead add this to </head>

<script type="text/x-handlebars" data-template-name="/connectors/about-after-description/custom-about">
  Custom HTML here
</script>
7 Likes
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.