Inline

配置参数

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".html" ]

attribute string

Attribute used to select the elements this plugin applies to

Default:

"inline"

copyAttributes union[]

List of extra attributes to copy if replacing the element

Default:

[ /^data-/ ]

Description

这个插件允许你自动地在 HTML 中内联一些资源，例如 CSS、图像或 JavaScript。任何带有 inline 属性的 HTML 标签都将被包含在 HTML 中。例如：

<link rel="stylesheet" href="/css/my-styles.css" inline />

<script src="/js/my-scripts.js" inline></script>

<img src="/img/avatar.png" inline />

<img src="/img/logo.svg" inline />

<style>
  /* Content of /css/my-styles.css */
  /* /css/my-styles.css 的内容 */
</style>

<script>
  // Content of /js/my-scripts.js
  // /js/my-scripts.js 的内容
</script>

<img src="data:image/png;base64,..." />

<svg>...</svg>

Installation

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

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

const site = lume();

site.use(inline(/* Options */));
// Options - 选项

export default site;

SVG inline

位图图像（例如 .png 或 .jpeg）以内联的 base64 数据形式存在，但 SVG 图像会被替换为 <svg> 元素。新的 <svg> 元素将保留与被替换的 <img> 相同的 class 和 id 属性。

例如，这个图像：

<img src="icon.svg" class="icon" id="icon-1" inline />

将变成：

<svg
  width="180px"
  height="180px"
  xmlns="http://www.w3.org/2000/svg"
  class="icon"
  id="icon-1"
>
  ...
</svg>

默认情况下，一些属性（如 id 或 class）会从原始 img 复制到新的 svg 元素。你可以配置插件以复制更多属性，使用字符串数组或正则表达式：

site.use(inline({
  copyAttributes: ["title", /^data-/], // Copy the "title" and all data-* attributes
  // 复制 "title" 和所有 data-* 属性
}));