Tutorial 2x 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

PVS

Super Moderator
Thành viên BQT
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.

tao-bbcode-tuy-chinh.png
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.
Bài viết này sẽ hướng dẫn bạn từng bước để tạo ra 3 loại BB Code tùy chỉnh cực kỳ hữu ích, từ đơn giản đến nâng cao.

Để bắt đầu, hãy truy cập vào khu vực quản lý BB Code tại Admin 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.
Chúng ta sẽ sử dụng hai "biến" đặc biệt trong phần HTML Replacement:
  • {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ị".

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.
  1. Nhấn `+ Add BB code`.
  2. BB Code Tag: button
  3. Title: Nút Bấm (Button)
  4. Supports option parameter: Chọn Yes.
  5. HTML Replacement: Dán đoạn mã sau vào:
    HTML:
    <a href="{option}" class="button--cta button" target="_blank" rel="nofollow">{text}</a>
    Giải thích: Chúng ta đang tạo một thẻ <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.
  6. Example usage: [button=https://yourdomain.com]Nhấn vào đây[/button]
  7. Editor icon: Thử tìm và chọn một icon phù hợp, ví dụ fa-external-link-square.
  8. Nhấn Save.
  9. Tiếp theo qua BB code button manager để add BB code vừa tạo vào trình soạn thảo
    bbcode-1.png
Bây giờ bạn đã có một nút tạo Button trên trình soạn thảo của mình!

bbcode-2.png

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 = và nội dung của nút ở giữa thẻ đóng và thẻ mở như demo sau:

bbcode-3.png
Kết quả:

bbcode-4.png
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.
  1. Nhấn `+ Add BB code`.
  2. BB Code Tag: infobox
  3. Title: Khung Thông Tin (Info Box)
  4. HTML Replacement:
    HTML:
    <div class="customInfobox">{text}</div>
  5. Nhấn Save.
  6. 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ào ACP > 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;
        }
    }
  7. 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.
bbcode-5.png
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.
  1. Nhấn `+ Add BB code`.
  2. BB Code Tag: highlight
  3. Title: Khung Trích Dẫn
  4. HTML Replacement:
    HTML:
    <div class="customHighlight">{text}</div>
  5. Editor icon: fa-quote-left
  6. Nhấn Save.
  7. 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í.
  8. 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;
        }
    }
  9. Nhấn Save template. Giờ bạn đã có một khung trích dẫn rất nghệ thuật.
bbcode-6.png

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​
 
Back
Top