Best strategy for finding the right template to edit?

Dev
1

I’m still new to Discourse, but learning more about how to code on top of it to customize things. I’m trying to learn the best way to insert code in particular spots on a page (more targeted than in a general outlet area). It looks like I’ll have to override the template that controls that spot.

I take that to mean that, whether I do it in the area of my customize dashboard, or in a separate github repo I’ll use as a theme, I will have to:

  1. Find the right template to edit
  2. Reprint the whole template wherever I am doing my coding (dashboard, repo, etc.), and
  3. make the changes I want to the template

Step 1 is proving to be a hurdle. How do I find the right template to edit?

This is what I gather: The discourse templates are here, and it seems that the “real” templates I’ll want to edit are generally in the components file here.

As an example, say I want to add a line to each group listing on the group index page (the equivalent of this page). Where is the template for that? My best guess is that it’s the group card templates template, but I’m not sure, especially because I’m brand new to Ember.

Is there a more sure fire way for me to identify the right template?

2

Did you try the Ember browser extension?

It shows template and components:

image

4 Likes
3

That sounds great. Do you mean the Ember Inspector?

1 Like
4

Got it. Using it, there’s one thing I’m not getting (probably has to do with my being new to ember):

If you look at the discourse groups page, each group entry has a name and user-count.

Using the Ember inspector, I can see the name is from the groups-info template, but where does the group-user-count come from? (it doesn’t seem to have an entry in the ember inspector)

5

https://github.com/discourse/discourse/blob/7a2e8d3ead63c7d99e1069fc7823e933f931ba85/app/assets/javascripts/discourse/app/templates/groups/index.hbs

6

Thanks. I see on group-user-count appears on line 55.

Does this mean that if I wanted to, say, add a line right before the group-user-count line, I would have to copy the entire 100 lines of that index.hbs file into my code and insert it like this:
<script type="text/x-handlebars" data-template-name="groups/index">
[100 lines here]
</script>

7
  • Normally you check if there is a suitable plugin outlet, and use that.
  • you can try and target things with jQuery, but that’s not going to work if you are trying to change an iterative element.

If you can’t do either of those things:

  • ask Discourse team to add a plugin outlet providing justification
  • replace the entire template with your own as you suggest.
2 Likes
8

Do you mean changing the code in the outlets around it? (like components/group-info)

EDIT: Sorry, I confused templates and plugin outlets. I understand that plugin outlets are lines in the discourse code (like {{plugin-outlet name="topic-above-post-stream" args=(hash model=model)} ) the discourse team has put there as an anchor you can use to change the code.

9

EDIT: Moved this follow up to here bc its on a slightly different issue.