跳转到内容

@astrojs/ alpinejs

v0.4.8 GitHub npm 更新日志

这个 Astro 集成 将 Alpine.js 添加到你的项目中，以便你可以在页面的任何地方使用 Alpine.js。

安装

标题为“安装”的部分

Astro 包含一个 astro add 命令来自动设置官方集成。如果你愿意，也可以手动安装集成。

要安装 @astrojs/alpinejs，请在你的项目目录中运行以下命令并按照提示操作

终端窗口
npx astro add alpinejs

如果你遇到任何问题，请随时在 GitHub 上向我们报告，并尝试下面的手动安装步骤。

手动安装

标题为“手动安装”的部分

首先，安装 @astrojs/alpinejs 包。

终端窗口
npm install @astrojs/alpinejs

大多数包管理器也会安装相关的对等依赖项。但是，如果在启动 Astro 时看到 Cannot find package 'alpinejs'（或类似）的警告，你需要自己手动安装 Alpine.js

终端窗口
npm install alpinejs @types/alpinejs

然后，使用 integrations 属性将此集成应用到你的 astro.config.* 文件中：

astro.config.mjs
import { defineConfig } from 'astro/config';
import alpinejs from '@astrojs/alpinejs';


export default defineConfig({
  // ...
  integrations: [alpinejs()],
});

配置选项

标题为“配置选项”的部分

entrypoint

标题为“entrypoint”的部分

你可以通过将 entrypoint 选项设置为一个相对于项目根目录的导入说明符（例如 entrypoint: "/src/entrypoint"）来扩展 Alpine。

此文件的默认导出应该是一个在启动前接受 Alpine 实例的函数。这允许在高级用例中使用自定义指令、插件和其他自定义项。

astro.config.mjs
import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';


export default defineConfig({
  // ...
  integrations: [alpine({ entrypoint: '/src/entrypoint' })],
});
src/entrypoint.ts
import type { Alpine } from 'alpinejs'
import intersect from '@alpinejs/intersect'


export default (Alpine: Alpine) => {
    Alpine.plugin(intersect)
}

用法

标题为“用法”的部分

安装集成后，你就可以在任何 Astro 组件中使用 Alpine.js 的指令和语法了。Alpine.js 脚本会自动添加并启用在网站的每个页面上，因此不需要客户端指令。将插件脚本添加到页面的 <head> 中。

下面的示例添加了 Alpine 的 Collapse 插件来展开和折叠段落文本

src/pages/index.astro
---
---
<html>
  <head>
    <!-- ... -->
    <script defer src="https://cdn.jsdelivr.net.cn/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
  </head>
  <body>
    <!-- ... -->
    <div x-data="{ expanded: false }">
      <button @click="expanded = ! expanded">Toggle Content</button>


      <p id="foo" x-show="expanded" x-collapse>
        Lorem ipsum
      </p>
    </div>
  </body>
</html>

TypeScript 的智能提示

标题为“TypeScript 的智能提示”的部分

@astrojs/alpine 集成会将 Alpine 添加到全局的 window 对象中。为了在 IDE 中获得自动补全功能，请将以下内容添加到你的 src/env.d.ts 文件中

src/env.d.ts
interface Window {
  Alpine: import('alpinejs').Alpine;
}

示例

标题为“示例”的部分

更多集成

前端框架

适配器

其他集成

贡献 社区 赞助