Tạo BB Codes Tùy Chỉnh trong XenForo 2.3: Nâng Cấp Trình Soạn Thảo Của Bạn
Mở khóa sức mạnh của trình soạn thảo XenForo bằng cách tạo ra các thẻ định dạng của riêng bạn. Bài viết này sẽ hướng dẫn bạn từ những bước cơ bản đến các ví dụ nâng cao.
Sau khi nhấp vào button sẽ hiển thị ra bbcode vừa tạo, bạn cần điền thêm url sau dấu
Kết quả:
Chúc các bạn thành công.
Mở khóa sức mạnh của trình soạn thảo XenForo bằng cách tạo ra các thẻ định dạng của riêng bạn. Bài viết này sẽ hướng dẫn bạn từ những bước cơ bản đến các ví dụ nâng cao.
Giới thiệu
Trình soạn thảo của XenForo rất mạnh mẽ với các thẻ BB Code mặc định như[B]
, [I]
, [IMG]
... Nhưng bạn đã bao giờ muốn có một nút bấm để nhanh chóng tạo ra một khung thông báo đẹp mắt, một nút kêu gọi hành động nổi bật, hay một dạng spoiler độc đáo mà không cần phải viết lại mã HTML phức tạp mỗi lần chưa?Đây chính là lúc tính năng Tạo BB Codes Tùy Chỉnh (Custom BB Codes) phát huy sức mạnh. Tính năng này cho phép bạn, với một chút kiến thức HTML/CSS cơ bản, có thể tạo ra các thẻ định dạng của riêng mình. Lợi ích của nó rất lớn:- Tăng tính nhất quán: Đảm bảo các yếu tố đặc biệt (như khung thông tin, cảnh báo) luôn có cùng một phong cách trên toàn diễn đàn.
- Đơn giản hóa cho người dùng: Thay vì yêu cầu thành viên phải dán một đoạn mã HTML phức tạp, bạn chỉ cần hướng dẫn họ dùng một thẻ BB Code đơn giản.
- Xây dựng thương hiệu: Tạo ra những yếu tố nội dung độc đáo, mang đậm dấu ấn của cộng đồng bạn.
Phần 1: Tìm Hiểu Giao Diện Tạo BB Code
Để bắt đầu, hãy truy cập vào khu vực quản lý BB Code tạiAdmin Control Panel (ACP) > Content > BB codes > Custom BB codes
. Tại đây, bạn sẽ thấy danh sách các BB Code hiện có và nút `+ Add BB code` để tạo mới.Khi tạo một BB Code mới, bạn sẽ làm việc với các trường chính sau:- BB Code Tag: Tên thẻ của bạn (ví dụ:
infobox
). Đây là thứ bạn sẽ gõ vào trong dấu ngoặc [ ]. - Title: Tên gọi thân thiện sẽ hiển thị trong trình soạn thảo (ví dụ: "Khung thông tin").
- HTML Replacement: Phần quan trọng nhất. Đây là nơi bạn nhập mã HTML sẽ được xuất ra mỗi khi BB Code được sử dụng.
- Example usage & output: Giúp bạn mô tả cách dùng và kết quả cho người dùng.
- Editor icon: Chọn một biểu tượng từ thư viện Font Awesome để hiển thị trên thanh công cụ của trình soạn thảo.
{text}
: Đại diện cho toàn bộ nội dung nằm giữa cặp thẻ BB Code. Ví dụ, trong[tag]Nội dung này[/tag]
,{text}
chính là "Nội dung này".{option}
: Đại diện cho giá trị của tùy chọn trong thẻ BB Code. Ví dụ, trong[tag=giá_trị]...[/tag]
,{option}
chính là "giá_trị".
Phần 2: Thực Hành Tạo 3 BB Code Hữu Ích
2.1. BB Code Đơn Giản: Nút Bấm Kêu Gọi Hành Động (Button)
Mục tiêu: Tạo thẻ[button=URL]Văn bản[/button]
để biến một liên kết thành nút bấm nổi bật.- Nhấn `+ Add BB code`.
- BB Code Tag:
button
- Title:
Nút Bấm (Button)
- Supports option parameter: Chọn Yes.
- HTML Replacement: Dán đoạn mã sau vào:
HTML:<a href="{option}" class="button--cta button" target="_blank" rel="nofollow">{text}</a>
<a>
(liên kết).href="{option}"
sẽ lấy URL từ tùy chọn của thẻ button.class="button--cta button"
là các lớp CSS có sẵn của XenForo để tạo kiểu cho nút bấm, chúng ta không cần viết thêm CSS.{text}
là nội dung chữ của nút. - Example usage:
[button=https://yourdomain.com]Nhấn vào đây[/button]
- Editor icon: Thử tìm và chọn một icon phù hợp, ví dụ
fa-external-link-square
. - Nhấn Save.
- Tiếp theo qua
BB code button manager
để add BB code vừa tạo vào trình soạn thảo
=
và nội dung của nút ở giữa thẻ đóng và thẻ mở như demo sau:2.2. BB Code Trung Bình: Khung Thông Tin (Info Box)
Mục tiêu: Tạo thẻ[infobox]Nội dung[/infobox]
để bọc văn bản trong một khung thông báo đẹp mắt.- Nhấn `+ Add BB code`.
- BB Code Tag:
infobox
- Title:
Khung Thông Tin (Info Box)
- HTML Replacement:
HTML:<div class="customInfobox">{text}</div>
- Nhấn Save.
- Viết CSS để tạo kiểu: BB Code này sẽ chưa có hiệu ứng gì vì class
customInfobox
chưa được định nghĩa. Hãy vàoACP > Appearance > Styles > [Style của bạn] > Templates
, tìm template tên là extra.less và thêm đoạn mã sau vào:
Less:.customInfobox { background-color: #e7f3ff; // Nền xanh nhạt border-left: 5px solid #2196F3; // Viền trái màu xanh đậm padding: 15px; margin: 15px 0; border-radius: 4px; // Fix lỗi khoảng trống thừa bên dưới đoạn văn bản cuối cùng p:last-of-type { margin-bottom: 0; } }
- Nhấn Save template. Giờ đây, mọi thẻ
[infobox]
trên diễn đàn của bạn sẽ có một giao diện rất chuyên nghiệp.
2.3. BB Code Nâng Cao: Khung Trích Dẫn Với Icon (Highlight Box)
Mục tiêu: Tạo thẻ[highlight]Nội dung trích dẫn[/highlight]
để làm nổi bật một đoạn văn bản quan trọng với phong cách độc đáo.- Nhấn `+ Add BB code`.
- BB Code Tag:
highlight
- Title:
Khung Trích Dẫn
- HTML Replacement:
HTML:<div class="customHighlight">{text}</div>
- Editor icon:
fa-quote-left
- Nhấn Save.
- Viết CSS để tạo kiểu: Mở lại template extra.less và thêm đoạn mã CSS nâng cao sau. Nó sử dụng pseudo-element `::before` để chèn một icon trang trí.
-
Less:
.customHighlight { background-color: #fdfaf4; border: 1px solid #f1e4cb; border-left: 5px solid #ffc107; // Viền trái màu vàng hổ phách padding: 15px 20px; margin: 20px 0; border-radius: 5px; font-style: italic; color: #584c33; position: relative; // Cần thiết để định vị icon // Thêm icon trích dẫn mờ &::before { .m-faIcon(@fa-var-quote-left); // Đây là mã của icon fa-quote-left font-weight: 900; font-size: 48px; color: #ffc107; position: absolute; right: 15px; top: 5px; opacity: 0.1; z-index: 0; } // Đảm bảo nội dung chữ luôn nằm trên icon > .bbWrapper { position: relative; z-index: 1; } }
- Nhấn Save template. Giờ bạn đã có một khung trích dẫn rất nghệ thuật.
Lời kết
Việc tạo BB Code tùy chỉnh mở ra một cánh cửa sáng tạo vô tận cho người quản trị XenForo. Chỉ với vài bước đơn giản, bạn đã có thể xây dựng những thành phần nội dung độc đáo, tiện dụng và mang đậm dấu ấn thương hiệu. Đừng ngần ngại bắt đầu với những ý tưởng đơn giản như định dạng một câu trích dẫn hay tạo một khung ghi chú, bạn sẽ thấy trình soạn thảo của mình trở nên mạnh mẽ hơn bao giờ hết.Chúc các bạn thành công.
VNXF.VN
Bài viết liên quan
Được quan tâm
Bài viết mới