HTML Templates

Unlike Neuron, Emanote’s generated HTML can be completely customized. Emanote uses the Heist HTML template system that supports non-trivial constructs like recursion; see here for a tutorial on its syntax.

The default HTML templates are stored in the default layer, which can you override either totally or in subset.

Default Layout

Emanote includes a default layout that includes a Sidebar, but can be customized to mimic Neuron-like layout. You may also write your own HTML layout from scratch, as long as you specify that template in YAML configuration for the notes in question. For eg., templates/home.tpl is how https://srid.ca homepage is generated, because its index.md specifies this template as template.name in its YAML frontmatter (which could also be index.yaml).

Features

Links to this page

YAML configuration

[!tip] Using in HTML templates You can reference the YAML frontmatter config from HTML Templates. See here for details.
Uplink tree

The uplink tree or “uptree”^* is a feature available in HTML Templates, which visualizes hierarchical relationships between notes as a graph at the top of the page.
Table of contents

In the default template, the table of contents is rendered on the right side. TOC is rendered only if the page has more than one heading.
Sidebar

In the default template, the sidebar is rendered on the left side. The sidebar tree is determined from folgezettel heterarchy.
Neuron-like layout

Emanote’s builtin HTML template layout can be configured to toggle UX features on or off. The default configuration includes Sidebar, Table of contents and Breadcrumbs but hides the Uplink tree. To mimic the layout used by Neuron, turn off sidebar and breadcrumbs while enabling the uptree. Add this to your YAML configuration:
Migrating from neuron

Full theming (customize HTML Templates fully)
Layer system

Emanote implicitly includes what is known as the “default” layer. Its contents can be seen here. This layer contains HTML Templates, index.yaml and other default assets, like the logo, favicon and fonts. When you run emanote -L /your/notebook run, your notebook is overlaid on top of this default layer. What this means, in effect, is that you override just about any file in the default layer, such the HTML content of HTML Templates, in your own notebook directory. As an example, see template/hooks of this documentation notbook.
External links

Note that the attribute can also be used to display the icons in the HTML templates (like the footer or the sidebar) or in raw HTML of Markdown ✍️.

The displayed icon may depend on the link properties (e.g. the actual URI scheme). This is customized using CSS. By default, Emanote displays a different icon if the URI scheme component is mailto:. Check the https://github.com/srid/emanote/tree/master/emanote/default/templates/base.tpl of HTML template for details.
Callouts

To add a new custom callout named foo (viz.: [!foo] ...), create a /templates/filters/callout/foo.tpl file in your templates folder. You can also change the layout and styling of existing callout types in /templates/filters/callout/*.tpl.