Styling (Tạo kiểu)

Trong khi XenForo xuất hiện với phong cách hiện đại, sẽ luôn có những trang web cần diễn đàn của họ để phù hợp với phong cách của chủ đề và chủ đề hiện tại của họ, và sẽ cần phải sửa đổi XenForo để phù hợp.

XenForo được trang bị một loạt các công cụ để cho phép bạn tạo lại phong cách cho diễn đàn của mình theo cách tinh tế hoặc cấp tiến như bạn mong muốn.

Bạn có thể chỉ cần điều chỉnh một số màu hoặc bạn có thể muốn thay đổi đáng kể cách mọi thứ được hiển thị bằng cách tạo các template HTML hoàn toàn tùy chỉnh.

Các công cụ là có sẵn để điều chỉnh style và phạm vi sửa đổi từ các điều khiển đơn giản, dễ sử dụng để điều chỉnh những thứ như màu sắc, phông chữ và kích cỡ, thông qua trình soạn thảo code cho các chuyên gia, cho phép bạn chỉnh sửa CSS và HTML trên toàn bộ hệ thống được xây dựng.

Style

Tất cả các công cụ tạo kiểu trong XenForo được nhóm lại thành các bộ sưu tập dữ liệu được gọi Style, đôi khi được gọi là Skin hay Theme.

Style bao gồm các template HTML, template CSS/LESS và Style properties, là tập hợp các giá trị được sử dụng để chèn các lựa chọn phong cách vào các template. Thông tin thêm về style properties được đề cập bên dưới...

Khi bạn lần đầu tiên cài đặt XenForo, nó đi kèm với một Style mặc định, gọi là Default style. Bạn được tự do chỉnh sửa bất kỳ khía cạnh nào của Style này, nhưng bạn cũng có thể sử dụng một khả năng khác của XenForo, cụ thể là khả năng có nhiều style có sẵn.

Bằng cách thêm Style thứ hai, bạn có thể tự do chuyển đổi chế độ xem của mình giữa Style mới và Style mặc định để đảm bảo rằng mọi thứ được lên kế hoạch.

Pre-built styles (Style được tạo sẵn)

Có một loạt các nhà thiết kế và lập trình viên sản xuất Style cho hệ thống XenForo, vì vậy bạn có thể tìm thấy một Style được thiết kế chuyên nghiệp, được xây dựng sẵn đáp ứng nhu cầu của bạn.

Áp dụng một Style dựng sẵn để cài đặt XenForo của riêng bạn chỉ mất một vài phút và đủ dễ dàng để hầu hết Administrator trang web quản lý.

Một loạt các Style được tạo sẵn là có sẵn trên VNXF.VN.

Setting the Default Style (Thiết lập Style mặc định)

Khi trang web của bạn có nhiều Style được cài đặt, bạn có thể chỉ định Style nào sẽ được phân phát cho khách truy cập chưa chỉ định tùy chọn của riêng họ.

Để thực hiện việc này, hãy truy cập phần Appearance của hệ thống tùy chọn XenForo và chọn Style bạn muốn hoạt động như mặc định bằng cách sử dụng tùy chọn Default style.

Bạn cũng có thể chỉ định style mặc định cho email HTML ở cùng một nơi.

Style inheritance (Style kế thừa)

Khi bạn thêm Style mới, bạn sẽ cần phải chọn Style mới của bạn có phải là Style con của Style hiện có hay không.

Nếu bạn chọn không có Style gốc, Style mới của bạn sẽ tự động kế thừa tất cả dữ liệu của nó từ Master style, thường bị ẩn khỏi chế độ xem.

Ngoài ra, nếu bạn tạo Style mới làm con của Default style, nó sẽ tự động kế thừa tất cả dữ liệu từ Default style, do đó kế thừa dữ liệu của nó từ Master style. Bất kỳ thay đổi nào được thực hiện bất kỳ lúc nào Default style ngay lập tức sẽ được kế thừa bởi Style con mới của bạn, trừ khi Style con đã tự sửa đổi các mục dữ liệu đã được thay đổi theo Style gốc.

