I’m partially quoting the link pasted by simon:
Quick example of filling an outlet with a big red square; Here the outlet is located above the post list in a topic view:
<script type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name">
<div style="height: 200px; width: 200px;background: red"></div>
</script>
Notice the data-template-name
attribute.
Quick example of overriding the navigation bar template:
<script type="text/x-handlebars" data-template-name="components/navigation-bar">
{{#each navItems as |navItem|}}
{{navigation-item content=navItem filterMode=filterMode category=category}}
{{/each}}
<div style="background: red; padding: 10px; float: left;">I added this block in the navigation bar template</div>
{{custom-html name="extraNavItem" tagName="li"}}
{{!- this is done to avoid DIV in the UL, originally {{plugin-outlet name="extra-nav-item"}}
{{#each connectors as |c|}}
{{plugin-connector connector=c class=c.classNames tagName="li" args=(hash category=category filterMode=filterMode)}}
{{/each}}
</script>
Again, notice the data-template-name
attribute.
Here’s the list of templates: discourse/app/assets/javascripts/discourse/app/templates at main · discourse/discourse · GitHub
And a useful theme component that highlight all the outlets locations: Plugin outlet locations theme component