SVG模板由Xon 2.7.0

XF 兼容性

2.3.x
2.2.x

摘要: XenForo 2 SVG Template Add-on v1.12.0+: Allows storing and generating SVG templates for easy image management. Supports URL rewriting for clean URLs and rendering to PNG using CLI or pre-compiled binaries like php-imagick, resvg, and Inkscape. Compatible with XenForo 2 routing system via Nginx/Apache rewrite rules.

需要Standard Library By Xonv1.12.0+
根据配置，此插件需要Web服务器URL重写支持!

SVG模板

根据配置，此插件需要Web服务器URL重写支持!
允许SVG（可缩放矢量图形）图像作为模板存储。这会在XF根目录中创建一个新的svg.php文件。
要生成一个指向SVG模板的链接（模板名称必须以.svg结尾！）；

代码：

{{ getSvgUrl('tempate.svg') }}
Under Board information, if "Use Full Friendly URLs" (useFriendlyUrls) is set the URL generated is:
Code:
/data/svg/<style_id>/<langauge_id>/<style_last_modified>/<templateName.svg>
Otherwise
Code:
svg.php?svg=<templateName>&s=<style_id>&l=<langauge_id>&d=<style_last_modified>

渲染为PNG

SVG转换为PNG需要外部支持，这取决于操作系统可能会导致一些限制或较差的渲染效果。

php-imagick支持

它是不推荐使用Imagick如果可以的话！Ubuntu（使用）https://launchpad.net/~ondrej/+archive/ubuntu/phpPPA); Code:

代码：

sudo apt install php7.4-imagick libmagickcore-6.q16-3-extra
sudo systemctl restart php7.4-fpm

注意：某些发行版需要安装libmagickcore-6.q16-3-extra以启用SVG支持。
较旧版本的Imagick具有较差的SVG支持，再加上Imagick的安全声誉不佳。

CLI支持

这是一个用于插入手动PNG转换的通用逃生机制，使用proc_open在PHP中。
配置Render使用proc_open选项为：
<CLI-binary> {destFile} {sourceFile}
{sourceFile} 是源SVG文件，{destFile} 目标PNG文件为临时文件
或者通过管道进行输入/输出
注意：模板名称仅限于字母数字字符串，在CLI选项调用前由验证强制执行

resvg CLI 支持

示例使用resvg配置CLI命令；

代码：

/usr/local/bin/resvg --quiet {sourceFile} {destFile}

预编译二进制文件

预编译的Linux x86_64二进制文件已可供用here编译于CentOS 7，在Ubuntu 18.04/20.04上运行

编译

编译可能绑定到更新版本的glibc，这可能导致兼容性问题

代码：

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

inkscape 命令行支持

注意；使用snap否则可能使用较旧的实例！

代码：

sudo snap install inkscape

配置CLI管道命令为；

代码：

inkscape --export-type=png -p

特点

条件渲染SVG为PNG（用于CSS/LESS）

为移动客户端使用png替换svg的条件CSS示例：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>
}
}

模板中使用明确的说明；

代码：

<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>

XenForo 2 路由集成

虽然推荐使用 Web服务器重写规则，但此扩充套件支持扩展 XenForo 的路由系统以提供 SVG 模板的零配置支持

Nginx URL 重写配置

代码：

location ^~ /data/svg/ {
   access_log off;
   rewrite ^/data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ /svg.php?svg=$4&s=$1&l=$2&d=$3$args last;
   return 403;
}

Apache URL重写配置

添加规则在最后的index.php之前。

代码：

    RewriteRule ^data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ svg.php?svg=$4&s=$1&l=$2&d=$3 [B,NC,L,QSA]

IE，应该类似。

代码：

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

贡献功能或修复bug请通过“更多信息”链接创建一个GitHub pull请求。

SVG模板由Xon 2.7.0

最新更新

来自 anne51 的更多资源