Make sure you read the first part of the tutorial before this one, it will help a lot!
Getting Started: Handlebars Templates
The Problem: Adding elements to the Discourse User Interface
Many plugins need to add and extend the Discourse web interface. We provide a mechanism to do this called plugin outlets in handlebars templates.
If you browse the discourse handlebars templates, you’ll often see the following markup:
This is declaring a plugin outlet called “edit-topic”. It’s an extension point in the template that plugin authors can leverage to add their own handlebars markup.
When authoring your plugin, look in the discourse handlebars templates (in
.hbs files) you want to change for a ``. If there isn’t one, just ask us to extend it! We’ll happily add them if you have a good use case. If you want to make it easier and faster for us to do that, please submit a pull request on github!
If you want to see some of the places where plugin outlets exist, you can run the following command if you’re on OSX or Linux:
$ git grep "plugin-outlet" -- "*.hbs"
@Mittineague has also written a plugin to show their locations. I have to admit I have not tried it out myself so I’m not sure if it works, but it looks like it could be useful!
Connecting to a Plugin Outlet
Once you’ve found the plugin outlet you want to add to, you have to write a
connector for it. A connector is really just a handlebars template whose filename includes
connectors/ in it.
For example, if your handlebars template has:
Then any handlebars files you create in the
will automatically be appended. So if you created the file:
With the contents:
Discourse would insert
Hello World at that point in the template.
Note that we called the file
hello.hbs – The final part of the filename does not matter, but it must be unique across every plugin. It’s useful to name it something descriptive of what you are extending it to do. This will make debugging easier in the future.
Double check the name of the connector and make sure it matches the plugin name perfectly.
When in doubt,
rm -rf tmpand start your development server again.
More in the series
Part 3: Site Settings