# @eeacms/volto-listing-block 中文文档 规范地址：https://npmcn.com/package/%40eeacms/volto-listing-block/ 版本：11\.0\.5 npm 元数据更新时间：2026-11-04T18:10:25.688Z 中文译文更新时间：2026-11-13T07:56:47.198Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40eeacms/volto-listing-block 原文对照：https://npmcn.com/package/%40eeacms/volto-listing-block/?lang=original 项目主页：https://github.com/eea/volto-listing-block 源码仓库：https://github.com/eea/volto-listing-block ## 关键信息（来自 npm 元数据） - 包体积（解压后）：557 kB，100 个文件 - 模块格式：CommonJS - TypeScript 类型：未声明 - 运行依赖：5 个 - 首次发布：2021-06-10T12:44:15.625Z - 最新版本发布：2026-11-04T18:10:25.479Z - 近 30 天下载量：3241（2026-10-13 至 2026-11-11，npm 官方下载统计） - 已发布版本数：75（近 12 个月 11 个） ## 中文简介 @eeacms/volto-leaction-block: Volto 加载 ## 安装 ```sh npm install @eeacms/volto-listing-block ``` 也可以使用：`pnpm add @eeacms/volto-listing-block`、`yarn add @eeacms/volto-listing-block`、`bun add @eeacms/volto-listing-block` ## README # 伏地列名区块 [![Releases](https://img.shields.io/github/v/release/eea/volto-listing-block)](https://github.com/eea/volto-listing-block/releases) [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-listing-block%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-listing-block/job/master/display/redirect) [![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-listing-block&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-listing-block) [![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-listing-block&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-listing-block) [![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-listing-block&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-listing-block) [![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-listing-block&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-listing-block) [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-listing-block%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-listing-block/job/develop/display/redirect) [![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-listing-block&branch=develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-listing-block&branch=develop) [![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-listing-block&branch=develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-listing-block&branch=develop) [![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-listing-block&branch=develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-listing-block&branch=develop) [![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-listing-block&branch=develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-listing-block&branch=develop) [沃尔多](https://github.com/plone/volto) 加载 ## 特征 这一一揽子计划旨在提供一个框架,使专家组能够更灵活地列入名单 列出伏尔多区块. 它引入了UniversalCard的概念,即: 由指定的“项目模型”规范的通用组件. 它提供多处观点并和"茶瑟网"融合. ![Listing Block](https://raw.githubusercontent.com/eea/volto-listing-block/master/docs/volto-listing-block.gif) ## 升级 ### 升级到 11.x 第11版将许多卡片模板取而代之,并用两个表单列出变式 卡片模板和一套控件。 现有内容迁移到 飞来飞去,所以没有升级步骤可以跑去Plone. #### 变了 **布局图.** 上市区提供了四种布局:`summary`现在 默认),网格(`cardsGallery`),卡卢塞尔(`cardsCarousel`)和Andion(英语:Andion). 这个 布局选择了卡片模板:列表使用列表项,网格和Carousel使用 这张卡. **纸牌模板.** 仅剩名片和列表项 。 每个以前的模板是 现在,它们的综合控制: | 以前的模板( E)`itemModel['@type']`(中文(简体) ) | 现在 | 控件 | | --- | --- | --- | | `card` | 纸牌 | 上方图像 | | `imageOnLeft` 编号 : `imageOnRight` | 纸牌 | 左边/ 右边的图像 | | `imageCard` | 纸牌 | 内容模式: 只包含图像( 图像标题) | | `imageOnBottom` | 纸牌 | 内容模式:标题和标志 | | `visualizationCard` | 纸牌 | 可视化元素顺序,基准级别 | | `item` | 清单项目 | 左/右/ 无图像 | | `searchItem` | 清单项目 | 标题上的内容类型和日期 | | `simpleItem` | 清单项目 | 大小: 紧凑 (仅标题) | 可视化卡布局( E)`cardsVisualization`变成有五个的网格 列和"Top口音边框"牌样式. **牌控取.** - **卡片元素** (列表中的项目元素): 设置一个控制器 退出卡片的元数据。 拖动元素(图像、内容类型、日期、, 标题、基准级别、描述、标签、行动呼吁) 重新排序, 打开或关闭,并扩展其设置,例如事件 日期、标题和描述最大行、图标或行动呼吁 标签和URL. - **内容模式** (卡):图像和内容,仅图像(图像标题)或 标题和标志(提法). - **图像位置**:上,左,右或无. 只使用网格和卡鲁塞尔牌 提供顶端. - **翻转牌**:卡片在悬浮或键盘焦点上翻出. 每个元素 在卡片元素中选择其侧面. - **大小** (列表项目):默认或紧凑(仅标题). - **边框** (口音):没有边框,顶口音边框(口卡)或边框. #### 内容如何迁移 迁移是一个 JavaScript 函数 (单位:千美元)`src/components/UniversalCard/migrate.js` 对于卡片模型, `src/blocks/Listing/variations.js` ),而不是a Plone 升级步骤 : - **视图 :** 在每次渲染、存储的数据中, 块被移入内存 未更改。 页数与升级前相同. - **编辑 :** 当选择列表、搜索或取笑器块时,其数据是 重写到新模型, 控件显示迁移的值 . - **保存 :** 保存页面存储迁移后的数据。 永远没有的页面 编辑后保留了旧数据,并继续被迁移到苍蝇上. 已迁移的数据保持不变。 Volto 自己的列表模板 而图像图片库仅保留已使用的块 他们。 已保存的区块, 且该区块已不注册 Volto的默认列表,没有结果布局的搜索块也是如此. #### 如何升级 1. 更新您工程中添加的内容 `package.json` 运行 `yarn`数字 : ```JSON "dependencies": { "@eeacms/volto-listing-block": "^11.0.0" } ``` 2. 更新已删除模块的定制(阴影)和导入: - `blocks/Listing/item-templates/CardTemplates.jsx`, (中文(简体) ), `ItemTemplates.jsx`, (中文(简体) ), `SearchItemTemplate.jsx`, (中文(简体) ), `SimpleItemTemplates.jsx` 财务报告和审定财务报表 `VisualizationCard.jsx`改为: `CardTemplate.jsx` 财务报告和审定财务报表 `ItemTemplate.jsx` - `blocks/Listing/layout-templates/VisualizationCards.jsx`改为: `Gallery.jsx` 3. 其他加注注册的卡模板 `config.blocks.blocksConfig.listing.extensions.cardTemplates` 没有 迁移并不断自我改造. 检查一下他们看起来还是对的 与新的布局. 4. 请检查date=中的日期值 (帮助) 有列表、搜索结果和取笑者的几页: 在 编辑模式,选择块,检查牌控件并保存. ### 升级到 1.x 该版本要求: `@plone/volto >= 16.0.0.alpha.15` (单位:千美元)`volto-slate` (原始内容存档于2018-09-25). Part of Volto Core. ## 开始 ### 与 Docker 一起尝试自动列表块 ``` git clone https://github.com/eea/volto-listing-block.git cd volto-listing-block make make start ``` 转到 http://localhost:3:00 `make start` 现在默认为 Volto 18. 要运行同样的设置 对沃尔多17,使用: ``` VOLTO_VERSION=17 make VOLTO_VERSION=17 make start ``` ### 在您的 Volto 计划中添加 Volto 列表块 1. 确保你有 [Plone 后端](https://plone.org/download) 在http://localhost:8080/Plone上运行 ```Bash docker compose up backend ``` 2. 启动 Volto 前端 - 如果你已经有伏尔托项目,只需更新 `package.json`数字 : ```JSON "dependencies": { "@eeacms/volto-listing-block": "*" } ``` 财务报告和审定财务报表 `volto.config.js`数字 : ```JavaScript const addons = ['@eeacms/volto-listing-block']; ``` - 如果没有,请按照Plone官方文件对Volto 18+的建议,用 Cookieplone 创建一个: ``` uvx cookieplone project cd project-title ``` 1. 安装或更新依赖关系,然后启动项目 : ``` make install ``` 对于 Cookieplone 项目, 在单独的终端中启动后端和前端 : ``` make backend-start make frontend-start ``` 对于一个遗留下来的Volto 17项目,安装软件包 `yarn` 并像往常一样重新启动前端. 2. 转到 http://localhost:3:00 3. 剪辑愉快! ## 释放 见 [发 言](https://github.com/eea/volto-listing-block/blob/master/RELEASE.md)。 。 。 . ## 如何捐款 见 [发达国家d](https://github.com/eea/volto-listing-block/blob/master/DEVELOP.md)。 。 。 . ## 秘密扫描 此寄存器使用 Betterleaks GitHub 动作扫描当前 每个推拉请求的仓库内容。 扫描使用规则在 `.gitleaks.toml` 上传 a `betterleaks-report` 发现时的文物 检测到. 如果配置了可选的 SMTP 秘密, 失败的扫描也会发送电子邮件到 最后的犯规者。 工作流程期望这些寄存器或 组织机密: - `SMTP_URL` - `SMTP_PORT` (可选,默认为) `25`(中文(简体) ) - `SMTP_EMAIL` - `SMTP_PASSWORD` (如果 SMTP 服务器不需要认证, 可选择) 端口 `465` 以直接 TLS 发送; 其他端口使用默认 SMTP 握手. 电子邮件中包含一个简短的发现摘要, 包括每个发现中经过编辑的匹配行. 有三个共同的结果: 1. **一切都没事.** 这个 `Betterleaks / Scan for secrets` 检查为绿色 无需采取行动。 运行时间值的常规引用是确定的, 例如: ```js const tokenFromCookie = req.universalCookies.get('auth_token'); ``` 2. **发现了一个真正的秘密.** 检查为红色,工作流程日志要求您 下载 `betterleaks-report` 艺术品 从 GitHub 打开文物 动作运行并检查报告的文件,行和规则 。 删除已承诺 值,将其移动到合适的密店,如果被曝光则旋转. 报告条目是这样的: ```json { "RuleID": "secret-literal-assignment", "File": "src/config.js", "StartLine": 12, "Secret": "[REDACTED]" } ``` 3. **调查结果是虚假的阳性.** 只有在显然没有时才保留该值 敏感,例如测试固定图、占位符或公共实例。 添加 `betterleaks:allow` 在同一行中,并在 拉请求. ```js const testPassword = 'admin'; //betterleaks:allow ``` ```yaml password: "admin" #betterleaks:allow ``` 不添加 `betterleaks:allow` 到真正的证书. ## 版权和许可证 原始守则的初始所有人是欧洲环境署. 所有权利保留. 见 [利比里亚](https://github.com/eea/volto-listing-block/blob/master/LICENSE.md) 详细情况. ## 供资 [欧洲环境署(欧盟)](http://eea.europa.eu/) ## 常见问题 ### @eeacms/volto-listing-block 是什么？ @eeacms/volto-leaction-block: Volto 加载 ### 如何安装 @eeacms/volto-listing-block？ 在项目目录运行 npm install @eeacms/volto-listing-block，或使用 pnpm add / yarn add / bun add。 ### @eeacms/volto-listing-block 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/eeacms\_\_volto-listing-block 是否存在。 ### @eeacms/volto-listing-block 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @eeacms/volto-listing-block 可以商用吗？ @eeacms/volto-listing-block 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @eeacms/volto-listing-block 的下载量有多少？ 根据 npm 官方下载统计，@eeacms/volto-listing-block 在 2026/10/13 – 2026/11/11 这 30 天内被下载 3,241 次，日均约 108 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @eeacms/volto-listing-block 还在维护吗？ 最新版本 11\.0\.5 发布于 2026/11/05（8 天前）；至今共发布 75 个版本，其中过去 12 个月发布了 11 个；首次发布于 2021/06/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。