Hướng dẫn cấu hình Common Header và Footer cho website Doang nghiệp

Bước 1: Kiểm tra Header và Footer hiện tại

Trước khi chỉnh sửa, hãy để Claude Code hoặc Codex kiểm tra cấu trúc dự án và xác định Header, Footer đang được triển khai như thế nào.

Prompt mẫu

<code>Hãy kiểm tra toàn bộ mã nguồn website Ezyvora hiện tại.

Xác định:

Những file đang chứa Header.
Những file đang chứa Footer.
Header và Footer có đang bị viết lặp lại ở nhiều trang hay không.
CSS và JavaScript liên quan.
Cách template/component chung đang được dự án sử dụng.

Tôi muốn chuyển Header và Footer thành phần dùng chung cho toàn bộ website.

Ưu tiên sử dụng cơ chế template/component hiện có của dự án.

Chưa chỉnh sửa code. Trước tiên hãy mô tả phương án triển khai phù hợp.</code>

AI sẽ trả kết quả như dưới đây:

Mục đích của bước này là tránh yêu cầu AI tạo một hệ thống mới trong khi mã nguồn đã có cơ chế tái sử dụng component.

Bước 2: Tạo Common Header

Sau khi AI đã xác định cấu trúc dự án, bắt đầu với Header.

Header của Ezyvora có thể bao gồm: Logo Ezyvora -> Trang chủ -> Giới thiệu -> Giải pháp -> Blog -> Liên hệ -> CTA.

Ví dụ CTA: Đăng ký tư vấn.

Nếu website đã có Header đúng với thiết kế Ezyvora, chúng ta không cần thiết kế lại. Chỉ cần tách phần đó thành Common Header.

Prompt mẫu

<code>Hãy chuyển Header hiện tại của website Ezyvora thành Common Header dùng chung.

Yêu cầu:

Giữ nguyên giao diện Header hiện tại.
Giữ nguyên logo Ezyvora.
Giữ menu và các đường dẫn hiện có.
Giữ chức năng menu mobile.
Giữ responsive trên desktop, tablet và mobile.
Tái sử dụng CSS và JavaScript hiện tại.
Không tạo nhiều bản Header khác nhau cho từng trang.
Không chỉnh sửa nội dung chính của các trang.

Sau khi hoàn thành, hãy cho tôi biết những file đã tạo hoặc chỉnh sửa.</code>

Sau bước này, các trang không còn cần duy trì từng bản Header riêng biệt.

Bước 3: Tạo Common Footer

Tiếp theo thực hiện tương tự với Footer.

Footer Ezyvora có thể chứa các nhóm thông tin như:

• Logo và slogan Ezyvora.
• Các Solution/Dịch vụ.
• Liên kết nhanh.
• Blog.
• Thông tin liên hệ.
• Zalo OA.
• Facebook.
• Chính sách và bản quyền.

Slogan có thể sử dụng: Công nghệ đơn giản. Doanh nghiệp tiến xa.

Prompt mẫu

<code>Hãy tiếp tục chuyển Footer hiện tại của website Ezyvora thành Common Footer dùng chung.

Yêu cầu:

Giữ nguyên thiết kế Footer hiện tại.
Giữ logo, slogan và thông tin liên hệ.
Giữ các liên kết đang có.
Giữ liên kết Zalo OA và Facebook nếu đã được cấu hình.
Giữ responsive.
Tái sử dụng CSS hiện tại.
Không tạo Footer riêng cho từng trang.
Không thay đổi Header vừa cấu hình.

Sau khi hoàn thành, hãy cho tôi biết những file đã chỉnh sửa.</code>

Bước 4: Áp dụng Common Header và Footer cho toàn bộ website

Sau khi đã có hai thành phần dùng chung, bước tiếp theo là thay Header và Footer đang viết trực tiếp trong từng trang.

Các trang chính của Ezyvora có thể gồm: Trang chủ -> Giới thiệu -> Solution -> Chi tiết Solution -> Blog -> Chi tiết bài viết -> Liên hệ.

Prompt mẫu

<code>Hãy áp dụng Common Header và Common Footer vừa tạo cho tất cả các trang hiện có của website Ezyvora.

Yêu cầu:

Loại bỏ những đoạn Header và Footer bị lặp trong từng trang.
Thay bằng Common Header và Common Footer.
Không làm thay đổi nội dung chính của từng trang.
Không làm thay đổi URL hiện tại.
Không làm mất CSS hoặc JavaScript đang hoạt động.
Menu phải dẫn đúng đến các trang.
Header và Footer phải hiển thị thống nhất trên desktop, tablet và mobile.

Hãy kiểm tra toàn bộ các trang sau khi thay đổi và báo cho tôi những file đã chỉnh sửa.</code>

Như vậy, khi cần thay đổi menu hoặc thông tin Footer, chúng ta chỉ cần chỉnh sửa một nơi.

Bước 5: Kiểm tra đường dẫn và trạng thái menu

Sau khi Header trở thành thành phần dùng chung, cần kiểm tra một vấn đề quan trọng: menu đang được chọn.

Có thể yêu cầu AI kiểm tra:

<code>Hãy kiểm tra Common Header vừa tạo.

Menu cần tự xác định trạng thái active dựa trên trang hiện tại.

Ví dụ:

Trang chủ -&gt; active Trang chủ.
/about -&gt; active Giới thiệu.
/solutions và các trang chi tiết /solutions/... -&gt; active Giải pháp.
/blog và các bài viết /blog/... -&gt; active Blog.
/contact -&gt; active Liên hệ.

Không hard-code một menu luôn ở trạng thái active.

Giữ nguyên thiết kế hiện tại.</code>

Điều này đặc biệt quan trọng khi một Header được sử dụng chung cho tất cả các trang.

Bước 6: Preview toàn bộ website

Cuối cùng, mở lần lượt các trang chính của Ezyvora và kiểm tra: Trang chủ -> Giới thiệu -> Solution -> Chi tiết Solution -> Blog -> Chi tiết bài viết -> Liên hệ.

Header và Footer phải thống nhất trên tất cả các trang. Thử thay đổi tạm một nội dung nhỏ trong Common Footer, chẳng hạn slogan hoặc một liên kết. Nếu thay đổi xuất hiện trên tất cả các trang sử dụng Footer, cấu hình dùng chung đã hoạt động đúng.

Thay vì quản lý Header và Footer ở nhiều file khác nhau, Ezyvora lúc này có một cấu trúc giao diện chung dễ chỉnh sửa và bảo trì hơn.

Kết luận

Việc cấu hình Common Header và Footer giúp website Ezyvora duy trì giao diện nhất quán và tránh lặp mã nguồn giữa các trang. Quan trọng hơn, khi doanh nghiệp cần thay đổi logo, menu, thông tin liên hệ hoặc liên kết trong tương lai, chỉ cần cập nhật thành phần dùng chung thay vì chỉnh sửa từng trang riêng lẻ.