# @clean-jsdoc-theme/rang 中文文档

规范地址：https://npmcn.com/package/%40clean-jsdoc-theme/rang/

版本：5\.2\.1
npm 元数据更新时间：2026-10-24T11:24:02.139Z
中文译文更新时间：2026-11-10T00:46:09.935Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40clean-jsdoc-theme/rang
原文对照：https://npmcn.com/package/%40clean-jsdoc-theme/rang/?lang=original
项目主页：https://github.com/ankitskvmdam/clean-jsdoc-theme#readme
源码仓库：https://github.com/ankitskvmdam/clean-jsdoc-theme

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

- 包体积（解压后）：521 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：7 个
- peer 依赖：preact ^10\.22\.0
- 首次发布：2026-06-10T15:31:38.016Z
- 最新版本发布：2026-10-24T11:24:01.794Z
- 近 30 天下载量：21826（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：18（近 12 个月 18 个）

## 中文简介

Preact 组件、MDX 组件地图和岛屿登记册,用于清洁-jsdoc主题

## 安装

```sh
npm install @clean-jsdoc-theme/rang
```

也可以使用：`pnpm add @clean-jsdoc-theme/rang`、`yarn add @clean-jsdoc-theme/rang`、`bun add @clean-jsdoc-theme/rang`

## README

# @clean-jsdoc-them/ 响起

Preact 组件库 + MDX 元素映射 + 为 v5 主题的岛屿注册. dwar 直接导入到服务器的页面, 并捆绑每个岛屿作为它的 拥有无害环境管理块。 Rang拥有页面壳 HTML 的每个字节.

## 里面的东西

-   **颜色** —— 说 `Layout`, (中文(简体) ), `Header`, (中文(简体) ), `Footer`, (中文(简体) ), `Brand`只有SSR,没有客户JS自己的.
-   **群岛** —— 说 `Sidebar`, (中文(简体) ), `MobileNav`, (中文(简体) ), `TOC`, (中文(简体) ), `TocPopover`, (中文(简体) ), `CtrlK`, (中文(简体) ), `CodeTabs`, (中文(简体) ), `CopyBtn`, (中文(简体) ), `CopyPageButton`, (中文(简体) ), `ThemeToggle`, (中文(简体) ), `Settings`, (中文(简体) ), `LanguageSwitcher`, (中文(简体) ), `CodeViewer`, (中文(简体) ), `Embed`, (中文(简体) ), `PlaygroundMenu`, (中文(简体) ), `Tabs`。每个都使初始的 HTML 具有意义,并在水分化后逐步增强(键盘处理、焦点陷阱、卷轴平滑、抽屉状态、剪贴板、主题/设置持久性、地方导航、一个沙盒式iframe、一个CDN装入的摩纳哥源查看器、一个“打开代码”CodePen/JSFiddle/CodeSandbox倒放).
-   **仅提供 SSR 帮助** —— 说 `Steps`编号 :`Step` (编号为阶梯), `PageNav` (预/下个呼机), `Playground` (无标记的上下文承运人,其 `filename`编号 :`highlight`编号 :`providers` 页:1 `CodeBlock` 页:1 他们没有自己的岛屿.
-   **初级** - 阴影风格 `Button` (单位:千美元)`buttonVariants`, (中文(简体) ), `ButtonGroup` (分出/分出按钮), `DropdownMenu` (将根/起子/内容/项/.), `Dialog` (+ 数) `DialogHeader`编号 :`DialogTitle`编号 :`DialogBody`编号 :`DialogFooter`, (中文(简体) ), `CodeBlock` (代码-块头-) `CODE`/文件名标签,副本,和游乐场的倒下), `SimpleIcon` (Simple-Icons CSS-mask glyph), 和 互联网档案馆的存檔,存档日期2013-12-02 `cn` 班级合并助教.
-   **`defaultMdxComponents`** - 元素图 `@mdx-js/mdx`: 有悬停锚链接、 外部链接的标题 `rel`编号 :`target` 急躁, `<CopyBtn>`\- 被包装的代码块、表格/列表/引用原始人和 `<Callout>` 编号 : `<Steps>` 编号 : `<Tabs>` 编号 : `<Embed>` 编号 : `<Playground>` 要素.
-   **`ISLAND_REGISTRY`** —— 说 `Record<IslandName, ComponentType>` 键入 `IslandName` 来自工会 `@clean-jsdoc-theme/utils`十五把钥匙: `sidebar`, (中文(简体) ), `mobile-nav`, (中文(简体) ), `toc`, (中文(简体) ), `toc-mobile`, (中文(简体) ), `cmdk`, (中文(简体) ), `code-tabs`, (中文(简体) ), `code-viewer`, (中文(简体) ), `embed`, (中文(简体) ), `playground`, (中文(简体) ), `copy-btn`, (中文(简体) ), `copy-page`, (中文(简体) ), `theme-toggle`, (中文(简体) ), `settings`, (中文(简体) ), `language-switcher`, (中文(简体) ), `tabs`。 。 。 .
-   **i18n 接缝** - 铃声再出口bhasha's `LanguageProvider` 编号 : `useTranslation` 编号 : `createI18n` 所以德瓦可以包起每个水合根 从本地有效载荷中播种,而不单独导入bhasha. 每个染色体/岛屿弦都经过 `t(key)`· ; `LanguageSwitcher` 使一个地方没有.

