Table of Contents

Getting Started with a Custom HTML Template

Taylor Sloane Updated by Taylor Sloane

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.

This article is about custom HTML templates in Handlebars. If you started a template in or before March 2018 you might see custom Jade templates in your account. We have docs for those here.
Custom HTML templates are available on certain plans

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 access to a new tab in Settings > Code called HTML. 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 > Code > HTML.

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 template, 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]
}

The full article object is available in article.hbs. In other partials, some fields (notably body) may be missing.

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 home.hbs and related_articles is only available in article.hbs.

user

{
  user_id: String,
  name: String,
  email: String,
  permission_groups: [String],
}

All partials. If there's no logged in user this will be empty.

The header and footer partials inherit the context of the page that's currently being rendered. So if you're rendering an article page, the header and footer will have access to that context, etc.

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.

V4

  1. Bars

V3

  1. Curve
  2. Boxed
  3. Bars
  4. eCommerce

What did you think of this doc?

Handlebars Helpers for Custom Templates

Get in touch