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 để...
Nội dung trích xuất từ tài liệu:
Tạo diễn đàn với XenForo: Phần 3 - Quản lý, thiết kế và ngôn ngữ 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ệpcủ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ếtkế đẹ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 giaodiệ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ệnXenForo cung cấp cho người dùng các công cụ mạnh mẽ để có thể tùy biến giao diệntheo ý thích. Để thiết kế, tùy chỉnh giao diện, bạn sử dụng các tính năng trong khungStyles & Templates trong thẻ Apperance. Đối với giao diện mặc định Default Style hoặccá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ựchiệ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ácnhó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ụcStyle, 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ằngcá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. Khixong, 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ăngStyle 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úpkhá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ácthiế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ĩacá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 trangnộ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ộctính Header and Navigation. Ở thẻ Setting, bạn được cung cấp hai khung Header LogoImage 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ớiHeight of Header Logo, bạn vào chiều cao cho phép logo hiển thị trên header. Khi xongbấ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ếtbằ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ệnXenForo bằng cách chỉnh sửa HTML và CSS. Trong khung bên phải liệt kê danh sáchcá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ùychỉ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áovào bên dưới mã 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ấmRevert 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ấmnút Browse ở mục Import from uploaded file và tìm đến tập tin giao diện (định dạngxml). Tiếp theo, bạn có thể đánh dấu chọn vào ô Child of style để cài đặt làm giao diệncon của một giao diện nào đó hoặc chọn ô Overwrite style để ghi đè lên giao diện đượcchọ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ệnmới. Ở trang quản lý giao diện Styles, bạn đánh dấu chọn vào ô vuông đầu tiên để chophé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 ...