Addon 2x SVG Template - Template SVG cho XenForo 2 2.4.1

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,827
Được Like
11,118
SVG Template - Template SVG cho XenForo 2 2.4.1

Tùy thuộc vào cấu hình, add-on này đòi hỏi máy chủ web hỗ trợ URL rewrite!

Cho phép hình ảnh SVG (Scalable Vector Graphics) được lưu trữ dưới dạng template. Điều này tạo ra một tập tin svg.php mới trong thư mục gốc XF.

Để tạo một liên kết đến một template SVG (Template phải có .svg ở cuối tên!);
Mã:
{{ getSvgUrl('tempate.svg') }}

Dưới Board information, nếu "Use Full Friendly URLs" (useFriendlyUrls) được thiết lập thì URL được tạo ra là:
Mã:
/data/svg/<style_id>/<langauge_id>/<style_last_modified>/<templateName.svg>

Nếu không thì
Mã:
svg.php?svg=<templateName>&s=<style_id>&l=<langauge_id>&d=<style_last_modified>

Kết xuất sang PNG
Việc hiển thị SVG sang PNG yêu cầu hỗ trợ bên ngoài và tùy thuộc vào hệ điều hành, điều này có thể dẫn đến các hạn chế kỳ lạ hoặc hiển thị kém.

Hỗ trợ php-imagick
Nó không được khuyến khích sử dụng Imagick nếu nó có thể được giúp đỡ!

Ubuntu (sử dụng https://launchpad.net/~ondrej/+archive/ubuntu/php PPA);
Mã:
sudo apt install php7.4-imagick libmagickcore-6.q16-3-extra
sudo systemctl restart php7.4-fpm

Ghi chú; một số bản phân phối yêu cầu cài đặt libmagickcore-6.q16-3-extra để kích hoạt hỗ trợ SVG.

Các phiên bản cũ hơn của Imagick có hỗ trợ SVG kém, do danh tiếng bảo mật kém của Imagick.

Hỗ trợ CLI
Đây là một lối thoát chung để cắm chuyển đổi png tùy ý, sử dụng proc_open trong php.

Định cấu hình Render bằng tùy chọn proc_open với;
Mã:
<CLI-binary> {destFile} {sourceFile}

{sourceFile} là SVG nguồn được viết dưới dạng tệp tạm thời {destFile} là tệp PNG đích dưới dạng tệp tạm thời

Ngoài ra, input/output có thể được thực hiện thông qua pipe

Ghi chú; tên template chỉ là các chuỗi chữ và số, được thực thi bằng cách xác thực trước khi tùy chọn CLI được gọi

Hỗ trợ resvg CLI
Ví dụ sử dụng resvg, cấu hình lệnh CLI với;
Mã:
/usr/local/bin/resvg --quiet {sourceFile} {destFile}

Hệ nhị phân được biên dịch trước
Hệ nhị phân linux x86_64 được biên dịch trước đã có sẵn tại đây. Được biên dịch trên CentOS 7, hoạt động trên Ubuntu 18.04/20.04

Biên dịch
Việc biên dịch có thể liên kết với các phiên bản glibc mới hơn, điều này có thể gây ra các vấn đề về tính di động
Mã:
curl https://sh.rustup.rs -sSf | sh
source $HOME/.cargo/env
cargo install resvg
cp ~/.cargo/bin/resvg /usr/local/bin/resvg
chmod +x /usr/local/bin/resvg

Hỗ trợ Inkscape CLI
Ghi chú; sử dụng snap vì nếu không nó có thể có một phiên bản quá cũ!
Mã:
sudo snap install inkscape

Cấu hình lệnh CLI PIPE với;
Mã:
inkscape --export-type=png -p

Tính năng
Kết xuất có điều kiện SVG sang PNG (cho CSS/LESS)

Một ví dụ về CSS có điều kiện để sử dụng png trên svg cho ứng dụng khách di động
Less:
.mod_interrupt--svg.mod_interrupt
{
    &--stop
    {
        &:before
        {
          content: url({{ getSvgUrl('sv_bbcode_modinterrupt_stop.svg') }}) !important;
        }
        <xf:if is="$xf.svg.as.png">
        .is-tablet &:before,
        .is-mobile &:before
        {
          content: url({{ getSvgUrlAs('sv_bbcode_modinterrupt_stop.svg', 'png') }}) !important;
        }
        </xf:if>
    }
}

Sử dụng rõ ràng trong các template;
XML:
<xf:if is="$xf.svg.enabled">
    <xf:if is="$xf.svg.as.png and $xf.mobileDetect and $xf.mobileDetect.isMobile()">
        <img src="{{ getSvgUrlAs('example.svg', 'png') }}"/>
    <xf:else />
        <img src="{{ getSvgUrlAs('example.svg', 'svg') }}"/>
    </xf:if>
<xf:else />
    <i class="fa fa-stop" />
</xf:if>

Tích hợp định tuyến XenForo 2
Mặc dù các quy tắc viết lại máy chủ web được khuyến nghị, add-on này hỗ trợ mở rộng hệ thống định tuyến của XenForo để cung cấp hỗ trợ không cấu hình cho SVG Templates

Cấu hình Nginx URL rewrite
Mã:
location ^~ /data/svg/ {
   access_log off;
   rewrite ^/data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ /svg.php?svg=$4&s=$1&l=$2&d=$3$args last;
   return 403;
}

Cấu hình Apache URL rewrite
Thêm quy tắc trước index.php cuối cùng;
Mã:
    RewriteRule ^data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ svg.php?svg=$4&s=$1&l=$2&d=$3 [B,NC,L,QSA]

tức là, nên trông tương tự như;
Mã:
    #    If you are having problems with the rewrite rules, remove the "#" from the
    #    line that begins "RewriteBase" below. You will also have to change the path
    #    of the rewrite to reflect the path to your XenForo installation.
    #RewriteBase /xenforo


    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(data/|js/|styles/|install/|favicon\.ico|crossdomain\.xml|robots\.txt) - [NC,L]
    RewriteRule ^data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ svg.php?svg=$4&s=$1&l=$2&d=$3 [B,NC,L,QSA]
    RewriteRule ^.*$ index.php [NC,L]

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


Nguồn: xenforo.com​
 

Đính kèm

  • addon-Xon-SvgTemplate-2.4.1.zip
    34.7 KB · Lượt xem: 6

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom