Tạo diễn đàn với XenForo: Phần 3 - Quản lý, thiết kế và ngôn ngữ docx

Tạo diễn đàn với XenForo: Phần 3 - Quản lý,
thiết kế và ngôn ngữ
Một diễn đàn có giao diện đẹp, thân thiện luôn là mục tiêu mà người thiết kế hướng đến,
đồng thời nó cũng là một tiêu chuẩn để khách truy cập đánh giá mức độ chuyên nghiệp
của diễn đàn, cũng như sự đầu tư của người quản trị. Đây cũng là một trong những yếu tố
ảnh hưởng đến sự phát triển của diễn đàn. Tuy giao diện mặc định của XenForo có thiết
kế đẹp, đơn giản và thân thiện với người sử dụng nhưng bạn có thể thiết kế lại giao diện,
tùy chỉnh màu sắc để phù hợp hơn với nhu cầu và định hướng xây dựng diễn đàn.

Phần này sẽ đưa ra một số gợi ý về cách thiết kế giao diện cho diễn đàn dựa trên một số
trải nghiệm của tác giả về mã nguồn XenForo. Đồng thời, hướng dẫn cách cài đặt giao
diện mới, thiết lập tự động nhận giao diện dành cho thiết bị di động, cài đặt gói ngôn ngữ
tiếng Việt.

5. Thiết kế, tùy chỉnh giao diện

XenForo cung cấp cho người dùng các công cụ mạnh mẽ để có thể tùy biến giao diện
theo ý thích. Để thiết kế, tùy chỉnh giao diện, bạn sử dụng các tính năng trong khung
Styles & Templates trong thẻ Apperance. Đối với giao diện mặc định Default Style hoặc
các giao diện khác (nếu có) thì việc tùy chỉnh và thiết kế lại giao diện cũng được thực
hiện tương tự như các bước gợi ý sau đây.

Đầu tiên, bạn sử dụng tính năng bảng màu sắc Color Palette để thay đổi màu cho các
nhóm thuộc tính trên giao diện. Trong cửa sổ bên phải, bạn chọn tên giao diện ở mục
Style, rồi lần lượt chọn từng bảng màu ở bên dưới hoặc có thể phối màu tự động bằng
cách kéo thanh trượt bên trên nút Invert, bấm nút Invert để đảo lộn các màu đã chọn. Khi
xong, bạn bấm nút Update Style Properties để lưu thay đổi.



Tiếp theo, bạn có thể chỉnh sửa các thuộc tính khác của giao diện bằng nhóm tính năng

Style Properties, như: General (những thiết lập chung cho giao diện), Building Blocks
(điều chỉnh các thành phần trên giao diện), Header and Navigation (tùy chỉnh các yếu tố
đầu trang, các thanh điều hướng), Breadcrumb (điều chỉnh các đường dẫn phân cấp giúp
khách truy cập biết được vị trí hiện tại trong cấu trúc diễn đàn), Footer (điều chỉnh các
thiết lập ở chân trang), PageNav, Link Groups and Tabs (quản lý các liên kết nhiều trang,
các thẻ khác), Sidebar (tùy chỉnh các khung tính năng trên giao diện), Forms (định nghĩa
các kiểu bố trí ở hầu hết các biểu mẫu), Buttons (quản lý thuộc tính tất cả các nút bấm),
Overlays and Tooltips (thiết kế bảng hướng dẫn cho phép hiển thị trên cùng của các trang
nội dung),…



Ví dụ, nếu muốn thay đổi logo mặc định của mã nguồn XenForo thì bạn bấm vào thuộc
tính Header and Navigation. Ở thẻ Setting, bạn được cung cấp hai khung Header Logo
Image Path (đường dẫn đến tập tin logo) và Height of Header Logo (chiều cao của logo).
Bạn cần chép tập tin ảnh logo vào thư mục styles/default/xenforo (đối với giao diện mặc
định), rồi xóa chữ logo.png và nhập tên logo của bạn (bao gồm định dạng). Riêng đối với
Height of Header Logo, bạn vào chiều cao cho phép logo hiển thị trên header. Khi xong
bấm Update Style Properties.



Mục Templates cung cấp cho bạn những mẫu code độc quyền của XenForo được viết
bằng HTML5 và CSS3. Với tính năng, người quản trị có thể tinh chỉnh toàn bộ giao diện
XenForo bằng cách chỉnh sửa HTML và CSS. Trong khung bên phải liệt kê danh sách
các mẫu quy định thuộc tính của các thành phần trên diễn đàn, những mẫu đã được tùy
chỉnh sẽ hiện màu đỏ, những mẫu không có thay đổi vẫn giữ màu bình thường. Ví dụ, để
chỉnh sửa thuộc tính ad_header (quảng cáo ở đầu trang header), bạn chèn mã quảng cáo
vào bên dưới mã <xen:hook name="ad_header" /> rồi bấm Save and Exit.

Các thành phần đã tùy chỉnh đều được lưu lại ở mục Customized Components, bạn có thể
sử dụng khung Filter items để tìm kiếm theo bộ lọc. Nếu muốn phục hồi lại thiết lập mặc
định thì bạn bấm vào dấu X màu đỏ ở hàng Templates, Style Properties cần phục hồi.
Hoặc có thể đánh dấu chọn vào các thành phần (hoặc đánh dấu chọn Select all) rồi bấm
Revert Selected Items để đưa các thành phần đã chọn về thiết lập mặc định.



6. Cài đặt giao diện và thiết lập tự động nhận giao diện mobile

Để cài đặt giao diện mới cho diễn dàn XenForo, bạn bấm vào mục Import a Style rồi bấm
nút Browse ở mục Import from uploaded file và tìm đến tập tin giao diện (định dạng
xml). Tiếp theo, bạn có thể đánh dấu chọn vào ô Child of style để cài đặt làm giao diện
con của một giao diện nào đó hoặc chọn ô Overwrite style để ghi đè lên giao diện được
chọn, xong bấm Import. Quá trình cài đặt có thể diễn ra trong vài giây, sau khi xong sẽ
chuyển đến trang quản lý Styles. Tác giả sử dụng giao diện mobile (dành cho các thiết bị
di động) để minh họa cho bài viết.



Sau khi cài đặt xong, bạn có thể thay đổi các thiết lập mặc định liên quan đến giao diện
mới. Ở trang quản lý giao diện Styles, bạn đánh dấu chọn vào ô vuông đầu tiên để cho
phép thành viên sử dụng, ô tròn thứ hai cho phép thiết lập giao diện mặc định, tính năng
Template và Style Properties cho phép tùy chỉnh giao diện, tính năng Export để trích xuất
giao diện.


Để thiết lập chế độ tự nhận giao diện mobile khi dùng thiết bị di động truy cập vào

website, bạn cần phải cài đặt thêm tiện ích Automatic Mobile Style Switcher và giao diện
dành cho mobile. Bạn có thể tải tiện ích này, cùng với giao diện mobile tại địa chỉ này.
Sau khi tải về, bạn tiến hành giải nén được tập tin giao diện Style-Mobile.xml và tập tin
nén MobileStyleSwitch.zip. Bạn giải nén tập tin MobileStyleSwitch.zip và chép thư mục
library trong thư mục Upload vào thư mục htdocs\beta. Sau đó, bạn trở lại trang quản trị
của XenForo, vào menu Home > bấm vào mục Install Add-on, rồi bấm nút Browse ở
trường Install from uploaded file, tìm đến tập tin addon-MobileStyleSwitch.xml và bấm
Install Add-on.

Sau khi cài đặt xong tiện ích hỗ trợ Automatic Mobile Style Switcher, bạn cài đặt giao
diện mobile Style-Mobile.xml, rồi trở lại menu Home > Options, bấm vào nhóm tùy chọn
Automatic Mobile Style Switcher.



Ở trang mới hiện ra, bạn nhập số ID của giao diện mobile vào ô Mobile Style ID, nhập
danh sách thiết bị vào ô Additional Agents, rồi bấm Save Changes. Lưu ý, để biết số ID
của giao diện, bạn trở về trang quản lý Styles, bấm vào giao diện mobile và nhìn lên
thanh địa chỉ sẽ thấy được số ID ở phía sau chữ style-mobile, ví dụ:
beta/admin.php?styles/style-mobile.3/edit có ID là 3. Bạn có thể sử dụng tiện ích User
Agent Switcher dành cho trình duyệt Firefox để kiểm tra kết quả thiết lập.



7. Cài đặt ngôn ngữ

Các tính năng trong khung Languages & Phrases ở thẻ Appearance giúp người quản trị
quản lý tốt ngôn ngữ trên giao diện. Ngoài ngôn ngữ mặc định là tiếng Anh (English
(US)), bạn có thể cài thêm gói ngôn ngữ tiếng Việt cho diễn đàn, tải tại địa chỉ này. Sau
khi tải về, bạn hãy giải nén tập tin language-Tieng-Viet.rar và trở về trang quản trị, bấm

Import a Language. Ở trường Import from uploaded file, bạn bấm nút Browse và duyệt
đến tập tin language-Tieng-Viet.xml rồi bấm Import.



Để cài đặt tiếng Việt làm ngôn ngữ mặc định, bạn đánh dấu chọn vào ô tròn trên hàng
tiếng Việt. Sau đó, bấm vào liên kết Tiếng Việt rồi thay đổi các tùy chọn Title- tiêu đề,
Locale- vị trí, Text Direction- hướng văn bản, Decimal Point Character- kí tự cách phần
thập phân, Thousands Separator- kí tự cách phần nghìn, Date Format- định dạng ngày,
Time Format- định dạng thời gian. Ngoài ra, bạn có thể sử dụng tính năng Phrases để tự
dịch thêm một số từ và cụm từ, với tổng số 4.513 đối tượng.



Video hướng dẫn:

Phần 4: Nhập dữ liệu từ mã nguồn phpBB, IP Board, vBulletin và sử dụng một số
công cụ khác.