Hướng dẫn cài đặt Page Fragment Blog cho website doanh nghiệp Ezyvora

Bước 1: Kiểm tra trang Blog hiện tại

Trước tiên, mở dự án Ezyvora trong VS Code và yêu cầu Claude Code hoặc Codex kiểm tra trang Blog đang có.

Prompt mẫu

<code>Hãy kiểm tra trang Blog hiện tại của website Ezyvora.

Xác định:

File chứa trang danh sách Blog.
File chứa trang chi tiết bài viết nếu đã có.
Danh sách bài viết hiện tại đang lấy từ đâu.
Nội dung nào đang được hard-code.
CSS và component nào có thể tái sử dụng.

Tôi muốn giữ nguyên giao diện hiện tại nhưng chuyển phần Blog sang sử dụng dữ liệu được quản lý trên EzyPlatform.

Chưa chỉnh sửa code. Trước tiên hãy mô tả cấu trúc hiện tại.</code>

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

Nếu Blog đang sử dụng dữ liệu mẫu như:

<code>&lt;article&gt;
        &lt;h2&gt;Website doanh nghiệp là gì?&lt;/h2&gt;
        &lt;p&gt;...&lt;/p&gt;
&lt;/article&gt;</code>

thì đây chính là phần cần được thay bằng dữ liệu thật ở các bước tiếp theo.

Bước 2: Kiểm tra Page Fragment dành cho Blog trên EzyPlatform

Tiếp theo, đăng nhập EzyPlatform Admin và mở khu vực quản lý Page Fragment. Kiểm tra xem website hiện tại đã có Fragment phục vụ Blog hay chưa. Tùy cấu trúc website, chúng ta có thể cần các Fragment như:

• Blog List
• Blog Detail
• Recent Posts
• Related Posts

Không nhất thiết phải tạo tất cả ngay từ đầu. Với một website doanh nghiệp cơ bản, trước tiên chỉ cần tập trung vào: danh sách bài viết và chi tiết bài viết. Nếu hệ thống đã có Page Fragment phù hợp, nên tái sử dụng thay vì tạo lại.

Bước 3: Tạo Page Fragment cho danh sách Blog

Nếu chưa có Fragment phù hợp, tạo một Page Fragment để hiển thị danh sách bài viết. Fragment này chịu trách nhiệm lấy dữ liệu bài viết từ EzyPlatform và render thành giao diện mà trang Blog có thể sử dụng.

Với Ezyvora, mỗi bài trong danh sách có thể gồm: ảnh đại diện -> danh mục -> tiêu đề -> mô tả ngắn -> ngày đăng -> xem chi tiết.

Khi tạo Fragment, nên đặt tên dễ nhận biết, chẳng hạn: blog-list hoặc theo quy ước đặt tên hiện có của dự án. Điểm quan trọng là Page Fragment chỉ nên xử lý phần nội dung Blog cần tái sử dụng, không nên đưa cả Header và Footer vào Fragment vì hai phần đó đã được cấu hình dùng chung.

Bước 4: Đưa Page Fragment Blog về VS Code

Sau khi Fragment đã tồn tại trên EzyPlatform, sử dụng công cụ đồng bộ của dự án để đưa nội dung cần chỉnh sửa về VS Code. Sau đó yêu cầu AI kiểm tra Fragment trước khi thay đổi.

Prompt mẫu

<code>Hãy kiểm tra Page Fragment Blog vừa được đồng bộ từ EzyPlatform.

Tôi muốn sử dụng Fragment này để hiển thị danh sách bài viết trên website Ezyvora.

Yêu cầu:

Xác định dữ liệu bài viết mà Fragment hiện có thể sử dụng.
Xác định HTML/template hiện tại.
Giữ nguyên các biến dữ liệu động do EzyPlatform cung cấp.
Không chuyển dữ liệu động thành nội dung hard-code.
Không tự tạo tên biến nếu chưa tồn tại.

Chưa chỉnh sửa code.

Trước tiên hãy giải thích ngắn gọn cách Fragment hiện tại hoạt động.</code>

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

Bước này đặc biệt quan trọng vì AI cần phân biệt giữa HTML giao diện có thể thay đổi và biến dữ liệu của EzyPlatform cần giữ nguyên.

