Skip to content

@astrojs/ alpinejs

v0.4.0 GitHub npm Changelog

此 Astro 整合 将 Alpine.js 添加到你的项目中，以便你可以在页面上的任何位置使用 Alpine.js。

¥This Astro integration adds Alpine.js to your project so that you can use Alpine.js anywhere on your page.

安装

Section titled 安装

¥Installation

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

¥Astro includes an astro add command to automate the setup of official integrations. If you prefer, you can install integrations manually instead.

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

¥To install @astrojs/alpinejs, run the following from your project directory and follow the prompts:

Terminal window
npx astro add alpinejs

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

¥If you run into any issues, feel free to report them to us on GitHub and try the manual installation steps below.

手动安装

Section titled 手动安装

¥Manual Install

首先，安装 @astrojs/alpinejs 包。

¥First, install the @astrojs/alpinejs package.

Terminal window
npm install @astrojs/alpinejs

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

¥Most package managers will install associated peer dependencies as well. However, if you see a “Cannot find package ‘alpinejs’” (or similar) warning when you start up Astro, you’ll need to manually install Alpine.js yourself:

Terminal window
npm install alpinejs @types/alpinejs

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

¥Then, apply the integration to your astro.config.* file using the integrations property:

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


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

配置选项

Section titled 配置选项

¥Configuration Options

entrypoint

Section titled entrypoint

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

¥You can extend Alpine by setting the entrypoint option to a root-relative import specifier (e.g. entrypoint: "/src/entrypoint").

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

¥The default export of this file should be a function that accepts an Alpine instance prior to starting. This allows the use of custom directives, plugins and other customizations for advanced use cases.

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)
}

用法

Section titled 用法

¥Usage

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

¥Once the integration is installed, you can use Alpine.js directives and syntax inside any Astro component. The Alpine.js script is automatically added and enabled on every page of your website so no client directives are needed. Add plugin scripts to the page <head>.

以下示例添加 Alpine 的 Collapse 插件 以展开和折叠段落文本：

¥The following example adds Alpine’s Collapse plugin to expand and collapse paragraph text:

src/pages/index.astro
---
---
<html>
  <head>
    <!-- ... -->
    <script defer src="https://cdn.jsdelivr.net/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 智能感知

Section titled TypeScript 智能感知

¥Intellisense for TypeScript

@astrojs/alpine 集成将 Alpine 添加到全局窗口对象。对于 IDE 自动补齐，请将以下内容添加到你的 src/env.d.ts：

¥The @astrojs/alpine integration adds Alpine to the global window object. For IDE autocompletion, add the following to your src/env.d.ts:

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

示例

Section titled 示例

¥Examples

More integrations

UI Frameworks

SSR Adapters

Other integrations

Astro 中文网 - 粤ICP备13048890号