- Tham gia
- 28/02/2015
- Bài viết
- 17,150
- Được Like
- 12,745
SVG Template - Template SVG cho XenForo 2 2.6.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ó
Dưới Board information, nếu "Use Full Friendly URLs" (useFriendlyUrls) được thiết lập thì URL được tạo ra là:
Nếu không thì
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);
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;
{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;
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
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ũ!
Cấu hình lệnh CLI PIPE với;
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
Sử dụng rõ ràng trong các template;
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
Cấu hình Apache URL rewrite
Thêm quy tắc trước index.php cuối cùng;
tức là, nên trông tương tự như;
Chúc các bạn thành công.
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
Bài viết liên quan
Được quan tâm
Bài viết mới