Table of Contents
[Legacy] Creating a Custom HTML Template with Jade
HelpDocs comes packed full of great themes and layouts . If none of them takes your fancy, you can also create custom HTML templates to perfectly match your brand. Enabling Custom HTML Templates Cu...
HelpDocs comes packed full of great themes and layouts. If none of them takes your fancy, you can also create custom HTML templates to perfectly match your brand.
Enabling Custom HTML Templates
Custom HTML templates are available in the Pro plan and above
- Head to Settings > Brand
- Under Templates select Custom
- Click Save
Theme Files
There's six templates you can customize:
Filename | Contents |
header.jade | The top part of your knowledge base, shared by all pages. This is usually where you'd add a navigation bar or sidebar. You'll probably want to include your search bar in here too. |
footer.jade | The bottom part of every page. You can put the footer from your marketing website down here, or anything else you'd like to display at the bottom of all pages. |
home.jade | This is the entry point of your knowledge base. It's a great place to display all your categories, some featured articles, maybe even a larger search bar. |
category.jade | A single category view, displayed when someone clicks through to a category. You'll show all the article titles (and maybe their descriptions, or when they were last updated) within a category here. |
article.jade | A single article view, displayed when someone clicks through to that article. This is where you'll show the body of the article, feedback buttons, related articles, etc. |
search.jade | You'll show search results for a particular query here. This is generally used as a backup to the realtime search displayed on every page. |
These templates all inherit from our default.jade template. Here we take care of the basics like realtime search and analytics. You can't edit this file from your account dashboard, but we can edit it for you. If you need to make changes, just get in touch.
Creating Layouts with Jade
We use Jade as our templating engine. If you're not familiar with Jade, check out this primer first. Don't worry, it's pretty simple!
As a general rule we'll provide the appropriate object to each view. For instance, you'll get a category object in category.jade, an article and it's category in article.jade, etc. You'll also have access to your account's config object for internationalization strings, colors, and more.
Check out the starter template for an idea of what's available, and reach out if you have any questions.
Helpers
Jade is an awesome templating library, but sometimes you need a little extra help.
When you're designing your knowledge base there's likely going to be times you'll want to work with dates, and manipulate your articles and categories, so we've bundled in the awesome Lodash and Moment packages for you as locals.
Starter Templates
We know it can be a little overwhelming to get started, so we've open sourced a version of our Boxed (v3next) template with instant search and subcategory support. Download the Boxed v3next theme here >
To get started with this template, just copy/paste the content from the *.jade files you downloaded into the relevant *.jade file in your HelpDocs account. Then paste style.css into your Settings > Code > Custom CSS.
Or we can do it for you. If you'd like this template added to your account, send a Drift message to support and we'll hook you up.
What did you think of this doc?
