Tutorial 2x Additional language for [code=...] bbcode - Ngôn ngữ bổ sung cho bbcode [code=...] của XenForo 2

[PVS]

Additional language for code=... bbcode - Ngôn ngữ bổ sung cho bbcode code=... của XenForo 2

Kể từ phiên bản xenForo 2.0.1 bạn có thể thêm hỗ trợ ngôn ngữ bổ sung trên diễn đàn của mình. Không có cách nào để làm như vậy trước đây.

Trong ví dụ này, mình sẽ thêm hỗ trợ LaTeX.

1. Tải PrismJS components
XenForo sử dụng thư viện PrismJS làm nổi bật code trong các block code=.... Không phải tất cả ngôn ngữ được bao gồm trong PrismJS mà đi với xenForo theo mặc định. Vì vậy, bạn sẽ phải thêm ngôn ngữ bổ sung trực tiếp.

Chuyển đến trang PrismJS components. Có rất nhiều tệp. Bạn cần phải tìm tập tin với tên của ngôn ngữ mà bạn muốn hỗ trợ trên diễn đàn của bạn. Trong ví dụ này chúng ta cần tải prism-latex.min.js. Lưu ý rằng có hai tệp với tên gần như nhau trên trang đó:

• prism-latex.js
• prism-latex.min.js

Chúng ta cần tải xuống phiên bản .min của tệp này. Đây là phiên bản nhỏ gọn, nó được nén và sẽ tải nhanh hơn.

2. Định vị các tệp tin đã tải xuống
Trong thư mục gốc của diễn đàn bạn hãy vào thư mục js và tạo một thư mục prism_additional.

Di chuyển tệp tin đã tải xuống (prism-latex.min.js) sang thư mục đã tạo.

3. Đăng ký thêm ngôn ngữ trong xenForo
Đến Admin CP -> Settings -> Options và chọn trang option "Messages". (admin.php?options/groups/messageOptions/)

Thêm tên của ngôn ngữ được thêm vào danh sách "Allowed code BB code block languages" (Trong ví dụ của bài viết này là latex).

Bây giờ vào template prism_macros và thêm code này (đừng quên thay latex với tên ngôn ngữ của bạn):

<xf:js src="prism_additional/prism-latex.min.js" />

Vào ngay sau:

<xf:js prod="xf/code_block-compiled.js" dev="vendor/prism/prism.min.js, xf/code_block.js" />

Đoạn code cuối cùng sẽ giống như sau:

<xf:macro name="setup">
    <xf:css src="bb_code.less" />
    <xf:js prod="xf/code_block-compiled.js" dev="vendor/prism/prism.min.js, xf/code_block.js" />
    <xf:js src="prism_additional/prism-latex.min.js" />
</xf:macro>

Bây giờ đến Appearence -> Phrases và thêm phrase mới có tên là code_language.latex. Tại "Phrase text" gõ tên của ngôn ngữ (Trong ví dụ này "LaTeX").

Đó là tất cả!

Bạn có thể chèn code block với code LaTeX và chúng sẽ được đánh dấu chính xác:

​

Thêm ngôn ngữ vào "Common languages"
Nếu bạn muốn thêm ngôn ngữ tùy chỉnh vào tùy chọn nhóm "Common languages", hãy đến template editor_dialog_code và tìm đoạn code sau:

<xf:optgroup label="{{ phrase('common_languages') }}">
    <xf:foreach loop="$languages" key="$key" value="$language">
        <xf:if is="$language.common">
            <xf:option value="{$key}">{$language.phrase}</xf:option>
        </xf:if>
    </xf:foreach>
</xf:optgroup>

Dán tùy chọn mới <xfption value="latex">{{ phrase('code_language.latex') }}</xfption> vào giữa <xfptgroup... và <xf:foreach... dòng code sẽ giống như sau:

<xf:optgroup label="{{ phrase('common_languages') }}">

    <xf:option value="latex">{{ phrase('code_language.latex') }}</xf:option>

    <xf:foreach loop="$languages" key="$key" value="$language">
        <xf:if is="$language.common">
            <xf:option value="{$key}">{$language.phrase}</xf:option>
        </xf:if>
    </xf:foreach>
</xf:optgroup>

Bây giờ bạn có thể chọn thêm ngôn ngữ bổ sung từ tùy chọn nhóm "Common languages".

​

Thiết lập tùy chọn ngôn ngữ mặc định khi thêm code:
XenForo chọn tùy chọn "General code" theo mặc định. Bạn muốn thay đổi hành vi này và đặt ngôn ngữ khác làm tùy chọn mặc định thì có thể làm như sau.

Đến template editor_dialog_code.

Nếu bạn thêm ngôn ngữ bổ sung vào tùy chọn nhóm "Common languages", hãy thêm thuộc tính selected="true" vào tùy chọn ngôn ngữ bổ sung:

<xf:option value="latex" selected="true">{{ phrase('code_language.latex') }}</xf:option>

Nếu không có trực tiếp <xfption với tên ngôn ngữ cần thiết trong template, bạn sẽ phải sửa đổi <xf:foreach... một chút. Thay thế đoạn code này:

<xf:optgroup label="{{ phrase('other_languages') }}">
    <xf:foreach loop="$languages" key="$key" value="$language">
        <xf:option value="{$key}">{$language.phrase}</xf:option>
    </xf:foreach>
</xf:optgroup>

Bằng:

<xf:optgroup label="{{ phrase('other_languages') }}">
    <xf:foreach loop="$languages" key="$key" value="$language">
        <xf:if is="$key == 'latex'">
            <xf:option value="latex" selected="true">{$language.phrase}</xf:option>
            <xf:else />
            <xf:option value="{$key}">{$language.phrase}</xf:option>
        </xf:if>
    </xf:foreach>
</xf:optgroup>

Đừng quên thay latex bằng tên ngôn ngữ của bạn.

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

Nguồn: xenforo.com​