如何创建无链接父级页面并保留URL路径与面包屑结构？

哈哈，这个需求我太熟了！很多CMS默认的逻辑确实会卡在这里——要面包屑路径对就得父级是页面，但你又不想让父级有链接。别慌，有好几种靠谱的解决方案：

1. 手动自定义面包屑逻辑（通用所有系统） #

这是最灵活的方法，完全绕开系统默认的父页面关联要求：

• 在子页面的面包屑模板里，硬编码父级的显示文本「关于我们」，但不给它加<a>标签（也就是无链接）；
• 子页面的URL路径保持site.com/about-us/overview不变，完全不依赖父页面的存在；
• 举个前端模板的例子（以Handlebars为例）：

  <div class="breadcrumb">
    <span>关于我们</span>
    <a href="{{page.url}}">{{page.title}}</a>
  </div>
  

• 如果是动态生成面包屑的场景，可以在子页面的元数据里添加parent_title: "关于我们"和parent_path_prefix: "/about-us"，然后让面包屑生成函数只渲染标题，不生成链接。

2. 创建“隐形父页面”占位（适合CMS系统） #

如果你的系统必须要有父页面才能生成面包屑路径，可以创建一个“空壳”父页面，然后让它在前端不可访问：

• 步骤：
  • 新建一个名为「关于我们」的页面，设置URL为/about-us；
  • 把这个页面设置为不可被前端访问：比如WordPress里设为「私密」，Shopify里不加入导航且在模板里判断该页面时返回404，或者用代码拦截访问请求；
  • 把「概述」「合作伙伴」子页面的父页面设置为这个隐形页面；
• 效果：面包屑会自动生成正确的关于我们 > 概述路径，而菜单里的「关于我们」你可以设置成无链接，用户点击不会跳转，完美满足需求。

3. 路由层面直接配置（适合框架类项目） #

如果是用Next.js、Nuxt.js这类带路由配置的框架，直接在路由结构里定义子页面的路径前缀即可，不需要父页面存在：

• 比如Next.js的路由结构：

  pages/
    about-us/
      overview.js
      partners.js
  

• 然后在面包屑组件里，手动渲染无链接的「关于我们」父项，再拼接子页面的链接：

  function Breadcrumb() {
    const router = useRouter();
    const currentPage = router.pathname.split('/').pop();
    const pageTitles = {
      overview: '概述',
      partners: '合作伙伴'
    };
    
    return (
      <nav>
        <span>关于我们</span>
        <span>></span>
        <a href={router.pathname}>{pageTitles[currentPage]}</a>
      </nav>
    );
  }
  

总结 #

核心思路就是两种：要么手动控制面包屑的渲染逻辑，完全脱离系统默认的父页面关联；要么用一个不可访问的空页面当占位符，满足系统对父页面的要求但不让用户实际访问。选哪种取决于你用的系统和开发场景~

内容的提问来源于stack exchange，提问作者brooklynsweb