Hướng dẫn tạo landing page cho website thời trang
Back To Blogs
Nguyễn Thị Thanh Tuyền - Chuyên viên Marketing
Hãy nói bạn đang kinh doanh thời trang (nếu bạn chưa có website thời trang, hãy tham khảo loạt bài viết này để tạo và muốn tạo một landing page, bạn có thể làm theo các bước sau.
Bước 1: Truy cập Visual Studio Code và tạo thư mục cho Landing Page
Nếu bạn chưa biết cài đặt Visual Studio Code thế nào, bạn có thể tham khảo Hướng dẫn này để cài đặt, sau đó bạn có thể làm theo các bước ở dưới đây.
1.1. Mở Visual Studio Code
Trước tiên, bạn cần mở Visual Studio Code, trên thanh menu chọn: File → Open Folder. Thao tác này giúp bạn mở thư mục chứa dự án website để bắt đầu cấu hình như giao diện bên dưới đây.
1.2. Tạo thư mục dự án Landing Page
Nếu chưa có thư mục làm việc riêng, bạn nên tạo mới một thư mục để quản lý toàn bộ Landing Page. Ví dụ: "thoitrangcu" như giao diện dưới đây.
Sau đó chọn thư mục này để mở trong VS Code như ảnh bên dưới đây.
Bước 2: Khởi tạo EzyArticle Project
Khi thư mục đã mở thành công, bạn tiến hành khởi tạo project bằng extension EzyArticle. Tại khu vực project, bạn click chuột phải → chọn Create EzyArticle Project như giao diện dưới đây.
Sau vài giây, hệ thống sẽ tự động tạo sẵn cấu trúc chuẩn để làm Landing Page như ảnh bên dưới.
Sau khi project được tạo xong, bạn sẽ thấy file environment.json. Đây là file dùng để kết nối VS Code với hệ thống quản trị website như ảnh bên dưới.
Bước 3: Đăng nhập Admin website để lấy Access Token
Bây giờ bạn quay lại trang quản trị website. Ví dụ: https://admin.thoitrangcu.io.vn và đăng nhập bằng tài khoản Admin đang sử dụng. Sau đó vào: Admin Profile. Tại đây hệ thống sẽ hiển thị thông tin tài khoản và khu vực Access Token như ảnh dưới đây.
3.1. Xác thực bảo mật để xem Token và sao chép Access Token
Vì Access Token là chìa khóa kết nối hệ thống nên website sẽ yêu cầu xác nhận lại mật khẩu. Bạn nhập mật khẩu tài khoản Admin rồi bấm: Send như giao diện dưới đây.
Sau khi xác thực thành công, token sẽ hiện ra. Bạn bấm Copy để sao chép toàn bộ chuỗi token như ảnh dưới đây.
3.2. Cập nhật file environment.json
Quay lại Visual Studio Code và mở file environment.json. Điền 2 thông tin quan trọng: admin_url và admin_access_token. Dán token vừa copy vào đây, ví dụ như giao diện dưới đây.
Bước 4: Dùng AI tạo Landing Page nhanh từ hình ảnh mẫu
Sau khi đã kết nối thành công website với project trong VS Code, bạn có thể tận dụng AI để tạo Landing Page cực nhanh. Sau đó kéo ảnh vào khung chat của extension AI trong VS Code và nhập yêu cầu, ví dụ như giao diện dưới đây.
Sau khi chỉnh sửa xong, click chuột phải vào file "content.html" và chọn Preview Page. Hệ thống sẽ chạy bản xem thử ngay trên local như ảnh bên dưới đây.
Bước 5: Set up lại cấu hình hệ thống và cài đặt Theme
Nếu Landing Page bị lỗi preview, publish không thành công, giao diện chưa hiển thị đúng hoặc báo 404, nguyên nhân thường đến từ việc website chưa cấu hình hoàn chỉnh hoặc theme chưa được kích hoạt đúng cách. Lúc này bạn nên kiểm tra lại toàn bộ phần cài đặt theo các mục bên dưới.
5.1. Kiểm tra Theme đã được kích hoạt chưa
Truy cập trang quản trị: Themes. Tại đây kiểm tra theme Fashion đã hoạt động chưa.
Nếu chưa, bấm: Activate và tiến hành cài đặt các plugin như giao diện dưới đây.
Nếu hệ thống cảnh báo cần cài đặt hoặc nâng cấp các plugin phụ thuộc, bạn hãy cài đặt.
Nếu xuất hiện thông báo: "You need to update EzyPlatform first" nghĩa là phiên bản EzyPlatform hiện tại đang quá cũ. Bạn hãy nhấn vào nút Update để chuyển sang giao diện cập nhật EzyPlatform.
Bạn hãy tải xuống phiên bản EzyPlatform mới nhất.
Sau đó tiến hành cài đặt.
Bạn hãy chờ đợi khoảng từ 15 giây đến 2 phút tùy theo cấu hình máy chủ của bạn, sau đó EzyPlatform phiên bản mới nhất sẽ được cài đặt và giao diện hiển thị như sau:
5.2. Kích hoạt lại Theme sau khi update
Sau khi nâng cấp hệ thống xong, bạn hãy quay lại mục Themes. Tiếp tục bấm vào nút Activate của theme Fashion.
Popup Active sẽ tiếp tục hiện ra, bạn hãy nhấn vào nút Active.
Khi vẫn còn các plugin phụ thuộc cần cài đặt, hệ thống sẽ hiện ra thông báo, bạn hãy tiến hành cài đặt.
Khi vẫn còn các plugin và theme Fashion đang phụ thuộc vào cần nâng cấp lên phiên bản mới nhất, bạn hãy tiến hành nâng cấp và áp dụng phiên bản mới nhất trước.
Cuối cùng bạn hãy tiến hành Active & Restart lại theme Fashion.
Sau khi cài theme hoặc update xong, vào: Dashboard → Web, chọn Restart như giao diện dưới đây.
Bước 6: Publish Landing Page lên Server
Quay lại VS Code. Chuột phải vào content.html → Chọn Publish Content To Server. Nếu publish thành công, page sẽ lên website ngay.
Tuy nhiên, nếu trong trường hợp publish xong và bạn truy cập landing page trên web bị hiển thị lỗi 404 như ảnh dưới đây.
Rất có thể Extension EzyArticle bạn đang sử dụng chưa được cập nhật lên phiên bản mới nhất và gây lỗi, bạn hãy làm theo các bước dưới đây để cập nhật extension.
Bước 7: Cập nhật Extension EzyArticle lên phiên bản mới nhất
Nếu quá trình preview hoặc publish Landing Page gặp lỗi, việc đầu tiên bạn nên kiểm tra là extension EzyArticle trong Visual Studio Code. Vào mục Extensions trong VS Code. Tại cột menu chọn EzyArticle và tiến hành cập nhật như giao diện bên dưới.
Bạn hãy nhấn vào nút Update to xxx.
Sau khi update xong, hệ thống sẽ yêu cầu tải lại extension, bạn click chọn Restart Extensions như giao diện bên dưới.
Bước 8: Publish lại Landing Page lên server
Bạn quay lại file content.html, chuột phải và chọn: Publish Content To Server → Continue như giao diện dưới đây.
Visual Studio Code hiện ra cảnh báo rằng sẽ ghi đè nội dung trên máy chủ, bạn hãy đồng ý.
Sau khi publish thành công, tiếp tục chuột phải vào file content.html → Preview Page như giao diện dưới đây.
Giao diện landing sẽ được hiển thị. Tuy nhiên có thể có trường hợp bị lỗi font như hình dưới đây:
Điều này là do AI thực thi không đúng: trang của chúng ta chọn là loại trang độc lập, tất cả mã nguồn sẽ được đưa vào tập tin content.html thay vì phân tán ra 3 tập tin. Chúng ta sẽ cần đưa ra chỉ thị lại cho AI. Bạn quay lại khung chat của extension AI trong VS Code và nhập như giao diện và review lại như dưới đây.
Sau đó xem lại trang để chắc chắn AI đã làm đúng:
Và kết quả chúng ta sẽ có giao diện hoàn chỉnh đẹp mắt:
Lưu ý
- ✅ Luôn cập nhật EzyPlatform và các plugin lên phiên bản mới nhất.
- ✅ Luôn cập nhật EzyArticle Visual Studio Code extension lên phiên bản mới nhất.
- ✅ Preview trang trước khi publish để tránh ghi đè lên landing page đang chạy.
👉 Nếu trong quá trình cài đặt bạn gặp khó khăn cần hỗ trợ cài đặt nhanh hoặc xử lý lỗi kỹ thuật? Hãy Inbox Fanpage chính thức của Young Monkeys để được hỗ trợ nhanh chóng nhé!