Hướng dẫn tạo đầu trang
Back to freestyleĐầu trang (header) thường là nơi người dùng nhìn thấy đầu tiên khi vừa mở một trang — logo để nhận diện đây là website nào, và menu điều hướng để biết mình có thể đi đâu tiếp theo. Vì xuất hiện ngay từ giây đầu tiên và lặp lại trên mọi trang, đầu trang cần rõ ràng, gọn và dẫn đúng hướng thay vì để mặc định hoặc rối mắt. Hướng dẫn dưới đây sẽ đi qua từng bước cụ thể để tự tạo một đầu trang bằng mã nguồn, sau đó mở rộng sang cách chỉnh sửa đầu trang dùng chung cho toàn bộ website.
Hướng dẫn tạo đầu trang
Mở trang cần thêm đầu 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 đầu 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 đầu trang. Viết trực tiếp mã HTML cho khối đầu trang, bắt đầu bằng thẻ
<nav> bao ngoài, ví dụ:<nav id="navbar-top" class="navbar navbar-expand-lg navbar-light bg-white sticky-top"> <div class="container-fluid px-5"> ... </div> </nav>
Bên trong, chia thành hai phần chính: tên/logo thương hiệu nằm bên trái, và khối menu điều hướng nằm bên phải hoặc ở giữa.
Chèn tên thương hiệu và menu điều hướng
Với khung
<nav> đã có, phần tên thương hiệu là nơi cần điền nội dung trước tiên:<a class="navbar-brand fw-bold fs-2" href="/" style="color: #3f396d">Chứng khoán</a>
Sau đó viết danh sách các mục menu ngay trong mã nguồn (mỗi mục là một dòng/thẻ riêng), ví dụ:
- Trang chủ
- Blog
Nếu muốn menu tự thu gọn thành icon trên màn hình nhỏ, thêm nút toggle ngay trước danh sách menu:
<button class="nav-menu d-lg-none" type="button" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <i class="bi bi-menu-button-fill"></i> </button>
Gắn liên kết cho từng mục menu
Danh sách menu ở 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 mục. 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 mục, bọc trong
<li class="nav-item"><a class="nav-link" href="đường-dẫn">Tên mục</a></li>. Thay đường-dẫn bằng link dẫn đến trang tương ứng của mục đó, rồi lặp lại cho từng mục còn lại trong danh sách. Ví dụ:<ul class="navbar-nav gap-4" style="font-size: 1.1rem"> <li class="nav-item"> <a class="nav-link" href="/">Trang chủ</a> </li> <li class="nav-item"> <a class="nav-link" href="/posts">Blog</a> </li> </ul>
Lưu & Xuất bản
Khi đã hoàn tất cả 4 bước ở trên, đầu 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 đầu trang.
- Kiểm tra lại trên giao diện trang chính: logo, tên thương hiệu và menu đã hiển thị đúng chưa, cả trên máy tính lẫn điện thoại.
Chỉnh sửa đầu trang, chân 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 đầu trang riêng cho từng trang cụ thể. Nhưng nếu mục tiêu là chỉnh sửa đầu trang, chân 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ụ 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ư header.html, 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.