Bối rối?

Đừng lo lắng, nó đơn giản hơn nhiều so với lời nói.

Hãy xem một ví dụ, trong đó chúng ta sẽ làm việc với một Style gọi là 'My style', được tạo ra như một Style con của Default style.

• (1) Default style
  • (2) My style

Chúng ta sẽ hình dung rằng chúng ta đang thay đổi giá trị của Style property gọi là textColor, điều khiển màu của hầu hết văn bản được nhìn thấy trong XenForo.

Trước khi chúng ta thay đổi bất cứ điều gì, giá trị của textColor là @xf-paletteNeutral3, chính nó là một tham chiếu đến một màu sắc trong bảng màu của XenForo, đó là một màu xám đen, rất tối. Về cơ bản nó màu đen.

Giá trị này được đặt trong Master style, được thừa hưởng bởi Default style, và do đó cũng được thừa hưởng bởi My style.

Bây giờ hãy hình dung rằng chúng ta thay đổi giá trị của textColor trong Default style thành xanh dương. Ngay sau khi làm điều này, giá trị hiệu quả của textColor trong My style cũng sẽ trở thành xanh dương, bởi vì thay đổi được kế thừa từ Default style.

Changing inheritance (Thay đổi kế thừa)

Trong ví dụ trên, My style kế thừa một tùy chỉnh giá trị xanh dương cho style property textColor từ Style gốc, Default style.

Tuy nhiên, giá trị xanh dương này chỉ được thừa kế, vì vậy nếu quay lại trình quản lý Style và thay đổi My style thành Style không có parent, tùy biến xanh dương sẽ biến mất khỏi My style.

Overriding inheritance (Ghi đè kế thừa)

Với My style kế thừa xanh dương như giá trị của textColor từ parent, Default style, có thể ghi đè thừa kế này bằng cách tùy chỉnh giá trị bên trong chính My style.

Nếu chúng ta chỉnh sửa giá trị của textColor trong My style và đặt nó thành đỏ, thì giá trị xanh dương sẽ không còn được kế thừa từ Default style, bởi vì My style có giá trị tùy chỉnh của riêng nó, ghi đè giá trị được kế thừa.

Inheritance summary (Tóm tắt kế thừa)

Khả năng kế thừa Style của XenForo cho phép bạn xây dựng các bộ sưu tập Style kế thừa từ một Style khác, vì vậy bạn chỉ cần thực hiện các thay đổi nhỏ trong các Style con, kế thừa các tùy chỉnh từ các Style cha mẹ của chúng.

Hãy xem xét cây Style sau đây, trong đó tên của mỗi Style mô tả một tùy chỉnh được tạo cho Style đó.

• (1) Default style
  • (2) Custom header
    • (3) Big footer
      • (5) Red background
      • (6) Blue background
    • (4) Small text
      • (7) Red background
      • (8) Blue background

Trong ví dụ này, (2) Custom header là một Style tùy chỉnh giao diện header của trang chính để Style phù hợp với phần còn lại của trang web.

Cả (3) Big footer và (4) Small text kế thừa tiêu đề tùy chỉnh này từ Style gốc của chúng. Mỗi Style có hai Style con, tùy chỉnh màu nền thành màu đỏ hoặc xanh dương. Tất cả các Style này kế thừa tiêu đề tùy chỉnh từ Style tùy chỉnh cấp cao nhất.

Style properties

Style properties cho phép administrator điều chỉnh nhanh chóng và dễ dàng những thứ như màu sắc, kích thước và phông chữ cho Style của họ.

Các giá trị cho tất cả các thuộc tính trong một Style được kế thừa từ (các) Style gốc, trừ khi chúng được tùy chỉnh cụ thể trong Style hiện tại.

Tất cả các thuộc tính được sắp xếp thành các nhóm logic trên trang quản lý Style properties. Nhấp vào tên nhóm sẽ mở trình soạn thảo style properties của nhóm đó.

