1. Cộng đồng SEO Kỹ năng game: Cộng đồng Diễn đàn SEO Kỹ năng game
    Fanpage facebook diễn đàn Kỹ năng game: Fanpage diễn đàn Kỹ năng game
    Group facebook diễn đàn Kỹ năng game: Group diễn đàn Kỹ năng game
    Có vấn đề gì thắc mắc hay hỏi admin, liên hệ: kynanggame@gmail.com
  2. Nội quy diễn đàn: Click xem ngay
    - Không đặt domain, liên hệ, in hoa toàn bộ tiêu đề topic, rao vặt tối đa 1 bài/ngày, không đăng liên tiếp
    - Để chèn link cần tối thiểu 5 bài viết và chèn tối đa 1 link ngoài ảnh
    - Không comment liên tiếp, không gửi bài với nội dung vô nghĩa, không đăng lại cùng 1 nội dung

Tạo diễn đàn với XenForo: Quản lý, thiết kế giao diện và cài đặt ngôn ngữ

Thảo luận trong 'Mã nguồn xenforo' bắt đầu bởi gianhadatsg, 17/12/2015.

  1. gianhadatsg

    gianhadatsg Thành viên

    Bài viết:
    2
    Đã được thích:
    0
    Tạo diễn đàn với XenForo: Quản lý, thiết kế giao diệncài đặt 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, song song nó cũng là một tiêu chuẩn để khách truy cập đánh giá chừng độ 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 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 nhậ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 dụ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 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.

    trước hết, bạn dùng tính năng bảng màu sắc Color Palette để đổi thay 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 tuần 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 đổi thay.

    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í ngày nay 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ồ hết các biểu mẫu), Buttons (quản lý tính chất tuốt luốt 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),…

    tỉ dụ, nếu muốn đổi thay 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 tất giao diện XenForo bằng cách chỉnh sửa HTML và CSS. Trong khung bên phải kê danh sách các mẫu quy định tính chất 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 thông thường. Ví dụ, để chỉnh sửa tính chất ad_header (lăng xê ở đầu trang header), bạn chèn mã quảng cáo và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ể dùng khung Filter items để cỡ theo bộ lọc. Nếu muốn hồi phục 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 can dự đế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 trước tiên để cho phép thành viên 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, thí dụ: beta/admin.php?styles/style-mobile.3/edit có ID là 3. Bạn có thể dùng tiện ích User Agent Switcher dành cho trình duyệt Firefox để rà soát 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 tiếng nói trên giao diện. Ngoài tiếng nói mặc định là tiếng Anh (English (US)), bạn có thể cài thêm gói tiếng nói 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 đổi thay 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 kì. ngoại giả, bạn có thể sử dụng tính năng Phrases để tự dịch thêm một số từ và mực, với tổng số 4.513 đối tượng.
     

Chia sẻ trang này