# @blobatar/svelte 中文文档

规范地址：https://npmcn.com/package/%40blobatar/svelte/

版本：2\.7\.0
npm 元数据更新时间：2026-08-29T14:01:32.165Z
中文译文更新时间：2026-11-08T07:07:01.147Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40blobatar/svelte
原文对照：https://npmcn.com/package/%40blobatar/svelte/?lang=original
项目主页：https://github.com/Alain00/blobatar#readme
源码仓库：https://github.com/Alain00/blobatar

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：25.7 kB，10 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：blobatar 2\.x，svelte \>=5
- 首次发布：2026-08-20T13:17:52.694Z
- 最新版本发布：2026-08-29T14:01:31.765Z
- 近 30 天下载量：5269（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 6 个）

## 中文简介

Blobatar的斯维尔特适配器——定相几何活体.

## 安装

```sh
npm install @blobatar/svelte
```

也可以使用：`pnpm add @blobatar/svelte`、`yarn add @blobatar/svelte`、`bun add @blobatar/svelte`

## README

# @blobatar/ svelte (英语)

Svelte 适配器用于 [斑点](https://github.com/Alain00/blobatar) ——定型几何活字.

## 安装

```sh
bun add @blobatar/svelte blobatar
```

## 使用量

```svelte
<script>
  import { Blobatar } from "@blobatar/svelte";
</script>

<Blobatar name="username" />
```

## 跟着指针

眼睛可以跟踪光标. 那层是运动系统的一部分 它需要JavaScript,所以它是一个单独的子路径,在您的 捆绑,除非您导入它 :

```svelte
<script>
  import { Blobatar } from "@blobatar/svelte";
  import { gaze } from "@blobatar/svelte/gaze";
  import "blobatar/motion.css";
  import "blobatar/gaze.css"; // required — the eyes hold still without it

  const eyes = gaze({ travel: 3, target: "pointer" });
</script>

<Blobatar {@attach eyes} name="alain@example.com" animate="always" size={200} />
```

附加而非动作,它需要斯维尔特5.29或更新:a 动作只能写在它应用的元素和此处的元素上 属于 `<Blobatar>`。附件跨越边界,这就是 这是双行集成,而不是停止使用组件的理由.

`travel` 是外出,是选择地层的地层 `--mo-track-travel` 开始于 `0px`,所以一个带有样式表的页面 游览无处可去 司机跑来跑去 眼睛也动不了 这是在 视图框单位——blobatar为100横,所以 `3` 是面额的3% 大约1.5到4读取良好。 别管它了 风格表是拥有它的, 这是一条更好的道路 对于整个田地的blobatar, 因为财产 继承,或任何响应的:

```css
.hero .mo-eyes { --mo-track-travel: 3px; }
```

选择一个,而不是两个. `travel` 写在眼睛上 所以这里 它超越了这样的规则—— 与反应钩的作用相反 对于斯维尔特的特定原因:斯维尔特重写 `<svg>`整个 `style` 属性,当一个道具改变时,所以写在那里的属性会消失 这是第一次 `name` 对.

当blobatar上架时,选项中的所有内容都会被读取一次。 目标 更改为 `lookAt`,以你自己的影响:

```svelte
const eyes = gaze({ travel: 3 });
$effect(() => eyes.lookAt(watching ? "pointer" : "rest"));
```

两者都采取相同的做法:客户端坐标的一分,元素 (单位:千美元)`eyes.lookAt(button)`, (中文(简体) ), `"pointer"` 为光标, `"rest"` 把眼睛停放起来 在中间,不恢复闲置的目光,或 `null` 白费什么的 把它拿回来。 最终要求的胜利,无论谁要求的,并瞄准 {\\fn华文楷体\\fs20\\bord1\\shad1\\1che0e0e0\\2ch000000}活活活被活活活活活活活活活活活活活活活活活被活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活 可以直接通过 `lookAt` 每按键不重交.

保持结果为 `const`调用 `gaze()` 模板中的内含重建 当读取状态发生变化时, 驱动程序会改变, 而一个新的驱动程序会从 眼睛在中间.

## 什么这个包裹船

斯维尔特,不是JavaScript. Svelte 组件只在内部变成可转换代码 您的编译器, 因此这里没有构建输出, 也没有被发明出来 软件包可以通过 `svelte` 导出条件, 每个 Svelte 应用工具链( e)`vite-plugin-svelte`斯维尔特基特, `svelte-check`) (中文(简体) ). 捆绑器 没有它就无法解决这个包, 而不是给你一个 文件无法执行 .

需要svelte 5:组件用活字写出.

## 道具

| Prop | 类型 | 说明 |
| --- | --- | --- |
| `name` | `string` | **要求.** 谁的blobatar是为. |
| `size` | `number` | 以像素表示宽和高. |
| `animate` | `"always" | "hover"` | 启用动画 . |
| `background` | `string | false` | 背景风格. |
| `palette` | `string[]` | 彩色调色板. |
| `hue` | `number` | 把它拉起来. |
| `tone` | `number` | 收声. |
| `normalize` | `boolean` | 将名字规范化. |
| `contrast` | `boolean` | 启用对比 . |
| `title` | `string` | 可访问标题. |
| `expression` | `Expression` | 要表达的. |
| `traits` | `TraitOverrides` | 超越特定特征. |

## 许可证

麻省理工学院

## 常见问题

### @blobatar/svelte 是什么？

Blobatar的斯维尔特适配器——定相几何活体\.

### 如何安装 @blobatar/svelte？

在项目目录运行 npm install @blobatar/svelte，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：blobatar（2\.x）、svelte（\>=5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @blobatar/svelte 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @blobatar/svelte 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @blobatar/svelte 可以商用吗？

@blobatar/svelte 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @blobatar/svelte 的下载量有多少？

根据 npm 官方下载统计，@blobatar/svelte 在 2026/10/09 – 2026/11/07 这 30 天内被下载 5,269 次，日均约 176 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @blobatar/svelte 还在维护吗？

最新版本 2\.7\.0 发布于 2026/08/29（2 个月前）；至今共发布 6 个版本，其中过去 12 个月发布了 6 个；首次发布于 2026/08/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。