展示页面关联关系的网页元素叫什么？如何在个人站点中实现？

你描述的这类用于展示站点内相互关联页面的组件，根据使用场景有两类通用官方名称：

• 若组件用于展示当前页面在站点层级中的所属位置，支持点击回溯上级页面，正式名称为 面包屑导航（Breadcrumb Navigation）
• 若组件用于展示和当前页面内容主题相关的其他平行页面，正式名称为 关联页面推荐模块（Related Pages Module）

实现方案 #

面包屑导航实现 #

核心逻辑是按照站点层级从高到低排列跳转链接，HTML5有专门的语义化实现规范，示例代码如下：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item"><a href="/">首页</a></li>
    <li class="breadcrumb-item"><a href="/tech">技术分类</a></li>
    <li class="breadcrumb-item active" aria-current="page">当前文章详情</li>
  </ol>
</nav>

如果是使用CMS（如WordPress）或者前端框架（如React、Vue）搭建的站点，可以直接调用对应生态的面包屑生成插件，自动根据页面层级生成结构，不需要手动维护每个页面的路径。

关联页面推荐模块实现 #

核心逻辑是通过当前页面的标签、分类、关键词等属性，匹配同站点下属性重合度高的其他页面，展示跳转入口：

• 静态站点可以在内容的前置元数据中预先标注关联页面ID，构建阶段自动渲染对应的链接列表
• 动态站点可以在后端编写查询接口，传入当前页面的分类/标签参数，返回匹配的前N条关联页面数据，前端接收后渲染即可
  如果对关联匹配精度要求不高，直接拉取当前分类下的最新/热门页面展示，也可以满足基础使用需求。

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