บทที่ 20: การรวมไฟล์ CSS และ JavaScript กับ Blade

ใน Laravel เราสามารถรวมไฟล์ CSS และ JavaScript เข้ากับ Blade Template ได้อย่างง่ายดาย ทำให้การออกแบบและการจัดการสคริปต์ในหน้าเว็บเป็นไปได้สะดวกและมีประสิทธิภาพ Laravel จัดการ Asset เหล่านี้โดยอัตโนมัติผ่านโฟลเดอร์ public/ ซึ่งเป็นตำแหน่งที่เก็บไฟล์ CSS, JavaScript, รูปภาพ และไฟล์อื่นๆ ที่ผู้ใช้สามารถเข้าถึงได้

การรวมไฟล์ CSS ใน Blade

ไฟล์ CSS สามารถเชื่อมต่อเข้ากับ Blade Template ได้โดยการใช้แท็ก <link>, {{ asset() }}, หรือฟังก์ชัน @vite หากใช้ Laravel Vite

ตัวอย่างการเชื่อมต่อไฟล์ CSS

การใช้ asset() สำหรับไฟล์ที่อยู่ใน publicสร้างไฟล์ CSS ไว้ใน public/css/style.css จากนั้นเชื่อมไฟล์ CSS ใน Blade ด้วยฟังก์ชัน asset() ดังนี้:

<!-- resources/views/layouts/main.blade.php -->
<head>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>

2การใช้ @vite (ใน Laravel 9 ขึ้นไป)

หากใช้ Laravel Vite ซึ่งเป็นตัวจัดการ Asset ที่ใหม่กว่า เราสามารถเรียกใช้ไฟล์ CSS ได้ดังนี้:

<!-- resources/views/layouts/main.blade.php -->
<head>
    @vite('resources/css/app.css')
</head>

การใช้ Blade Component ในการรวม CSS

เราสามารถใช้ Blade Component เพื่อลดการเขียนซ้ำของการเชื่อมไฟล์ CSS ในหลายๆ หน้า โดยสร้าง Layout ที่มีส่วนหัวกลางสำหรับการเชื่อมไฟล์ CSS

การรวมไฟล์ JavaScript ใน Blade

เช่นเดียวกับการเชื่อมต่อ CSS เราสามารถเชื่อมต่อไฟล์ JavaScript ได้โดยใช้ <script>, {{ asset() }}, หรือ @vite เช่นกัน

ตัวอย่างการเชื่อมต่อไฟล์ JavaScript

การใช้ asset() สร้างไฟล์ JavaScript ใน public/js/script.js และเชื่อมใน Blade Template ด้วยฟังก์ชัน asset():

<!-- resources/views/layouts/main.blade.php -->
<body>
    <script src="{{ asset('js/script.js') }}"></script>
</body>

2.การใช้ @vite สำหรับ JavaScript (ใน Laravel 9 ขึ้นไป)

<!-- resources/views/layouts/main.blade.php -->
<body>
    @vite('resources/js/app.js')
</body>

การใช้ Layout Blade และ Section สำหรับรวม CSS และ JavaScript

ใน Blade เราสามารถใช้คำสั่ง @section เพื่อกำหนดตำแหน่งของไฟล์ CSS และ JavaScript ในหน้าเว็บ โดยสามารถใช้ร่วมกับ @yield ใน Layout ได้ เช่น

<!-- resources/views/layouts/main.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
    @yield('css')
</head>
<body>
    <div class="content">
        @yield('content')
    </div>
    @yield('js')
</body>
</html>

จากนั้นใน View ที่ต้องการเชื่อมต่อ CSS และ JavaScript เฉพาะหน้า สามารถกำหนดได้ดังนี้:

<!-- resources/views/home.blade.php -->
@extends('layouts.main')

@section('title', 'Home Page')

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

@section('content')
    <h1>ยินดีต้อนรับสู่หน้าแรก</h1>
@endsection

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

การนำไปใช้งาน

การเชื่อมต่อไฟล์ CSS และ JavaScript กับ Blade Template ช่วยให้การจัดการสไตล์และสคริปต์เป็นไปอย่างง่ายดาย โดยสามารถเชื่อมโยงไฟล์ผ่าน public หรือใช้ @vite เมื่อใช้ Laravel Vite ในการจัดการ Asset ซึ่งเหมาะสำหรับการออกแบบและพัฒนาเว็บแอปพลิเคชันที่มีหลายหน้าและต้องการจัดการสไตล์และฟังก์ชันต่างๆ อย่างเป็นระบบ