Partials

Partials are Doctave's way of reusing content and creating custom components. All partials in a Doctave project live under the _partials directory.

Doctave supports a variant of the Liquid Template Language. Use can use Liquid's include function to invoke any partial you put in the _partials directory.

Reusing content

Let's say we have a product description that we want to reuse in multiple places. These are the steps you'd take to create a reusable partial for it:

  1. Create a file _partials/product-description.md
  2. Write your Markdown formatter description in this filedescri
  3. Include it in your documentation with the following snippet:
    {% include "_partials/product-description.md" %}

Your description should appear wherever you invoked the include function!

Custom HTML components

You can also create custom HTML components and style them with custom CSS.

This project has one custom HTML component, which you have also encountered: _partials/callout.html. Here is is in action:

Greetings! Hello!

It's a div with some custom styling, tha can accept some Markdown content. There are a few variants for it:

Success

Warning

Error

This callout can be invoked with the following syntax:

{% capture content %}
**Greetings!** Hello!
{% endcapture %}
{% include "_partials/callout.html" content: content, kind: "info" %}

Here we are calling the include function again, but we also use a capture block to capture the Markdown content we want to pass into the partial. Finally, we pass the kind attribute which defines the color of the callout.

If you look at _partials/callout.html, it's a very small template:

<div class="callout callout-{{ kind }}">
  {{ content }}
</div>

Note the 2 Liquid variables: kind and content. The former sets a specific CSS class for the callout, the latter injects the actual content into the partial.

Was this page helpful?