Аддон XF 2.x.x Svg Template by Xon [2.6.2]

Иконка ресурса
Краткое описание:
Аддон позволяет использовать SVG (Scalable Vector Graphics) в качестве шаблонов для XenForo
4
314

Последние обновления

2.6.2

Добавлено более понятное сообщение об ошибке при попытке получить PNG из SVG через getSvgUrl...
Смотреть еще...

Описание Svg Template by Xon:​

Позволяет хранить изображения SVG (Scalable Vector Graphics) в виде шаблонов. При этом создается новый файл svg.php в корневом каталоге XF.

Функции Svg Template by Xon:​

В зависимости от конфигурации, это дополнение требует поддержки перезаписи URL веб-сервера!

Позволяет хранить изображения SVG (Scalable Vector Graphics) в виде шаблонов. При этом создается новый файл svg.php в корневом каталоге XF.

Чтобы сгенерировать ссылку на SVG-шаблон (шаблон должен иметь .svg в конце имени!) ;
Код:
{{ getSvgUrl('tempate.svg') }}
В разделе «Информация о форуме», если установлен параметр «Использовать полные дружественные URL» (useFriendlyUrls), генерируется URL:
Код:
/data/svg/<style_id>/<langauge_id>/<style_last_modified>/<templateName.svg>
В противном случае
Код:
svg.php?svg=<templateName>&s=<style_id>&l=<langauge_id>&d=<style_last_modified>

Рендеринг в PNG​

Рендеринг SVG в PNG требует внешней поддержки, и в зависимости от ОС это может привести к странным ограничениям или плохому рендерингу.

поддержка php-imagick
Не рекомендуется использовать Imagick, если это возможно!

Ubuntu (с использованием ***** The main PPA for supported PHP versions with many PECL ext... : Ondřej Surý PPA);
Код:
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.

Настройте рендеринг с использованием опции proc_open с;
Код:
<CLI-binary> {destFile} {sourceFile}
{sourceFile} - исходный SVG-файл, записанный как временный файл {destFile} - конечный PNG-файл, записанный как временный файл

В качестве альтернативы ввод/вывод может осуществляться через трубы

Примечание: имена шаблонов могут быть только буквенно-цифровыми строками, что обеспечивается проверкой перед вызовом опции CLI

Поддержка resvg CLI​

Пример использования resvg v0.35.0+, настройка CLI - Команда Pipe с;
Код:
/usr/local/bin/resvg --quiet --resources-dir=/tmp/ - -c
Пример использования resvg, настройка команды CLI с;
Код:
/usr/local/bin/resvg --quiet {sourceFile} {destFile}

Предварительно скомпилированный двоичный файл​

Предварительно скомпилированный двоичный файл linux x86_64 доступен здесь. Скомпилирован на CentOS 7, работает на Ubuntu 18.04/20.04/22.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 CLI​

Примечание: используйте snap, так как в противном случае вы можете получить слишком старый экземпляр!
Код:
sudo snap install inkscape
Настройте команду CLI PIPE с помощью;
Код:
inkscape --export-type=png -p

Особенности​

Условный рендеринг SVG в PNG (для CSS/LESS)​

Пример условного CSS для использования png вместо svg для мобильных клиентов
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>
    }
}
Явное использование в шаблонах;

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>

Интеграция маршрутизации XenForo 2​

Хотя рекомендуется использовать правила перезаписи веб-сервера, это дополнение поддерживает расширение системы маршрутизации XenForo для обеспечения поддержки SVG-шаблонов с нулевой конфигурацией.

Конфигурация перезаписи URL-адресов Nginx​

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

Конфигурация перезаписи URL-адресов Apache​

Добавьте правило перед финальным файлом index.php;
Код:
    RewriteRule ^data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ svg.php?svg=$4&s=$1&l=$2&d=$3 [B,NC,L,QSA]
т.е. должно выглядеть примерно так;

Код:
    #    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]

Автор

bobobo

Еще ресурсы от bobobo

ExploitFixer
ExploitFixer
Защитите свой сервер Minecraft от хакерских атак с помощью совершенной системы безопасности Spigot.
IntelliJ IDEA Ultimate бесплатно
IntelliJ IDEA Ultimate бесплатно
Здесь я расскажу как собрать IntelliJ IDEA Ultimate для себя совершенно бесплатно и без риска для ПК
AdvancedEnchantments
AdvancedEnchantments
200+ кастомных чар - таблица чар и поддержка наковальни - 20+ предметов
Ouranos - World & City Generator
Ouranos - World & City Generator
✨✅ Процедурный генератор мира и городов, деревень, строений и т. д.
Global Market Plus
Global Market Plus
Мощный плагин виртуального магазина, а так же встроенный аукцион
AdvancedJobs
AdvancedJobs
20+ профессий, беспрерывные награды, уровни заданий и легкая настройка для максимального вовлечения
GadgetsMenu [Premium]
GadgetsMenu [Premium]
Более 550+ косметических предметов! Анимированные шляпы, костюмы, гаджеты, миниатюры, плащи и многое
Advanced Crates
Advanced Crates
AdvancedCrates - плагин для ящиков с самой УНИКАЛЬНОЙ анимацией для вашего сервера.
ExecutableCrafting Premium
ExecutableCrafting Premium
Кастомный крафт — ультимативная система кастомных рецептов для серверов Minecraft!
Executable Items PREMIUM
Executable Items PREMIUM
Кастомные предметы ✨ Поддержка Custom Craft ✅ Более 30 различных триггеров ⭐ Бесконечные возможности
Executable Levers
Executable Levers
Размещайте масштабируемые рычаги и настраивайте их триггеры
⭐ ExecutableEvents ⭐ PREMIUM
⭐ ExecutableEvents ⭐ PREMIUM
Инструмент, позволяющий настраивать события, происходящие на вашем сервере.
ВерхНиз