Style properties có thể là bất kỳ loại thuộc tính nào, tùy thuộc vào dữ liệu mà chúng được thiết kế để kiểm soát.

Một số thuộc tính được thiết kế để giữ một giá trị duy nhất, bao gồm các loại sau:

• Colors (Màu sắc)
• Text values (Giá trị văn bản)
• Các số có đơn vị (như 10px)
• Các số không có đơn vị
• Chuyển đổi bật/tắt
• Tùy chọn nhiều lựa chọn

Các thuộc tính khác được thiết kế để chứa một tập hợp các giá trị được nhóm lại với nhau để xác định các quy tắc tạo kiểu cho các phần tử giao diện cụ thể. Những loại thuộc tính CSS có thể bao gồm các giá trị cho bất kỳ mục sau đây:

• Màu văn bản, kích thước, phông chữ và kiểu dáng
• Kiểu nền
• Kích thước, kiểu, màu và bo viền
• Padding và margin
• Quy tắc Extra CSS

Colors (Màu sắc)

Hãy xem xét một nhóm thuộc tính đơn giản, có thể xem được trong nhóm Color palette trong trình quản lý style property.

Ở đây, chúng tôi có một số màu được xác định, được sử dụng để xác định bảng màu hoàn chỉnh được XenForo sử dụng để xây dựng giao diện. Thay đổi bất kỳ màu nào trong số những màu này sẽ thay thế tất cả các trường hợp của màu đó trong toàn bộ hệ thống.

Ngoài ra, có một công tắc để đặt loại style là Light (Sáng) hoặc Dark (Tối). Công tắc này được sử dụng để xác định cách màu được sửa đổi khi hệ thống muốn trộn, tăng cường hoặc giảm màu. Ví dụ: nếu loại style được đặt thành Light thì hệ thống sẽ tăng cường màu sắc, màu sắc sẽ bị tối, trong khi đó thì màu sắc sẽ được làm sáng nếu loại style được đặt thành Dark.

Các màu sắc được thiết lập trong bảng màu được tham chiếu trong toàn bộ hệ thống XenForo, quan trọng nhất trong nhóm thuộc tính thứ hai trong trình quản lý style property, Basic colors.

Trong nhóm Basic colors, màu sắc từ Color palette được gán theo vai trò, chẳng hạn như Text color và Content background color. Style properties được tham chiếu bằng tiền tố @xf- theo sau là ID duy nhất của style property được tham chiếu, do đó, để tham chiếu style property Neutral 3 từ Color palette, có ID duy nhất là paletteNeutral3, chúng tôi đề cập đến @xf-paletteNeutral3. Bạn có thể thấy điều đó trong Default style, style property Text color (textColor) sử dụng giá trị từ thuộc tính này.

More advanced properties (Nhiều thuộc tính nâng cao hơn)

Từ trình quản lý style property, hãy mở nhóm Header and navigation.

Ở đây, bạn sẽ tìm thấy các style properties kiểm soát sự xuất hiện của đầu tất cả các trang XenForo của bạn, bao gồm header và public navigation.

Một số thuộc tính ở đây là các thuộc tính giá trị đơn, chẳng hạn như Header adjustment color, xác định màu cho nền của hộp thư đến và vùng cảnh báo trong header.

Hơn nữa xuống trang, bạn sẽ tìm thấy một số thuộc tính nâng cao, được sắp xếp thành các nhóm logic.

Mở nhóm Header/logo row, bạn sẽ tìm thấy một tập hợp các thuộc tính được sử dụng để tạo kiểu cho phần chính của header. Trong Default style, chúng tôi chỉ sử dụng hai giá trị ở đây, cụ thể là màu cho bất kỳ văn bản nào trong header, không được đặt rõ ràng và sẽ kế thừa từ nhóm Color 2 từ bảng màu, hay @xf-paletteColor2, và màu nền chính mà chúng tôi thiết lập để sử dụng là Color 5 từ bảng màu, hay @xf-paletteColor5.

