如何在无控制器的Laravel项目中实现W3Schools式侧边栏

1. 给路由加上命名（routes/web.php） #

先给闭包路由命名，方便后续判断当前页面路由：

// 教程首页
Route::get('/tutorial', function () {
    return view('tutorial.index');
})->name('tutorial.index');

// 教程详情页（按slug区分内容）
Route::get('/tutorial/{slug}', function ($slug) {
    // 这里可以根据slug获取实际内容，下面是模拟示例
    $contentMap = [
        'html-intro' => 'HTML 入门教程',
        'html-basic-tags' => 'HTML 基础标签'
    ];
    $content = $contentMap[$slug] ?? '未找到内容';
    return view('tutorial.show', compact('slug', 'content'));
})->name('tutorial.show');

2. 抽离侧边栏为独立组件 #

创建resources/views/components/sidebar.blade.php，把侧边栏的逻辑和结构单独放这里，方便所有页面复用：

<div class="sidebar">
    <h3>HTML 教程目录</h3>
    <ul>
        <!-- 首页项：判断当前路由是否是首页路由 -->
        <li class="{{ request()->routeIs('tutorial.index') ? 'active' : '' }}">
            <a href="{{ route('tutorial.index') }}">教程首页</a>
        </li>
        <!-- 详情页项：同时匹配路由和参数 -->
        <li class="{{ request()->routeIs('tutorial.show', 'html-intro') ? 'active' : '' }}">
            <a href="{{ route('tutorial.show', 'html-intro') }}">HTML 入门</a>
        </li>
        <li class="{{ request()->routeIs('tutorial.show', 'html-basic-tags') ? 'active' : '' }}">
            <a href="{{ route('tutorial.show', 'html-basic-tags') }}">HTML 基础标签</a>
        </li>
        <!-- 更多目录项照着上面的格式加就行 -->
    </ul>
</div>

这里用request()->routeIs()方法判断当前路由是否匹配，匹配的话给<li>加上active类，用来标记选中状态。

3. 在页面中引入侧边栏 #

不管是tutorial/index.blade.php还是tutorial/show.blade.php，直接用@include引入侧边栏组件就行，同时加上样式实现选中效果：

tutorial/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <style>
        .sidebar {
            width: 220px;
            float: left;
            padding: 15px;
            background-color: #f5f5f5;
            border-right: 1px solid #ddd;
        }
        .sidebar ul {
            list-style: none;
            padding-left: 0;
        }
        .sidebar li {
            margin: 8px 0;
        }
        .sidebar li.active a {
            color: #0066cc;
            font-weight: bold;
            border-left: 3px solid #0066cc;
            padding-left: 7px;
        }
        .main-content {
            margin-left: 250px;
            padding: 15px;
        }
    </style>
</head>
<body>
    @include('components.sidebar')
    <div class="main-content">
        <h1>HTML 教程首页</h1>
        <!-- 首页内容写这里 -->
    </div>
</body>
</html>

tutorial/show.blade.php

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 样式可以和首页统一，或者抽成公共CSS文件 */
        .sidebar {
            width: 220px;
            float: left;
            padding: 15px;
            background-color: #f5f5f5;
            border-right: 1px solid #ddd;
        }
        .sidebar ul {
            list-style: none;
            padding-left: 0;
        }
        .sidebar li {
            margin: 8px 0;
        }
        .sidebar li.active a {
            color: #0066cc;
            font-weight: bold;
            border-left: 3px solid #0066cc;
            padding-left: 7px;
        }
        .main-content {
            margin-left: 250px;
            padding: 15px;
        }
    </style>
</head>
<body>
    @include('components.sidebar')
    <div class="main-content">
        <h1>{{ $content }}</h1>
        <!-- 详情内容写这里 -->
    </div>
</body>
</html>

4. 优化：用循环渲染侧边栏（可选） #

如果侧边栏项很多，一个个写太麻烦，可以把菜单数据存成数组，循环渲染：
修改components/sidebar.blade.php：

<div class="sidebar">
    <h3>HTML 教程目录</h3>
    <ul>
        @php
            $menuItems = [
                ['route' => 'tutorial.index', 'title' => '教程首页'],
                ['route' => 'tutorial.show', 'params' => ['html-intro'], 'title' => 'HTML 入门'],
                ['route' => 'tutorial.show', 'params' => ['html-basic-tags'], 'title' => 'HTML 基础标签'],
                // 新增项直接在数组里加就行
            ];
        @endphp
        @foreach($menuItems as $item)
            <li class="{{ request()->routeIs($item['route'], ...($item['params'] ?? [])) ? 'active' : '' }}">
                <a href="{{ route($item['route'], $item['params'] ?? []) }}">{{ $item['title'] }}</a>
            </li>
        @endforeach
    </ul>
</div>

这样维护起来更省心，不用重复写<li>和判断逻辑。

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