Handlebars Helpers for Custom Templates
Updated by Taylor Sloane
If you're building a custom HTML template for your HelpDocs, you'll eventually need to use some of our helpers and partials.
Helpers are extensions to the regular Handlebars syntax that allow you to manipulate data, loop through arrays, show HTML conditionally, and more. We've made a number of helpers to help you with common tasks.
There's a few different ways to use helpers:
- Inline helpers
The simplest way to use helpers is inline. e.g.
<<fallback article.title "Untitled Article">>
...will render literally to the article's title if it exists, falling back to "Untitled Article" if not.
- Block helpers
Block helpers can help you do conditional statements and loops. You prefix the helper name with a hash, and write extra HTML (or even more Handlebars) inside. Then use an else block for when the condition is not true. e.g.
This article is featured!
Not featured, sorry :(
...will render to "This article is featured!" if the article is featured, "Not featured, sorry :(" if not.
- Combining helpers
Need to combine more than one helper? Use brackets! This is super helpful if you wanna display something conditionally, e.g.
<<#if (gt category.meta.num_articles 1)>>
This category has more than one article
...will only show "This category has more than one article" if the category does in fact have more than one article.
Only show the content of the block if the condition is true, else show the content of the else block (if it exists)
Opposite of if. Only show the content of the block if the condition is false, else show the content of the else block (if it exists)
Loop through an array. The current item is provided as this, you can access the root scope with @root, the current index with @index, and use @first and @last to see if this is the first or last item
Checks if the two numbers passed are equal
<<#if (eq this.meta.num_articles 1)>>
Checks if the first number is greater than the second
<<#if (gt this.meta.num_articles 1)>>
Checks if the first number is less than the second
Multiplies two numbers together
<div class="margin-left:<<multiply @index 0.5>>em;"</div>
Divides the first number by the second
<<#unless (gt (divide @index 2) 5)>>
Adds two numbers together
This is loop number <<add @index 1>>
Subtracts the second number from the first
2 - 1 = <<subtract 2 1>>
Checks if a string starts with a string prefix
<<#if (hasPrefix category.icon "fa-")>>
Checks if a string ends with a string suffix
Suffix ends in fix:<<hasSuffix "Suffix" "fix">>
Strips prefix of string
URL without prefix: <<trimLeft "https://www.helpdocs.io/demo" "https://www.helpdocs.io">>
Strips suffix of string
URL without suffix: <<trimRight "https://www.helpdocs.io/demo" "/demo">>
Behaves like the built-in Handlebars lookup helper, but returns an object of the original type rather than converting to a string
The first category title is <strong><<deepLookup (deepLookup category.articles 0) "title">>
Show a date in a format of your choice.
Supported tokens: D, DD, M, MM, YY, YYYY , hh, mm, and ss.
<<formatDate article.updated_at "DD.MM.YYYY
If the first value exists, returns that. If not, returns the second
<<fallback meta.home_path "/">>
Used to find all subcategories of a given category ID
<<#each (filterCategoriesByParentId @root.meta.sidebar_categories this.category_id)>>
Find a category by its ID
This title of the category of this article is <<(categoryById meta.sidebar_categories article.category_id).title>>
Checks if a category is ascendent of another. Useful when working with subcategories and sidebars
<<#if (categoryIsAscendent @root.meta.sidebar_categories @root.category this)>>
In the example here the second parameter this is also a category. It's checking if the second category is ascendent of the first.
Find the current language version of a given internationalization key, falling back to the second string
Only display the contents of a block if the page is equal to the given page. Possible values: home (can also be called categories), category, article, search
Shows content of a block if the article has any permissions on it. Requires article to be passed through
Partials in Handlebars are snippets of HTML we provide for your convenience. Just like the partials you write yourself for the header and footer, these let you use reusable code that we maintain, without the effort.
You can use partials with the Handlebars partial syntax. For instance to create a contact button you can use
<<> contactLink>>. That will render a clickable contact link your users can use to contact you.
Because we maintain it, a) you don't have to worry about it, and b) it'll respect any integrations you have set up in your account.
Contact link that respects any connected integrations and your contact preferences in Settings. The class parameter will add a CSS class to the button of your choice, overriding the default button class applied
Breadcrumbs that lead to your current page. This should be used in the category.hbs and article.hbs content partials only. The linkify parameter indicates whether the last category in the list should be wrapped in a hyperlink (like for an article page) or not (like for a category page)
Renders the HelpDocs footer according to your preferences in Settings > Brand. We require this to be present on all accounts, but you can include it anywhere you like
We support the Handlebars 4 inline partial syntax, so you can make your own partials. This is super handy if you need to do anything recursive (like nesting categories) or repetitive (so you don't have to maintain two lots of the same code).
You can create a custom partial like this:
Then invoke it just like you'd invoke any other partial, passing parameters if you like:
<<> myArticle article=this>>
Easy as that!