Nhấp vào con chip màu bên cạnh tên màu được sử dụng sẽ mở ra một cửa sổ bật lên, trong đó bạn có thể chọn một màu khác với dải màu cơ bản hoặc bảng màu hoặc bạn có thể sử dụng Picker để chọn màu hoàn toàn mới. Khi bạn đã chọn màu bạn muốn, hãy nhấp vào nút Update, và điều khiển sẽ được cập nhật. Nhấn nút Save và bạn sẽ thấy thay đổi bạn đã thực hiện khi bạn tải trang tiếp theo trên khu vực công khai của cài đặt XenForo của bạn.

Bằng cách xây dựng một tập hợp các style properties tùy chỉnh theo cách này, bạn có thể thay đổi đáng kể sự xuất hiện của trang XenForo của bạn.

Template

Kết quả cuối cùng của tất cả các trang XenForo được điều khiển bởi Template. Template chứa HTML hay CSS/LESS, cùng với các cải tiến ngôn ngữ đặc biệt cho XenForo được gọi là template syntax (cú pháp template), cho phép dữ liệu được thao tác trực tiếp trong các template thay vì phải viết code PHP để thực hiện công việc.

Template chứa các quy tắc tạo kiểu CSS/LESS có phần mở rộng tập tin là .less hay .css và không chứa HTML. Chúng hoạt động như các thùng chứa cho các quy tắc bao gồm style properties, và xác định cách hiển thị HTML trong các template còn lại. Giá trị của style properties trong template LESS/CSS được gọi bằng cách sử dụng hệ thống @xf-stylePropertyName.

Các template HTML chứa đánh dấu trình bày dữ liệu XenForo của bạn với thế giới và có thể chứa các biến PHP {$variableName}, thẻ XenForo đặc biệt <xf:tagname ...> và XenForo template chức năng {{ functionName($arg1, $arg2, ...) }}.

Tất cả các template có thể được tùy chỉnh bằng cách sử dụng trình chỉnh sửa template, nhưng bạn nên lưu ý rằng các chỉnh sửa bất cẩn có thể phá vỡ chức năng trang web quan trọng nếu bạn không biết mình đang làm gì.

Template inheritance (Template kế thừa)

Như với style properties, template là thừa hưởng từ style gốc trừ khi chúng đã được tùy chỉnh theo style hiện tại.

Nâng cấp với các tùy chỉnh template

Khi bạn tùy chỉnh template, các thay đổi sẽ được lưu và sẽ không bị ghi đè trừ khi bạn chỉ dẫn cụ thể hệ thống làm như vậy.

Mặc dù điều này có thể ngăn các thay đổi không mong muốn, nhưng cũng có nghĩa là các template tùy chỉnh của bạn có thể trở nên lỗi thời khi đến lúc nâng cấp XenForo lên phiên bản mới hơn, nếu phiên bản mới hơn chứa phiên bản cập nhật của template bạn đã tùy chỉnh.

Có hai công cụ có sẵn để giúp bạn tránh điều này.

Outdated templates (Template lỗi thời)

Sau khi bạn chạy nâng cấp XenForo, hệ thống sẽ cảnh báo bạn về bất kỳ template nào bạn đã tùy chỉnh đã trở nên lỗi thời.

Danh sách các template này sẽ được hiển thị cùng với tùy chọn Merge, chức năng này sẽ so sánh template tùy chỉnh của bạn với phiên bản mới và cố hợp nhất các tùy chỉnh của bạn vào phiên bản mới được cập nhật của template.

Tuy nhiên, nếu bạn đã thực hiện các thay đổi tùy chỉnh cho một phần cũng đã thay đổi trong phiên bản template mới, điều này sẽ tạo ra xung đột mà bạn sẽ phải giải quyết thủ công. Bạn cần chọn phiên bản của phần xung đột để sử dụng (hoặc cả hai phiên bản).