`toc` 和 `toc-mobile` (单位:千美元)`TocPopover`,则 `< lg` 进展栏)是两个相同标题的演示; `mobile-nav` 编曲 切换主题,设置和侧边栏 `< md` 抽屉. `embed` 财务报告和审定财务报表 `tabs` 岛内岛屿(`embed` a. 将一个沙箱式框架水合; `tabs` 实值 SSR投降,只有DOM增强.

## 公共 API

```ts
import {
  // chrome
  Layout,
  Header,
  Footer,
  Brand,
  // islands
  Sidebar,
  MobileNav,
  TOC,
  TocPopover,
  CtrlK,
  CodeTabs,
  CopyBtn,
  CopyPageButton,
  ThemeToggle,
  useThemeMode,
  Settings,
  SettingsDialog,
  LanguageSwitcher,
  CodeViewer,
  // SSR render helpers + MDX containers
  Steps,
  Step,
  Tabs,
  Tab,
  PageNav,
  CodeBlock,
  // primitives
  Button,
  buttonVariants,
  ButtonGroup,
  DropdownMenu,
  Dialog,
  cn,
  // MDX map + registry
  defaultMdxComponents,
  ISLAND_REGISTRY,
  // i18n seam (re-exported from bhasha)
  LanguageProvider,
  useTranslation,
  createI18n,
} from '@clean-jsdoc-theme/rang';
```

每个部件都输出自己的道具类型(`SidebarProps`, (中文(简体) ), `TOCProps`岛屿 道具形状匹配 `IslandPropsMap[K]` 从 `@clean-jsdoc-theme/utils` 没错.

## 定型合同

组件以 Tailwind 工具类为样式, 参考 CSS 自定义 属性。 消费者(默认输油管中的战争;任何其他人) 直接)必须界定这些定义 `:root`数字 :

```
--clean-bg          --clean-bg-muted
--clean-fg          --clean-fg-muted
--clean-accent      --clean-accent-fg
--clean-border
--clean-font-heading   --clean-font-body   --clean-font-mono
```

阴影语义化名( C)`background`, (中文(简体) ), `foreground`, (中文(简体) ), `primary`, (中文(简体) ), `muted`, (中文(简体) ), `accent`, (中文(简体) ), `border`, (中文(简体) ), `ring`)被映射在这些 `--clean-*` 瓦尔斯通过 `@theme`, (中文(简体) ), (单位:千美元) `@custom-variant dark` 将 `dark:` 用于 `[data-theme="dark"]` (主题切换的信号)而不是OS `prefers-color-scheme`. 矮人 CSS 软件 管线羽流 `ThemeTokens` 自动输入这些变量; 独立 消费者必须界定它们.

## FOUC + 主题

`useThemeMode` (使用时间: `ThemeToggle`读取存储 `localStorage` 偏好在效果内,所以需要设置预水合内线脚本 `data-theme` 打开 `<html>` 在第一幅画之前 dwar 插入此脚本 自动;独立消费者应运送同等物品.

## 贡献者

感谢所有帮助建立干净的jsdoc主题的人.

[![Contributors](https://contrib.rocks/image?repo=ankitskvmdam/clean-jsdoc-theme)](https://github.com/ankitskvmdam/clean-jsdoc-theme/graphs/contributors)

## 许可证

麻省理工学院.

## 常见问题

### @clean-jsdoc-theme/rang 是什么？

Preact 组件、MDX 组件地图和岛屿登记册,用于清洁-jsdoc主题

### 如何安装 @clean-jsdoc-theme/rang？

在项目目录运行 npm install @clean-jsdoc-theme/rang，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：preact（^10\.22\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @clean-jsdoc-theme/rang 支持 TypeScript 吗？

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

### @clean-jsdoc-theme/rang 支持 ESM 还是 CommonJS？

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

### @clean-jsdoc-theme/rang 可以商用吗？

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

### @clean-jsdoc-theme/rang 的下载量有多少？

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

### @clean-jsdoc-theme/rang 还在维护吗？

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