Làm lại blog cá nhân (Phần 7): Template Engine

Date
Ngày đăng
#UX/UI #Personal Blog

Phần này sẽ nói về cách tớ viết một bài mới như thế nào.

Thumbnails

Cách truyền thống

Tớ viết bài trực tiếp bằng mã nguồn HTML luôn, không sử dụng bất cứ công cụ soạn thảo nào để sinh ra code cả. Bạn không tin thì có thể vào link này để xem.

Old method

Lúc đó có khá nhiều thứ phải làm thủ công cấu hình như <metadata>, thời gian và viết bài. Lúc đó tớ nghĩ static web nên hổng có công cụ phát sinh code tự động. Hic, nghĩ lại thấy đúng là gà thiệt.

Thực ra là nào giờ, GitHub Pages có dùng công cụ tên là Jekyll được viết bằng Ruby để tạo ra một trang web tĩnh. Thời điểm tạo blog là còn đi học nên cũng ngại học cái mới (do chạy đồ án hơi nhiều). Sau này, khi blog lên version 2.0 tức là bản xài template cũ màu xanh dương (bạn xem lại phần 1) thì vẫn còn thích tự viết code.

Đổi mới suy nghĩ

Sau này đi làm công ty, sếp thích xài Python để xử lý công việc và cũng nhớ lại ông anh hồi xưa nói Python mạnh về xử lý văn bản nên nảy sinh ý tưởng viết template engine. Template Engine cũng chả có gì to tát cả, hiểu đơn giản là có một template, điền vào chỗ trống theo cấu trúc đã được khai báo sẵn, cách sử dụng giống như bạn dùng Blade, Pug, Handlebar. Tư tưởng được thể hiện như hình dưới đây.

Template Layout

Cơ chế hoạt động

Sơ đồ hoạt động được tóm gọn trong Activity Diagram dưới đây.

Template Engine - Activity Diagram

Bạn xem qua mã nguồn file template của tớ. Có những chỗ đặt trong cặp ngoặc nhọn {{ }} chính là nơi sẽ điền nội dung. Mỗi bài viết của tớ đều có 1 file config.json để lưu thông tin như tiêu đề, mô tả và file index.html sẽ lưu nội dung bài viết rồi đổ vào file template. Đơn giản chứ nè. Cuối cùng thì gõ lệnh để build ra file hoàn chỉnh. Tớ có quay video lại để mọi người theo dõi.

Tính mở rộng

Your talent is limited by your imagination

- Unknown

Để mở rộng template engine này, tớ dự định sẽ học hỏi Jekyll ở chỗ tạo một web application tại localhost, có Text Editor để soạn thảo văn bản trực tiếp trên web, không cần phải mở Visual Studio Code hay Sublime Text gì cả. Khi viết xong, điền phần mô tả, nhấn nút Publish sẽ tự động phát sinh file HTML theo đường dẫn đã cấu hình trước.