Can I Put The Helpers And The Handlebars Inside The Template

Updated 4 months ago

If y'all're building a custom HTML template for your HelpDocs, you'll somewhen need to use some of our helpers andpartials.

Helpers

Helpers are extensions to the regular Handlebars syntax that let yous to manipulate data, loop through arrays, bear witness HTML conditionally, and more. We've made a number of helpers to assist you with common tasks.

Using Helpers

At that place's a few different ways to apply helpers:

Inline helpers
The simplest way to use helpers is inline. east.thousand.
<<fallback article.title "Untitled Article">>
...will render literally to the commodity's title if it exists, falling back to "Untitled Article" if non.
Block helpers
Block helpers can help you do conditional statements and loops. You prefix the helper proper name with a hash, and write extra HTML (or fifty-fifty more than Handlebars) inside. Then use an else block for when the condition is non true. e.g. <<#if commodity.is_featured>>
This commodity is featured!
<<else>>
Non featured, pitiful :(
<</if>>
...will render to "This article is featured!" if the article is featured, "Not featured, sorry :(" if not.
Combining helpers
Need to combine more than 1 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 1 article
<</if>>
...will only testify "This category has more than one commodity" if the category does in fact take more than than one article.

Bundled Helpers

Helper Proper noun	Description	Example Usage
if	Only show the content of the block if the status is true, else bear witness the content of the else cake (if it exists)	<<#if article.is_featured>> <p>Commodity is featured</p> <<else>> <p>Article is non featured</p> <</if>>
unless	Opposite ofif. Just testify the content of the block if the condition is imitation, else show the content of the else block (if it exists)	<<#unless article.is_private>> <h1>This is a public commodity</h1> <</unless>>
each	Loop through an array. The current item is provided every bitthis, you tin can admission the root telescopic with @root, the current index with @index, and employ @first and @last to see if this is the beginning or last item	<<#each category.articles>> <p><<this.championship>></p> <small><<this.description>></pocket-size> <</each>>
eq	Checks if the two numbers passed are equal	<<#if (eq this.meta.num_articles 1)>> At that place's one commodity in this category <</if>>
gt	Checks if the first number is greater than the second	<<#if (gt this.meta.num_articles 1)>> There'southward more than i article in this category <</if>>
lt	Checks if the showtime number is less than the 2d	<<#each this.articles>> <<#if (lt @index 5)>> <img src="<<this.author.profile_image>>"> <</if>> <</each>>
multiply	Multiplies two numbers together	<div class="margin-left:<<multiply @alphabetize 0.v>>em;"</div>
divide	Divides the outset number by the 2nd	<<#unless (gt (dissever @index 2) v)>> <p>Some text</p> <</unless>>
add together	Adds two numbers together	This is loop number <<add @index i>>
decrease	Subtracts the 2nd number from the commencement	two - 1 = <<decrease two one>>
hasPrefix	Checks if a string starts with a string prefix	<<#if (hasPrefix category.icon "fa-")>> <i class="fa <<category.icon>>"></i> <<else if (hasPrefix category.icon "http")>> <img src="<<category.icon>>"> <</if>>
hasSuffix	Checks if a string ends with a string suffix	Suffix ends in set up:<<hasSuffix "Suffix" "set up">>
trimLeft	Strips prefix of string	URL without prefix: <<trimLeft "https://world wide web.helpdocs.io/demo" "https://world wide web.helpdocs.io">>
trimRight	Strips suffix of string	URL without suffix: <<trimRight "https://world wide web.helpdocs.io/demo" "/demo">>
deepLookup	Behaves like the born Handlebars lookup helper, but returns an object of the original type rather than converting to a cord	The showtime category title is <potent><<deepLookup (deepLookup category.articles 0) "title">>
formatDate	Testify a appointment in a format of your choice. Supported tokens: D, DD, One thousand, MM, YY, YYYY , hh, mm, and ss. Premade formats: `RFC3339`, `unix`, `relative` (human readable).	<<formatDate article.updated_at "DD.MM.YYYY T'hh:mm:ss">>
fallback	If the start value exists, returns that. If non, returns the second	<<fallback meta.home_path "/">>
filterCategoriesByParentId	Used to find all subcategories of a given category ID	<<#each (filterCategoriesByParentId @root.meta.sidebar_categories this.category_id)>> <h3><<this.title>></h3> <</each>>
categoryById	Detect a category by its ID	This title of the category of this article is <<(categoryById meta.sidebar_categories article.category_id).title>>
categoryIsAscendent	Checks if a category is ascendent of another. Useful when working with subcategories and sidebars	<<#if (categoryIsAscendent @root.meta.sidebar_categories @root.category this)>> <p>This is a parent of the displayed category</p> <</if>> In the example hither the 2nd parameter this is also a category. Information technology's checking if the 2nd category is ascendent of the first.
i18n	Find the current language version of a given internationalization key, falling back to the 2d string	<a onclick="showContactForm();"> <<i18n "contact" "Contact">> </a>
page	Only brandish the contents of a block if the page is equal to the given page. Possible values:home (can too exist called categories),category,article,search	<<#page "dwelling house">> <<> superFancySearchBar>> <<else>> <<> boringOlSearchBar>> <</page>>
isPermissioned	Shows content of a block if the commodity has whatever permissions on it. Requires article to be passed through	<<#isPermissioned article>> <div form="has_permissions_message"> <span>This article has Permissions so can't exist shared publicly.</span> </div> <</isPermissioned>>

Partials

Partials in Handlebars are snippets of HTML nosotros provide for your convenience. Just like the partials yous write yourself for the header and footer, these let you employ reusable lawmaking that we maintain, without the effort.

Using Partials

You can use partials with the Handlebars partial syntax. For example to create a contact button you lot tin employ <<> contactLink>>. That volition render a clickable contact link your users can apply to contact you lot.

Because we maintain it, a) you don't have to worry about it, and b) it'll respect whatsoever integrations yous have set up in your business relationship.

Arranged Partials

Fractional Name	Description	Case Usage
contactLink	Contact link that respects any connected integrations and your contact preferences in Settings. Thecourse parameter will add a CSS class to the button of your choice, overriding the default button form applied	`<<> contactLink class="btn btn-secondary">>`
categoryBreadcrumbs	Breadcrumbs that lead to your current page. This should be used in thecategory.hbs andarticle.hbs content partials only. Thelinkify parameter indicates whether the concluding category in the list should be wrapped in a hyperlink (like for an article page) or not (like for a category page)	`<<> categoryBreadcrumbs linkify=true>>`
hdFooter	Renders the HelpDocs footer according to your preferences in Settings > Brand. We require this to be nowadays on all accounts, just you tin can include it anywhere you lot like	`<<> hdFooter>>`

Custom Partials

We support the Handlebars 4 inline fractional syntax, then you can make your own partials. This is super handy if you need to do anything recursive (like nesting categories) or repetitive (so yous don't have to maintain two lots of the same code).

You can create a custom partial like this:

<<#*inline "myArticle">>
                <h3><<commodity.championship>><h3>
                <p><<article.clarification>></p>
<</inline>>

Then invoke it only like you'd invoke any other partial, passing parameters if you lot like:

<<#each category.articles>>
                <<> myArticle article=this>>
<</each>>

Piece of cake as that!

Inline partials must be at the top level, not indented, and non nested inside any other markup. A proficient place to declare these would be header.hbs.