Hướng dẫn cài Themes, Components, Custom code cho Discourse - HuuPhongNguyen

Hướng dẫn cài Themes, Components, Custom code cho Discourse

Hướng dẫn cài Themes, Components, Custom code cho Discourse, đây là những cài đặt cần thiết và cơ bản khi chúng ta sử dụng nền tảng Discourse. Cũng giống như WordPress, Discourse cũng cho phép bạn cài đặt Themes để thay đổi giao diện hoặc chỉnh sửa chúng theo nhu cầu. Bên cạnh đó, Components là một khái niệm mới đối với những người dùng WordPress sang, đây là một biến thể khác của Themes và Plugins, nó được cài đặt tương tự như Theme nhưng mang chức năng giúp người dùng cài thêm chức năng hoặc chỉnh sửa code. Mình thích dùng Components hơn bởi nó khá nhẹ nhàng và đơn giản.

Bài viết này là một phần của bài viết:

Mình đã xây dựng một website Forum bằng Discourse như thế nào?

Trong bài này, mình sẽ hướng dẫn cài Themes, Components, Custom Code trong Discourse. Cả 3 điều này khá dễ thực hiện, riêng Custom Code có thể coi là một phần của Components.

Để thực hiện cả 3 bước này, bạn đều vào cùng 1 nơi, đầu tiên bạn chọn Menu Hamburger để mở bảng menu, sau đó chọn Quản trị (Admin)

Hướng dẫn cài Themes, Components, Custom code cho Discourse - HuuPhongNguyen

Sau đó chọn vào tab Tùy biến (Customize)

Hướng dẫn cài Themes, Components, Custom code cho Discourse - HuuPhongNguyen

Tại đây, bạn sẽ thấy Themes và Components, cũng như nút cài.

Hướng dẫn cài Themes, Components, Custom code cho Discourse - HuuPhongNguyen

Hướng dẫn cài Themes trong Discourse

Themes có nghĩa là những giao diện được các lập trình viên chỉnh sửa và thiết kế theo một phong cách nào đó và chúng ta sử dụng toàn bộ những điều đó. Tất nhiên, Discourse cho phép chúng ta tự điều chỉnh và tùy biến Themes một cách dễ dàng.

Hướng dẫn cài Themes, Components, Custom code cho Discourse - HuuPhongNguyen

Bạn chọn vào nút Nhập và chọn Từ Web để cài Themes từ link Github. Để tìm Themes, bạn có thể vào link này: https://meta.discourse.org/c/theme . Đây là nơi chia sẻ Theme chính thức của cộng đồng Discourse. Bạn sẽ dễ dàng tìm được Theme yêu thích và có link clone Github để paste vào. Nếu bạn là người dùng Gihub thường xuyên và phát triển theme qua Private Git Repository, bạn cũng có thể add thông qua việc thêm 1 dấu check để cho Discourse biết là Private Rep.

Hướng dẫn cài Themes, Components, Custom code cho Discourse - HuuPhongNguyen

Đây là thông tin 1 trong những Theme mà mình đang sử dụng. Bạn cũng có thể dễ dàng nhìn thấy mình đang sử dụng 5 Components cho Theme này. Bước kế tiếp mình sẽ hướng dẫn cách cài đặt và sử dụng Components trong Discourse.

Hướng dẫn cài đặt và sử dụng Components trong Discourse

Components là một chức năng mở rộng hơn của Theme và nó giúp cho Theme thêm linh hoạt hơn. Để cài đặt Component, bạn làm tương tự bước trên nhưng chọn sang Tab Component.

Bạn có thể tìm kiếm Components tại đây: https://meta.discourse.org/c/theme. Discourse gom Theme và Component lại làm 1 chủ đề để giúp bạn có thể tiện dễ dàng tìm kiếm hơn. Sau khi cài đặt Components và chỉnh sửa cấu hình (mỗi Components sẽ có những lựa chọn khác nhau), bạn cần phải thêm Components vào Theme thì mới sử dụng được. Ví dụ: mình thêm 1 Component có chức năng thêm chức năng chọn theme trong 4 theme, mình phải add component vào cả 4 theme. Nếu như bạn không thêm vào cả 4 theme, bạn chỉ thấy Component ở những theme đã thêm mà thôi.

Để thêm Component vào theme rất dễ dàng:

Hướng dẫn cài Themes, Components, Custom code cho Discourse - HuuPhongNguyen

Bạn chỉ cần chọn Component và bấm + Add vào thôi, tất nhiên chỉ những Component đã cài thì mới hiển thị trong phần lựa chọn.

Hướng dẫn Custom Code

Custom Code là 1 trong những yếu tố rất quan trọng bởi nó giúp bạn rất nhiều thứ như:

  • Thêm các dòng code để xác nhận Google Analytics, Google Webmaster, cài đặt các chức năng bên ngoài,…
  • Thay đổi CSS, JS,… để giúp tùy chỉnh theo sở thích.
  • Và hàng tỉ thứ khác.

Để Custom Code trong Discourse. Bạn chọn vào nút + Mới để tạo một Component cho bản chính bạn.

Hướng dẫn cài Themes, Components, Custom code cho Discourse - HuuPhongNguyen

Một cửa sổ sẻ hiện lên:

Hướng dẫn cài Themes, Components, Custom code cho Discourse - HuuPhongNguyen

Bạn có thể đặt tên gì cũng được, tuy nhiên mình thường đặt “Custom Code” bởi mình dùng Component này chỉ để Custom Code là chính.

Hướng dẫn cài Themes, Components, Custom code cho Discourse - HuuPhongNguyen

Tại đây, bạn có thể thấy là Component bạn còn rất hoang sơ và chưa có gì. Tuy nhiên, nhiệm vụ của nó chỉ là Custom Code nên bạn có thể không quan tâm nhiều, chỉ quan tâm đến nút Edit CSS/HTML là được 😎.

Hướng dẫn cài Themes, Components, Custom code cho Discourse - HuuPhongNguyen

Một vài chỉnh sửa CSS của mình trong Component Custom Code mình vừa tạo. Bạn có thể thêm chỉnh sửa CSS hoặc thêm Code vào trước thẻ Head hay Footer. Đây là những điều rất cần thiết trong tương lai, đặc biệt khi bạn sử dụng các dịch vụ bên ngoài và có nhu cầu tích hợp vào website.

Vậy là mình vừa xong việc Hướng dẫn cài Themes, Components, Custom code cho Discourse. Rất dễ dàng đúng hông, đó là những điều cơ bản của Discourse 🎉

Bài viết tương tự:

Đánh giá bài viết:

Twitter
Facebook
LinkedIn
Email
Print