Tạo giao diện XML Blogger bằng ChatGPT Codex: Trải nghiệm áp dụng cho 4 blog

Khi vận hành nhiều blog bằng Google Blogger, dần dần bạn sẽ nhận thấy những bất tiện ở giao diện mặc định hoặc giao diện hiện có. Tôi cũng gặp vấn đề với menu và hình thu nhỏ, nên nhận thấy cần chỉnh sửa giao diện.

​

Ban đầu, tôi định giải quyết trước những vấn đề như giao diện XML Bloggerkhông hiển thị menu chính xác hoặc làm mất hình thu nhỏ. Tệp XML công khai của bên thứ ba mà tôi đang dùng cũng ngày càng phức tạp và nặng nề, nên đã đến lúc sắp xếp lại toàn bộ cấu trúc.

​

Tuy nhiên, càng xem xét các mục cần chỉnh sửa, tôi càng nghĩ rằng tạo mới thiết kế và cấu trúc sẽ tốt hơn là tiếp tục chắp vá giao diện cũ.

Vì vậy, lần này tôi quyết định tạo giao diện Google Blogger từ đầu bằng ChatGPT Codex 6 Astra và 6.1 SOL.

​

Tôi mô tả cụ thể thiết kế và tính năng mong muốn, rồi trực tiếp kiểm tra kết quả sau khi Codex chỉnh sửa mã.

Đây không phải là một yêu cầu chung chung về việc tạo trang web, mà là công việc nhắm đến giao diện của bốn blog đang được vận hành thực tế.

Tiêu chí đầu tiên là bài viết phải dễ đọc trên cả PC lẫn điện thoại.

Tôi ưu tiên bố cục dễ đọc hơn là những chi tiết trang trí bắt mắt. Tôi yêu cầu giữ lại các menu và liên kết hiện có trong khả năng có thể, đồng thời bổ sung những tính năng cần thiết.

​

Các yêu cầu chính được tổng hợp như sau.

• Thiết kế tương thích với PC và điện thoại

• Giữ lại menu và liên kết danh mục hiện có

• Hiển thị bài viết mới và bài viết phổ biến

• Tính năng hình thu nhỏ và tìm kiếm blog

• Hỗ trợ chế độ tối

• Hiển thị 24 bài trong danh sách ở trang chính

• Tính năng chuyển sang trang tiếp theo

• Sắp xếp quảng cáo hợp lý giữa danh sách bài viết

​

Đặc biệt, trang chính được thiết kế theo kiểu danh sách, mỗi bài viết hiển thị trên một hàng. Tiêu đề và hình thu nhỏ được bố trí để có thể xem nhanh, hiển thị 24 bài trên mỗi trang rồi chuyển sang trang tiếp theo.

​

Tôi cũng điều chỉnh để quảng cáo được bố trí hợp lý giữa danh sách bài viết, thay vì chèn vào một cách tùy tiện.

Sau khi tôi cung cấp các điều kiện này qua hội thoại, Codex chỉnh sửa XML Blogger, CSS và JavaScript.

Không phải mọi tính năng đều hoạt động chính xác ngay từ đầu.

Trong quá trình chỉnh sửa giao diện, đôi khi menu hiện có biến mất hoặc hình thu nhỏ không hiển thị.

Vấn đề khiến tôi nhớ nhất là lỗi phân tích XML do biểu thức điều kiện không được Blogger hỗ trợ.

Dù mã trông có vẻ hợp lý, nếu trình chỉnh sửa Blogger không chấp nhận thì cũng không thể áp dụng vào giao diện.

​

Trong trường hợp này, tôi gửi nguyên văn thông báo lỗi hiển thị trong trình chỉnh sửa cho Codex, nhờ xác định nguyên nhân và sửa lại phần liên quan.

Ban đầu, mũi tên trong danh sách bài viết ở trang chính chỉ có hình thức mà không thực sự chuyển trang. Tôi đã chỉnh sửa lại để liên kết hoạt động chính xác.

​

