Addon 2x Iconify integration - Tích hợp Iconify vào XenForo 2

[PVS]

Iconify integration - Tích hợp Iconify vào XenForo 2 0.0.3

Add-on này dành cho các developer và coder style.

Quan trọng: Add-on này chưa sẵn sàng để được sử dụng trong production. Đây là bản phát hành sớm có thể có chứa lỗi. Nó được phát triển cho XenForo 2.1, mặc dù nó cũng hoạt động với XenForo 2.0.

Add-on thêm hỗ trợ cho Iconify, cung cấp hơn 30.000 biểu tượng để lựa chọn. Các biểu tượng có thể được sử dụng cho các biểu tượng node, điều hướng hoặc bất kỳ add-on. Tác giả không còn bị giới hạn trong việc sử dụng các biểu tượng FontAwesome.

Cách dùng cơ bản

Để thêm biểu tượng vào template, không cần phải làm gì cả. Tất cả bạn phải làm là viết code placeholder Iconify như thế này:

<iconify-icon data-icon="mdi:home"></iconify-icon>

Hoặc

<span class="iconify" data-icon="mdi:home"></span>

Xem tài liệu Iconify.

Bạn có thể thay đổi kích thước biểu tượng bằng cách thay đổi kích thước phông chữ hoặc thêm thuộc tính data-width và data-height. Bạn có thể thay đổi màu biểu tượng bằng cách thay đổi màu chữ.

Hướng dẫn: cách sử dụng kích thước tùy chỉnh, cách chuyển đổi biểu tượng.

Sử dụng nâng cao

Tuy nhiên, tính năng chính của add-on này không phải là cách sử dụng cơ bản. Code cơ bản có thể đạt được bằng cách thêm thẻ script Iconify mà không cần add-on này.

Những gì add-on này làm là có thể chọn các biểu tượng bên trong XenForo.

Biểu tượng style property và option

Một trong những tính năng là biểu tượng style property. Khi tạo style property mới có loại thuộc tính mới: icon.

​

Bạn có thể chọn biểu tượng, chọn màu cho các biểu tượng không màu (hoặc bạn có thể tắt trình chọn màu bằng cách bỏ chọn tùy chọn "Hiển thị trình chọn màu"). Để tạo biểu tượng style property, tất cả những gì bạn phải làm là chọn "Icon" trong lựa chọn "Type" của style property.

Biểu tượng style property sẽ trông như thế này trong Admin CP:

​

Có một loại tùy chọn mới: Icon. Nó là khá giống với style property type.

Để tạo tùy chọn Icon, hãy tạo tùy chọn mới, chọn "Icon" từ danh sách định dạng tùy chọn:

​

Sau đó chọn biểu tượng mặc định và đặt tùy chọn và tạo tùy chọn mới.

Tùy chọn Icon trong danh sách tùy chọn trông giống như biểu tượng style property trong danh sách style property:

​

Cách dùng biểu tượng trong template:

Sau khi bạn đã tạo style property hoặc option mới, bạn muốn sử dụng nó trong một số template. Quan trọng: các biểu tượng không có nghĩa là cho stylesheet, chúng chỉ nên được sử dụng trong các template HTML.

Để thêm biểu tượng, bạn cần sử dụng thẻ template "icon" hoặc "inlineicon" của XenForo:

<xf:icon value="{$xf.options.text_test_option}" />
<xf:inlineicon value="{$xf.options.text_test_option}" />
<xf:icon value="{{ property('iconify_required_prop') }}" />
<xf:inlineicon value="{{ property('iconify_required_prop') }}" /><br />

2 dòng đầu tiên hiển thị cách sử dụng tùy chọn, 2 dòng cuối hiển thị cách sử dụng style property.

Sự khác biệt giữa "icon" và "inlineicon" là gì? Thẻ "icon" hoạt động giống như hình ảnh, vì vậy nó được dùng để trang trí. "inlineicon" hoạt động giống như văn bản, vì vậy nó dự định sẽ được sử dụng bên trong văn bản, như các smilie hoặc reaction tùy chỉnh.

Xem hướng dẫn giải thích sự khác biệt giữa chế độ inline và block.

Tạo các biến tùy chỉnh

Điều gì nếu bạn muốn tạo biến tùy chỉnh thay vì option hoặc style property? Bạn cũng có thể làm điều đó mà.

Add-on này thêm 2 thẻ nữa:

xf:iconbox
xf:iconboxrow

Các thẻ này gần giống với "textbox" và "textboxrow" của XenForo.

Giá trị là chuỗi JSON.

Người tạo add-on sẽ chỉnh sửa trang này để thêm mô tả cho iconbox và iconboxrow sau.

Chúc các bạn thành công.

Nguồn: xenforo.com​

 

[tuyettrinh]

khó hiểu hen

 

[PVS]

Update phiên bản 0.0.3