Làm cách nào để hiển thị JSON trong HTML?
|
Lottie là một định dạng tệp mang tính cách mạng giúp mở rộng khả năng kết hợp hoạt ảnh của bạn trên các trang web. Thật không may, HTML 5 không hiển thị hoạt ảnh dựa trên JSON, vì vậy chúng tôi phải làm việc với plugin từ Bodymovin và một số JavaScript để giúp xử lý định dạng tệp mới Show
Trong bài đăng này, chúng tôi cung cấp cho bạn hướng dẫn từng bước về cách tìm hoạt ảnh Lottie cao cấp và thêm tệp JSON vào dự án HTML của bạn. Quá trình này rất đơn giản nhưng có thể gây khó chịu nếu bạn chưa từng làm việc với JSON. Hướng dẫn của chúng tôi là hướng dẫn trực tuyến toàn diện, dễ thực hiện nhất và là nền tảng để bạn làm việc với các tệp hoạt ảnh JSON Bắt đầu nào Tìm một hoạt hình JSON cao cấpBước đầu tiên là tìm hoạt hình Lottie chất lượng cao để thêm vào trang web của bạn. Chúng tôi đang làm việc trong thư viện Creattie, nơi bạn sẽ tìm thấy nhiều loại biểu tượng và hình minh họa hoạt hình cao cấp trong các gói thiết kế gắn kết Creattie là một lựa chọn tuyệt vời cho những nhà thiết kế muốn nắm bắt được tính thẩm mỹ nhất quán xuyên suốt dự án mà không cần sử dụng tác phẩm nghệ thuật tái chế. Ngoài ra, bạn có thể tùy chỉnh hoạt ảnh để chúng phù hợp với thương hiệu trên các trang của bạn Chọn ‘Lottie Animations’ từ trang chủ Chuyển đổi 'Hiển thị dưới dạng bộ sưu tập' để duyệt các gói thiết kế gắn kết Nhấp vào bộ sưu tập bạn muốn sử dụng; . ’ Chọn hoạt hình Lottie của bạn Tùy chỉnh màu sắcBây giờ bạn đã chọn được thiết kế hoàn hảo cho dự án của mình, bạn có thể tùy chỉnh màu sắc để phù hợp với trang web. Chúng tôi đã lấy ID màu trực tiếp từ trang web của mình và dán chúng vào trình chỉnh sửa màu của Creattie Tải xuống tệp JSON của bạnKhi bạn đã hoàn tất việc tùy chỉnh hoạt ảnh của mình, hãy nhấp vào 'Tải xuống. ’ Một cửa sổ bật lên xuất hiện với 3 tùy chọn tệp (JSON, GIF, MP4). Chọn 'JSON' và tiếp tục nhấp vào 'Tải xuống ngay. ’ Tệp sẽ bắt đầu tải xuống và bạn sẽ được chuyển hướng đến trang sản phẩm thiết kế. Bây giờ bạn sẽ có tùy chọn 'Nhúng' hoặc 'Tải xuống' trong tùy biến màu Creattie cho phép bạn chọn cách bạn muốn kết hợp các thiết kế Lottie của mình. Bạn có thể nhúng mã hoặc làm việc với tệp JSON. Khi nhúng, bạn có thể thay đổi các thông số của hoạt ảnh từ trình chỉnh sửa Creattie. Các tùy chọn dưới đây Hôm nay chúng tôi đang làm việc với tệp JSON, nhưng bạn có thể xem bài viết của chúng tôi về cách nhúng hoạt ảnh Lottie vào trang HTML để biết thêm thông tin Khi bạn đã tải xuống tệp JSON của mình, hãy thêm nó vào thư mục dự án của bạn Dán Bodymovin CDN vào tiêu đềĐiều hướng đến trang HTML của bạn Chúng tôi đang sử dụng một mẫu được tạo bằng Bootstrap 5 từ Start Bootstrap. Chúng tôi sẽ thêm hoạt ảnh Freelancer Lottie vào trang mẫu bên dưới Sao chép và dán CDN của Bodymovin bên dưới vào tiêu đề của bạn bằng thẻ script. Bạn cũng có thể tìm thấy phiên bản mới nhất tại đây Trình phát là thứ hiển thị hoạt ảnh JSON; Thêm một vùng chứaBây giờ chúng ta có thể bắt đầu mã hóa Bước đầu tiên là tạo vùng chứa cho hoạt ảnh của chúng tôi. Sao chép mã bên dưới nếu bạn đang theo dõi và dán mã vào phần bạn muốn chỉnh sửa Trong vùng chứa của bạn, hãy tạo thẻ tập lệnh. Trong thẻ, tạo một biến gọi hàm của chúng tôi. Chuẩn bị; Gọi cho Bodymovin. hàm loadAnimationGiá trị của biến của chúng tôi là hàm sẽ chứa các tham số của chúng tôi. Bạn có thể sao chép và dán toàn bộ tập lệnh bên dưới var hoạt hình = bodymovin. loadAnimation({ thùng đựng hàng. tài liệu. getElementById('animation-container'), con đường. 'Người làm nghề tự do. json', trình kết xuất. 'svg', vòng. thật, tự chạy. thật, Tên. "Hoạt hình demo", }); Tài liệu Bodymovin có tất cả các chi tiết bạn cần biết để tùy chỉnh hoạt hình Lottie từ trang HTML. Trong hướng dẫn này, chúng tôi chỉ kết xuất hoạt ảnh nhưng hãy nhớ xem kho lưu trữ của họ trên GitHub Truyền tham số vào hàmCác tham số bên dưới là bắt buộc để hoạt hình JSON hiển thị. Đảm bảo tên vùng chứa của bạn khớp và tệp của bạn được viết đúng chính tả với đường dẫn chính xác
Thiết lập máy chủ trực tiếpMọi thứ trong HTML của bạn phải sẵn sàng hoạt động; . Tuy nhiên, hầu hết các trình duyệt sẽ chặn hoạt ảnh JSON và trả về lỗi cho biết tệp của bạn đã bị chính sách CORS chặn Không cần phải lo lắng; . Nếu bạn sử dụng Mã VS, hãy thêm tiện ích mở rộng 'Máy chủ trực tiếp. ' Sau khi tải xuống, bạn có thể nhấp vào 'Phát trực tiếp' ở chân trang của Mã VS khi mở trang HTML của bạn Bây giờ trình duyệt mặc định của bạn sẽ tự động hiển thị trang web của bạn Ngạc nhiên trước công việc tuyệt vời của bạnXin chúc mừng. Bạn vừa thêm một tệp JSON vào HTML Như bạn có thể thấy, hình ảnh động của chúng tôi rất lớn Bạn có thể điều chỉnh vùng chứa để thay đổi kích thước Đây là đoạn mã cuối cùng. var hoạt hình = bodymovin. loadAnimation({ thùng đựng hàng. tài liệu. getElementById('animation-container'), con đường. 'Người làm nghề tự do. json', trình kết xuất. 'svg', vòng. thật, tự chạy. thật, Tên. "Hoạt hình demo", }); Từ cuối cùngMặc dù việc thêm tệp JSON vào HTML phức tạp hơn nhiều so với việc nhúng mã, nhưng bạn có nhiều tùy chọn hơn để tùy chỉnh hoạt ảnh khi bạn đã tìm ra trình cắm Bodymovin. Chúng tôi thực sự khuyên bạn nên học cách kết hợp các tệp hoạt hình JSON nếu có thể vì bạn có nhiều quyền tự do hơn để thao tác mã ngoài việc thay đổi tốc độ, độ trễ và trình kích hoạt Làm cách nào để hiển thị dữ liệu tệp JSON trong HTML?Mã jQuery sử dụng phương thức getJSON() để tìm nạp dữ liệu từ vị trí của tệp bằng yêu cầu AJAX HTTP GET . Phải mất hai đối số. Một là vị trí của tệp JSON và một là hàm chứa dữ liệu JSON. Hàm each() dùng để lặp qua tất cả các đối tượng trong mảng.
Tôi có thể đặt JSON trong HTML không?JSON có thể được dịch sang JavaScript rất dễ dàng . JavaScript có thể được sử dụng để tạo HTML trong các trang web của bạn.
Làm cách nào để hiển thị tệp JSON trong trình duyệt?Các bước mở tệp JSON trên trình duyệt Web (Chrome, Mozilla) . Mở cửa hàng Web trên trình duyệt web của bạn bằng menu tùy chọn ứng dụng hoặc trực tiếp bằng liên kết này Tại đây, nhập Chế độ xem JSON vào thanh tìm kiếm trong danh mục Tiện ích mở rộng Bạn sẽ nhận được các tiện ích mở rộng khác nhau tương tự như Chế độ xem JSON để mở các tệp định dạng JSON Làm cách nào để tạo kết xuất JSON?Điều hướng đến sitecore/Content/Tenant/Site/Presentation/Rendering Variants/Danh sách JSON, nhấp chuột phải vào Danh sách JSON, nhấp vào Chèn và nhấp vào định nghĩa Biến thể JSON. Nhập tên và nhấp vào OK. Ví dụ: để thêm các trường JSON cho tiêu đề và nội dung, hãy thêm Hình ảnh JSON và trường Ngày JSON |
