Hướng dẫn tạo chân trang
Back to freestyleChân trang (footer) thường là nơi người dùng tìm đến khi họ đã đọc xong nội dung chính nhưng vẫn còn muốn khám phá thêm — một danh mục thuật ngữ liên quan, một câu hỏi thường gặp, hay đơn giản là biết trang còn có gì khác. Vì vậy, dù nằm ở cuối trang, chân trang vẫn đáng được thiết kế cẩn thận thay vì để trống hoặc sao chép mặc định. Hướng dẫn dưới đây sẽ đi qua từng bước cụ thể để tự tạo một chân trang riêng bằng mã nguồn, sau đó mở rộng sang cách chỉnh sửa chân trang dùng chung cho toàn bộ website.
Hướng dẫn tạo chân trang
Mở trang cần thêm chân trang
Trước khi viết mã, bạn cần vào đúng nơi để thao tác:
- Vào Dashboard của EzyPlatform.
- Chọn trang muốn chỉnh sửa hoặc tạo trang mới.
- Chọn chế độ soạn thảo bằng mã nguồn (Code/Text) để nhập trực tiếp HTML thay vì kéo thả — vì các bước tiếp theo đều thao tác trực tiếp trên mã nguồn.
Tạo khối chân trang bằng mã nguồn
Sau khi đã ở chế độ soạn thảo mã nguồn, bước tiếp theo là dựng khung cho chân trang. Viết trực tiếp mã HTML cho khối chân trang, chia thành các cột tương ứng với số lượng nội dung muốn hiển thị — gợi ý: 3 hoặc 4 cột, mỗi cột là một div con trong hàng (row).
Nội dung từng cột được viết sẵn ngay trong mã nguồn, ví dụ:
- Cột 1: Chủ đề
- Cột 2: Danh mục
- Cột 3: Câu hỏi
Chèn danh sách các thuật ngữ
Với khung cột đã có, phần "Chủ đề" là nơi cần điền nội dung cụ thể trước tiên. Trong cột "Chủ đề", viết danh sách các thuật ngữ mà người dùng có thể muốn tìm hiểu ngay trong mã nguồn (mỗi thuật ngữ là một dòng/thẻ riêng), ví dụ:
- Inbound Marketing
- Xây dựng website
Gắn liên kết cho từng thuật ngữ
Danh sách thuật ngữ ở trên sẽ không có nhiều tác dụng nếu người dùng không bấm vào được — vì vậy bước cuối cùng là gắn liên kết cho từng thuật ngữ. Vì đã thao tác trực tiếp trên mã nguồn, bạn chèn liên kết ngay trong lúc viết bằng thẻ
<a href="...">, không cần chuyển qua trình soạn thảo khác.Với mỗi thuật ngữ, bọc thẻ
<a href="đường-dẫn-nội-dung-chi-tiết">Tên thuật ngữ</a>. Thay đường-dẫn-nội-dung-chi-tiết bằng link dẫn đến nội dung chi tiết tương ứng của thuật ngữ đó, rồi lặp lại cho từng thuật ngữ còn lại trong danh sách.Lưu & Xuất bản
Khi đã hoàn tất cả 4 bước ở trên, chân trang vẫn chỉ mới nằm ở bản nháp — cần lưu và xuất bản thì thay đổi mới thực sự có hiệu lực trên trang:
- Nhấn "Lưu và Xuất bản" ở góc trên cùng để hoàn tất việc thêm chân trang.
- Kiểm tra lại trên giao diện trang chính: cuộn xuống cuối để xem chân trang hiển thị đúng chưa.
Chỉnh sửa chân trang, đầu trang và các thành phần dùng chung khác
Cách làm ở phần 1 phù hợp khi bạn muốn một chân trang riêng cho từng trang cụ thể. Nhưng nếu mục tiêu là chỉnh sửa chân trang, đầu trang hoặc các thành phần dùng chung khác (alert, loading, toast, prompt...) áp dụng cho toàn bộ website, thao tác lặp lại mã nguồn trên từng trang sẽ không hiệu quả — lúc này bạn cần thao tác qua Page Fragments thay vì chỉnh sửa mã nguồn riêng lẻ trên từng trang.
Vào Page Fragments
Vào mục Các trang > Các phần trang (Page Fragments), gõ từ khóa
common vào ô tìm kiếm, bạn sẽ thấy nhóm Page: Common gồm các phần: Alert, Footer, Header, Loading, Prompt, Scripts, Styles, Toast. Bạn chọn đúng phần cần sửa (ví dụ Footer cho chân trang, Header cho đầu trang) rồi chỉnh sửa mã nguồn ngay tại đó.
Tìm mã nguồn gốc trong Trình xem mẫu
Sau khi đã chỉnh sửa Page Fragments, có thể sẽ có lúc bạn cần đối chiếu lại với bản gốc — chẳng hạn để kiểm tra mình đã thay đổi những gì, hoặc muốn khôi phục về mặc định. Nếu cần đối chiếu hoặc tham khảo mã nguồn gốc (bản mặc định) của các thành phần này, bạn có thể vào Trình xem mẫu, theo đường dẫn Tài nguyên web > templates > ezycommon. Tại đây sẽ có đầy đủ các tệp gốc tương ứng như
alert.html, loading.html, prompt.html, toast.html, fragments.html... để bạn xem lại cấu trúc ban đầu khi cần.
Cách này hữu ích khi bạn đã chỉnh sửa Page Fragments và muốn quay về đối chiếu hoặc khôi phục lại theo đúng mã nguồn mặc định ban đầu.