Bài viết này chúng ta sẽ tìm hiểu cấu trúc và cách tạo một theme trong hệ quản trị nội dung October CMS. Cấu trúc theme trong October CMS (OC) được xây dựng và quản lý theo kiểu từng module như ý tưởng của wordpress, một theme bao gồm nhiều thành phần: assets files, partials, layouts, content file và những thư mục khác do người phát triển theme thêm vào. Tuy nhiên một số đối tượng và file bắt buộc cần có để OC có thể nhận biết và quản lý trong backend sẽ được liệt kê sau đây:

Đối tượngMô tả
PagesCác file chứa nỗi dung tĩnh của 1 trang.
PartialsChứa nội dung thường lặp lại ở giao diện như menu, sidebar
LayoutsCác files dàn khung cho giao diện
Content filesChứa nội dung thêm các tài nguyên nội dung như txt, file html, file Mardown
Asset filesChứa các tập tin tài nguyên giao diện, css, js, hình ảnh ...

Cấu trúc 1 theme cơ bản trong Octorber Cms:

Mỗi một theme trong OC phải tuân thủ cấu trúc thư mục như mô tả phía dưới

themes/
  website/           <=== Thư mục theme với tên thư mục là tên theme
    pages/           <=== Thư mục chứa các pages
      home.htm
    layouts/         <=== Thư mục chứa các file giao diện 
      default.htm
    partials/        <=== Thư mục chứa các phần của giao diện dược sử dụng lặp lại nhiều nơi
      sidebar.htm
    content/         <=== Phần chứa nội dung tĩnh 
      intro.htm
    assets/          <=== Thư mục chứa tài nguyên giao diện như hình ảnh, css, file javascript
      css/
        my-styles.css
      js/
      images/

Bạn có thể kích hoạt các giao diện tại 2 nơi trong October là file /configs/cms.php hoặc trong phần settings của backend admin

Ngoài ra bạn còn có thể tổ chức các file cùng tính năng trong theme vào từng thư mục con để tiện việc quản lý

themes/
  website/
    pages/
      home.htm
      blog/                  <=== Subdirectory
        archive.htm
        category.htm
    partials/
      sidebar.htm
      blog/                  <=== Subdirectory
        category-list.htm
    content/
      footer-contacts.txt
      home/                  <=== Subdirectory
        intro.htm
    ...

Để truy xuất và hiển thị các file trong thư mục partials bạn sử dụng cú pháp truy xuất biến môi trường partial được tạo sẵn trong October

{% partial "blog/category-list" %}

Cấu trúc 1 file template cơ bản trong October

Mỗi một file pages. partials, layouts đểu được chia thành 3 khối code chính: configuration (code cấu hình) PHP code và Twig markup. Ba khối code này được đánh dấu phân cách với nhau qua câu lệnh “==

url = "/blog"
layout = "default"
==
function onStart()
{
    $this['posts'] = ...;
}
==
<h3>Blog archive</h3>
{% for post in posts %}
    <h4>{{ post.title }}</h4>
    {{ post.content }}
{% endfor %}

Khối lệnh mô tả configuration:

url = "/blog"
layout = "default"

[component]
parameter = "value"

Sử dụng kiểu đánh dấu INI Format, khối lệnh này cho biết tác dụng, cấu hình, các yêu cầu cần thiết để render các phần code phía dưới

Khối mã lệnh Php:

<?
function onStart()
{
    $this['posts'] = ...;
}
?>

Là đoạn mã PHP thuần túy được khởi chạy đầu tiên khi render hiển thị cho người sử dụng. Có thể sữ dụng namespace, các thao tác load dữ liệu trước khi hiển thị.

url = "/blog"
layout = "default"
==
<?
use Acme\Blog\Classes\Post;

function onStart()
{
    $this['posts'] = Post::get();
}
?>
==

Như đoạn code phía trên, hàm onStart() có tác dụng nạp các bài viết trong cơ sở dữ liệu vào biến ‘posts’ của template. Để truy xuất các biến được khởi tạo, và nạp trên template ta sử dụng các cách thức sau:

// Write via array
$this['foo'] = 'bar';

// Read via array
echo $this['foo'];

// Read-only via object
echo $this->foo;

Twig markup section

Đây là đoạn mã lệnh xen kẽ giữa cú pháp Twig và html có tác dụng giảm thời gian viết code html và tạo bộ nhớ đệm giúp tăng tốc quá trình nạp và hiển thị. Phần mô tả và sử dụng các cú pháp Twig được October cung cấp bạn tham khảo tại link này: ” sử dụng Twig trong October Cms ”

 

 

 

About the author

Kevin Dang

Hey there! My name is Kevin Dang, I am website, software, mobile app develop, web admin system. Expert living in Hồ Chí Minh (Việt Nam). I am very interested in digital marketing with: SEO, Facebook, Google Ads ... This blog is where I will share the experiences, techniques and knowledge I have learned.