Một website không chỉ có nội dung chính giữa trang — còn có phần đầu trang, chân trang, các thông báo bật lên khi thao tác, hiệu ứng tải trang, và cả những đoạn CSS/JavaScript âm thầm chạy phía sau để mọi thứ vận hành đúng ý. Trong Freestyle, tất cả những phần này được gọi chung là Page Fragments (các phần trang dùng chung) — vì chỉnh sửa một lần ở đây sẽ áp dụng cho toàn bộ website, thay vì phải sửa lặp lại trên từng trang riêng lẻ.
Bài này gom lại cách chỉnh sửa toàn bộ các thành phần dùng chung đó vào một chỗ, theo đúng thứ tự người dùng thường gặp: từ đầu trang, xuống chân trang, rồi đến các thông báo, hiệu ứng tải trang, và cuối cùng là phần CSS/JavaScript nền — phần cần thận trọng nhất.

Cách truy cập chung cho mọi thành phần dùng chung

Trước khi vào từng phần cụ thể, có một thao tác truy cập giống nhau áp dụng cho tất cả: vào Các trang > Các phần trang (Page Fragments), gõ từ khóa common vào ô tìm kiếm. Lúc này bạn sẽ thấy nhóm Page: Common hiện ra với 8 mục: Alert, Footer, Header, Loading, Prompt, Scripts, Styles, Toast. Chỉ cần chọn đúng mục tương ứng với phần muốn sửa rồi chỉnh sửa mã nguồn ngay tại đó.
Screenshot 2026-07-24 124306.png
Nếu cần đối chiếu lại bản gốc của bất kỳ thành phần nào (phòng khi muốn khôi phục về mặc định), 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 có đầy đủ các tệp gốc như alert.html, header.html, loading.html, prompt.html, toast.html, fragments.html... Cách truy cập này sẽ không lặp lại ở từng phần bên dưới nữa, vì nó dùng chung cho cả 8 thành phần.
Screenshot 2026-07-24 124956.png

Header — đầu trang, thứ người dùng nhìn thấy đầu tiên

Header là phần đầu trang, xuất hiện cố định trên mọi trang của website — thường chứa logo, thanh menu điều hướng, ô tìm kiếm, các icon (thông báo, tài khoản, giỏ hàng...). Vì đây là thành phần dùng chung, sửa Header sẽ ảnh hưởng đến toàn bộ website chứ không riêng một trang nào.
Trong khung soạn thảo, bạn sẽ thấy mã nguồn HTML/CSS quy định bố cục đầu trang: logo, menu, các icon phía bên phải. Chỉnh sửa trực tiếp mã nguồn để thay đổi logo, thêm/bớt mục menu, đổi màu nền, hoặc đổi vị trí các thành phần, rồi nhấn Update/Lưu để áp dụng. Vì Header là phần người dùng dùng để điều hướng, hãy kiểm tra kỹ trên cả giao diện máy tính và điện thoại sau khi sửa — và nếu thay đổi liên quan đến menu, nên kiểm tra lại đồng thời với mục Menus để tránh xung đột.

Footer — chân trang, và hai cách để tạo ra nó

Nếu Header là nơi người dùng bắt đầu, Footer lại là nơi họ dừng lại khi đã đọc hết nội dung nhưng vẫn muốn khám phá thêm — một danh mục thuật ngữ liên quan, hay đơn giản là biết trang còn có gì khác. Khác với các thành phần còn lại trong bài này, Footer có hai cách để chỉnh sửa, tùy vào việc bạn muốn nó áp dụng cho toàn site hay chỉ một trang riêng lẻ.
  • Cách 1 — Chân trang riêng cho một trang cụ thể. Vào Dashboard, chọn trang muốn chỉnh sửa hoặc tạo trang mới, sau đó 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ả. Viết mã HTML cho khối chân trang, chia thành các cột tương ứng với 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), ví dụ Cột 1: Chủ đề, Cột 2: Danh mục, Cột 3: Câu hỏi.
    • Trong cột "Chủ đề", viết danh sách các thuật ngữ người dùng có thể muốn tìm hiểu, mỗi thuật ngữ một dòng, ví dụ Inbound Marketing, Xây dựng website. Vì đang thao tác trực tiếp trên mã nguồn, bạn gắn liên kết ngay trong lúc viết bằng 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 thật tương ứng, rồi lặp lại cho từng thuật ngữ còn lại. Khi xong, nhấn "Lưu và Xuất bản" ở góc trên cùng, sau đó kiểm tra lại bằng cách cuộn xuống cuối trang chính để xem chân trang đã hiển thị đúng chưa.
  • Cách 2 — Chân trang dùng chung cho toàn bộ website. Đây là lúc quay lại đúng luồng Page Fragments đã nói ở phần đầu bài: vào common, chọn mục Footer trong nhóm Page: Common, rồi chỉnh sửa mã nguồn ngay tại đó. Cách này phù hợp khi bạn muốn một chân trang thống nhất trên mọi trang, thay vì phải lặp lại thao tác ở Cách 1 cho từng trang một.

Alert, Prompt và Toast — ba loại thông báo dễ nhầm lẫn

