Templates
Dactyl provides built-in templates that are fairly full-featured, but you can also write your own, including ones that extent or repurpose parts of the built-in templates, and get updates automatically when Dactyl is updated. As an example, this page uses a custom template that addsa "related pages" module to the right-hand sidebar.
Built-In Templates
Many of the built-in templates work better if you set certain fields on your target or page definitions. Here's a list of those fields:
Field | Description |
---|---|
prefix |
The base path for this site. Use / for a site served from the top-level of its domain. Required for navigation if your site has subfolders or "pretty URLs". |
logo |
URL or path for a logo image to use in the top-left. If not defined, uses a text header instead. |
google_analytics_tag |
String tag to use with Google Analytics, e.g. "UA-00000000-0". If not defined, doesn't load Google Analytics. |
repository |
URL to this site's source repository on GitHub. Required for the "Edit on GitHub" button. |
url |
The fully-qualified URL for the base of the site. Required by the sitemap and Google Search templates. |
stylesheet |
URL or path to the default stylesheet. The default includes Bootstrap 4.5 as well as custom CSS for code tabs, callouts, and the page layout. See the styles dir for the source SCSS. The default is served by dactyl.link. |
dactyljs |
URL or path to the Dactyl JavaScript file to use. This defines "jump to top" and code tab behavior. The default is served by dactyl.link. |
bootstrapjs |
URL or path to the Bootstrap JavaScript file to use. The default is served by BootstrapCDN. |
fontawesomecss |
URL or path to FontAwesome (v4) CSS file to use. The default is served by BootstrapCDN. |
Page Templates
The following built-in templates represent full pages, so you can use them with the default_template:
and template:
settings in the config file or frontmatter. You can also derive your own templates from these templates using {% extends 'template' %}
syntax.
Template | Description |
---|---|
404.html |
Contains an error message intended to be used as a custom 404 page. |
base.html |
A general purpose template with a 3-column layout, fixed header, and a footer. The navigation uses the hierarchy (parent and child ) fields introduced by Dactyl v0.10.0. This uses Bootstrap 4.5.0. Most of the other built-in templates are derived from this template. |
doc.html |
Specialized for individual documents. This is the new default template. The right sidebar has an in-page table of contents, and this runs code tab and syntax highlighting JavaScript by default. (You still need to enable the multicode_tabs filter in your dactyl-config.yml file to get code tab syntax.) |
landing.html |
A landing page that displays a list of child pages in the center column. |
pdf-cover.html |
A cover page and table of contents for PDFs. |
redirect.html |
Redirects the user to another URL, as set by the page's redirect_url field. Useful for deprecating pages. |
simple.html |
A minimal template with no dependencies. |
template-sitemap.txt |
A template for a text sitemap for use by search engines. |
When extending the default templates, you many of them have blocks you can replace. For the full list, see the templates directly.
Module Templates
The following built-in templates are partial modules you can use with {% include 'templatehere.html' %}
blocks from other templates. Many of these pieces are used by the page templates above, as well:
Template | Description |
---|---|
algolia-docsearch.html |
Provides a search box (and accompanying resources) powered by Algolia DocSearch. To use this, you must provide your Algolia API key in the target's algolia_api_key field provide your index name in the target's algolia_index_name field. |
breadcrumbs.html |
Provides breadcrumbs to the current page, based on the hierarchy fields. |
children.html |
Displays a bulleted list of children of the current page. You can modify the behavior by setting certain properties before including this template. (See below for an example.) |
footer.html |
A footer containing a copyright notice, license link, and language selector (if you have the right fields defined). |
github-edit.html |
A button that links to edit the current page's source file on GitHub. Requires the target's repository field to be the URL of the site's repository on GitHub. |
header.html |
A fixed header containing a logo, navigation to top-level pages, search, and Edit on GitHub buttons if the right fields are defined. |
language-dropdown.html |
A language-selector dropdown that points to the equivalent page in other languages, if you have multiple languages defined. (This is the one used in the header.) |
language-dropdown.html |
A horizontal language selector that points to the equivalent page in other languages, if you have multiple languages defined. (This is the one used in the footer.) |
page-toc.html |
A Bootstrap/ScrollSpy-ready table of contents based on the headers in the current page's Markdown contents. |
tree-nav.html |
Tree-style site navigation with collapsible levels. You can set a custom page to be the "top" of the tree to show only a subset of your site. Otherwise it uses the first page (usually the auto-provided cover page) as the top of the tree. Set nav_omit: true on a page to hide that page from this navigation. |
Children Module
The following demonstrates how to use the children.html
template to display a list of children of a page (including links):
{ % set parent_html = 'some-parent.html' %}
{ % set show_blurbs = True %}
{ % set depth = 3 %}
{ % include 'children.html' %}
You can omit any or all of the {% set ... %}
statements to use the defaults:
Setting | Description | Default |
---|---|---|
parent_html |
Which page's children to show. The HTML filename of that page. | The current page. |
show_blurbs |
If True, add the child page's blurb attribute next to its link. |
False |
depth |
How many levels in the hierarchy to show below the parent. | 5 |
Tree Nav Module
The following shows how to display a subset of the tree nav (starting with the file some_parent.html
) instead of the full tree:
{ % set tree_top = pages|selectattr('html', 'defined_and_equalto', 'some_parent.html')|list|first %}
{ % include 'tree-nav.html' %}
Template Data
Dactyl provides the following information to templates, which you can access with Jinja's templating syntax (e.g. {{ target.display_name }}
):
Field | Value |
---|---|
target |
The target definition of the current target. |
pages |
The array of page definitions in the current target. Use this to generate navigation across pages. (The default templates don't do this, but you should.) |
currentpage |
The definition of the page currently being rendered. |
categories |
A de-duplicated array of categories that are used by at least one page in this target, sorted in the order they first appear. |
config |
The global Dactyl config object. |
content |
The parsed HTML content of the page currently being rendered. |
current_time |
The current date as of rendering. The format is YYYY-MM-DD by default; you can also set the time_format field to a custom stftime format string. |
mode |
The output format: either html (default), pdf , or md . |
page_toc |
A table of contents generated from the current page's headers. Wrap this in a <ul> element. |
sidebar_content |
(Deprecated alias for page_toc .) |