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:
- Create a file
_partials/product-description.md
- Write your Markdown formatter description in this filedescri
- 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?