# @covet-pics/covet-pics-widget 中文文档

规范地址：https://npmcn.com/package/%40covet-pics/covet-pics-widget/

版本：0\.180\.0
npm 元数据更新时间：2026-11-03T15:39:07.725Z
中文译文更新时间：2026-11-10T21:23:56.304Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：8 MB，286 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：8 个
- 首次发布：2020-08-25T17:40:13.136Z
- 最新版本发布：2026-11-03T15:39:07.449Z
- 近 30 天下载量：5278（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：909（近 12 个月 57 个）

## 中文简介

Covet.pics 部件系统

## 安装

```sh
npm install @covet-pics/covet-pics-widget
```

也可以使用：`pnpm add @covet-pics/covet-pics-widget`、`yarn add @covet-pics/covet-pics-widget`、`bun add @covet-pics/covet-pics-widget`

## README

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# Covet.pics 部件

独立 Covet.pics 网络组件使用 Stencil 构建.

## 开始

将此重播为新目录 :

```bash
git clone https://github.com/SpaceSquirrelApps/covet-pics-widget.git covet-pics-widget
cd covet-pics-widget
```

运行 :

```bash
npm install
npm start
```

为了建造生产部件,运行:

```bash
npm run build
```

要对组件进行单元测试,请运行:

```bash
npm test
```

需要帮忙吗? 检查 Stencil 文件 [这里](https://stenciljs.com/docs/my-first-component)。 。 。 .

## 构成部分概览

### 库维特- pics- widget 游戏

此组件将抓取从 Covet.pics API 和 剖析 设置中嵌入的画廊数据,以确定画廊布局( )`grid`, (中文(简体) ), `slider`, (中文(简体) ), `collage`)和其他设置,如颜色,大小,垫等. 然后,它将提供适当的组成部分

### 贪婪- 图片- 壁画- 网格

这是一个有选项的网格布局来渲染"高亮"的图像. 支持两种主要布局模式(`grid` 或者说 `collage`),并可以通过地产进行切换 `layout`。网格中的项目为 `<covet-pics-gallery-item>`。 。 。 .

初始化时, 元素也会创建 `<covet-pics-popup>` 刚刚注射过 `</body>`。这样做是为了让弹出始终出现在任何页面元素上.

### 码头- 图片- 壁画- 滑坡器

这是滑行器(也叫幻灯片放映)布局. 与 `<covet-pics-gallery-grid>`,幻灯片中的项目是 `<covet-pics-gallery-item>` 并创建幻灯片 `<covet-pics-popup>` 和注射之前 `</body>`。 。 。 .

### 贪婪- pives- gallery- 流行

这是一个弹出组件,与 `<covet-pics-gallery-grid>` 打开 `<covet-pics-gallery-slider>`。 。 。 .

### 贪婪 - 图片 - 游戏 - 项目

儿童因素 `<covet-pics-gallery-grid>` 或者说 `<covet-pics-gallery-slider>`

## 使用 Covet.pics 部件

### 脚本标签

-   [向国家预防机制公布](https://docs.npmjs.com/getting-started/publishing-npm-packages)
-   设置类似此的脚本标签 `<script src='https://unpkg.com/@covet-pics/covet-pics-widget@latest/dist/covet-pics-widget/covet-pics-widget.js'></script>` 在索引.html的首页
-   然后可以在模板中任意使用元素,JSX,html等.
-   典型的用法是制作画廊。 为此,你需要知道 `Gallery Embed ID` 然后你只能嵌入 `covet-pics-widget` 而该组件将负责装入所有必要元素,例如,嵌入的代码标记将看起来像:

```
<body>

  ...

  <covet-pics-widget gallery-embed-id="XYZ"></covet-pics-widget>

  ...

</body>
```

在组件被加载后, 标记可以看起来像这样( 如果它是网格布局 ) :

```
<body>

  ...

  <covet-pics-widget gallery-embed-id="XYZ">
    <covet-pics-gallery-grid>
      <covet-pics-gallery-item>...</covet-pics-gallery-item>
      <covet-pics-gallery-item>...</covet-pics-gallery-item>
      <covet-pics-gallery-item>...</covet-pics-gallery-item>
      <covet-pics-gallery-item>...</covet-pics-gallery-item>
      <covet-pics-gallery-item>...</covet-pics-gallery-item>
      <covet-pics-gallery-item>...</covet-pics-gallery-item>
    </covet-pics-gallery-grid>
  </covet-pics-widget>

  ...

  <covet-pics-popup>
    ...
  </covet-pics-popup>

</body>
```

### 节点模块

-   运行 `npm install covet-pics-widget --save`
-   设置类似此的脚本标签 `<script src='node_modules/covet-pics-widget/dist/covet-pics-widget.js'></script>` 在索引.html的首页
-   然后可以在模板、JSX、html等中任意使用元素

# 测试

-   要更新快照运行 : `npm test -u` 或者说 `yarn test -u` 或者说 `npm run test --updateSnapshot`

# 光盘N

我们使用jsDelivr.com,完整URL:https://cdn.jsdelivr.net/npm/@covet-pics/covet-pics-widget@latest/dist/covet-pic-widget/covet-pics-widget.esm.js

每个新版本发布后, 请在 js Spell 上清除缓存 : [https://www.jsdelivr.com/tools/purge (中文(简体) )](https://www.jsdelivr.com/tools/purge)

## 常见问题

### @covet-pics/covet-pics-widget 是什么？

Covet\.pics 部件系统

### 如何安装 @covet-pics/covet-pics-widget？

在项目目录运行 npm install @covet-pics/covet-pics-widget，或使用 pnpm add / yarn add / bun add。

### @covet-pics/covet-pics-widget 支持 TypeScript 吗？

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

### @covet-pics/covet-pics-widget 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @covet-pics/covet-pics-widget 可以商用吗？

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

### @covet-pics/covet-pics-widget 的下载量有多少？

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

### @covet-pics/covet-pics-widget 还在维护吗？

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