OctoberCMS với phương châm làm cho mọi thứ trở lên đơn giản nhất, chính vì vậy ngay cả trong phần lõi của nó không có ngay cả chức năng tạo blog, một chức năng mà bất kỳ CMS nào đều có. Tuy nhiên, không có gì đáng lo ngại vì có hàng tá các plugin trên October Marketplace có thể giúp bạn.

Plugin là gì?

Trong OctoberCMS, để mở rộng một tính năng chúng ta sử dụng các Plugin. Plugin chính là các gói phần mềm được cung cấp bởi bên thứ ba hoặc do chính chúng ta viết ra nhằm thực hiện một tính năng riêng biệt hoặc thậm chí là để mở rộng một plugin khác. OctoberCMS có một "chợ plugin" nơi cung cấp cả những plugin miễn phí và mất phí. Cách thức hoạt động này cũng giống như với hầu hết các nền tảng mã nguồn mở khác.

Tổng số lượng plugin có trên OctoberCMS chưa nhiều, với hơn 500 plugin miễn phí và gần 200 plugin mất phí, tuy nhiên sau một thời gian sử dụng, tôi thấy rằng nó đáp ứng được hầu hết các yêu cầu xây dựng website của mình.

Rainlab.Blog - Blog ư đơn giản

Thử tìm kiếm từ khóa blog trên Marketplace, chúng ta có được rất nhiều kết quả, miễn phí có, mất phí có:

Trong đó đứng vị trí đầu tiên là Blog (cụ thể là Rainlab.Blog, trong OctoberCMS quy ước gọi tên các plugin với quy cách Tên_nhà_cung_cấp.Tên_plugin). Trong phần tiếp theo bạn hãy cùng tôi tìm hiểu cách cài đặt và sử dụng một plugin nói chung thông qua việc tạo một blog với Rainlab.Blog.

Cài đặt Rainlab.Blog

Trong bài giới thiệu các tính năng cơ bản của OctoberCMS có đề cập đến phần quản lý và cài đặt plugin nằm trong menu Settings ở khu vực quản trị backend. Thực hiện cài đặt plugin Rainlab.Blog nào.

Bước 1: Đăng nhập backend, chọn menu Settings. Tìm đến mục Update & Plugin trong tab System.

Danh sách này là các plugin được cài đặt vào hệ thống, chúng ta thấy mặc định có plugin October Demo. Để cài đặt Rainlab.Blog, chọn Install plugins.

Gõ từ khóa cần tìm kiếm, các kết quả sẽ được hiển thị, chúng ta thấy plugin Rainlab.Blog ngay đầu tiên. OctoberCMS nên cải thiện kết quả này bằng cách thêm vào thông tin của Plugin vì nhìn danh sách này khá dễ nhầm. Click vào plugin Blog trong danh sách kết quả và quá trình cài đặt diễn ra chỉ trong vài giây. Quá trình cài đặt kết thúc bạn sẽ thấy trên thanh menu có thêm menu Blog.

Mở trang chủ xem có gì thay đổi không? Mọi thứ vẫn như vậy, vậy Plugin Blog này hoạt động thế nào?

Sử dụng Rainlab.Blog

Bạn còn nhớ các khái niệm Page, Layout, Partial, Component trong bài trước? Bây giờ là lúc chúng ta sử dụng đến các khái niệm này. Chúng ta muốn có một trang có đường dẫn http://octobercms.test/blog chứa danh sách các bài viết và trang http://octobercms.test/blog/tieu-de-bai-viet để xem nội dung chi tiết bài viết.

Tạo trang mới trong CMS

OK, vào backend chọn CMS và chọn menu bên trái là Pages. Nhấp chuột vào nút Add để thêm một trang mới.

Trong phần Title khi chúng ta nhập liệu thì bên URL cũng tự động đưa ra, bạn có thể điều chỉnh URL tùy thích. Trong phần File Name, chúng ta để là blog/index.htm tức là trang danh sách blog này sẽ được tạo ra nằm trong thư mục blog và có tên là index.htm. Phần Layout chọn default, phần markup chính là nội dung của trang, đưa vào dòng text đơn giản:

<h1>Đây là trang blog</h1>

OK bạn bấm vào Save hoặc tổ hợp phím Ctrl + S. Thử truy cập vào http://octobercms.test/blog chúng ta thấy

Như vậy chúng ta có thể hiểu rằng Layout chính là nơi chọn giao diện cho trang tạo ra. Tiếp đến phần Markup chính là nội dung hiển thị. Một câu hỏi đặt ra: Vậy danh sách các bài viết nằm ở đâu?

