 | 相关 | ||
  |  rm/compress?label=Download&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Download" title="Download"> |   dia="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/@playform/format?label=Version&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0"> |  Width=0"> |
Inline 🦔
此 Astro 集成 将 beasties 引入
你的 Astro 项目。
Beasties 是一个插件，用于内联你应用的 [关键 CSS] 并懒加载 其余部分。
注意
Inline不会内联你的请求，仅针对你的静态生成构建 和预渲染路由。
安装 🚀
有两种方式可以将集成添加到你的项目中。让我们先尝试最 方便的选项！
astro add 命令
Astro 包含一个用于添加第一方集成的 CLI 工具：astro add。此
命令将：
- （可选）安装所有必要的依赖项和同级依赖项
- （同样可选）更新你的
astro.config.*文件以应用此集成
要安装 Inline，请在你的项目目录中运行以下命令并
按照提示操作：
使用 NPM：
npx astro add @playform/inline使用 Yarn：
yarn astro add @playform/inline使用 PNPM：
pnpx astro add @playform/inline手动安装依赖项
首先，按如下方式安装 Inline 集成：
npm install -D -E @playform/inline然后，使用 integrations 属性将此集成应用于您的 astro.config.* 文件：
export default {
integrations: [(await import("@playform/inline")).default()],
};入门指南
Beasties 现在会自动内联 HTML 文件中的关键 CSS。
默认内联
您可以从以下配置中覆盖任何默认选项：
或完全禁用它们：
export default {
integrations: [
(await import("@playform/inline")).default({
Beasties: false,
}),
],
};添加多个路径
您可以通过将 Path 变量指定为数组来内联添加多个路径。
astro.config.ts
export default {
integrations: [
(await import("@playform/inline")).default({
Path: ["./Target", "./Build"],
}),
],
};输入-输出映射
您还可以为不同的输入输出目录提供路径映射。
astro.config.ts
export default {
integrations: [
(await import("@playform/inline")).default({
Path: new Map([["./Source", "./Target"]]),
}),
],
};或这两个的数组。
astro.config.ts
export default {
integrations: [
(await import("@playform/inline")).default({
Path: [
// Inline Target
"./Target",
// Inline Target one more time into a different directory
new Map([["./Target", "./TargetInline"]]),
],
}),
],
};文件过滤
你可以过滤文件，以排除特定文件不被内联。过滤器可以是 正则表达式数组或单个匹配项。你还可以使用函数 来匹配文件名：
astro.config.ts
export default {
integrations: [
(await import("@playform/inline")).default({
Exclude: [
"File.html",
(File: string) => File === "./Target/index.html",
],
}),
],
};控制日志记录
您可以通过设置 Logger 参数来控制日志记录级别。默认
值为 2，但如果您不想看到调试消息，可以将其设置为 0：
export default {
integrations: [
(await import("@playform/inline")).default({
Logger: 0,
}),
],
};变更日志
请参阅 CHANGELOG.md 了解此集成的变更历史。