Hướng dẫn tạo child theme trong Grav

Để tăng tốc độ phát triển trang web, thông thường chúng ta hay sử dụng các theme có sẵn phù hợp với nhu cầu của chúng ta. Tuy nhiên, nếu chúng ta thay đổi code của các theme đó, khi có một bản update mới từ tác giả của theme đó, tất cả những gì chúng ta sửa đổi sẽ bị overwrite hoặc không thì ta sẽ phải tự update bằng tay mà việc đó tốn rất nhiều thời gian, chưa kể có thể sẽ có lỗi phát sinh. Do đó, chúng ta cần tạo ra một theme con kế thừa theme sẵn có và đặt tất cả các thay đổi của chúng ta vào trong theme con đó. Ngoài ra, việc tạo child theme còn giúp cho code của chúng ta rõ ràng hơn do không phải sử dụng lại tất cả các file có trong theme cha của nó mà chỉ các file mà chúng ta cần thay đổi.

Đầu tiên, chúng ta cần có một theme có sẵn của Grav, trong bài này mình dùng theme antimatter. Bây giờ chúng ta sẽ đi viết một theme con có tên là poketech:

Bước 1:

Tạo thư mục /user/themes/poketech, chứa hai files poketech.yaml và blueprints.yaml. Như mình đã đề cập ở bài giới thiệu về Grav, trong Grav, ta sử dụng yaml để có các file cấu hình dễ đọc cũng dễ viết hơn.

blueprints.yaml: chứa thông tin về theme như tên, version, miêu tả, tác giả, etc.

poketech.yaml: chứa các tham số cần thiết cho theme.

Cũng giống như trong WordPress, trong theme con mà cụ thể ở đây là theme poketech, khi chúng ta khai báo một file nào cùng tên và cùng vị trí tương đương trong antimatter, thì Grav sẽ sử dụng file đó thay cho file cha của nó. Chỉ khi nào Grav không tìm thấy file con của một file trong theme cha, nó sẽ sử dụng file của theme cha. Grav làm được việc này là nhờ có sự trợ giúp của PHP Streams. Để hiểu rõ hơn về PHP Streams, các bạn có thể xem thêm bài viết ở đây.

Bước 2:

Bây giờ chúng ta đã tạo xong child theme mang tên poketech. Chúng ta có thể vào trang quản trị, vào mục themes, chúng ta sẽ thấy một theme mới là theme poketech hiện ra ở đây. Chúng ta chỉ cần ấn vào nút Activate để kích hoạt child theme trở thành theme chính cho website.

Nếu các bạn muốn theme con có thumbnail trong trang quản trị themes, bạn chỉ việc thêm một ảnh mang tên thumbnail.jpg vào trong thư mục poketech là được.

Vậy là chúng ta đã hoàn thành các bước tạo theme con cho một theme có sẵn, để test xem theme poketech có hoạt động không, chúng ta hãy thử tạo một file sau đây trong thư mục poketech: templates/default.html.twig

và copy nội dung sau đây vào file đó:

Sau đó chúng ta vào trang chủ và nếu chữ “TEST POKETECH” hiển thị trên trang chủ có nghĩa là ta đã thành công.