Getting Started with a Custom HTML Template
HelpDocs ships with a bunch of nice looking templates that work great out of the box. You can customize our default templates easily with CSS and Javascript to make them look however you like. But if you wanna make large changes to the layout, that's where custom HTML templates come in.
Handlebars
We use Handlebars to give our HTML templates superpowers. Handlebars lets you do things like loop through arrays of tags and authors, and output HTML for each. It also lets you register and reuse partials which cleans up your HTML no end.
If you're not familiar with Handlebars you should check out the official documentation. HelpDocs templates are compatible with all the syntax of Handlebars v3, with the addition of Inline Partials from Handlebars v4.
We also support a number of helpers for Handlebars. We've built these helpers in-house to make common tasks like internationalization easier. You can
read more about our helpers here.
Enabling Custom HTML Templates
You can enable custom HTML templates in Settings > Brand. Choose Custom from the Template dropdown.
Once you've enabled custom templates you'll get a new tab in Settings called Templates. This is where you'll manage the HTML and Handlebars for each partial of your knowledge base.
Partials
Since you only have to provide the content for each page, not the whole HTML (include <head> tags, <link>s, etc.), we call each section you can edit a partial.
There's 7 total partials, 6 of which you can edit. Here's a breakdown of what you'll find in
Settings > Templates.
| Partial Name | Purpose |
|---|---|
| default.hbs | This is the default template that includes the main layout of the HTML. It's maintained by us here at HelpDocs and isn't user editable. This is where we insert metadata for SEO, our required Javascript libraries, add your integrations, etc. |
| header.hbs | You should add your header bar and navigation in here. This appears on every page of your knowledge base. Depending on how you wanna structure your theme, this might also be the right place for your search bar and maybe some secondary navigation like a sidebar. If you need to register inline partials for use in all templates, here's a good place to do that too. |
| footer.hbs | This gets added after your main content (e.g. after the category or article that's being displayed). You can use this to mirror the footer on your main website, or add any scripts to your site that you want before the closing </body> tag. |
| home.hbs | The entry point of your knowledge base. This is where you display all your categories, so users can easily navigate to a category or article. |
| category.hbs | Display a single category and all its articles. |
| article.hbs | Display a single article. |
| search.hbs | Display search results. Custom templates ship with instant search as standard, but this page is shown when someone hits return in the search bar regardless. |
Context Data by Partial
We pass through context data you can use in the templates. This differs slightly on each partial so you only have the information that's actually relevant to that page. Data can be accessed using Handlebars data accessors, e.g. <<categories>>
| Data | Example | Available in Partial(s) |
|---|---|---|
| categories | [Category] |
home.hbs |
| category | {
category_id: String,
parent_category_id: String,
slug: String,
title: String,
description: String,
url: String,
relative_url: String,
icon: String,
is_featured: Boolean,
created_at: Date,
updated_at: Date,
articles: [Article],
authors: [Author]
meta: {
num_authors: Number,
num_articles: Number,
}
} |
category.hbs, article.hbs |
| article | {
article_id: String,
category_id: String,
user_id: String,
author: {
profile_image: String,
email: String,
name: String,
},
slug: String,
title: String,
description: String,
url: String,
relative_url: String,
short_version: String,
body: String,
is_published: Boolean,
is_private: Boolean,
is_featured: Boolean,
show_toc: Boolean,
created_at: Date,
updated_at: Date,
tags: [String]
} |
article.hbs |
| search_term | "My super awesome search term" | search.hbs |
| meta | {
canonical: String,
home_path: String,
sidebar_categories: [Category],
related_articles: [Article],
top_articles: [Article],
language_code: String,
languages: [
{
code: String,
name: String,
},
...
],
default_language_code: String,
account_id: String,
is_home_page: Boolean,
} |
meta is available on all partials, but some of its attributes may not be available on some partials. Notably top_articles is only available in categories.hbs and related_articles is only available in article.hbs |
Starter Templates
It's not always fun, desirable, or time-sensible (totally a phrase now 😹) to create a template totally from scratch. Here's a few of our default layouts you can start with. They're in .zip files, so just unzip, and follow the instructions in Readme.md.
