Liferay 7: Thay đổi giao diện trang quản trị

Trong thực tế, chúng ta thường quan tâm đến giao diện của người dùng cuối (end-user) nhiều hơn so với giao diện quản trị. Chính vì vậy, giao diện quản trị thường không được đầu tư nhiều công sức. Tuy nhiên, tuy từng từ dự án, những người dùng được cấp tài khoản có thể truy cập được trang quản trị (nhân viên, biên tập viên,...). Trong trường hợp này, đương nhiên là chúng ta cần cải thiện giao diện quản trị mặc định để người dùng cảm thấy hứng thú hơn khi sử dụng ứng dụng. Bài viết này sẽ hướng dẫn cách cập nhật giao diện mặc định của Liferay 7.x.

Bước 1: Tạo mới theme

Bạn có thể tạo mới một module theme theo hướng dẫn ở đây. Sau khi tạo theme mới, ta sẽ có các file và các thư mục mặc định như sau:

Bước 2: Cập nhật file liferay-look-and-feel.xml

File liferay-look-and-feel.xml là nơi để cấu hình các thông tin của theme. Bạn có thể đọc thêm thông tin về cấu hình theme tại đây.

Trong bài viết này, chúng ta sẽ chỉ quan tâm đến việc thay đổi giao diện quản trị. Do đó, chúng ta chỉ quan tâm đến cấu hình control-panel-theme.

<?xml version="1.0"?>

<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 7.2.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_7_2_0.dtd">

<look-and-feel>

<compatibility>

<version>7.2.0+</version>

</compatibility>

<theme id="custom-admin" name="custom-admin">

<control-panel-theme>true</control-panel-theme>

</theme>

</look-and-feel>

Cụ thể: chúng ta đặt giá trị của control-panel-theme là true. Điều này có nghĩa là, theme customer-admin là theme dành cho giao diện quản trị.

Bước 3: Ghi đè các thư mục của theme

Khi thực hiện build theme, các thư mục: css, js, images và templates sẽ được sinh ra tự động. Hoặc chúng ta có thể ghi đè bằng cách copy các thư mục tại đây vào thư mục {customer-admin-theme}/src.

Bước 4: Chỉnh sửa các tài nguyên (CSS, JS, Images, Template)

Sau khi sao chép các thư mục trên, chúng ta có thể chỉnh sửa/ghi đè các file mà chúng ta mong muốn. Ví dụ: thay đổi màu của trang quản trị, thay các ảnh mặc định, chỉ sửa bố cục trạng....

Trong bài viết này, chúng ta sẽ làm một ví dụ đơn giản đó là thay đổi màu của trang quản trị. Việc này thực sử đơn giản, chỉ cần chỉnh sửa file _custom.scss.

Bây giờ, bạn hãy mở thư mục CSS và mở file _custom.css và thêm nội dung như sau:

.product-menu .panel .panel-body {

background-color: #21716a;

}

.product-menu .panel .list-group-heading.active,

.product-menu .panel .list-group-heading.active:hover,

.product-menu .panel .list-group-heading.active:focus {

background-color: #21716a;

}

.product-menu .panel .list-group-heading.active+div {

background-color: #21716a;

}

.product-menu .panel .panel-header .panel-title>.panel-toggler:not(.collapsed),

.product-menu .panel .panel-heading .panel-title>.panel-toggler:not(.collapsed) {

background-color: #27635d;

}

.product-menu.sidebar .sidebar-header {

background-color: #2e837b;

}

#content-wrapper .control-menu-level-1 {

background-color: #2e837b;

}

Bước 5: Sử dụng theme

Đầu tiên, chúng ta cần thực hiện deploy theme lên service. Chỉ cần copy file *.war vào thư mục deploy và chờ đợi vài phút (deploy theme thường lâu hơn so với portlet thông thường).

Tiếp đến chúng ta cần thực hiện cấu hình để sử dụng thêm. Có hai cách để biến theme mới tạo thành theme mặc định của Liferay (tại giao diện quản trị).

Cách 1: Sử dụng cấu hình

Mở file portal-ext.properties trong thư mục cài đặt Liferay (hoặc có thể sử dụng file portal-setup-wizard.properties nếu không tìm thấy). Thêm cấu hình như sau:

control.panel.layout.regular.theme.id={customer_theme_id}

({customer_theme_id} xem trong file liferay-look-and-feel.xml)

Cuối cùng là restart service để Liferay nhận được những thay đổi mới

Cách 2: Sử dụng giao diện quản trị

Ta có thể cấu hình bằng giao diện quản trị như sau:

•  Vào phần quản trị (control panel) → Configuration → Instance setting → Instance configuration
• Ở select box Defaut Theme và Default Control Panel Theme chọn theme mà chúng ta muốn.

Và đây là kết quả:

Tổng kết

Bài viết này là một hướng dẫn đơn giản để thay thế theme mặc định của Liferay ở giao diện quản trị. Tuỳ từng mục đích, chúng ta sẽ thay đổi những thành phần mong muốn như các file css, js, template hoặc thay các file ảnh.

Bạn có thể đọc bài viết gốc tại đây.