Plugins

Attributes

The attributes plugin register two template filters to normalize the attributes of your HTML. This plugin is disabled by default so to enable it, you have to edit your _config.js file:

import lume from "lume/mod.js";
import attributes from "lume/plugins/attributes.js";

const site = lume();

site.use(attributes());

The filters included in this plugin are the following:

attr

Provide a convenient way to work with HTML attributes.

---
link:
  title: Go to GitHub
  href: https://github.com
  target: _blank
---

<a {{ link | attr | safe }}>

You can also filter the attributes names:

---
link:
  text: Go to GitHub
  href: https://github.com
  target: _blank
  noopen: true
  class:
    - link
    - link-external
---

<a {{ link | attr('href', 'target', 'noopen', 'class') | safe }}>
  {{ link.text }}
</a>

class

To work with HTML class names:

---
styles:
  - btn
  - btn-primary
---

<a class="{{ styles | class }}">

You can use objects to enable/disable classes:

---
styles:
  btn: true
  btn-primary: true
  is-disabled: false
---

<a class="{{ styles | class }}">