Bạn có thể tìm thấy tệp HTML nguồn trong thư mục
window.SERVER_DATA = __SERVER_DATA__;3 của dự án đã tạo. Bạn có thể chỉnh sửa thẻ
window.SERVER_DATA = __SERVER_DATA__;4 trong đó để thay đổi tiêu đề từ “Ứng dụng React” thành bất kỳ thứ gì khác
Lưu ý rằng thông thường bạn sẽ không thường xuyên chỉnh sửa các tệp trong thư mục
window.SERVER_DATA = __SERVER_DATA__;3. Ví dụ: thêm biểu định kiểu được thực hiện mà không cần chạm vào HTML
Nếu bạn cần tự động cập nhật tiêu đề trang dựa trên nội dung, bạn có thể sử dụng API
window.SERVER_DATA = __SERVER_DATA__;6 của trình duyệt. Đối với các tình huống phức tạp hơn khi bạn muốn thay đổi tiêu đề từ các thành phần React, bạn có thể sử dụng React Mũ bảo hiểm, thư viện của bên thứ ba
Nếu bạn sử dụng máy chủ tùy chỉnh cho ứng dụng của mình trong quá trình sản xuất và muốn sửa đổi tiêu đề trước khi nó được gửi tới trình duyệt, bạn có thể làm theo lời khuyên trong. Ngoài ra, bạn có thể tạo trước mỗi trang dưới dạng tệp HTML tĩnh, sau đó tải gói JavaScript, được trình bày tại đây
Tạo thẻ
window.SERVER_DATA = __SERVER_DATA__;
7 động trên máy chủ
Vì Tạo ứng dụng phản ứng không hỗ trợ kết xuất máy chủ, nên bạn có thể tự hỏi làm thế nào để tạo các thẻ
window.SERVER_DATA = __SERVER_DATA__;7 động và phản ánh URL hiện tại. Để giải quyết vấn đề này, chúng tôi khuyên bạn nên thêm trình giữ chỗ vào HTML, như thế này
Sau đó, trên máy chủ, bất kể bạn sử dụng chương trình phụ trợ nào, bạn có thể đọc
window.SERVER_DATA = __SERVER_DATA__;9 vào bộ nhớ và thay thế
window.SERVER_DATA = __SERVER_DATA__;0,
window.SERVER_DATA = __SERVER_DATA__;0 và bất kỳ trình giữ chỗ nào khác bằng các giá trị tùy thuộc vào URL hiện tại. Đảm bảo làm sạch và thoát khỏi các giá trị được nội suy để chúng được an toàn khi nhúng vào HTML
Nếu bạn sử dụng máy chủ Node, bạn thậm chí có thể chia sẻ logic khớp tuyến giữa máy khách và máy chủ. Tuy nhiên, sao chép nó cũng hoạt động tốt trong các trường hợp cơ bản
Tiêm dữ liệu từ máy chủ vào trang
Tương tự như phần trước, bạn có thể để lại một số trình giữ chỗ trong HTML để chèn các biến toàn cục, chẳng hạn
window.SERVER_DATA = __SERVER_DATA__;
Sau đó, trên máy chủ, bạn có thể thay thế
window.SERVER_DATA = __SERVER_DATA__;1 bằng JSON của dữ liệu thực ngay trước khi gửi phản hồi. Mã khách hàng sau đó có thể đọc
window.SERVER_DATA = __SERVER_DATA__;2 để sử dụng nó. Đảm bảo khử trùng JSON trước khi gửi nó cho khách hàng vì nó làm cho ứng dụng của bạn dễ bị tấn công XSS
Một ngày nọ, tôi quyết định tạo một gói tốt có thể giúp tôi giải quyết mọi vấn đề về SEO trong Laravel. Đó là một chặng đường rất dài. Có phiên bản đầu tiên của gói của tôi [kodicms/laravel-assets] trên packagist. org và đã có khoảng 72 nghìn lượt tải xuống, nhưng tôi không thích nó. Nó có rất nhiều vấn đề, với các bài kiểm tra, codebase, nhưng vấn đề chính là tài liệu. Và tôi đã quyết định phát triển một phiên bản mới tốt hơn của công cụ để quản lý thẻ meta, kiểu, tập lệnh, OpenGraph, thẻ Twitter, v.v. t. c. với siêu tài liệu, bằng cách sử dụng TDD
Và cuối cùng, hãy để tôi giới thiệu gói butschster/thẻ meta mới của tôi để quản lý thẻ meta và các thẻ khác trong Laravel, có thể giúp bạn tiết kiệm 90% thời gian
Trình quản lý thẻ meta Laravel là gì?
- Chuẩn SEO
- Facebook OpenGraph
- Thẻ Twitter
- Liên kết tới tệp CSS
- Links to JS files
- Tools for webmasters
- Extensions
- Good documentation
Bây giờ, hãy chuyển sang phần thú vị về cách chúng ta có thể sử dụng gói này trong các ứng dụng laravel của bạn. Lúc đầu, bạn phải chạy lệnh sau để đưa gói này qua Trình soạn thảo;
composer require butschster/meta-tags
Sau khi gói được cài đặt, bạn cần đăng ký nhà cung cấp dịch vụ. Chỉ cần chạy lệnh thủ công
php artisan meta-tags:install
Khi đã xong, bạn có thể thiết lập meta ứng dụng mặc định trong config/meta_tags. cấu hình php
Sau khi cấu hình hoàn tất, bạn có thể thêm phần bên dưới vào khu vực meta của bố cục chính mà bạn muốn bao gồm các thẻ meta;
@meta_tags
Bây giờ bạn có thể quản lý meta trong bộ điều khiển của mình như thế này
Đó là nó
Bạn có thể làm những việc như thế này
________số 8gói
Hay… Cái này thì sao?
Bạn có thể nhóm các thẻ meta, liên kết, tập lệnh của mình thành các gói có tên và đặt phụ thuộc
Và đưa chúng vào bố cục của bạn thông qua cấu hình
/*
* Default packages
*
* Packages, that should be included everywhere
*/
'packages' => [
'bootstrap'
],
Hoặc thông qua bộ điều khiển
window.SERVER_DATA = __SERVER_DATA__;0
gói bootstrap sẽ tự động giải quyết tất cả các phụ thuộc và sẽ bao gồm tất cả chúng trước khi bao gồm chính nó
Vị trí
Tập lệnh phải ở chân trang. Bạn nói. “Anh bạn, tôi nên làm gì đây, tôi muốn đặt đoạn mã của mình ở cuối trang”
Không vấn đề gì. . ] Sử dụng vị trí tùy chỉnh
Theo mặc định, tất cả các tập lệnh đều sử dụng vị trí chân trang, nhưng bạn có thể thay đổi vị trí này. Tất cả các thẻ meta khác sử dụng vị trí đầu
window.SERVER_DATA = __SERVER_DATA__;1
mở rộng
Lúc đầu, bạn có thể tạo bất kỳ thẻ meta và liên kết nào. Nó rất đơn giản
Hầu hết các gói thẻ meta không hỗ trợ tiện ích mở rộng, nhưng trong gói này, bạn có thể sử dụng Laravel Macroable trait
Hoặc bạn có thể tạo lớp của riêng mình, lớp đó sẽ triển khai giao diện \Butschster\Head\Contracts\MetaTags\Entities\TagInterface
Sự kết luậnThêm API và ví dụ tại đây https. //github. com/butschster/LaravelMetaTags
Gần đây bạn tôi đã hỏi một câu hỏi. Tôi có thể thêm nhiều biểu tượng yêu thích?
window.SERVER_DATA = __SERVER_DATA__;2
tôi nói CÓ. hãy để Ross nó
Tôi kết luận rằng tôi phải nói rằng, cách tiếp cận này cho phép các nhà phát triển sử dụng các thẻ meta linh hoạt, tạo các gói có thể tái sử dụng và chia sẻ chúng với bạn bè của bạn