前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载导读本文围绕 wp-calypsoWordPress.com 的 JavaScript 与 API 驱动前端中负责渲染插件市场Plugin Marketplace分类结果页的核心组件PluginsCategoryResultsPage展开。你将掌握该组件的挂载方式、完整 Props 契约、分类数据来源与分页数据流并通过源码了解它如何与插件浏览页、分类定义和无限滚动机制协作从而能够在自己的插件浏览场景中正确复用与扩展这一组件。组件定位插件浏览器的分类结果页PluginsCategoryResultsPage位于 client/my-sites/plugins/plugins-category-results-page其 READMEREADME.md给出的定义非常明确该组件负责渲染插件浏览器plugins browser的分类结果页面——即用户点击某个插件分类如 SEO、Ecommerce、Security 等后展示该分类下插件列表的整块区域。从目录结构看该模块只有两个文件README.md组件使用文档index.jsx组件实现default export。它不是一个独立路由页面而是被上层PluginsBrowser编排组件按条件动态渲染的内容区组件这一点在后续集成章节会详细展开。快速上手如何挂载组件按照 README 的指引从calypso/my-sites/plugins/plugins-category-results-page导入组件传入分类与站点相关 props 即可渲染import PluginsCategoryResultsPage from calypso/my-sites/plugins/plugins-category-results-page; function render() { return ( div PluginsCategoryResultsPage clearSearch{ clearSearch } search{ search } category{ category } sites{ sites } searchTitle{ searchTitle } siteSlug{ siteSlug } siteId{ siteId } jetpackNonAtomic{ jetpackNonAtomic } selectedSite{ selectedSite } sitePlan{ sitePlan } isVip{ isVip } / /div ); }提示README 示例中的clearSearch、searchTitle、jetpackNonAtomic、selectedSite、sitePlan、isVip等参数在组件的当前实现见下文源码级解析中已不再直接消费它们属于父组件历史演进中遗留的调用方式。以当前 index.jsx 为准组件实际只解构category、siteSlug、sites三个 props多余参数会被安全忽略因此 README 中的写法依然兼容。Props 契约README 对 Props 的说明如下Prop类型说明sitestring所选站点的 slugREADME 原文为 a string containing the slug of the selected sitesitessites-list 对象站点列表对象用于判断插件在各站点上的安装状态categorystring当前选中的分类 slugsearchstring当前的搜索词若存在则为搜索字符串pathstring当前 URL 路径结合当前实现可以确认真正被使用的 props 是category、siteSlug、sites。其中category分类 slug直接驱动usePlugins数据请求与分类标题/描述查询siteSlug当前站点 slug用于构建升级引导UpgradeNudge与插件列表的site上下文sites站点列表传给PluginsBrowserList的currentSites供每个插件条目判断已安装/可安装状态。README 中提到的search与path在组件内部并未直接消费——搜索态在父组件PluginsBrowser中会被分流到PluginsSearchResultPage详见下文path则只出现在 README 的 props 文档中。编写新代码时建议以实际解构的三个 props 为准。源码级解析组件内部的数据流client/my-sites/plugins/plugins-category-results-page/index.jsx 完整实现了分类结果页的渲染逻辑核心数据流如下const { plugins, isFetching, fetchNextPage, pagination } usePlugins( { category, infinite: true, slugs: category wpbeginner ? WPBEGINNER_PLUGINS : undefined, } );1. 数据获取usePlugins hook组件通过 use-plugins/index.ts 提供的usePluginshook 获取插件数据。该 hook 是本组件的数据大脑其内部按分类分流三类数据源ElasticSearch 查询useESPluginsInfinite默认数据源处理搜索以及除paid、featured外的所有分类返回带分页结构{ plugins, pagination: { results, page, pages } }的结果支持无限滚动翻页WPCOM 商业插件列表useWPCOMPluginsList仅当category paid时启用拉取 WordPress.com 付费插件WPCOM 精选插件useWPCOMFeaturedPlugins仅当category featured时启用对应发现页discover page的精选列表。usePlugins还会根据分类名从useCategories查得对应的tags拼接成逗号分隔的tag参数传给查询wpbeginner分类则直接使用WPBEGINNER_PLUGINS常量定义于 client/my-sites/plugins/constants指定的固定 slug 列表。2. 分类元数据useCategories组件调用 categories/use-categories.tsx 中的useCategories()获得分类字典用于解析当前分类的展示信息const categoryName categories[ category ]?.title || category; const categoryDescription categories[ category ]?.description;categories[ category ].title分类标题如 Powering your online storecategories[ category ].description分类副标题描述若分类字典中不存在该 slug例如wpbeginner则标题回退为原始分类字符串。该文件还导出了ALLOWED_CATEGORIES涵盖analytics、booking、ecommerce、seo、security、paid、popular、featured等数十个分类 slug其中一部分如popular、featured、paid注释明确指出并非真实分类但在 UI 中按分类处理还有大量affiliate、quiz、forms、membership等是为改善 SEO 而补充的额外分类。分类的tags数组会被usePlugins用作查询参数例如ecommerce分类映射到[ ecommerce, e-commerce, woocommerce, payments ]。3. 结果计数与多语言组件用useTranslate生成本地化结果计数文案resultCount translate( %(total)s plugin, %(total)s plugins, { count: pagination.results, textOnly: true, args: { total: pagination.results.toLocaleString() }, } );即根据pagination.resultsES 查询返回的总结果数显示 1,234 plugins 之类的计数单复数由count参数自动处理toLocaleString()保证千位分隔符符合当前 locale。4. 列表渲染PluginsBrowserList核心列表由 plugins-browser-list 渲染PluginsBrowserList title{ categoryName } subtitle{ categoryDescription } resultCount{ resultCount } plugins{ plugins } listName{ category } listTypebrowse site{ siteSlug } showPlaceholders{ isFetching } currentSites{ sites } variant{ PluginsBrowserListVariant.InfiniteScroll } extended injectAfterIndex{ isMarketplaceRedesign ? 12 : undefined } injectElement{ isMarketplaceRedesign ? BusinessPlanBanner / : undefined } /关键点variant{ PluginsBrowserListVariant.InfiniteScroll }使用无限滚动变体extended列表项使用 Extended 变体PluginsBrowserElementVariant.Extended相比 Compact 展示更完整的信息injectAfterIndex/injectElement当市场新版式marketplace redesign启用时在第 12 个插件之后注入商业计划横幅BusinessPlanBanner组件位于 plugins-banners/business-plan-banner用于引导用户升级商业计划showPlaceholders数据抓取期间显示骨架占位。PluginsBrowserList内部plugins-browser-list/index.jsx会过滤掉缺少slug的空对象条目并将每个插件渲染为PluginBrowserItem。5. 无限滚动与升级引导InfiniteScroll来自 calypso/components/infinite-scroll以fetchNextPage作为nextPageMethod滚动到底部时触发下一页加载。usePlugins返回的fetchNextPage是包装函数只有在infinite为 true 且hasNextPage为 true 时才会真正请求下一页UpgradeNudge来自 plugins-discovery-page/upgrade-nudge接收siteSlug与paidPlugins标记用于在分类页顶部展示付费插件相关的升级提示整块内容包裹在FullWidthSectioncalypso/components/full-width-section中类名为plugins-browser__category-results仅在 marketplace redesign 开关启用时以全宽布局渲染。集成方式PluginsBrowser 如何调用本组件组件唯一的正式调用方是插件浏览器主页面 client/my-sites/plugins/plugins-browser/index.jsx。其renderList()函数体现了清晰的页面分流逻辑const renderList () { if ( search ) { return PluginsSearchResultPage search{ search } ... /; // 搜索态 } if ( category DESCRIBE_CATEGORY_SLUG ... ) { return AsyncLoad require{ loadMarketplaceAIExperience } ... /; // AI 描述分类 } if ( category ) { return ( PluginsCategoryResultsPage category{ category } sites{ sites } siteSlug{ siteSlug } / ); } return PluginsDiscoveryPage ... /; // 默认发现页 };由此可以总结出组件的实际触发场景用户处于/plugins/browse/category路由category有值且不在搜索态时渲染PluginsCategoryResultsPage搜索态由PluginsSearchResultPage接管因此本组件无需自行处理search页面头部DocumentHead标题会由父组件设置为%s Plugins分类名 Plugins页面浏览追踪PageViewTrackerWrapper路径为/plugins/browse/${ category }选中站点时追加/:site。父组件还通过 Redux selector 为分类页准备了上下文sites来自getSelectedOrAllSitesJetpackCanManage当前站点或所有可被 Jetpack 管理的站点siteSlug来自getSelectedSiteSlug。这意味着分类结果页天然支持全站视角与单站点视角两种浏览模式。扩展点与注意事项新增分类的接线若要在分类导航中新增分类需要在 use-categories.tsx 的ALLOWED_CATEGORIES与getCategories()字典中登记 slug、title、description、tags 与可选的 preview 列表本组件会自动通过useCategories()读取并展示。数据源分流原则paid走 WPCOM 动态产品列表且受marketplace-fetch-all-dynamic-products配置开关影响决定拉取all还是launched状态的产品featured走精选接口其余分类统一走 ES 查询。为分类选择合适的数据源是保证性能与结果准确性的关键。README 与实现的一致性README 中的 props 清单site/search/path等与当前实现的解构参数category/siteSlug/sites存在差异且 README 示例里site的描述是所选站点的 slug而实现中该角色由siteSlug承担。阅读源码或进行二次开发时请以 index.jsx 的实际签名与 plugins-browser/index.jsx 的真实调用为准。分页状态机pagination对象由 ES 查询返回page/pages/resultsresults会根据分类数据源不同而取 ES 总数、付费插件长度或精选插件长度展示结果计数前应先判断pagination是否存在组件中if ( categoryName pagination )即为防御性判断。小结PluginsCategoryResultsPage是 wp-calypso 插件市场中分类浏览场景的落地组件它通过usePlugins汇聚 ES 搜索、WPCOM 付费/精选三类数据源借助useCategories解析分类元数据再交由PluginsBrowserList无限滚动 Extended 列表项完成渲染并在新版式下于列表中部注入BusinessPlanBanner、在顶部挂载UpgradeNudge实现商业化引导。对于希望在 Calypso 中新增分类页或复用分类浏览能力的开发者以 README.md 为入口、以 index.jsx 为实现蓝本、以 plugins-browser/index.jsx 为集成示例即可快速完成组件的接入与扩展。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐WordPress.com 插件搜索页组件解析PluginsSearchResultsPage 在 wp-calypso 中的实现与使用WordPress.com 插件搜索页组件解析PluginsSearchResultsPage 在 wp calypso 中的实现与使用 导读 Plugins前端CMSwp-calypso 插件市场分类组件 Categories 全解析分类下拉与 Discover 区的实现与扩展wp calypso 插件市场分类组件 Categories 全解析分类下拉与 Discover 区的实现与扩展 本文围绕 WordPress.com 前端单前端CMSWordPress.com 前端组件解析AkismetIcon 图标组件在 wp-calypso 中的实现与使用WordPress.com 前端组件解析AkismetIcon 图标组件在 wp calypso 中的实现与使用 本文以 wp calypso 仓库中的 cl前端CMS上一篇MPC-BE全屏后控制栏消失别急着重装3步找回播放进度条下一篇存档损坏怎么办EldenRingSaveCopier 终极教程5 分钟免费拯救你的角色进度创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 wp-calypso 插件分类结果页组件 PluginsCategoryResultsPage 使用与实现解析
前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载导读本文围绕 wp-calypsoWordPress.com 的 JavaScript 与 API 驱动前端中负责渲染插件市场Plugin Marketplace分类结果页的核心组件PluginsCategoryResultsPage展开。你将掌握该组件的挂载方式、完整 Props 契约、分类数据来源与分页数据流并通过源码了解它如何与插件浏览页、分类定义和无限滚动机制协作从而能够在自己的插件浏览场景中正确复用与扩展这一组件。组件定位插件浏览器的分类结果页PluginsCategoryResultsPage位于 client/my-sites/plugins/plugins-category-results-page其 READMEREADME.md给出的定义非常明确该组件负责渲染插件浏览器plugins browser的分类结果页面——即用户点击某个插件分类如 SEO、Ecommerce、Security 等后展示该分类下插件列表的整块区域。从目录结构看该模块只有两个文件README.md组件使用文档index.jsx组件实现default export。它不是一个独立路由页面而是被上层PluginsBrowser编排组件按条件动态渲染的内容区组件这一点在后续集成章节会详细展开。快速上手如何挂载组件按照 README 的指引从calypso/my-sites/plugins/plugins-category-results-page导入组件传入分类与站点相关 props 即可渲染import PluginsCategoryResultsPage from calypso/my-sites/plugins/plugins-category-results-page; function render() { return ( div PluginsCategoryResultsPage clearSearch{ clearSearch } search{ search } category{ category } sites{ sites } searchTitle{ searchTitle } siteSlug{ siteSlug } siteId{ siteId } jetpackNonAtomic{ jetpackNonAtomic } selectedSite{ selectedSite } sitePlan{ sitePlan } isVip{ isVip } / /div ); }提示README 示例中的clearSearch、searchTitle、jetpackNonAtomic、selectedSite、sitePlan、isVip等参数在组件的当前实现见下文源码级解析中已不再直接消费它们属于父组件历史演进中遗留的调用方式。以当前 index.jsx 为准组件实际只解构category、siteSlug、sites三个 props多余参数会被安全忽略因此 README 中的写法依然兼容。Props 契约README 对 Props 的说明如下Prop类型说明sitestring所选站点的 slugREADME 原文为 a string containing the slug of the selected sitesitessites-list 对象站点列表对象用于判断插件在各站点上的安装状态categorystring当前选中的分类 slugsearchstring当前的搜索词若存在则为搜索字符串pathstring当前 URL 路径结合当前实现可以确认真正被使用的 props 是category、siteSlug、sites。其中category分类 slug直接驱动usePlugins数据请求与分类标题/描述查询siteSlug当前站点 slug用于构建升级引导UpgradeNudge与插件列表的site上下文sites站点列表传给PluginsBrowserList的currentSites供每个插件条目判断已安装/可安装状态。README 中提到的search与path在组件内部并未直接消费——搜索态在父组件PluginsBrowser中会被分流到PluginsSearchResultPage详见下文path则只出现在 README 的 props 文档中。编写新代码时建议以实际解构的三个 props 为准。源码级解析组件内部的数据流client/my-sites/plugins/plugins-category-results-page/index.jsx 完整实现了分类结果页的渲染逻辑核心数据流如下const { plugins, isFetching, fetchNextPage, pagination } usePlugins( { category, infinite: true, slugs: category wpbeginner ? WPBEGINNER_PLUGINS : undefined, } );1. 数据获取usePlugins hook组件通过 use-plugins/index.ts 提供的usePluginshook 获取插件数据。该 hook 是本组件的数据大脑其内部按分类分流三类数据源ElasticSearch 查询useESPluginsInfinite默认数据源处理搜索以及除paid、featured外的所有分类返回带分页结构{ plugins, pagination: { results, page, pages } }的结果支持无限滚动翻页WPCOM 商业插件列表useWPCOMPluginsList仅当category paid时启用拉取 WordPress.com 付费插件WPCOM 精选插件useWPCOMFeaturedPlugins仅当category featured时启用对应发现页discover page的精选列表。usePlugins还会根据分类名从useCategories查得对应的tags拼接成逗号分隔的tag参数传给查询wpbeginner分类则直接使用WPBEGINNER_PLUGINS常量定义于 client/my-sites/plugins/constants指定的固定 slug 列表。2. 分类元数据useCategories组件调用 categories/use-categories.tsx 中的useCategories()获得分类字典用于解析当前分类的展示信息const categoryName categories[ category ]?.title || category; const categoryDescription categories[ category ]?.description;categories[ category ].title分类标题如 Powering your online storecategories[ category ].description分类副标题描述若分类字典中不存在该 slug例如wpbeginner则标题回退为原始分类字符串。该文件还导出了ALLOWED_CATEGORIES涵盖analytics、booking、ecommerce、seo、security、paid、popular、featured等数十个分类 slug其中一部分如popular、featured、paid注释明确指出并非真实分类但在 UI 中按分类处理还有大量affiliate、quiz、forms、membership等是为改善 SEO 而补充的额外分类。分类的tags数组会被usePlugins用作查询参数例如ecommerce分类映射到[ ecommerce, e-commerce, woocommerce, payments ]。3. 结果计数与多语言组件用useTranslate生成本地化结果计数文案resultCount translate( %(total)s plugin, %(total)s plugins, { count: pagination.results, textOnly: true, args: { total: pagination.results.toLocaleString() }, } );即根据pagination.resultsES 查询返回的总结果数显示 1,234 plugins 之类的计数单复数由count参数自动处理toLocaleString()保证千位分隔符符合当前 locale。4. 列表渲染PluginsBrowserList核心列表由 plugins-browser-list 渲染PluginsBrowserList title{ categoryName } subtitle{ categoryDescription } resultCount{ resultCount } plugins{ plugins } listName{ category } listTypebrowse site{ siteSlug } showPlaceholders{ isFetching } currentSites{ sites } variant{ PluginsBrowserListVariant.InfiniteScroll } extended injectAfterIndex{ isMarketplaceRedesign ? 12 : undefined } injectElement{ isMarketplaceRedesign ? BusinessPlanBanner / : undefined } /关键点variant{ PluginsBrowserListVariant.InfiniteScroll }使用无限滚动变体extended列表项使用 Extended 变体PluginsBrowserElementVariant.Extended相比 Compact 展示更完整的信息injectAfterIndex/injectElement当市场新版式marketplace redesign启用时在第 12 个插件之后注入商业计划横幅BusinessPlanBanner组件位于 plugins-banners/business-plan-banner用于引导用户升级商业计划showPlaceholders数据抓取期间显示骨架占位。PluginsBrowserList内部plugins-browser-list/index.jsx会过滤掉缺少slug的空对象条目并将每个插件渲染为PluginBrowserItem。5. 无限滚动与升级引导InfiniteScroll来自 calypso/components/infinite-scroll以fetchNextPage作为nextPageMethod滚动到底部时触发下一页加载。usePlugins返回的fetchNextPage是包装函数只有在infinite为 true 且hasNextPage为 true 时才会真正请求下一页UpgradeNudge来自 plugins-discovery-page/upgrade-nudge接收siteSlug与paidPlugins标记用于在分类页顶部展示付费插件相关的升级提示整块内容包裹在FullWidthSectioncalypso/components/full-width-section中类名为plugins-browser__category-results仅在 marketplace redesign 开关启用时以全宽布局渲染。集成方式PluginsBrowser 如何调用本组件组件唯一的正式调用方是插件浏览器主页面 client/my-sites/plugins/plugins-browser/index.jsx。其renderList()函数体现了清晰的页面分流逻辑const renderList () { if ( search ) { return PluginsSearchResultPage search{ search } ... /; // 搜索态 } if ( category DESCRIBE_CATEGORY_SLUG ... ) { return AsyncLoad require{ loadMarketplaceAIExperience } ... /; // AI 描述分类 } if ( category ) { return ( PluginsCategoryResultsPage category{ category } sites{ sites } siteSlug{ siteSlug } / ); } return PluginsDiscoveryPage ... /; // 默认发现页 };由此可以总结出组件的实际触发场景用户处于/plugins/browse/category路由category有值且不在搜索态时渲染PluginsCategoryResultsPage搜索态由PluginsSearchResultPage接管因此本组件无需自行处理search页面头部DocumentHead标题会由父组件设置为%s Plugins分类名 Plugins页面浏览追踪PageViewTrackerWrapper路径为/plugins/browse/${ category }选中站点时追加/:site。父组件还通过 Redux selector 为分类页准备了上下文sites来自getSelectedOrAllSitesJetpackCanManage当前站点或所有可被 Jetpack 管理的站点siteSlug来自getSelectedSiteSlug。这意味着分类结果页天然支持全站视角与单站点视角两种浏览模式。扩展点与注意事项新增分类的接线若要在分类导航中新增分类需要在 use-categories.tsx 的ALLOWED_CATEGORIES与getCategories()字典中登记 slug、title、description、tags 与可选的 preview 列表本组件会自动通过useCategories()读取并展示。数据源分流原则paid走 WPCOM 动态产品列表且受marketplace-fetch-all-dynamic-products配置开关影响决定拉取all还是launched状态的产品featured走精选接口其余分类统一走 ES 查询。为分类选择合适的数据源是保证性能与结果准确性的关键。README 与实现的一致性README 中的 props 清单site/search/path等与当前实现的解构参数category/siteSlug/sites存在差异且 README 示例里site的描述是所选站点的 slug而实现中该角色由siteSlug承担。阅读源码或进行二次开发时请以 index.jsx 的实际签名与 plugins-browser/index.jsx 的真实调用为准。分页状态机pagination对象由 ES 查询返回page/pages/resultsresults会根据分类数据源不同而取 ES 总数、付费插件长度或精选插件长度展示结果计数前应先判断pagination是否存在组件中if ( categoryName pagination )即为防御性判断。小结PluginsCategoryResultsPage是 wp-calypso 插件市场中分类浏览场景的落地组件它通过usePlugins汇聚 ES 搜索、WPCOM 付费/精选三类数据源借助useCategories解析分类元数据再交由PluginsBrowserList无限滚动 Extended 列表项完成渲染并在新版式下于列表中部注入BusinessPlanBanner、在顶部挂载UpgradeNudge实现商业化引导。对于希望在 Calypso 中新增分类页或复用分类浏览能力的开发者以 README.md 为入口、以 index.jsx 为实现蓝本、以 plugins-browser/index.jsx 为集成示例即可快速完成组件的接入与扩展。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐WordPress.com 插件搜索页组件解析PluginsSearchResultsPage 在 wp-calypso 中的实现与使用WordPress.com 插件搜索页组件解析PluginsSearchResultsPage 在 wp calypso 中的实现与使用 导读 Plugins前端CMSwp-calypso 插件市场分类组件 Categories 全解析分类下拉与 Discover 区的实现与扩展wp calypso 插件市场分类组件 Categories 全解析分类下拉与 Discover 区的实现与扩展 本文围绕 WordPress.com 前端单前端CMSWordPress.com 前端组件解析AkismetIcon 图标组件在 wp-calypso 中的实现与使用WordPress.com 前端组件解析AkismetIcon 图标组件在 wp calypso 中的实现与使用 本文以 wp calypso 仓库中的 cl前端CMS上一篇MPC-BE全屏后控制栏消失别急着重装3步找回播放进度条下一篇存档损坏怎么办EldenRingSaveCopier 终极教程5 分钟免费拯救你的角色进度创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考