# @anyblades/blades 中文文档

规范地址：https://npmcn.com/package/%40anyblades/blades/

版本：3\.1\.1
npm 元数据更新时间：2026-11-04T01:29:38.685Z
中文译文更新时间：2026-11-06T07:48:14.779Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：1.8 MB，187 个文件
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2026-04-07T15:59:53.976Z
- 最新版本发布：2026-11-04T01:29:38.478Z
- 近 30 天下载量：29241（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：42（近 12 个月 42 个）

## 中文简介

Pico CSS的现代接班人.

## 安装

```sh
npm install @anyblades/blades
```

也可以使用：`pnpm add @anyblades/blades`、`yarn add @anyblades/blades`、`bun add @anyblades/blades`

## README

# 叶片✨

![](https://img.shields.io/npm/v/@anyblades/blades?label=&color=brightgreen) ![](https://img.shields.io/github/v/release/anyblades/blades?include_prereleases&label=%5E&labelColor=blue&color=blue) ![](https://img.shields.io/badge/%F0%9F%84%BB_MIT-gray) [![](https://img.shields.io/badge/83-white?logo=x&style=social)](https://x.com/BladesCSS) [![](https://img.shields.io/bluesky/followers/blades.dev?label=)](https://bsky.app/profile/blades.dev) [![](https://img.shields.io/mastodon/follow/117487235444867518?label=NEW)](https://mastodon.social/@BladesCSS) [![](https://img.shields.io/badge/%23blades-white?logo=discord&style=social)](https://discord.gg/mg8f26C)

![](https://trendshift.io/api/badge/trendshift/repositories/154122/daily?language=CSS) ![](https://trendshift.io/api/badge/trendshift/repositories/154122/weekly?language=CSS)

# 最小 CSS 框架 页:1 语义 HTML

刀锋CSS是现代的接班人 Pico CSS 软件。 。 。 .

切换一下 `pico.css` 改为 `blades.css`\- 还有!

开始吧  **二. 支助**  受到皮克的启发

* * *

## 快开始

有四个开始的方法:

### A类. 手动安装

[下载 CSS 归档](https://github.com/anyblades/blades/archive/refs/heads/main.zip) 和链接 `css/blades.css` 输入 `<head>` 您的网站.

```html
<link rel="stylesheet" href="css/blades.css" />
```

### B类. 来自 CDN 的使用

```html
<link rel="stylesheet" href="
  https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/blades.min.css
"/>
```

现场实例 : [https://github.com/pallets/website/blob/main/src/pallets/templates/layout.html 页面存档备份,存于互联网档案馆](https://github.com/pallets/website/blob/main/src/pallets/templates/layout.html)

CDN上的CSS文件完整列表:https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/

### C C. 与国家预防机制安装

```sh
npm install @anyblades/blades
```

接下来, `@import` CSS 文件中的刀片 :

```css
@import "@anyblades/blades";
```

或者,只导入所需的部件,例如每页或每个组件。 他们进来了 `@layer blades`,所以你的无层风格 胜过他们:

```css
@import "@anyblades/blades/variables";
@import "@anyblades/blades/layout/document";
@import "@anyblades/blades/content/typography";
@import "@anyblades/blades/components/card";
@import "@anyblades/blades/components/modal";
```

-   `variables` 财务报告和审定财务报表 `layout/document` 是最小值; 保持与 [src/pico/ index.css (中文(简体) )](https://github.com/anyblades/blades/blob/main/src/pico/_index.css)。 。 。 .
-   有些部分以其他部分为基础,例如:. `components/modal` 预期 `components/card`,以及 `components/group` 财务报告和审定财务报表 `components/dropdown` 预期 `forms/basics` 财务报告和审定财务报表 `content/button`。 。 。 .
-   见 分层模块 ,并用捆绑器和组件框架(SvelteKit, Next.js, Nuxt, Astro,...)从JavaScript中导入.
-   见 [软件包.json](https://github.com/anyblades/blades/blob/main/package.json) 用于列出所有出口部件.

### D类. 正式启动

-   [https://github.com/buildingawesome-one/起动器 页面存档备份,存于互联网档案馆](https://github.com/buildawesome-one/starter)
-   [https://github.com/buildingawesome-one/examples 页面存档备份,存于互联网档案馆](https://github.com/buildawesome-one/examples)
-   [https://github.com/getgrav/grav-them-quark2 互联网档案馆的存檔,存档日期2013-12-22](https://github.com/getgrav/grav-theme-quark2)
-   [https://github.com/getgrav/grav-plugin-devtools (中文(简体) )](https://github.com/getgrav/grav-plugin-devtools)

* * *

## 启动 HTML 模板

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <link rel="stylesheet" href="css/blades.css" />
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

使用Nunjucks,Twig或液体? 检查一下内置 基础 HTML 模板 每个引擎,准备用于您的项目.

* * *

## 文档

如果你知道皮克,你已经知道刀锋:

-   **开始吧**
    -   快开始
    -   暗图
    -   CSS 变量
    -   压缩版本 新建
    -   分层模块 新建
    -   受到皮克的启发
    -   有条件的样式
-   **版式**
    -   地标( C)
    -   集装箱
    -   网格
    -   文本栏 新建
    -   流出自动
-   **内容**
    -   类型
    -   链接
    -   图标 新建
    -   按钮
    -   图表
    -   代码块 新建
-   **表单**
    -   概览
    -   投入
    -   文本区域
    -   选择
    -   复选框
    -   无线电
    -   切换
    -   范围
    -   浮标标签 新建
-   **构成部分**
    -   手风琴
    -   纸牌
    -   下坠 更新
    -   组
    -   正在装入
    -   模式 更新
    -   导航
    -   进展
    -   工具提示
    -   时间线 新建
    -   公用事业
-   **再来**
    -   动态模板 新建
    -   基础 HTML 新建
    -   项目 XML 新建
    -   忍者组织 新建 (实验性加注)
    -   CSS框架 2026–2040 (英语)
    -   11ty / 建个很棒的包 \* \* \*

### 没有闪光的黑暗模式

有了基于 Pico 的构建, Blades 默认遵循 OS 设置, 没有 JavaScript 和 没有闪光 (参见 暗图) (中文(简体) ). 要强制主题, 设置 `data-theme="light"` 或者说 `"dark"` 打开 `<html>`。在一个嵌入式元素上,当元素绘制出自己的背景时,例如 `<article>`; 否则添加 `background-color: var(--pico-background-color); color: var(--pico-color);`。 。 。 .

如果你坚持用户的选择,例如: `localStorage` 键 `theme`属性 **在第一次油漆之前** 内含小脚本 `<head>`,例如,在SvelteKit's `src/app.html`数字 :

```html
<script>
  try {
    const theme = localStorage.getItem("theme");
    if (theme === "light" || theme === "dark") document.documentElement.dataset.theme = theme;
  } catch {}
</script>
```

-   稍后设置,例如: `onMount` 或者说 `useEffect`,使操作系统主题先切换.
-   在Next.js App路由器布局中,通过与模板文字相同的代码, ``<script dangerouslySetInnerHTML={{ __html: `try { … } catch {}` }} />``,并添加 `suppressHydrationWarning` 改为 `<html>`,因为属性在水合之前会改变.

### 缩合大小(可选入)

添加 `<html data-compact>` 对于整页,或者将属性放入单个元素上,例如. `<form data-compact>` 一个表格。 没有属性,没有什么变化.

-   **在那里:**
    -   列入 `blades.css`
    -   也在 `blades.layered.css`
    -   每部分进口,加上 `@anyblades/blades/compact` 其他部分之后
    -   与 `pico.conditional.css`,添加 `@anyblades/blades/src/compact` 紧接着
-   **哪些变化:**
    -   较小的控制垫和1.5雷姆区块间距
    -   0.5雷姆半径和3px焦点环
    -   500重标签和按钮,600重标题
    -   光模式下的白色字段背景
    -   1px卡环而不是模糊的阴影,没有灰色卡片头/脚带
-   **根字体大小 :** 打开 `<html>`,它也将根字体大小保持在100%,而不是随取景口而增长. 在宽度为1280px时,控制为38px而不是62px. 在一个单一的元素上,它们大约是48px,因为每件东西都大小于 `rem` 而根相续.
-   **字段文本大小 :** 窗体控件保持在16px, 因为低于iOS Safari 放大到焦点.

## 委托人

-   [_🐍_ 火焰和金贾](https://palletsprojects.com/) 社区网站 [↗](https://github.com/pallets/website/blob/main/src/pallets/templates/layout.html)
-   [重力 CMS v2 重力 CMS v2](https://getgrav.org/migrate-to-2#:~:text=blades) 默认主题 [↗](https://github.com/getgrav/grav-theme-quark2)
-   [快取机](https://www.fastht.ml/docs/api/pico.html) 皮科组件 [↗](https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py)

* * *

### 🥷✨

## 常见问题

### @anyblades/blades 是什么？

Pico CSS的现代接班人\.

### 如何安装 @anyblades/blades？

在项目目录运行 npm install @anyblades/blades，或使用 pnpm add / yarn add / bun add。

### @anyblades/blades 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/anyblades\_\_blades 是否存在。

### @anyblades/blades 可以商用吗？

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

### @anyblades/blades 的下载量有多少？

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

### @anyblades/blades 还在维护吗？

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