Bây giờ là lúc chúng ta tìm hiểu tiếp đến khái niệm Component.

Truy cập đến các component theo thứ tự CMS -> Component -> Blog (các component của plugin Blog). Giữ chuột và kéo component Post List của Blog vào phần Markup chúng ta thấy xuất hiện thêm đoạn code:

{% component 'blogPosts'%}

Đây là cú pháp Twig, nếu bạn thấy lạ cũng đừng lo ngại vì Twig khá đơn giản. (Tham khảo thêm Tìm hiểu Twig từ A đến Z). Phần ở dưới tiêu đề chúng ta thấy component đã được gắn vào trang. Thực hiện lưu lại và quay lại trang http://octobercms.test/blog xem có gì thay đổi.

Thêm bài viết mới vào Blog

Khi cài Plugin Blog có xuất hiện một menu Blog mới trong backend, giờ là lúc dùng đến nó để thêm bài viết mới. Trước khi bắt đầu thêm bài viết, chúng ta nên bỏ chút thời gian tìm hiểu về danh mục bài viết. Phần danh mục nếu được thiết kế khoa học sẽ giúp bạn quản lý tốt các bài viết và độc giả cũng có thể tìm bài viết nhanh chóng.

Ở đây tôi tạo vài danh mục để giới thiệu, bạn hãy thực hành nhé. Tiếp theo chọn vào New post để thêm bài viết mới.

Giao diện thêm bài viết khá đơn giản với 3 tab:

• Edit: Chứa nội dung bài viết.
• Categories: Thiết lập danh mục bài viết
• Manage: Các thông tin khác như có xuất bản bài viết không, có phần mô tả ngắn gọn bài viết và ảnh đại diện cho bài viết.

Ctrl + S và chúng ta đã có thêm một bài viết, vào lại trang Blog http://octobercms.test/blog chúng ta đã thấy có thêm bài viết. Tuy rằng hiển thị không được đẹp nhưng phần chỉnh sửa cho đẹp sẽ được làm rõ ở một bài viết khác.

Tạo trang bài viết chi tiết cho Blog

Chúng ta đã tạo được trang danh sách bài viết, khi nhấp chuột vào các tiêu đề bài viết không có một hiệu ứng nào xảy ra. Tất cả là do chúng ta chưa tạo một trang để hiển thị chi tiết nội dung cho từng bài viết và thiết lập để Rainlab.Blog hiểu được cần đi đến trang chi tiết khi click vào đường dẫn ở trang danh sách.

Ok, quay trở lại backend -> CMS -> Page, chúng ta tạo ra một page mới như sau:

Phần URL của page này hơi đặc biệt

/blog/:slug

Đường dẫn này sẽ có dạng http://octobercms.test/blog/bai-viet-so-1 với tham số bai-viet-so-1 sẽ được truyền vào để xác định nội dung bài viết.

Tiếp theo sử dụng Component Post trong plugin Rainlab.Blog, component này nhận đầu vào là biến slug và tìm ra bài viết tương ứng và hiển thị nó.

{% component 'blogPost' %}

Để xem thiết lập biến đầu vào cho component chúng ta nhấp chuột vào component.

Save lại các thiết lập này và vào lại trang blog xem có gì thay đổi, thật lạ khi nhấp vào các bài viết thì vẫn không dẫn đến nội dung từng bài. Do chúng ta chưa thiết lập trong trang blog/index.htm thôi.

Mở lại trang blog/index.htm, nhấp chuột vào component Post List và trỏ Post page trong phần Link về trang blog/detail.htm vừa tạo ở trên. Save lại và thử lần nữa xem mọi thứ hoạt động chưa?

Mọi thứ đã theo đúng luồng logic, khi nhấp vào các tiêu đề bài viết trong danh sách bài viết, trình duyệt đã chuyển hướng đến nội dung cụ thể từng bài. Tuy rằng việc trình bày nội dung khá ngộ, không tuân theo các tiêu chuẩn thiết kế web, nhưng không sao, những vấn đề này sẽ được đề cập đến trong phần tiếp theo về tạo giao diện mới cho OctoberCMS.

Lời kết

Như vậy, chúng ta đã thực hiện xong việc cài đặt Rainlab.Blog và sử dụng nó để xây dựng một trang Blog. Các thao tác là khá đơn giản tuy rằng nhìn trên hình ảnh có vẻ rắc rối. Bạn hãy thực hiện thao tác theo hướng dẫn và mày mò trong menu CMS. Chúng ta cũng đã làm quen với khái niệm page, layout, component. Phần tiếp theo chúng ta sẽ cùng nhau xây dựng giao diện cho Blog này bằng các thành phần cơ bản của OctoberCMS.