Skip to main content
LFP Docs

Theme Extensions

LFP Docs uses a set of custom layouts and components, some of which are available for end users to consume and remix into new layouts.

All layouts and components are written in JavaScript, using Eleventy's proprietary (but relatively flexible) 11ty.js flavor.[1]

Layouts

// each .11ty.js template file must include an exported function render() // rename this function for convenience

lfp-base-frame

A completely empty canvas, only provides the HTML document structure and a completely stuffed-out <head>; all default themes inherit from this.

lfp-base-bare

A minimal layout, only including the default theme's header.

lfp-base-documentation

By default, this layout is used for all documentation pages that are generated with LFP Docs. This layout features the per-topic navigation as well as the same-page table of contents, additionally to the top-level header.

Components

The default layouts are composed of several components, where lfp-base-header are lfp-base-footer are designed to ready to be consumed by custom layouts and templates.

Enable Template Render Macros

In order for template files written in JavaScript, according to the 11ty.js standard to be used within non-JavaScript templates, you have to activate Eleventy's own render plugin:

import { RenderPlugin } from '@11ty/eleventy';

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(RenderPlugin);
}
eleventy.config.js

This makes the renderFile shortcode available in all templates.

lfp-base-header

The default header section includes the documentation's logo and the top-level site navigation with external resource links (if set in configuration).

Include the header like this, when using JavaScript:

// each component features a default export function,
// expecting the `data` object that Eleventy passes to .11ty.js templates
import { Header } from '@lowfat/eleventy-plugin-lfp-docs/templates/lfp-base-header';

// do not forget to include `this` and template data
// passed by Eleventy when calling imported components.
export function render(data) {
  return `<!DOCTYPE html>
<html>
<head><!-- things for the head --></head>
<body>
  ${Header.call(this, data)}
  <!-- all other content ->
</body>
</html>`;
}
custom-layout.11ty.js

For Nunjucks and Liquid, first enable Eleventy's render macros, then use this approach:

{# you have to be explicit when importing the file #}
{# the object that the component expects as parameter has to be created explicitly #}
{% renderFile "./node_modules/@lowfat/eleventy-plugin-lfp-docs/dist/templates/lfp-base-header.11ty.js", { config: config, collections: collections } %}
custom-layout.njk

The default footer section for LFP Docs theme is optionally included by setting config.footer to true and supplying HTML data for either config.footerCopyright or config.footerMenu, or both.

The procedure to integrate this component with your template or layout is the same as with lfp-base-header.

  1. This makes it possible for the plugin to use components and compartimentalized layouts stored in arbitrary locations (such as the plugin's directory in /node_modules); due to language limitations, Nunjucks and Liquid do not allow this with their {% extends %} syntax. ↩︎

Edit this page on Codeberg
Last updated: