Laravel 10如何通过@extends等指令为不同Blade配置独立CSS/JS

1. 创建基础布局模板 #

新建resources/views/layouts/app.blade.php作为所有页面的父模板，定义通用结构和可扩展区块：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
    <!-- 全局公共样式（可根据需求移除） -->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <!-- 页面专属CSS占位 -->
    @yield('page-css')
</head>
<body>
    <!-- 页面主体内容占位 -->
    @yield('content')

    <!-- 全局公共脚本（可根据需求移除） -->
    <script src="{{ asset('js/app.js') }}"></script>
    <!-- 页面专属JS占位 -->
    @yield('page-js')
</body>
</html>

2. 编写Home页面 #

resources/views/home.blade.php继承基础布局，填充专属资源和内容：

@extends('layouts.app')

@section('title', '首页')

@section('page-css')
    <link rel="stylesheet" href="{{ asset('css/home.css') }}">
@endsection

@section('content')
    <h1>欢迎来到首页</h1>
    <!-- 首页具体内容写在这里 -->
@endsection

@section('page-js')
    <script src="{{ asset('js/home.js') }}"></script>
@endsection

3. 编写About页面 #

resources/views/about.blade.php替换专属资源即可：

@extends('layouts.app')

@section('title', '关于我们')

@section('page-css')
    <link rel="stylesheet" href="{{ asset('css/about.css') }}">
@endsection

@section('content')
    <h1>关于我们的团队</h1>
    <!-- 关于页具体内容写在这里 -->
@endsection

@section('page-js')
    <script src="{{ asset('js/about.js') }}"></script>
@endsection

4. 编写Contact页面 #

resources/views/contact.blade.php遵循同样逻辑：

@extends('layouts.app')

@section('title', '联系我们')

@section('page-css')
    <link rel="stylesheet" href="{{ asset('css/contact.css') }}">
@endsection

@section('content')
    <h1>与我们取得联系</h1>
    <!-- 联系页具体内容写在这里 -->
@endsection

@section('page-js')
    <script src="{{ asset('js/contact.js') }}"></script>
@endsection

关键说明 #

• 确保home.css、home.js等文件放在public/css/和public/js/目录下，asset()函数会自动指向public目录。
• 若不需要全局公共资源，直接删除对应代码行即可。
• 单个页面如果不需要专属JS（或CSS），可直接省略对应的@section区块。

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