Tay trắng làm nên một trang web cá nhân chuyên nghiệp không tốn một xu (Phần 2)

Nối tiếp phần một, ở phần 2 này chúng ta sẽ làm một trang web từ một bộ giao diện độc lập.

Giao diện bạn chọn tốt nhất nên là sử dụng Bootstrap (3 hoặc 4) để nó có responsive (hiển thị trên điện thoại gọn đẹp). Sau đây chúng ta hãy đi làm bước 1, đi tìm một giao diện ưng ý và áp dụng nó vào Hugo nhé.

SPOILER: Vì trong video giải thích khá kỹ nên mình k giải thích thêm ở ngoài nữa nhé. Các bạn cứ xem video lần lượt từng bước sẽ hiểu.

Bước 1: Tìm theme Bootstrap và đưa vào Hugo

Hãy làm theo từng bước như video sau đây:

Bước 2: Cắt giao diện index.html thành các trang con (trang partial)

Hãy thực hành như trong video sau đây:

Bước 3: Tạo data động dạng file và gọi từ trang partial (Load data động cho partial)

Hãy thực hành như trong video sau đây:

Bước 4: Bước đầu tạo trang đa ngôn ngữ, tạo một select box để chọn ngôn ngữ cho trang web

Hãy thực hành như trong video sau đây:

Bước 5: Dịch một trang partial ra đa ngôn ngữ bằng thư mục data

Hãy thực hành như trong video sau đây:

Bước 6: Biến Menu cố định thành menu động đa ngôn ngữ

Hãy thực hành như trong video sau đây:

Bước 7: Sử dụng i18n để translate đa ngôn ngữ một số chuỗi dùng chung

Hãy thực hành như trong video sau đây:

Bước 8: Đưa thêm một giao diện thứ 2 vào (trang CV Profile)

Hãy thực hành như trong video sau đây:

Như vậy là tôi vừa trao vào tay các bạn một công cụ cực kỳ mạnh mẽ để tạo ra các trang web tĩnh từ data động. Sử dụng Hugo cho chúng ta các ưu điểm sau đây

1. Tạo ra trang đa ngôn ngữ cực kỳ dễ dàng, dễ quản lý và chỉnh sửa.
2. Tạo ra trang có nhiều master template dễ dàng (trang có nhiều section mỗi section lại có html body độc lập)
3. Tạo và quản lý các thành phần dùng chung dạng partial dễ dàng.
4. Chạy nhanh như ngựa.

Từ bây giờ, bạn đã có thể lao ngay ra ngoài đường và gào to "Ala Hugo Akba"