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 }}">