Qua quá trình này, tôi nhận ra rõ ràng rằng AI viết mã không có nghĩa là công việc sẽ tự động hoàn tất.

Cần thiết phải kiểm tra menu bằng bản xem trước và trên blog thực tế, đồng thời xác nhận danh sách bài viết và hình thu nhỏ có hiển thị như dự định hay không.

Mục tiêu quan trọng của lần này là thống nhất thiết kế cho bốn blog nhưng vẫn giữ các tính năng cần thiết cho từng trang.

​

Nếu quản lý mã riêng biệt hoàn toàn cho từng trang, mỗi lần thay đổi thiết kế chung sẽ phải lặp lại cùng một chỉnh sửa bốn lần.

Để giảm việc này, tôi quản lý CSS và JavaScript dùng chung trên GitHub, còn menu và cài đặt riêng của từng blog được giữ trong từng tệp XML.

Nhờ vậy, tôi có thể quản lý thiết kế chung tại một nơi, đồng thời phản ánh đặc điểm và tính năng riêng của từng trang.

​

Ngoài ra, trên các miền cơ bản và miền trip, tôi giữ lại tính năng chọn 5 ngôn ngữbằng các thẻ hiện có, còn blog news được bổ sung tính năng chọn tin tức theo khu vực.

Cùng dùng một khuôn khổ thiết kế nhưng tính năng được điều chỉnh theo mục đích của từng blog.

​

Bạn có thể xem cách kết nối miền với Google Blogger bằng Cloudflare trong bài viết trên.

Sau khi chỉnh sửa và kiểm tra, tôi đã áp dụng mẫu XML Blogger mới vào các blog thực tế.

Tôi kiểm tra luân phiên trên PC và điện thoại để xem các tính năng chính như menu, hình thu nhỏ, tìm kiếm và chuyển trang có hoạt động bình thường hay không.

Điều tôi nhận thấy rõ nhất khi dùng ChatGPT Codex là việc mô tả kết quả mong muốn cụ thể đến mức nào cũng quan trọng như việc yêu cầu AI tạo ra thứ gì.

​

Yêu cầu một blog đẹp đơn thuần khác với việc nêu rõ các điều kiện như số lượng bài trong danh sách, vị trí quảng cáo và giữ lại menu hiện có; điều đó tạo nên sự khác biệt trong kết quả.

Khi có lỗi, thay vì chỉ nói chung chung rằng không hoạt động, việc cho biết vấn đề xảy ra ở màn hình nào và cụ thể ra sao sẽ giúp tìm hướng sửa.

Sau cùng, lần tạo giao diện Google Bloggernày không phải là công việc mà AI tự lo liệu và hoàn thành mọi thứ.

​

Tôi xác định yêu cầu, Codex viết và chỉnh sửa mã, sau đó kiểm tra kết quả trên blog thực tế; quá trình lặp lại này đã giúp hoàn thiện giao diện.

Nếu muốn tự thay đổi giao diện Blogger dù chưa có nhiều kinh nghiệm thiết kế web, bạn có thể thử dùng công cụ lập trình AI như ChatGPT Codex. Tuy nhiên, bạn cần tự xác nhận không có lỗi XML, các tính năng hiện có được giữ lại và mọi thứ hoạt động bình thường trên trang thực tế.

#GoogleBlogger, #GiaoDiệnBlogger, #TạoGiaoDiệnGoogleBlogger, #Blogger, #BloggerXML, #GiaoDiệnBlogger, #GiaoDiệnBlog, #TạoGiaoDiện, #ChatGPT, #ChatGPTCodex, #Codex, #Astra6, #SOL6_1, #LậpTrìnhAI, #GiaoDiệnBlogAI, #ThiếtKếBlog, #TrangTríBlog, #VậnHànhBlog, #TạoBlog, #PhátTriểnBlog, #WebThíchỨng, #BlogThíchỨng, #ChỉnhSửaXML, #CSS, #JavaScript, #GitHub, #ChếĐộTối, #SEOBlog, #ĐánhGiáGiaoDiệnBlogger, #ĐánhGiáỨngDụngAI