Khi bạn chọn liên kết Merge cho một template được liệt kê là đã lỗi thời, bạn sẽ thấy phiên bản cuối cùng, được hợp nhất của template sẽ là gì. Các mục đã hợp nhất thành công sẽ được đánh dấu bằng màu xanh dương. Các phần xung đột sẽ được đánh dấu bằng màu vàng với các nút để giúp bạn giải quyết xung đột. Khi bạn đã giải quyết bất kỳ xung đột nào, bạn có thể nhấp vào văn bản để chỉnh sửa phù hợp với nhu cầu chính xác của bạn.

Template modifications (Sửa đổi Template)

Để thay thế các template tùy chỉnh trực tiếp, XenForo cũng cung cấp một hệ thống gọi là Template modifications, hoạt động bằng cách cho phép bạn chọn template, chỉ định một phần của template để tìm và cách chèn code template mới để sửa đổi phần được chỉ định.

Trong trình quản lý template modification, bạn sẽ tìm thấy một danh sách tất cả template modifications hiện đang được sử dụng, được nhóm theo add-on đã xác định chúng. Bạn có thể nhanh chóng tắt và bật lại bất kỳ template modification nào bằng cách sử dụng toggle gadget trong danh sách.

Nhấp vào một trong các sửa đổi này hoặc nhấp vào nút Add template modification, sẽ tải trình soạn thảo template modification.

Trong trình chỉnh sửa, các điều khiển có sẵn, cùng với tên của template được sửa đổi, như sau:

Modification key (Khóa sửa đổi)

Sử dụng điều này để xác định số nhận dạng duy nhất cho sửa đổi của bạn. Chữ cái, số và dấu gạch dưới được cho phép.

Description (Mô tả)

Nên chứa mô tả ngắn về chức năng sửa đổi của bạn, như Thêm một tab mới vào trang hồ sơ thành viên.

Template contents (Nội dung Template)

Hộp này chỉ mang tính tham khảo và chứa văn bản đầy đủ của template cần sửa đổi.

Search type (Loại tìm kiếm)

Trong nhiều trường hợp, bạn sẽ muốn sử dụng Simple replacement (Thay thế đơn giản) ở đây, theo đó hệ thống sẽ tìm kiếm một số văn bản và sau đó thay thế toàn bộ văn bản.

Bạn cũng có thể sử dụng cụm từ thông dụng nếu bạn muốn thực hiện kết hợp phức tạp hơn hoặc nếu bạn muốn duy trì một số hoặc tất cả văn bản phù hợp trong sửa đổi của mình.

Người dùng nâng cao có thể chỉ định một callback PHP để có toàn quyền kiểm soát cách hoạt động của sửa đổi.

Find (Tìm)

Nhập văn bản ở đây mà sửa đổi sẽ thay thế, loại văn bản bạn chỉ định phải khớp với các yêu cầu của Search type.

Nhiều template XenForo đặc biệt bao gồm <!--[XF:name_goes_here]--> các trình giữ chỗ ở các vị trí hữu ích, cho phép bạn nhanh chóng và dễ dàng nhập code token Find (Tìm) văn bản cho sửa đổi của bạn.

Replace (Thay thế)

Ở đây, bạn nên nhập code HTML sẽ thay thế văn bản bạn đã chỉ định trong Find (Tìm).

Vì HTML này sẽ được chèn vào template, bạn có thể sử dụng đầy đủ template syntax trong code của bạn.

Nếu bạn muốn bao gồm văn bản được tìm thấy cùng với HTML mới của mình, bạn có thể bao gồm bằng cách sử dụng token $0 trong HTML của bạn.

Nếu văn bản Find (Tìm) của bạn là một biểu thức chính quy, bất kỳ kết hợp bổ sung nào từ biểu thức đó có thể được chèn bằng cách sử dụng $1, $2 v.v...

Execution order (Lệnh thực thi)

Một số template modifications có thể đính kèm vào cùng một template. Các giá trị Execution order được sử dụng để xác định thứ tự các sửa đổi sẽ được áp dụng. Sửa đổi với số thứ tự thực thi thấp hơn sẽ chạy trước những số có giá trị cao hơn.