- XF 兼容性
- 2.3.x
- 2.2.x
- 摘要
- 取决于配置,此插件需要服务器URL重写支持!
需要 标准库 By Xon v1.12.0+
根据配置,此插件需要 Web 服务器 URL 重写支持!根据配置,此插件需要 Web 服务器 URL 重写支持!
允许 SVG(可缩放矢量图形)图像作为模板存储。
这会在 XF 根目录中创建一个新的 svg.php 文件。
要生成指向 SVG 模板的链接(模板名称必须以 .svg 结尾!);
将 SVG 转换为 PNG 需要外部支持,在不同的操作系统上可能会导致一些限制或较差的渲染效果。
如果可以的话, 不推荐 使用 Imagick!
Ubuntu(使用 https://launchpad.net/~ondrej/+archive/ubuntu/php PPA);
代码:
注意:某些发行版需要安装 libmagickcore-6.q16-3-extra 才能启用 SVG 支持。
旧版本的 Imagick 对 SVG 的支持较差,再加上 Imagick 的安全记录不佳。
这是一个通用的逃生机制,用于通过 php 中的 proc_open 插件插入任意的 PNG 转换。
使用 proc_open 选项配置渲染:
{sourceFile} 是源 SVG 文件,写为临时文件 {destFile} 是目标 PNG 文件,作为临时文件
或者通过管道输入/输出
注意:模板名称只能是字母数字字符串,这在调用 CLI 选项前已被验证。
使用 resvg 配置 CLI 命令:
已提供了一个预编译的 Linux x86_64 二进制文件, 请在此处。在 CentOS 7 上编译,适用于 Ubuntu 18.04/20.04。
编译可能会绑定到较新的 glibc 版本,这可能导致兼容性问题。
注意:使用 snap 会很可能会使用较旧的实例。
配置 CLI 管道命令:
一个使用 PNG 而不是 SVG 的示例 CSS,用于移动客户端。
Less:
在模板中显式使用;
虽然推荐使用 Web 服务器重写规则,但此插件支持扩展 XenForo 的路由系统,以提供零配置支持 SVG 模板。
在最终的 index.php 之前添加规则;
例如,应该看起来类似;
贡献特性和 bug 修复
请通过 "更多信息" 链接创建一个 Github Pull 请求。
根据配置,此插件需要 Web 服务器 URL 重写支持!根据配置,此插件需要 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>
如果可以的话, 不推荐 使用 Imagick!
Ubuntu(使用 https://launchpad.net/~ondrej/+archive/ubuntu/php PPA);
代码:
代码:
sudo apt install php7.4-imagick libmagickcore-6.q16-3-extra
sudo systemctl restart php7.4-fpm
旧版本的 Imagick 对 SVG 的支持较差,再加上 Imagick 的安全记录不佳。
这是一个通用的逃生机制,用于通过 php 中的 proc_open 插件插入任意的 PNG 转换。
使用 proc_open 选项配置渲染:
{sourceFile} 是源 SVG 文件,写为临时文件 {destFile} 是目标 PNG 文件,作为临时文件
或者通过管道输入/输出
注意:模板名称只能是字母数字字符串,这在调用 CLI 选项前已被验证。
使用 resvg 配置 CLI 命令:
代码:
/usr/local/bin/resvg --quiet {sourceFile} {destFile}
编译可能会绑定到较新的 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
代码:
sudo snap install inkscape
代码:
inkscape --export-type=png -p
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>
代码:
location ^~ /data/svg/ {
access_log off;
rewrite ^/data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ /svg.php?svg=$4&s=$1&l=$2&d=$3$args last;
return 403;
}
例如,应该看起来类似;
代码:
RewriteRule ^data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ svg.php?svg=$4&s=$1&l=$2&d=$3 [B,NC,L,QSA]
请通过 "更多信息" 链接创建一个 Github Pull 请求。