Khởi tạo và tùy chỉnh một template trong Grav

Đầu tiên ta sẽ tìm hiểu template là gì. Một template có thể xem là cấu trúc chung cho các pages sử dụng template đó. Mỗi page đều có một template riêng cho nó, khi ta tạo một page, template mặc định của nó là default. Nếu một page không có template, khi hiển thị nó sẽ chỉ hiển thị nội dung của page đó mà không có những thành phần khác như header, footer, slider, sidebar, vân vân. Template sẽ quyết định xem page đó được hiển thị như thế nào, các thành phần ngoài nội dung sẽ nằm ở đâu. Ví dụ ta có thể gắn các bài viết trong blog vào template blog, template này chỉ hiển thị header và nội dung mà không có phần sidebar như trong trang chủ… Tiếp theo chúng ta sẽ cùng tìm hiểu xem làm thế nào để tạo một template.

Khởi tạo một template:

Để tạo một template rất đơn giản, chúng ta chỉ cần tạo một file dạng html.twig trong thư mục template của theme là được. Trong bài viết này, chúng ta sẽ tạo một template tên là poke, do đó ta tạo file poke.html.twig trong thư mục templates:

Nội dung của file này như sau:

Bây giờ chúng ta sẽ tạo một bài viết sử dụng template poke. Ấn vào Add page trong mục Pages của trang quản trị để tạo một bài viết mới, trong mục Page File ta chọn template là Poke. Soạn thảo một đoạn text bất kỳ cho bài viết của bạn.

Sau đó hãy thử hiển thị bài viết, chúng ta sẽ thấy bài viết của chúng ta có phần HEADER, sau đó là nội dung bài viết và cuối cùng là FOOTER. Nhờ có template, chúng ta không cần phải viết đi viết lại header và footer của trang cho từng bài viết, mà chỉ cần viết một lần là được.

Chúng ta hãy cùng nhìn lại file poke.html.twig ở trên, do đây là file dạng twig nên chúng ta sẽ lấy nội dung của bài viết theo cấu trúc của Twig nhờ vào câu lệnh {{ content }}. Twig giúp chúng ta giảm thiểu được đáng kể thời gian lập trình cũng như làm cho code trở nên rất dễ đọc. Bạn có thể tham khảo thêm các cú pháp khác của twig tại đây.

Cấu hình nâng cao cho template:

Bây giờ chúng ta hãy đi sâu thêm một chút để tìm hiểu về tính linh hoạt của Grav, trong giao diện của bài viết mà chúng ta vừa khởi tạo, mặc định chúng ta sẽ có 3 tab:

Giả sử chúng ta muốn có một bài viết phức tạp hơn, ví dụ chúng ta cần hiển thị một danh sách các học sinh đạt học lực giỏi, khá trong bài viết, nhưng ta lại không muốn nhập danh sách đó vào trong editor bởi như vậy chúng ta sẽ rất khó chỉnh sửa style của danh sách. Vậy ta cần một mục để nhập danh sách đó trong phần cấu hình bài viết. Để làm được như vậy, ta cần thực hiện các bước sau:

Bước 1:

Trong theme của chúng ta, tạo thư mục blueprints và file poke.yaml trong thư mục đó. Đây là file cấu hình cho template poke mà ta vừa tạo ở trên.

Bước 2: ta sẽ tạo nội dung cho file poke.yaml như sau:

Sau đó, chúng ta sẽ tạo một bài viết mới tên là “Quản lý học sinh” và cho bài viết đó sử dụng template poke. Chúng ta sẽ thấy một giao diện để nhập danh sách học sinh giỏi và khá như trong hình sau:

Demo tạo template

Quản lý học sinh

Chúng ta hãy cùng phân tích file quản lý poke.yaml một chút để hiểu làm thế nào mà ta có thể tạo ra một giao diện cho phép nhập vào danh sách các học sinh giỏi và khá như vậy.

Đầu tiên, chúng ta tạo một tab mới có tên là “Quản lý“:

Sau đó, dưới tab đó, ta tạo một section có tên là “Học sinh“:

Tiếp đến, ta sẽ tạo danh sách để nhập học sinh giỏi với ba trường: họ tên, tuổi và số điện thoại.

Tương tự với học sinh khá. Cái mà chúng ta cần phải lưu ý ở đây là dòng “header.hoc_sinh_gioi“, vì đó là id để chúng ta có thể lấy danh sách học sinh ra sau này.

Bước 3: chúng ta sẽ hiển thị danh sách học sinh ra trang web

Đầu tiên, hãy nhìn qua file bài viết mà ta đã đặt tên là “Quản lý học sinh” trong code của chúng ta (/user/pages/01.quan-ly-hoc-sinh/poke.md):

Chúng ta có thể thấy dữ liệu chúng ta nhập từ giao diện đã được lưu trữ trong file poke.md trong thư mục 01.quan-ly-hoc-sinh (chú ý prefix 01 có thể thay đổi, ở đây do mình chưa có bài viết nào trước khi tạo bài viết “Quản lý học sinh”, nên số chỉ mục mới là 01).

Bây giờ chúng ta cùng chỉnh sửa file template poke.html.twig để hiển thị số học sinh ra:

Như ta có thể thấy, với twig, để lấy ra danh sách học sinh giỏi, ta chỉ cần làm như sau:

Và cuối cùng, ta có giao diện đơn giản như sau:

danh_sach_hoc_sinh

Danh sách học sinh

Ở trong bài viết này, mình dùng loại list để tạo nên mục nhập danh sách học sinh, ngoài ra Grav còn cung cấp cho chúng ta rất nhiều hình thức nhập dữ liệu khác nữa như: text, captcha, checkbox, email, etc.

Vậy là đến đây, chúng ta đã biết cách tạo một template cũng như tùy chỉnh nó theo ý muốn, mời các bạn xem tiếp các bài viết tiếp theo để tìm hiểu thêm về tính flexible của Grav.