The discussion revolves around the best strategy for finding the right template to edit in Discourse. JQ331 is trying to insert code in specific spots on a page and needs to override the template that controls that spot. However, finding the right template is proving to be a challenge.
JQ331 has gathered that the Discourse templates are located here and that the “real” templates are generally in the components file here.
Falco suggests using the Ember browser extension, specifically the Ember Inspector, which shows templates and components.
JQ331 uses the Ember Inspector to identify the template for the group index page, but is unsure about the origin of the group-user-count. merefield points to the groups/index.hbs template, which reveals the location of the group-user-count on line 55.
JQ331 asks if this means that to add a line before the group-user-count, they would have to copy the entire template into their code. merefield suggests checking for suitable plugin outlets, targeting elements with jQuery, or replacing the entire template as a last resort.
JQ331 asks for clarification on plugin outlets, and merefield explains that plugin outlets are lines in the Discourse code that serve as anchors for making changes.
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:
Find the right template to edit
Reprint the whole template wherever I am doing my coding (dashboard, repo, etc.), and
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?
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)
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>
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.
