BB code

BB code là một hệ thống đánh dấu được sử dụng rộng rãi cho phép văn bản được định dạng với các phông chữ, màu sắc và kích cỡ khác nhau, cùng với các khả năng khác như in đậm hoặc in nghiêng văn bản. Nó dựa trên đánh dấu HTML, vì vậy ví dụ BB code để xác định văn bản in đậm là [b], và bạn sẽ sử dụng nó như thế này để in đậm từ bold:

This message contains some [b]bold[/b] text.

Nó cũng có thể được sử dụng cho các cấu trúc phức tạp hơn, như trích dẫn các thông báo của người dùng khác, thêm các spoiler hoặc các block code. Trong những trường hợp này, BB code có thể được cung cấp một tùy chọn, như thế này:

This message contains some text in [font="Helvetica"]a font called Helvetica[/font]...

Tùy chỉnh BB code

Ngoài các BB code chuẩn đi kèm với XenForo, bạn cũng có thể tự định nghĩa code của riêng mình.

Trình quản lý BB code tùy chỉnh liệt kê tất cả các BB code tùy chỉnh có sẵn trên diễn đàn của bạn và cho phép bạn tạo riêng của mình. Bạn cũng có thể xóa hoặc tạm thời vô hiệu hóa bất kỳ BB code tùy chỉnh nào bằng cách sử dụng công cụ bật/tắt và xóa ở đây.

Bạn có thể nhập và xuất nhiều BB code tùy chỉnh bằng cách sử dụng các điều khiển ở đầu trang quản lý.

Tuỳ chỉnh trình soạn thảo BB code

Nhấp vào tiêu đề của BB code tùy chỉnh sẽ đưa bạn đến trình chỉnh sửa cho BB code đó, trong đó bạn có thể trình bày chính xác cách bạn muốn BB code của mình hoạt động.

Trong ví dụ này, chúng tôi sẽ tạo một BB code để vẽ một hộp xung quanh văn bản được gắn thẻ và cho phép người dùng chỉ định màu cho hộp.

Chúng tôi sẽ gọi BB code là 'box' và nhằm mục đích có thể chuyển đổi văn bản này:

Input: [BOX="red"]Here is some text in a red box[/BOX]

Chuyển sang HTML sẽ có dạng:

Output: <div style="background-color: red">Here is some text in a red box</div>

BB code tag

Nhập từ khóa sẽ kích hoạt BB code của bạn ở đây. Trong ví dụ của chúng tôi, đây là 'BOX'.

Title

Chúng tôi sẽ gọi điều này 'Colored box'

Replacement mode (Chế độ thay thế)

Ví dụ của chúng tôi, chúng tôi sẽ sử dụng simple replacement.

Một callback PHP có thể được sử dụng cho các thay thế phức tạp hơn liên quan đến việc chạy code PHP để tìm ra output HTML. Đây là tùy chọn của nhà phát triển. Nếu điều này được sử dụng, callback phải được chỉ định bằng cách sử dụng trường Class và Method được cung cấp bên dưới.

Supports option parameter (Hỗ trợ tham số tùy chọn)

Vì chúng tôi cần người dùng xác định màu, chúng tôi phải sử dụng Yes ở đây.

Nếu BB code mà chúng tôi đã xác định không cần hoặc sẽ không hỗ trợ tùy chọn, chúng tôi sẽ đặt điều này thành Optional hoặc No.

HTML replacement (HTML thay thế)

Ở đây, nhập code HTML sẽ thay thế BB code của chúng ta khi nó được sử dụng. Chúng tôi sẽ cần phải sử dụng các thẻ đặc biệt {option} và {text} để đại diện cho giá trị của tùy chọn và nội dung của văn bản tương ứng.

HTML thay thế của chúng tôi sẽ như sau:

<div style="background-color: {option}">{text}</div>

Editor icon (Biểu tượng trình soạn thảo)

Bạn có thể muốn người dùng của mình có thể chỉ cần nhấp vào nút trong trình soạn thảo văn bản để chèn BB code của bạn. Nếu có, hãy chỉ định biểu tượng Font Awesome hoặc hình ảnh để sử dụng cho nút của bạn, nếu không hãy để nguyên dạng None và BB code sẽ chỉ khả dụng khi được nhập trực tiếp.

