Attributes

Provide helpers to manage attributes and class names of HTML elements

Description

Use the attributes plugin to register two template filters to normalize the attributes of your HTML:

attr

Provide a convenient way to work with HTML attributes.

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

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

class

To work with HTML class names:

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

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

Installation

Import this plugin in your _config.ts file to use it:

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

const site = lume();

site.use(attributes());

export default site;