Ba thành phần này đều liên quan đến việc "báo cho người dùng biết điều gì đó", nên rất dễ gộp chung khi nghĩ đến — nhưng mỗi loại phục vụ một tình huống khác nhau, và phân biệt đúng sẽ giúp bạn sửa đúng chỗ khi cần.
  • Alert hiển thị các thông báo dạng cảnh báo/xác nhận nhanh khi người dùng thao tác — ví dụ báo lỗi khi nhập sai thông tin, hoặc báo thành công khi lưu dữ liệu. Trong khung soạn thảo, bạn sẽ thấy mã nguồn HTML/CSS quy định bố cục, màu sắc, icon và vị trí nút bấm của Alert — chỉnh sửa theo nhu cầu rồi lưu lại. Vì Alert hiển thị trên toàn site, hãy kiểm tra kỹ trên vài trang khác nhau sau khi sửa, và nên giữ lại bản sao mã nguồn cũ trước khi chỉnh, phòng khi cần khôi phục.
  • Prompt là hộp thoại xác nhận, xuất hiện khi hệ thống cần người dùng xác nhận trước khi thực hiện một hành động — ví dụ xác nhận xóa dữ liệu, hoặc xác nhận rời trang khi chưa lưu. Mã nguồn ở đây quy định tiêu đề, nội dung, và các nút bấm (Đồng ý/Hủy...) của hộp thoại. Vì Prompt thường gắn với các hành động quan trọng, nên giữ nội dung rõ ràng, dễ hiểu, tránh gây nhầm lẫn — và sau khi sửa, nên thử lại các thao tác có gọi đến Prompt (ví dụ nút xóa) để chắc chắn hộp thoại vẫn hoạt động đúng.
  • Toast khác hai loại trên ở chỗ nó không chặn thao tác của người dùng — đây là thông báo nhỏ nổi lên ở góc màn hình trong thời gian ngắn rồi tự biến mất, dùng cho các thông tin nhanh như "Đã thêm vào giỏ hàng" hay "Lưu thành công". Mã nguồn quy định vị trí hiển thị, màu sắc theo loại thông báo, và thời gian tự ẩn. Không nên để thời gian hiển thị quá ngắn (người dùng không kịp đọc) hoặc quá dài (gây khó chịu, che nội dung khác) — sau khi sửa, thử lại các thao tác có gọi Toast để kiểm tra vị trí và màu sắc hiển thị đúng theo từng loại.

Loading — cho người dùng biết hệ thống đang xử lý

Loading là hiệu ứng hiển thị khi trang hoặc một phần nội dung đang được tải — ví dụ hiệu ứng xoay vòng hoặc thanh tiến trình — giúp người dùng biết hệ thống đang xử lý thay vì tưởng trang bị đứng. Mã nguồn ở đây quy định icon xoay, ảnh động, màu sắc và vị trí hiển thị giữa màn hình; bạn có thể chỉnh sửa nếu muốn đổi kiểu hiệu ứng hoặc thêm chữ mô tả như "Đang tải...". Vì Loading thường chỉ xuất hiện trong thời gian rất ngắn, tránh làm hiệu ứng quá nặng (ảnh/video lớn) vì có thể khiến trang tải chậm hơn thay vì nhanh hơn — kiểm tra lại bằng cách thao tác các hành động cần tải dữ liệu như chuyển trang hoặc gửi form.

Styles — CSS nền cho toàn bộ giao diện

Styles là nơi chứa các đoạn CSS dùng chung, quy định giao diện tổng thể cho toàn site — font chữ mặc định, bảng màu chủ đạo, khoảng cách giữa các thành phần, hoặc các class dùng lặp lại ở nhiều trang. Trong khung soạn thảo, các đoạn CSS thường nằm trong thẻ <style>, áp dụng chung cho toàn bộ website. Vì phạm vi ảnh hưởng rất rộng, một thay đổi nhỏ — ví dụ đổi màu chữ mặc định — có thể ảnh hưởng đến rất nhiều trang cùng lúc, nên cần kiểm tra lại trên nhiều trang khác nhau (trang chủ, trang bài viết, trang sản phẩm...) sau khi sửa. Nếu chỉ muốn thay đổi giao diện cho riêng một trang, nên sửa trực tiếp tại trang đó thay vì sửa ở Styles chung.

Scripts — mã JavaScript nền, phần cần thận trọng nhất

Scripts là nơi chứa các đoạn JavaScript dùng chung, được nạp trên toàn bộ website — ví dụ mã theo dõi lượt truy cập (analytics), mã xử lý sự kiện chung, hoặc các thư viện JS cần thiết cho nhiều trang. Trong tất cả các thành phần dùng chung ở bài này, đây là phần cần thao tác cẩn thận nhất, vì một lỗi cú pháp nhỏ trong đoạn mã cũng có thể khiến toàn bộ website gặp sự cố — trang không tương tác được, hoặc JS bị chặn hoàn toàn.
Sau khi thêm hoặc sửa mã, nên kiểm tra kỹ trong công cụ Console của trình duyệt, và test trên nhiều trang khác nhau trước khi yên tâm sử dụng chính thức. Cũng không nên chèn mã không rõ nguồn gốc, để tránh rủi ro bảo mật cho toàn bộ website.

Kết luận

Tám thành phần ở trên đều dùng chung một cách truy cập (Page Fragments, tìm kiếm common), nhưng mỗi thành phần có mức độ rủi ro khác nhau khi chỉnh sửa. Header, Footer, Alert, Prompt, Toast và Loading chủ yếu ảnh hưởng đến giao diện và trải nghiệm — sai thì dễ nhận ra và dễ sửa lại. Styles và đặc biệt là Scripts thì rủi ro cao hơn hẳn, vì một lỗi nhỏ có thể ảnh hưởng đến toàn bộ chức năng của website. Nguyên tắc chung khi chỉnh bất kỳ thành phần nào trong nhóm này: giữ lại bản sao mã nguồn cũ trước khi sửa, và luôn kiểm tra lại trên nhiều trang khác nhau sau khi lưu — vì thay đổi ở đây không chỉ nằm trên một trang, mà lan ra toàn bộ website.