Ví dụ về cách sử dụng và output

Sử dụng các hộp này để cung cấp các ví dụ về thứ gì đó có thể sử dụng BB code tùy chỉnh của bạn và ví dụ đó sẽ xuất ra. Bạn có thể sử dụng các ví dụ Input/Output được cung cấp ở trên.

Cho phép BB code này trong chữ ký

Một số BB code lớn và đáng ghét, không phù hợp để sử dụng trong chữ ký của người dùng. Bạn có thể ngăn không cho bất kỳ BB code tùy chỉnh nào được sử dụng trong chữ ký bằng cách bỏ chọn hộp này.

Advanced options (Tùy chọn nâng cao)

Trong phần tùy chọn nâng cao, bạn sẽ tìm thấy các điều khiển để cho phép bạn tinh chỉnh thêm BB code tùy chỉnh của mình.

Option match regular expression (Tùy chọn đối sánh cụm từ thông dụng)

Cho phép bạn xác định cụm từ thông dụng để giới hạn các giá trị được chấp nhận cho giá trị option. Đối với ví dụ của chúng tôi, chúng tôi có thể sử dụng cụm từ thông dụng chỉ cho phép các ký tự chữ và số, để chỉ có thể sử dụng các màu được đặt tên.

Within this BB code (Trong BB code này)

Các tùy chọn ở đây cho phép bạn ngăn chặn phân tích cú pháp smilie trong BB code của bạn, để ngăn chặn ngắt dòng được chuyển đổi, để vô hiệu hóa tự động phân tích cú pháp siêu liên kết và dừng phân tích cú pháp của bất kỳ BB code nào khác trong thành phần văn bản của BB code này.

Trim line breaks after (Cắt ngắt dòng sau)

Bạn có thể sử dụng tùy chọn này để ngăn khoảng cách còn lại sau khi BB code của bạn đã được sử dụng. Với một giá trị 0, không cho phép ngắt dòng bổ sung, vì vậy output HTML của bạn nên tính đến điều này.

(Thay thế văn bản và email HTML)

Có thể bạn muốn một output khác khi định dạng cuối cùng là email HTML hoặc văn bản thuần túy. Sử dụng các hộp này để xác định các output thay thế, sử dụng {option} và {text} như trước.

BB code media site

BB code media site là phương tiện liên kết đến nội dung được lưu trữ trên các trang web bên ngoài, chẳng hạn như YouTube hoặc Instagram có thể được chuyển đổi thành phương tiện được nhúng trong bài viết của người dùng một cách tự động.

XenForo đi kèm với một bộ sưu tập các BB code media site được xác định trước cho các nguồn phổ biến bao gồm Facebook, Twitter, Flickr và Spotify.

Các liên kết được đăng trong tin nhắn của người dùng sẽ tự động được xử lý và chuyển thành phương tiện được nhúng nếu tùy chọn Auto-embed media links được bật dưới phần Media embedding trong Hệ thống tùy chọn của XenForo.

Trình quản lý BB code media site

Trong trình quản lý BB code media site, bạn có thể xem tất cả các trang web phương tiện có sẵn và tạm thời vô hiệu hóa từng trang web bằng một nhấp chuột duy nhất trên toggle gadget. Bạn cũng có thể xóa trang web hoặc thêm trang web mới.

Nhấp vào tiêu đề của một BB code media site sẽ tải trình soạn thảo cho trang web đó.

Trình soạn thảo BB code media site

BB code media site làm việc bằng cách trích xuất dữ liệu từ URL do người dùng đăng và dịch thành một đoạn code HTML có thể được sử dụng để nhúng phương tiện được tham chiếu vào tin nhắn. Trong một số trường hợp, đây là trường hợp đơn giản khi lấy một phần của URL và chèn nó vào HTML và trong các trường hợp khác, các bước tiếp theo được yêu cầu để chuyển đổi URL thành HTML có thể sử dụng.

