php 实现面包屑导航

实现面包屑导航的方法

面包屑导航（Breadcrumb Navigation）是一种常见的网站导航方式，用于显示用户当前页面的路径。以下是几种在 PHP 中实现面包屑导航的方法。

基于 URL 路径的面包屑

通过解析当前 URL 的路径，生成面包屑导航。适用于层级清晰的 URL 结构。

$url = $_SERVER['REQUEST_URI'];
$parts = explode('/', trim($url, '/'));
$breadcrumbs = array();
$link = '';

foreach ($parts as $part) {
    $link .= '/' . $part;
    $breadcrumbs[] = [
        'name' => ucfirst(str_replace('-', ' ', $part)),
        'url' => $link
    ];
}

输出面包屑导航的 HTML：

echo '<nav aria-label="breadcrumb">';
echo '<ol class="breadcrumb">';
foreach ($breadcrumbs as $crumb) {
    echo '<li class="breadcrumb-item"><a href="' . $crumb['url'] . '">' . $crumb['name'] . '</a></li>';
}
echo '</ol>';
echo '</nav>';

基于数据库的面包屑

适用于动态生成的页面，如从数据库中获取页面层级关系。

假设有一个包含页面信息的数据库表 pages，结构如下：

• id：页面 ID
• title：页面标题
• parent_id：父页面 ID

递归函数获取面包屑路径：

function getBreadcrumbs($pageId, $conn) {
    $breadcrumbs = array();
    while ($pageId != 0) {
        $query = "SELECT id, title, parent_id FROM pages WHERE id = $pageId";
        $result = $conn->query($query);
        $row = $result->fetch_assoc();
        $breadcrumbs[] = [
            'title' => $row['title'],
            'url' => '/page.php?id=' . $row['id']
        ];
        $pageId = $row['parent_id'];
    }
    return array_reverse($breadcrumbs);
}

输出面包屑导航：

$currentPageId = isset($_GET['id']) ? $_GET['id'] : 0;
$breadcrumbs = getBreadcrumbs($currentPageId, $conn);

echo '<nav aria-label="breadcrumb">';
echo '<ol class="breadcrumb">';
echo '<li class="breadcrumb-item"><a href="/">Home</a></li>';
foreach ($breadcrumbs as $crumb) {
    echo '<li class="breadcrumb-item"><a href="' . $crumb['url'] . '">' . $crumb['title'] . '</a></li>';
}
echo '</ol>';
echo '</nav>';

使用框架或库

许多 PHP 框架（如 Laravel、Symfony）提供了面包屑导航的库或内置支持。

Laravel 示例： 安装 davejamesmiller/laravel-breadcrumbs 包：

composer require davejamesmiller/laravel-breadcrumbs

定义面包屑：

Breadcrumbs::for('page', function ($trail, $page) {
    $trail->push('Home', route('home'));
    $trail->push($page->title, route('page', $page->id));
});

在视图中渲染：

{{ Breadcrumbs::render('page', $page) }}

静态面包屑

对于静态网站或固定层级的面包屑，可以直接硬编码。

$breadcrumbs = [
    ['title' => 'Home', 'url' => '/'],
    ['title' => 'Category', 'url' => '/category'],
    ['title' => 'Current Page', 'url' => '']
];

echo '<nav aria-label="breadcrumb">';
echo '<ol class="breadcrumb">';
foreach ($breadcrumbs as $crumb) {
    $active = empty($crumb['url']) ? 'active' : '';
    echo '<li class="breadcrumb-item ' . $active . '">';
    if (!empty($crumb['url'])) {
        echo '<a href="' . $crumb['url'] . '">' . $crumb['title'] . '</a>';
    } else {
        echo $crumb['title'];
    }
    echo '</li>';
}
echo '</ol>';
echo '</nav>';

样式与增强

为面包屑导航添加 CSS 样式或 Bootstrap 类：

<style>
.breadcrumb {
    padding: 8px 15px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb li {
    display: inline;
}
.breadcrumb li+li:before {
    padding: 8px;
    content: ">";
    color: #ccc;
}
.breadcrumb a {
    color: #007bff;
    text-decoration: none;
}
</style>

或直接使用 Bootstrap 的 breadcrumb 类：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

以上方法可以根据实际需求选择或组合使用。动态生成的面包屑导航更适合内容管理系统（CMS），而静态面包屑适用于固定结构的网站。