Bước 5: Chuyển giao diện Page Fragment theo thiết kế Ezyvora

Khi AI đã hiểu Fragment, tiếp tục yêu cầu chỉnh giao diện theo website.

Prompt mẫu

<code>Hãy chỉnh giao diện Page Fragment Blog để phù hợp với website Ezyvora.

Brand Guideline:

Primary: #2563EB
Secondary: #0F172A
Accent: #06B6D4
Background: #F8FAFC
Surface: #FFFFFF
Primary Text: #0F172A
Secondary Text: #64748B
Font: Inter
Card Radius: 12-16px
Style: Modern Technology Corporate

Mỗi bài viết cần hiển thị:

Ảnh đại diện nếu dữ liệu có hỗ trợ.
Tiêu đề.
Mô tả ngắn.
Ngày đăng nếu có.
Nút hoặc liên kết "Xem chi tiết".

Yêu cầu:

Giữ nguyên toàn bộ biến dữ liệu động hiện có.
Không tự tạo field mới.
Không hard-code bài viết.
Ưu tiên tái sử dụng CSS của website Ezyvora.
Responsive trên desktop, tablet và mobile.</code>

AI lúc này chỉ thay đổi cách dữ liệu được trình bày, không thay đổi nguồn dữ liệu.

Bước 6: Gắn Page Fragment vào trang Blog

Sau khi Fragment đã hoàn thiện, bước tiếp theo là sử dụng nó tại đúng vị trí trên trang Blog.

Prompt mẫu

<code>Hãy kiểm tra trang Blog hiện tại của Ezyvora.

Thay phần danh sách bài viết mẫu đang hard-code bằng Page Fragment Blog vừa cấu hình.

Yêu cầu:

Giữ nguyên Common Header.
Giữ nguyên phần Hero của Blog nếu đang có.
Giữ nguyên Common Footer.
Không để danh sách bài viết mẫu xuất hiện song song với dữ liệu thật.
Giữ responsive hiện tại.
Không chỉnh sửa các trang khác.

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

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

Bước 7: Cấu hình trang chi tiết bài viết

Danh sách Blog mới chỉ giải quyết một nửa hành trình. Khi khách bấm Xem chi tiết, website cần mở đúng bài viết tương ứng.

Prompt mẫu

<code>Hãy kiểm tra Page Fragment/template chi tiết bài viết hiện có của EzyPlatform và trang Blog Detail của Ezyvora.

Tôi muốn khi người dùng click một bài trong danh sách Blog, website mở đúng bài viết tương ứng.

Trang chi tiết cần ưu tiên hiển thị các dữ liệu hiện có như:

Tiêu đề.
Ảnh đại diện.
Ngày đăng.
Nội dung bài viết.

Giữ nguyên các biến dữ liệu do EzyPlatform cung cấp.

Không hard-code nội dung bài viết.

Không tự tạo API hoặc field mới nếu hệ thống hiện tại đã hỗ trợ.</code>

Sau bước này, khách hàng có thể đi từ danh sách đến nội dung đầy đủ của từng bài.

Bước 8: Xuất bản và kiểm tra kết quả

Sau khi chỉnh sửa xong Page Fragment, lưu thay đổi và xuất bản nội dung lên EzyPlatform theo cơ chế đồng bộ đang sử dụng.

Tiếp theo, mở website Ezyvora và truy cập trang Blog. Kiểm tra: danh sách Blog -> dữ liệu bài viết thật -> xem chi tiết -> đúng bài viết.

Sau đó, thử tạo hoặc cập nhật một bài trên EzyPlatform. Nếu nội dung mới có thể xuất hiện trên website mà không cần sửa lại HTML của từng bài, việc cấu hình Page Fragment Blog đã đạt mục tiêu.

Kết luận

Sau khi cài đặt Page Fragment Blog, Ezyvora có thể tách rõ giao diện website và nội dung bài viết. Người quản trị cập nhật Blog trên EzyPlatform, trong khi Page Fragment chịu trách nhiệm đưa dữ liệu đó vào đúng giao diện Ezyvora. Nhờ vậy, việc thêm hoặc cập nhật bài viết sau này không còn phụ thuộc vào việc sửa trực tiếp từng nội dung trong mã nguồn.