Đây có thể là một quá trình biên dịch, nhưng với mục đích của tài liệu này, chúng ta sẽ xem xét một ví dụ tương đối đơn giản: Pinterest, điều này đơn giản vì URL Pinterest chứa tất cả thông tin chúng tôi cần để tạo HTML được nhúng.

Match URLs (URL phù hợp)

Trong hộp này, chúng tôi xác định tất cả các URL mà chúng tôi muốn chuyển đổi thành HTML được nhúng. Mỗi URL đi trên một dòng riêng biệt và bao gồm một {id} token, đại diện cho dữ liệu mà chúng tôi quan tâm.

Trong trường hợp của Pinterest, dữ liệu luôn là một số, vì vậy chúng tôi mở rộng {id} thành {id:digits}, sẽ buộc mẫu chỉ khớp với các số nguyên. Phần mở rộng có sẵn khác là {id:alphanum}, chỉ giới hạn đối sánh với số và chữ cái. Bạn có thể sử dụng * dưới dạng ký tự đại diện trong URL để khớp với bất kỳ thứ gì.

Dưới Advanced options (Tùy chọn nâng cao) là cài đặt cho phép các URL phù hợp này là cụm từ thông dụng. Nếu bạn sử dụng cụm từ thông dụng, mỗi dòng phải xác định dấu phân tách và chuyển đổi.

Embed template (Nhúng template)

Hộp này được sử dụng để xác định HTML sẽ xuất ra nếu tìm thấy một URL phù hợp. Bạn có thể sử dụng bất kỳ HTML nào, nhưng bạn nên wrap output của mình vào <div class="bbMediaWrapper"><div class="bbMediaWrapper-inner"> code được sử dụng bởi hầu hết các trang web XenForo mặc định, vì điều này xử lý kiểu dáng để phù hợp với phần còn lại của trang web,

Trong HTML của bạn, bạn có thể sử dụng {$id} để tham khảo giá trị {id} được tìm nạp bởi Match URL. Bạn cũng có thể sử dụng {$idDigits} hoặc {$idAlphanum} nếu bạn đã sử dụng các tiện ích đó trong Match URL.

Trong trường hợp của Pinterest, phần quan trọng là thuộc tính href, trong đó chúng tôi xác định nguồn của liên kết https://www.pinterest.com/pin/{$idDigits}, tận dụng dữ liệu do Match URL.

oEmbed

oEmbed là một định dạng mở cho phép các trang web trả về thông tin về URL, bao gồm cả HTML nhúng. Trong một số trường hợp, khi HTML nhúng không thể được xây dựng trực tiếp từ URL, có thể sử dụng oEmbed để truy vấn trang web cho dữ liệu oEmbed và nhận HTML theo cách đó.

Để sử dụng oEmbed, bạn phải biết điểm cuối API oEmbed cho trang web bạn đang truy vấn và định dạng URL mà API của họ mong đợi.

Ví dụ: điểm cuối API oEmbed của Flickr ở tại https://www.flickr.com/services/oembed và lược đồ URL của họ là https://flic.kr/p/{$id}, {$id} đại diện cho dữ liệu được khớp với Match URL.

Cuối cùng, bạn phải quyết định có nên thực thi bất kỳ code Javascript nào được trả về từ trang web oEmbed cùng với HTML nhúng hay không. Nếu bạn quyết định không cho phép Javascript ở nước ngoài chạy, bạn phải xử lý bất kỳ khởi tạo bắt buộc nào cho HTML được nhúng với các thường trình Javascript của riêng bạn.

Thông tin thêm về oEmbed có thể được tìm thấy tại oEmbed.com, bao gồm danh sách các trang web được cập nhật thường xuyên sử dụng oEmbed.

Advanced options (Tùy chọn nâng cao)

Đôi khi, thậm chí cần xử lý thêm để có được HTML nhúng khả thi. Trong những trường hợp này, một callback PHP có sẵn cho cả hai mục đích kết hợp và nhúng.

Nó nằm ngoài phạm vi của tài liệu này để đi vào chính xác cách thức hoạt động, nhưng các nhà phát triển sẽ có thể kiểm tra code cho các trang web trong cài đặt XenForo mặc định, sử dụng kết hợp và nhúng callback.