前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载导读NavigationHeader是 WordPress.com 开源控制台 wp-calypso 中一个核心的布局组件用于在页面顶部渲染面包屑导航 标题 右侧操作区的标准头部结构。本文以 client/components/navigation-header/README.md 为骨架结合组件源码、样式文件、Storybook 故事与插件市场等真实业务用法系统讲解其全部 Props、渲染逻辑含少于 2 个导航项不显示面包屑等关键规则、compactBreadcrumb移动端适配、屏幕选项 Tab 集成以及返回链接变体calypso-navigation-header的使用方法。读完本文你将能够在自己负责的 Calypso 页面中熟练接入并定制该头部组件。组件定位与核心能力NavigationHeader是一个基于 TSX 编写的头部组件它解决的是页面级导航上下文的呈现问题面包屑导航展示当前页在站点结构中的层级位置帮助用户回溯标题与副标题明确当前页面主题并可内嵌帮助链接、说明文字右侧操作区children将上传插件管理插件等页面级主操作按钮固定在头部右侧屏幕选项 Tab可选接入 wp-admin 风格的 Screen Options。从源码结构看该目录实际包含两个组件实现详见下文第五节本文以 README 所描述的面包屑版本client/components/navigation-header/index.tsx为主并补充其姊妹组件作对比。快速上手最小可用示例README 给出了最基础的用法传入navigationItems数组并在组件内放置 children 作为右侧内容。import NavigationHeader from calypso/components/navigation-header; const navigationItems [ { label: Plugins, href: /plugins }, { label: Search, href: /plugins?swoo }, ]; function render() { return NavigationHeader navigationItems{ navigationItems }Children Item/NavigationHeader; }以上代码渲染出一个包含两级面包屑Plugins → Search、且右侧渲染 Children Item 的页面头部。navigationItems中每项的href为可选项——不带href时该项仅作为纯文本标签通常用于标记当前所在页。Props 全解参数、类型与默认行为README 完整列出了该组件的 Props下表逐一说明并结合 index.tsx 的Props接口给出默认值与内部行为。Props类型必填说明与默认行为navigationItems{ label: string; href?: string; helpBubble?: React.ReactElement; onClick?: () void }[]否面包屑导航项列表默认[]。helpBubble可为该项附加悬浮帮助气泡onClick可自定义点击行为idstring否渲染在header上的 DOM id默认为空字符串classNamestring否附加到包裹组件的 class默认空字符串最终通过clsx合并为navigation-headerchildrennodes否渲染在最右侧的操作区内容compactBreadcrumbboolean否面包屑只显示上一级并显示 Back 文案常用于移动端titlestring否头部标题可为字符串或 ReactNodesubtitlestring否头部副标题可为字符串或 ReactNodescreenReaderstring否屏幕阅读器专用文案视觉上隐藏mobileItemTBreadcrumbItem否移动端单独指定的面包屑项透传给 BreadcrumbalwaysShowTitleboolean否强制始终显示标题默认falsescreenOptionsTabstring否传入 wp-admin 路径后渲染 Screen Options Tabstyleobject否作用于header的内联样式loggedInboolean否登录态标识默认true参与标题显隐判定注意Props接口中title/subtitle/screenReader的实际类型是string | ReactNode见 index.tsxREADME 中标注的string是简化描述实战中可以传入组件或富文本节点。navigationItems 项结构每一项遵循 Breadcrumb 的Item类型组件内部通过import Breadcrumb, { Item as TBreadcrumbItem }引入见 index.tsx{ label: Plugins, // 展示文本 href: /plugins, // 可选跳转地址 helpBubble: InfoPopover /, // 可选悬浮帮助气泡 onClick: () {}, // 可选自定义点击处理 }关键渲染规则标题与面包屑的显隐逻辑README 中强调 It will not show less than 2 items导航项少于 2 个时不显示面包屑这一定义在源码中有更精确的实现见 index.tsxconst [ showCrumbs, setShowCrumbs ] useState( false ); const showTitle alwaysShowTitle || ( navigationItems.length 2 loggedIn ); useEffect( () { setShowCrumbs( checkShouldShowBreadcrumb() ); }, [] );由此可以提炼出三条核心规则面包屑显隐受 URL 参数控制checkShouldShowBreadcrumb()会检查当前 URL 的options查询参数若其中包含noCrumbs则隐藏面包屑index.tsx。源码注释说明已过期的 eCommerce 试用站点无法访问面包屑暴露出的设置等页面因此用该参数隐藏面包屑。组件在挂载时通过useEffect一次性读取该参数。标题优先于面包屑当navigationItems.length 2且用户已登录时隐藏面包屑、改为显示标题showTitle为真。也就是说标题与面包屑是互斥呈现的——有足够层级时给面包屑层级不足时给标题。alwaysShowTitle可绕过该判定强制显示标题。服务端渲染安全checkShouldShowBreadcrumb在typeof window undefinedSSR 环境时直接返回false避免服务端读取window.location报错。渲染结构总览组件最终输出如下 DOM 结构对应 index.tsxheader id... classnavigation-header ... div classnavigation-header__container div classnavigation-header__main !-- 可选ScreenOptionsTab -- ScreenOptionsTab wpAdminPath... / !-- 可选BreadcrumbshowCrumbs 为真时 -- Breadcrumb items{...} compact{...} hideWhenOnlyOneLevel / !-- 可选FormattedHeadershowTitle 为真时 -- FormattedHeader alignleft headerText{title} subHeaderText{subtitle} screenReader{...} / !-- 右侧操作区 -- div classnavigation-header__actions{ children }/div /div /div /header其中的Container通过 emotionstyled.div实现index.tsx在.main.is-wide-layout下水平居中在.stats/.stats__email-detail页面中将宽度约束为max-width: 1224px并居中——这是为统计Stats页面做的特殊适配。依赖的子组件Breadcrumb来自calypso/components/breadcrumb接收items、mobileItem、compact并设置了hideWhenOnlyOneLevel仅一级时不渲染FormattedHeader来自calypso/components/formatted-header负责标题/副标题的排版与屏幕阅读器文案ScreenOptionsTab来自calypso/components/screen-options-tab当同时传入screenOptionsTab与children时header会追加navigation-header__screen-options-tabclass见 index.tsx用于样式补偿详见下节。样式与响应式行为该组件的样式拆分为两个 SCSS 文件各有分工style.scss面包屑版本主样式style.scss 定义.navigation-header的盒模型与内部布局桌面端padding: 0 0 16px 0移动端max-width: $break-small改为四周16px内边距.navigation-header__main使用display: flex; justify-content: space-between让标题居左、操作区居右面包屑.breadcrumbs li普通项使用灰色var(--studio-gray-60, #50575e)最后一项当前页加深为var(--studio-gray-100, #101517)副标题.formatted-header__subtitle在移动端默认隐藏min-width: $break-small以上才显示移动端改由.info-popover承载说明内容display: inline-block即小屏藏文字、留气泡的响应式策略.navigation-header__actions采用display: flex; gap: 16px排列右侧操作按钮。navigation-header.scss返回链接变体样式navigation-header.scss 服务于姊妹组件calypso-navigation-header头部使用flex-direction: column上下分区上为.calypso-navigation-header__head返回链接区下为__body标题与右侧操作区justify-content: space-between返回链接.calypso-navigation-header__back-link使用灰色var(--wp-components-color-gray-600, #666)hover 加深源码注释特别说明该样式提高了选择器优先级 __back-link以覆盖 Atomic 站点上a的默认链接色标题字体采用 SF Pro Displayfont-size: 20px; font-weight: 500副标题使用$font-sf-pro-text与var(--wp-components-color-gray-700)当存在 Screen Options Tab 时移动端padding-top: 38px30px Tab 高度 8px gap桌面端回退为$grid-unit-2016px避免 Tab 与操作按钮在移动端重叠。姊妹组件返回链接版calypso-navigation-header同目录下的 navigation-header.tsx 是面包屑版之外的另一种头部形态专为详情页返回上一级场景设计其 Props 与面包屑版互补Props说明titleProps{ title, titleLogo, subtitle }标题组titleLogo会在标题前渲染 24×24 的 Logo 位backLinkProps{ url, text, onBackClick }返回链接提供url时自动在头部上方渲染 ← Back 按钮titleElement/headElement自定义节点分别覆盖默认标题区与默认头部区渲染rightSection等价于面包屑版的children渲染在最右侧hasScreenOptionsTab为真时追加calypso-navigation-header__screen-options-tabclass其返回按钮的导航逻辑值得注意navigation-header.tsx先调用popCurrentScreenFromHistory()弹出统计页维护的导航历史栈来自calypso/my-sites/stats/hooks/use-stats-navigation-history若提供了onBackClick回调则直接执行否则对站内相对路径非http:///https://开头通过calypso-router的page()做 SPA 路由跳转对同源绝对 URL 使用window.location.href跳转。两者分别适用于层级导航面包屑与单级返回Back 链接两种头部信息架构可按页面形态选用。真实业务用法插件市场的 NavigationHeader组件在 client/my-sites/plugins/plugins-navigation-header/index.jsx 中有完整实践可作为教科书式用法NavigationHeader classNameplugins-navigation-header compactBreadcrumb{ isMobile } // 移动端切换为紧凑 Back 模式 ref{ navigationHeaderRef } title{ translate( Plugins {{wbr}}{{/wbr}}marketplace, { components: { wbr: wbr / }, } ) } loggedIn{ isLoggedIn } ManageButton ... / UploadPluginButton ... / /NavigationHeader该示例展示了几个进阶要点面包屑动态化通过 Redux 的appendBreadcrumb/resetBreadcrumbs动作维护全局面包屑状态再经由useSelector( getBreadcrumbs )读取后传入组件——面包屑不再硬编码而是随路由站点、分类、搜索词实时重建见 plugins-navigation-header/index.jsx移动端适配compactBreadcrumb{ isMobile }由useBreakpoint( 960px )驱动小屏自动退化为紧凑面包屑右侧操作区组合children中放入Installed pluginsManageButton与UploadUploadPluginButton两个按钮按钮会根据登录态、站点类型Jetpack/Atomic、站点能力WPCOM_FEATURES_MANAGE_PLUGINS等动态显隐loggedIn语义未登录访问时showTitle判定为假避免未登录页面同时出现空面包屑与标题。除插件市场外client/my-sites/plugins/plans/index.tsx、plugin-upload/index.jsx、plugins-browser/index.jsx、mailpoet-upgrade/index.tsx等页面均使用该组件说明它已是插件功能域的标准头部方案。Storybook 可视化调试组件自带 Storybook 故事stories/navigation-header.stories.tsx注册为client/components/NavigationHeader采用layout: fullscreen以便完整观察头部效果并开启autodocs。现有故事覆盖四个场景Basic仅标题的基础头部WithBackLink带 Back to Dashboard 返回链接的头部WithDownloadAndAction返回链接 右侧 Download CSV 下载链接WithScreenOptions开启 Screen Options Tab并展示onBackClick回调与右侧 Post 主操作按钮的完整形态。开发新用法时可参考这些故事快速起手或在本地通过 Storybook 对组件做交互验证。完整可运行示例综合 README 示例与 docs/example.jsx组件文档示例页给出一个覆盖多数 Props 的完整写法import { translate } from i18n-calypso; import NavigationHeader from calypso/components/navigation-header; import InlineSupportLink from calypso/components/inline-support-link; import InstallThemeButton from calypso/my-sites/themes/install-theme-button; const navigationItems [ { label: Domains, href: /domains }, { label: thisisanexample.wordpress.com, href: /domains/thisisanexample.wordpress.com }, { label: Transfer, href: /domains/thisisanexample.wordpress.com/transfer }, ]; NavigationHeader navigationItems{ navigationItems } compactBreadcrumb{ false } mobileItem{ null } titleTitle example subtitleSubtitle example screenReaderScreen reader example /; // 标题 内嵌帮助链接的副标题 右侧按钮 NavigationHeader navigationItems{ [] } title{ translate( Themes ) } subtitle{ translate( Select or update the visual design for your site. {{learnMoreLink}}Learn more{{/learnMoreLink}}., { components: { learnMoreLink: InlineSupportLink supportContextthemes showIcon{ false } /, }, } ) } InstallThemeButton / /NavigationHeader;第二个示例展示了两个值得留意的细节navigationItems传空数组时组件会自动退化为仅标题模式配合showTitle判定subtitle并非纯文本——它借助InlineSupportLink来自calypso/components/inline-support-link在副标题中嵌入 Learn more 支持链接配合translate的components机制完成 i18n 插值这是 Calypso 组件组合的典型用法。小结NavigationHeader是 wp-calypso 页面头部的标准答案面包屑与标题按导航层级智能互斥呈现右侧操作区天然支持任意 React 节点Screen Options Tab 无缝桥接 wp-admin 体验compactBreadcrumb一行属性完成移动端适配。若你正在 Calypso 中新增页面可直接参考 client/my-sites/plugins/plugins-navigation-header/index.jsx 的 Redux 动态面包屑模式若页面属于详情页返回型信息架构则可选用同目录的返回链接变体 navigation-header.tsx。相关源码、文档示例docs/example.jsx与 Storybook 故事均可作为后续开发的第一手参考资料。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐BootstrapVue导航组件深度解析Navbar、Tabs与面包屑BootstrapVue导航组件深度解析Navbar、Tabs与面包屑 在现代Web应用开发中导航系统是用户体验的核心组成部分。BootstrapVue提供前端UI组件KiloClaw Telegram 接入指南Bot 配置、群聊权限与访问控制全流程KiloClaw Telegram 接入指南Bot 配置、群聊权限与访问控制全流程 KiloClaw 是 Kilo 提供的托管式 OpenClaw 服务支持前端CMSDexed与硬件DX7无缝对接SysEx数据传输完整教程Dexed与硬件DX7无缝对接SysEx数据传输完整教程 Dexed作为一款功能强大的DX7 FM多平台插件不仅能完美模拟经典DX7的声音特性还支持与硬件音视频上一篇Falco沙漠生态保护区偷猎监控方案下一篇如何高效实现循环队列数据结构初学者的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 wp-calypso NavigationHeader 组件深度解析：面包屑导航头部与右侧操作区的完整实践指南
前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载导读NavigationHeader是 WordPress.com 开源控制台 wp-calypso 中一个核心的布局组件用于在页面顶部渲染面包屑导航 标题 右侧操作区的标准头部结构。本文以 client/components/navigation-header/README.md 为骨架结合组件源码、样式文件、Storybook 故事与插件市场等真实业务用法系统讲解其全部 Props、渲染逻辑含少于 2 个导航项不显示面包屑等关键规则、compactBreadcrumb移动端适配、屏幕选项 Tab 集成以及返回链接变体calypso-navigation-header的使用方法。读完本文你将能够在自己负责的 Calypso 页面中熟练接入并定制该头部组件。组件定位与核心能力NavigationHeader是一个基于 TSX 编写的头部组件它解决的是页面级导航上下文的呈现问题面包屑导航展示当前页在站点结构中的层级位置帮助用户回溯标题与副标题明确当前页面主题并可内嵌帮助链接、说明文字右侧操作区children将上传插件管理插件等页面级主操作按钮固定在头部右侧屏幕选项 Tab可选接入 wp-admin 风格的 Screen Options。从源码结构看该目录实际包含两个组件实现详见下文第五节本文以 README 所描述的面包屑版本client/components/navigation-header/index.tsx为主并补充其姊妹组件作对比。快速上手最小可用示例README 给出了最基础的用法传入navigationItems数组并在组件内放置 children 作为右侧内容。import NavigationHeader from calypso/components/navigation-header; const navigationItems [ { label: Plugins, href: /plugins }, { label: Search, href: /plugins?swoo }, ]; function render() { return NavigationHeader navigationItems{ navigationItems }Children Item/NavigationHeader; }以上代码渲染出一个包含两级面包屑Plugins → Search、且右侧渲染 Children Item 的页面头部。navigationItems中每项的href为可选项——不带href时该项仅作为纯文本标签通常用于标记当前所在页。Props 全解参数、类型与默认行为README 完整列出了该组件的 Props下表逐一说明并结合 index.tsx 的Props接口给出默认值与内部行为。Props类型必填说明与默认行为navigationItems{ label: string; href?: string; helpBubble?: React.ReactElement; onClick?: () void }[]否面包屑导航项列表默认[]。helpBubble可为该项附加悬浮帮助气泡onClick可自定义点击行为idstring否渲染在header上的 DOM id默认为空字符串classNamestring否附加到包裹组件的 class默认空字符串最终通过clsx合并为navigation-headerchildrennodes否渲染在最右侧的操作区内容compactBreadcrumbboolean否面包屑只显示上一级并显示 Back 文案常用于移动端titlestring否头部标题可为字符串或 ReactNodesubtitlestring否头部副标题可为字符串或 ReactNodescreenReaderstring否屏幕阅读器专用文案视觉上隐藏mobileItemTBreadcrumbItem否移动端单独指定的面包屑项透传给 BreadcrumbalwaysShowTitleboolean否强制始终显示标题默认falsescreenOptionsTabstring否传入 wp-admin 路径后渲染 Screen Options Tabstyleobject否作用于header的内联样式loggedInboolean否登录态标识默认true参与标题显隐判定注意Props接口中title/subtitle/screenReader的实际类型是string | ReactNode见 index.tsxREADME 中标注的string是简化描述实战中可以传入组件或富文本节点。navigationItems 项结构每一项遵循 Breadcrumb 的Item类型组件内部通过import Breadcrumb, { Item as TBreadcrumbItem }引入见 index.tsx{ label: Plugins, // 展示文本 href: /plugins, // 可选跳转地址 helpBubble: InfoPopover /, // 可选悬浮帮助气泡 onClick: () {}, // 可选自定义点击处理 }关键渲染规则标题与面包屑的显隐逻辑README 中强调 It will not show less than 2 items导航项少于 2 个时不显示面包屑这一定义在源码中有更精确的实现见 index.tsxconst [ showCrumbs, setShowCrumbs ] useState( false ); const showTitle alwaysShowTitle || ( navigationItems.length 2 loggedIn ); useEffect( () { setShowCrumbs( checkShouldShowBreadcrumb() ); }, [] );由此可以提炼出三条核心规则面包屑显隐受 URL 参数控制checkShouldShowBreadcrumb()会检查当前 URL 的options查询参数若其中包含noCrumbs则隐藏面包屑index.tsx。源码注释说明已过期的 eCommerce 试用站点无法访问面包屑暴露出的设置等页面因此用该参数隐藏面包屑。组件在挂载时通过useEffect一次性读取该参数。标题优先于面包屑当navigationItems.length 2且用户已登录时隐藏面包屑、改为显示标题showTitle为真。也就是说标题与面包屑是互斥呈现的——有足够层级时给面包屑层级不足时给标题。alwaysShowTitle可绕过该判定强制显示标题。服务端渲染安全checkShouldShowBreadcrumb在typeof window undefinedSSR 环境时直接返回false避免服务端读取window.location报错。渲染结构总览组件最终输出如下 DOM 结构对应 index.tsxheader id... classnavigation-header ... div classnavigation-header__container div classnavigation-header__main !-- 可选ScreenOptionsTab -- ScreenOptionsTab wpAdminPath... / !-- 可选BreadcrumbshowCrumbs 为真时 -- Breadcrumb items{...} compact{...} hideWhenOnlyOneLevel / !-- 可选FormattedHeadershowTitle 为真时 -- FormattedHeader alignleft headerText{title} subHeaderText{subtitle} screenReader{...} / !-- 右侧操作区 -- div classnavigation-header__actions{ children }/div /div /div /header其中的Container通过 emotionstyled.div实现index.tsx在.main.is-wide-layout下水平居中在.stats/.stats__email-detail页面中将宽度约束为max-width: 1224px并居中——这是为统计Stats页面做的特殊适配。依赖的子组件Breadcrumb来自calypso/components/breadcrumb接收items、mobileItem、compact并设置了hideWhenOnlyOneLevel仅一级时不渲染FormattedHeader来自calypso/components/formatted-header负责标题/副标题的排版与屏幕阅读器文案ScreenOptionsTab来自calypso/components/screen-options-tab当同时传入screenOptionsTab与children时header会追加navigation-header__screen-options-tabclass见 index.tsx用于样式补偿详见下节。样式与响应式行为该组件的样式拆分为两个 SCSS 文件各有分工style.scss面包屑版本主样式style.scss 定义.navigation-header的盒模型与内部布局桌面端padding: 0 0 16px 0移动端max-width: $break-small改为四周16px内边距.navigation-header__main使用display: flex; justify-content: space-between让标题居左、操作区居右面包屑.breadcrumbs li普通项使用灰色var(--studio-gray-60, #50575e)最后一项当前页加深为var(--studio-gray-100, #101517)副标题.formatted-header__subtitle在移动端默认隐藏min-width: $break-small以上才显示移动端改由.info-popover承载说明内容display: inline-block即小屏藏文字、留气泡的响应式策略.navigation-header__actions采用display: flex; gap: 16px排列右侧操作按钮。navigation-header.scss返回链接变体样式navigation-header.scss 服务于姊妹组件calypso-navigation-header头部使用flex-direction: column上下分区上为.calypso-navigation-header__head返回链接区下为__body标题与右侧操作区justify-content: space-between返回链接.calypso-navigation-header__back-link使用灰色var(--wp-components-color-gray-600, #666)hover 加深源码注释特别说明该样式提高了选择器优先级 __back-link以覆盖 Atomic 站点上a的默认链接色标题字体采用 SF Pro Displayfont-size: 20px; font-weight: 500副标题使用$font-sf-pro-text与var(--wp-components-color-gray-700)当存在 Screen Options Tab 时移动端padding-top: 38px30px Tab 高度 8px gap桌面端回退为$grid-unit-2016px避免 Tab 与操作按钮在移动端重叠。姊妹组件返回链接版calypso-navigation-header同目录下的 navigation-header.tsx 是面包屑版之外的另一种头部形态专为详情页返回上一级场景设计其 Props 与面包屑版互补Props说明titleProps{ title, titleLogo, subtitle }标题组titleLogo会在标题前渲染 24×24 的 Logo 位backLinkProps{ url, text, onBackClick }返回链接提供url时自动在头部上方渲染 ← Back 按钮titleElement/headElement自定义节点分别覆盖默认标题区与默认头部区渲染rightSection等价于面包屑版的children渲染在最右侧hasScreenOptionsTab为真时追加calypso-navigation-header__screen-options-tabclass其返回按钮的导航逻辑值得注意navigation-header.tsx先调用popCurrentScreenFromHistory()弹出统计页维护的导航历史栈来自calypso/my-sites/stats/hooks/use-stats-navigation-history若提供了onBackClick回调则直接执行否则对站内相对路径非http:///https://开头通过calypso-router的page()做 SPA 路由跳转对同源绝对 URL 使用window.location.href跳转。两者分别适用于层级导航面包屑与单级返回Back 链接两种头部信息架构可按页面形态选用。真实业务用法插件市场的 NavigationHeader组件在 client/my-sites/plugins/plugins-navigation-header/index.jsx 中有完整实践可作为教科书式用法NavigationHeader classNameplugins-navigation-header compactBreadcrumb{ isMobile } // 移动端切换为紧凑 Back 模式 ref{ navigationHeaderRef } title{ translate( Plugins {{wbr}}{{/wbr}}marketplace, { components: { wbr: wbr / }, } ) } loggedIn{ isLoggedIn } ManageButton ... / UploadPluginButton ... / /NavigationHeader该示例展示了几个进阶要点面包屑动态化通过 Redux 的appendBreadcrumb/resetBreadcrumbs动作维护全局面包屑状态再经由useSelector( getBreadcrumbs )读取后传入组件——面包屑不再硬编码而是随路由站点、分类、搜索词实时重建见 plugins-navigation-header/index.jsx移动端适配compactBreadcrumb{ isMobile }由useBreakpoint( 960px )驱动小屏自动退化为紧凑面包屑右侧操作区组合children中放入Installed pluginsManageButton与UploadUploadPluginButton两个按钮按钮会根据登录态、站点类型Jetpack/Atomic、站点能力WPCOM_FEATURES_MANAGE_PLUGINS等动态显隐loggedIn语义未登录访问时showTitle判定为假避免未登录页面同时出现空面包屑与标题。除插件市场外client/my-sites/plugins/plans/index.tsx、plugin-upload/index.jsx、plugins-browser/index.jsx、mailpoet-upgrade/index.tsx等页面均使用该组件说明它已是插件功能域的标准头部方案。Storybook 可视化调试组件自带 Storybook 故事stories/navigation-header.stories.tsx注册为client/components/NavigationHeader采用layout: fullscreen以便完整观察头部效果并开启autodocs。现有故事覆盖四个场景Basic仅标题的基础头部WithBackLink带 Back to Dashboard 返回链接的头部WithDownloadAndAction返回链接 右侧 Download CSV 下载链接WithScreenOptions开启 Screen Options Tab并展示onBackClick回调与右侧 Post 主操作按钮的完整形态。开发新用法时可参考这些故事快速起手或在本地通过 Storybook 对组件做交互验证。完整可运行示例综合 README 示例与 docs/example.jsx组件文档示例页给出一个覆盖多数 Props 的完整写法import { translate } from i18n-calypso; import NavigationHeader from calypso/components/navigation-header; import InlineSupportLink from calypso/components/inline-support-link; import InstallThemeButton from calypso/my-sites/themes/install-theme-button; const navigationItems [ { label: Domains, href: /domains }, { label: thisisanexample.wordpress.com, href: /domains/thisisanexample.wordpress.com }, { label: Transfer, href: /domains/thisisanexample.wordpress.com/transfer }, ]; NavigationHeader navigationItems{ navigationItems } compactBreadcrumb{ false } mobileItem{ null } titleTitle example subtitleSubtitle example screenReaderScreen reader example /; // 标题 内嵌帮助链接的副标题 右侧按钮 NavigationHeader navigationItems{ [] } title{ translate( Themes ) } subtitle{ translate( Select or update the visual design for your site. {{learnMoreLink}}Learn more{{/learnMoreLink}}., { components: { learnMoreLink: InlineSupportLink supportContextthemes showIcon{ false } /, }, } ) } InstallThemeButton / /NavigationHeader;第二个示例展示了两个值得留意的细节navigationItems传空数组时组件会自动退化为仅标题模式配合showTitle判定subtitle并非纯文本——它借助InlineSupportLink来自calypso/components/inline-support-link在副标题中嵌入 Learn more 支持链接配合translate的components机制完成 i18n 插值这是 Calypso 组件组合的典型用法。小结NavigationHeader是 wp-calypso 页面头部的标准答案面包屑与标题按导航层级智能互斥呈现右侧操作区天然支持任意 React 节点Screen Options Tab 无缝桥接 wp-admin 体验compactBreadcrumb一行属性完成移动端适配。若你正在 Calypso 中新增页面可直接参考 client/my-sites/plugins/plugins-navigation-header/index.jsx 的 Redux 动态面包屑模式若页面属于详情页返回型信息架构则可选用同目录的返回链接变体 navigation-header.tsx。相关源码、文档示例docs/example.jsx与 Storybook 故事均可作为后续开发的第一手参考资料。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐BootstrapVue导航组件深度解析Navbar、Tabs与面包屑BootstrapVue导航组件深度解析Navbar、Tabs与面包屑 在现代Web应用开发中导航系统是用户体验的核心组成部分。BootstrapVue提供前端UI组件KiloClaw Telegram 接入指南Bot 配置、群聊权限与访问控制全流程KiloClaw Telegram 接入指南Bot 配置、群聊权限与访问控制全流程 KiloClaw 是 Kilo 提供的托管式 OpenClaw 服务支持前端CMSDexed与硬件DX7无缝对接SysEx数据传输完整教程Dexed与硬件DX7无缝对接SysEx数据传输完整教程 Dexed作为一款功能强大的DX7 FM多平台插件不仅能完美模拟经典DX7的声音特性还支持与硬件音视频上一篇Falco沙漠生态保护区偷猎监控方案下一篇如何高效实现循环队列数据结构初学者的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考