Attributes

提供辅助方法来管理 HTML 元素的属性和类名

描述

使用 attributes 插件来注册两个模板过滤器，以规范化你的 HTML 属性：

attr

提供一种便捷的方式来处理 HTML 属性。

---
link:
  title: Go to GitHub # 去往 GitHub
  href: https://github.com
  target: _blank
  noopen: false # 不添加 rel="noopener"
  class:
    - link
    - link-external
---

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

const link = {
  title: "Go to GitHub" // 去往 GitHub
  href: "https://github.com"
  target: "_blank"
  noopen: false // 不添加 rel="noopener"
  class: ["link", "link-external"]
}

export default function (_, { attr }) {
  return `<a ${ attr(link) }>Hello</a>`;
}

class

用于处理 HTML 类名：

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

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

const styles = [
  "btn",
  "btn-primary",
  { "is-disabled": true },
];

export default function (_, filters) {
  return `<a class="${filters.class(styles)}>Hello</a>`;
}

安装

在你的 _config.ts 文件中导入此插件以使用它：

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

const site = lume();

site.use(attributes());

export default site;