# @etchteam/storybook-addon-marker 中文文档

规范地址：https://npmcn.com/package/%40etchteam/storybook-addon-marker/

版本：7\.0\.0
npm 元数据更新时间：2025-10-28T13:39:49.080Z
中文译文更新时间：2026-11-14T12:23:30.880Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：9.9 kB，7 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：1 个
- peer 依赖：storybook ^10\.0\.0
- 首次发布：2021-07-16T11:58:58.920Z
- 最新版本发布：2025-10-28T13:39:48.880Z
- 近 30 天下载量：2053（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 0 个）

## 中文简介

在故事本 UI 中添加 Marker.io 反馈按钮

## 安装

```sh
npm install @etchteam/storybook-addon-marker
```

也可以使用：`pnpm add @etchteam/storybook-addon-marker`、`yarn add @etchteam/storybook-addon-marker`、`bun add @etchteam/storybook-addon-marker`

## README

# 故事书添加标记

要添加的童话本 Addon [标记.io](https://marker.io/) 反馈按钮 [故事书](https://storybook.js.org/)。 。 。 .

![React Storybook Screenshot](https://raw.githubusercontent.com/etchteam/storybook-addon-marker/master/screenshot.png)

## 安装

```sh
npm install @etchteam/storybook-addon-marker --save-dev
```

## 配置故事书

创建名为的文件 `main.js` 在你身边 `.storybook` 配置文件夹 .

增加以下内容

```js
export default {
  addons: ['@etchteam/storybook-addon-marker']
}
```

然后创建一个名为 `preview.js` 在同一文件夹中添加 [标记工程 ID](https://marker.io/blog/integrate-web-app-browser-sdk) 输入 [初始全球](https://storybook.js.org/docs/essentials/toolbars-and-globals)。 。 。 .

```js
export default {
  initialGlobals: {
    marker: {
      project: 'abcd1234567890', // Your unique project ID
    },
  },
}
```

仅 `project` 要求 [标记部件的其他参数](https://github.com/marker-io/browser-sdk/blob/b5b3b9b19c7525be7dfa3f92b745f74f8e305303/src/index.ts#L7) 被接受,并将传给 [页:1 `loadWidget` 方法](https://github.com/marker-io/browser-sdk?tab=readme-ov-file#method-1-passing-custom-metadata-while-loading-your-widget)。 。 。 .

此外 `mode` 选项 [浏览器 SDK `capture` 方法](https://github.com/marker-io/browser-sdk?tab=readme-ov-file#widgetcapturemode) 可以在此配置中添加 :

```js
export default {
  initialGlobals: {
    marker: {
      project: 'abcd1234567890', // <- Your unique project ID
      mode: 'fullscreen', // fullscreen | advanced
    },
  },
}
```

## 配置标记

如何定位您的 Marker 工程和其他 Marker 配置选项的指南可在 [标记网站](https://help.marker.io/en/collections/3646812-configuration)。 。 。 .

### 隐藏标记部件按钮

此添加符在"故事本"工具栏中放出一个反馈按钮并自动隐藏默认的标记按钮.

如果您发现复制按钮仍然出现,则在Widget > Button >按钮能见度下有一个可被设定为"隐藏"的Marker设置.

### 屏幕截图渲染

如果截图无法正确渲染检查 [标记提示和限制](https://help.marker.io/en/articles/6282853-widget-screenshot-tips-limitations#h_96fa6c657e)。 。 。 .

* * *

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}用.. [爱奇](https://etch.co/)

## 常见问题

### @etchteam/storybook-addon-marker 是什么？

在故事本 UI 中添加 Marker\.io 反馈按钮

### 如何安装 @etchteam/storybook-addon-marker？

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

### @etchteam/storybook-addon-marker 支持 TypeScript 吗？

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

### @etchteam/storybook-addon-marker 支持 ESM 还是 CommonJS？

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

### @etchteam/storybook-addon-marker 可以商用吗？

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

### @etchteam/storybook-addon-marker 的下载量有多少？

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

### @etchteam/storybook-addon-marker 还在维护吗？

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