Blade là một công cụ tạo khuôn mẫu rất mạnh được cung cấp cùng với Laravel, không hạn chế người dùng sử dụng mã PHP đơn giản trong chế độ xem của họ
Các tệp xem dạng phiến sử dụng. lưỡi. php và thường được lưu trữ trong thư mục tài nguyên/lượt xem
Trong hướng dẫn này, bạn sẽ học cách hiển thị HTML trong Blade với Laravel 8
điều kiện tiên quyết
Nếu bạn chưa cài đặt và chạy ứng dụng Laravel, tôi khuyên bạn nên sử dụng DigitialOcean Ubuntu Droplet. Bạn có thể sử dụng mã liên kết của tôi để nhận khoản tín dụng DigitalOcean trị giá 100 đô la miễn phí để khởi động máy chủ của riêng bạn
Nếu bạn chưa có, bạn có thể làm theo các bước từ hướng dẫn này về cách thực hiện điều đó
- Cách cài đặt Laravel trên DigitalOcean với 1 cú nhấp chuột
Hoặc bạn có thể sử dụng tập lệnh tuyệt vời này để thực hiện cài đặt
- larabuồm
Hiển thị HTML trong Laravel Blade Views
Trước tiên, bạn cần đảm bảo rằng tệp của mình sử dụng phần mở rộng tệp
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
🤩 Nhà tài trợ tuyệt vời của chúng tôi 👇
Theo mặc định, bạn sẽ sử dụng cú pháp sau
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
Vì vậy, giả sử rằng bạn có một bài đăng trên blog với bộ sưu tập
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
{{ $post->body }}
Tất cả các thẻ HTML sẽ không được hiển thị dưới dạng HTML mà là văn bản thuần túy
Nếu bạn không muốn các thẻ HTML của mình bị thoát thì bạn nên sử dụng
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
{!! $post->body !!}
đầu ra
Nếu bạn in ra cả hai và kiểm tra nguồn trang, bạn sẽ thấy đầu ra sau
<h1>Hello DevDojo</h1>
Hello DevDojo
Trong trường hợp đầu tiên, bạn có thể thấy các phần tử HTML đã được thoát như thế nào và trong trường hợp thứ hai khi chúng tôi sử dụng
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
Sẽ an toàn hơn khi sử dụng
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
Blade là công cụ tạo khuôn mẫu đơn giản nhưng mạnh mẽ được cung cấp cùng với Laravel. Không giống như các công cụ tạo khuôn mẫu PHP phổ biến khác, Blade không hạn chế bạn sử dụng mã PHP đơn giản trong chế độ xem của bạn. Tất cả các chế độ xem Blade được biên dịch thành mã PHP đơn giản và được lưu vào bộ nhớ cache cho đến khi chúng được sửa đổi, nghĩa là Blade về cơ bản không thêm chi phí vào ứng dụng của bạn. Các tệp chế độ xem phiến sử dụng phần mở rộng tệp
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
Kế thừa mẫu
Xác định bố cục
Hai trong số những lợi ích chính của việc sử dụng Blade là kế thừa mẫu và các phần. Để bắt đầu, chúng ta hãy xem một ví dụ đơn giản. Đầu tiên, chúng ta sẽ kiểm tra bố cục trang "chính". Vì hầu hết các ứng dụng web duy trì cùng một bố cục chung trên nhiều trang khác nhau nên sẽ thuận tiện khi xác định bố cục này dưới dạng một chế độ xem Blade duy nhất
App Name - @yield['title']Như bạn có thể thấy, tệp này chứa đánh dấu HTML điển hình. Tuy nhiên, hãy lưu ý các chỉ thị
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
Bây giờ chúng ta đã xác định bố cục cho ứng dụng của mình, hãy xác định một trang con kế thừa bố cục
Mở rộng bố cục
Khi xác định trang con, bạn có thể sử dụng chỉ thị Blade
{!! $post->body !!}
{!! $post->body !!}
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
Trong ví dụ này, phần
{!! $post->body !!}
{!! $post->body !!}
{!! $post->body !!}
Tất nhiên, giống như các khung nhìn PHP đơn giản, các khung nhìn Blade có thể được trả về từ các route bằng cách sử dụng hàm trợ giúp toàn cầu
{!! $post->body !!}
{!! $post->body !!}
Hiển thị dữ liệu
Bạn có thể hiển thị dữ liệu được chuyển đến chế độ xem Blade của mình bằng cách gói biến trong dấu ngoặc nhọn "xoăn". Ví dụ: đưa ra tuyến đường sau
<h1>Hello DevDojo</h1>
Hello DevDojo
Bạn có thể hiển thị nội dung của biến
<h1>Hello DevDojo</h1>
Hello DevDojo
Tất nhiên, bạn không bị giới hạn trong việc hiển thị nội dung của các biến được truyền cho dạng xem. Bạn cũng có thể lặp lại kết quả của bất kỳ hàm PHP nào. Trên thực tế, bạn có thể đặt bất kỳ mã PHP nào bạn muốn bên trong câu lệnh Blade echo
<h1>Hello DevDojo</h1>
Hello DevDojo
Ghi chú. Các câu lệnh của Blade
01 được gửi tự động thông qua hàm<h1>Hello DevDojo</h1> Hello DevDojo02 của PHP để ngăn chặn các cuộc tấn công XSS<h1>Hello DevDojo</h1> Hello DevDojo
Khung Blade & JavaScript
Vì nhiều khung JavaScript cũng sử dụng dấu ngoặc nhọn "xoăn" để biểu thị một biểu thức nhất định sẽ được hiển thị trong trình duyệt, nên bạn có thể sử dụng ký hiệu
<h1>Hello DevDojo</h1>
Hello DevDojo
Trong ví dụ này, biểu tượng
<h1>Hello DevDojo</h1>
Hello DevDojo
Dữ liệu lặp lại nếu nó tồn tại
Đôi khi bạn có thể muốn lặp lại một biến, nhưng bạn không chắc liệu biến đó đã được đặt chưa. Chúng ta có thể diễn đạt điều này bằng mã PHP dài dòng như vậy
<h1>Hello DevDojo</h1>
Hello DevDojo
Tuy nhiên, thay vì viết một câu lệnh gián đoạn, Blade cung cấp cho bạn một lối tắt tiện lợi sau đây
Trong ví dụ này, nếu biến
<h1>Hello DevDojo</h1>
Hello DevDojo
<h1>Hello DevDojo</h1>
Hello DevDojo
Hiển thị dữ liệu chưa thoát
Theo mặc định, các câu lệnh
<h1>Hello DevDojo</h1>
Hello DevDojo
<h1>Hello DevDojo</h1>
Hello DevDojo
Ghi chú. Hãy thật cẩn thận khi lặp lại nội dung do người dùng ứng dụng của bạn cung cấp. Luôn sử dụng cú pháp dấu ngoặc kép để thoát mọi thực thể HTML trong nội dung
Cấu trúc điều khiển
Ngoài kế thừa mẫu và hiển thị dữ liệu, Blade còn cung cấp các lối tắt thuận tiện cho các cấu trúc điều khiển PHP phổ biến, chẳng hạn như câu lệnh điều kiện và vòng lặp. Các lối tắt này cung cấp một cách làm việc rất rõ ràng, ngắn gọn với các cấu trúc điều khiển PHP, đồng thời vẫn quen thuộc với các đối tác PHP của chúng
câu lệnh if
Bạn có thể xây dựng các câu lệnh
<h1>Hello DevDojo</h1>
Hello DevDojo
<h1>Hello DevDojo</h1>
Hello DevDojo
<h1>Hello DevDojo</h1>
Hello DevDojo
<h1>Hello DevDojo</h1>
Hello DevDojo
<h1>Hello DevDojo</h1>
Hello DevDojo
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
Để thuận tiện, Blade cũng cung cấp một chỉ thị
<h1>Hello DevDojo</h1>
Hello DevDojo
vòng lặp
Ngoài các câu lệnh có điều kiện, Blade cung cấp các lệnh đơn giản để làm việc với các cấu trúc vòng lặp được hỗ trợ bởi PHP. Một lần nữa, mỗi chỉ thị này hoạt động giống hệt với các đối tác PHP của chúng
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
Bao gồm các lượt xem phụ
Chỉ thị
<h1>Hello DevDojo</h1>
Hello DevDojo
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
Mặc dù chế độ xem được bao gồm sẽ kế thừa tất cả dữ liệu có sẵn trong chế độ xem chính, nhưng bạn cũng có thể chuyển một mảng dữ liệu bổ sung sang chế độ xem được bao gồm
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
Ghi chú. Bạn nên tránh sử dụng các hằng số
27 và<h1>Hello DevDojo</h1> Hello DevDojo28 trong chế độ xem Blade của mình, vì chúng sẽ đề cập đến vị trí của chế độ xem được lưu trong bộ nhớ cache<h1>Hello DevDojo</h1> Hello DevDojo
Hiển thị chế độ xem cho bộ sưu tập
Bạn có thể kết hợp các vòng lặp và bao gồm thành một dòng với chỉ thị
<h1>Hello DevDojo</h1>
Hello DevDojo
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
Đối số đầu tiên là chế độ xem một phần để hiển thị cho từng phần tử trong mảng hoặc bộ sưu tập. Đối số thứ hai là mảng hoặc tập hợp bạn muốn lặp lại, trong khi đối số thứ ba là tên biến sẽ được gán cho lần lặp hiện tại trong dạng xem. Vì vậy, ví dụ: nếu bạn đang lặp qua một mảng
<h1>Hello DevDojo</h1>
Hello DevDojo
<h1>Hello DevDojo</h1>
Hello DevDojo
Bạn cũng có thể chuyển đối số thứ tư cho chỉ thị
<h1>Hello DevDojo</h1>
Hello DevDojo
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
Bình luận
Blade cũng cho phép bạn xác định nhận xét trong chế độ xem của mình. Tuy nhiên, không giống như các nhận xét HTML, các nhận xét của Blade không được bao gồm trong HTML do ứng dụng của bạn trả về
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
tiêm dịch vụ
Chỉ thị
<h1>Hello DevDojo</h1>
Hello DevDojo
<h1>Hello DevDojo</h1>
Hello DevDojo
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
lưỡi kéo dài
Blade thậm chí còn cho phép bạn xác định các chỉ thị tùy chỉnh của riêng mình. Bạn có thể sử dụng phương thức
<h1>Hello DevDojo</h1>
Hello DevDojo
Ví dụ sau tạo một chỉ thị
<h1>Hello DevDojo</h1>
Hello DevDojo
<h1>Hello DevDojo</h1>
Hello DevDojo
@extends['layouts.master']
@section['title', 'Page Title']
This is appended to the master sidebar.
This is my body content.
Như bạn có thể thấy, hàm trợ giúp
<h1>Hello DevDojo</h1>
Hello DevDojo
<h1>Hello DevDojo</h1>
Hello DevDojo