Налаштування мультимовності та Webspaces Sulu

Налаштування багатомовних Webspaces Sulu

Sulu будує багатомовність та мультисайтовість навколо концепції Webspace. Один Webspace — один сайт з набором мов та порталів (поддоменів/URL-префіксів). Кілька Webspace в одному інстансі — повнофункціональний мультисайт з спільним backoffice та незалежним контентом.

Принципи Webspace

• Webspace — логічний сайт (example.com, shop.example.com)
• Portal — варіант доступу до Webspace (виробничий URL, staging URL)
• Localization — мова контенту (en, de, fr)
• URL — привязка мови до домену чи шляху

Один Webspace може обслуговуватися з кількох доменів. Зворотне неможливо — один домен завжди належить одному Webspace.

Багатомовний Webspace

<!-- config/packages/webspaces/main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<webspace xmlns="http://schemas.sulu.io/webspace/webspace"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://schemas.sulu.io/webspace/webspace
          http://schemas.sulu.io/webspace/webspace-1.1.xsd">

    <name>Main Site</name>
    <key>main</key>

    <localizations>
        <localization language="en" default="true" xDefault="true"/>
        <localization language="de"/>
        <localization language="fr"/>
    </localizations>

    <shadow-base-language>en</shadow-base-language>

    <default-templates>
        <default-template type="page">default</default-template>
        <default-template type="home">homepage</default-template>
    </default-templates>

    <templates>
        <template type="page">default</template>
        <template type="page">article</template>
        <template type="home">homepage</template>
    </templates>

    <excluded-templates>
        <excluded-template>overview</excluded-template>
    </excluded-templates>

    <portals>
        <portal>
            <name>Main</name>
            <key>main</key>
            <environments>
                <environment type="prod">
                    <urls>
                        <url language="en" redirect="false">example.com</url>
                        <url language="de">de.example.com</url>
                        <url language="fr">fr.example.com</url>
                    </urls>
                </environment>
                <environment type="stage">
                    <urls>
                        <url language="en">stage.example.com</url>
                    </urls>
                </environment>
                <environment type="dev">
                    <urls>
                        <url language="en">example.localhost</url>
                        <url language="de">de.example.localhost</url>
                    </urls>
                </environment>
            </environments>
        </portal>
    </portals>
</webspace>

Мультисайт: кілька Webspaces

<!-- config/packages/webspaces/blog.xml -->
<webspace>
    <name>Blog</name>
    <key>blog</key>

    <localizations>
        <localization language="en" default="true"/>
    </localizations>

    <portals>
        <portal>
            <name>Blog</name>
            <key>blog</key>
            <environments>
                <environment type="prod">
                    <urls>
                        <url language="en">blog.example.com</url>
                    </urls>
                </environment>
            </environments>
        </portal>
    </portals>
</webspace>

Кожен Webspace має незалежне дерево контенту. В backoffice вони відображаються як окремі сайти. Медіатека спільна.

Конфігурація security per Webspace

# config/packages/security.yaml
sulu_security:
    checker:
        enabled: true

security:
    providers:
        sulu_backend:
            id: sulu_security.user_provider
    firewalls:
        admin:
            pattern: /admin
            provider: sulu_backend
        main:
            pattern: '^/'
            stateless: false

Права доступу редактора можна обмежити конкретним Webspace:

Backoffice → Users → Edit User → Webspace Permissions

Shadow Pages — синхронізація контенту

Shadow дозволяє зробити сторінку однієї мови «тінню» іншої — вона відображає контент базової мови без створення окремого перекладу.

// Програмне створення shadow через API
$document = $this->documentManager->find('/cmf/main/contents/about', 'en');
$document->setShadowLocale('de');     // взяти контент з de
$document->setShadowLocalesEnabled(true);
$this->documentManager->persist($document, 'en');
$this->documentManager->flush();

В backoffice — перемикач "Shadow Page" на кожній сторінці.

Переключувач мов в Twig

{# templates/snippets/language-switcher.html.twig #}
{% set currentLocale = app.request.locale %}

<nav class="lang-switcher">
    {% for locale in ['en', 'de', 'fr'] %}
        {% set url = sulu_content_path(null, webspace, locale) %}
        <a
            href="{{ url }}"
            hreflang="{{ locale }}"
            lang="{{ locale }}"
            class="{{ locale == currentLocale ? 'active' : '' }}"
            {% if locale == currentLocale %}aria-current="page"{% endif %}
        >
            {{ locale|upper }}
        </a>
    {% endfor %}
</nav>

{# hreflang у <head> для SEO #}
{% block hreflang %}
    {% for locale in ['en', 'de', 'fr'] %}
        <link rel="alternate"
              hreflang="{{ locale }}"
              href="{{ sulu_content_path(null, webspace, locale) }}">
    {% endfor %}
    <link rel="alternate"
          hreflang="x-default"
          href="{{ sulu_content_path(null, webspace, 'en') }}">
{% endblock %}

Навігація з урахуванням мови

// src/Twig/NavigationExtension.php
class NavigationExtension extends AbstractExtension
{
    public function __construct(
        private readonly NavigationMapperInterface $navigationMapper
    ) {}

    public function getFunctions(): array
    {
        return [
            new TwigFunction('app_navigation', [$this, 'getNavigation']),
        ];
    }

    public function getNavigation(
        string $context,
        string $webspaceKey,
        string $locale,
        int $depth = 2
    ): array {
        return $this->navigationMapper->getNavigation(
            null,
            $webspaceKey,
            $locale,
            $depth,
            false,
            $context
        );
    }
}

{% set nav = app_navigation('main', webspace, locale, 2) %}
{% for item in nav %}
    <a href="{{ item.url }}"
       {% if item.uuid == content.uuid %}aria-current="page"{% endif %}>
        {{ item.title }}
    </a>
    {% if item.children %}
        <ul>
        {% for child in item.children %}
            <li><a href="{{ child.url }}">{{ child.title }}</a></li>
        {% endfor %}
        </ul>
    {% endif %}
{% endfor %}

URL-стратегії для мов

Три варіанти налаштування URL:

Поддомени: en.example.com, de.example.com — різні URL в Webspace portal.

Префікс шляху:

<url language="en">/</url>
<url language="de">/de</url>
<url language="fr">/fr</url>

Окремий домен на мову:

<url language="en">example.com</url>
<url language="de">example.de</url>
<url language="fr">example.fr</url>

Ініціалізація після зміни Webspace

php bin/console cache:clear
php bin/console sulu:document:initialize
php bin/console sulu:phpcr:init --user=admin
php bin/console sulu:webspace:copy-locale main --from=en --to=de

sulu:webspace:copy-locale копіює структуру дерева сторінок з однієї мови на іншу — зручно при додаванні нової мови до вже заповненого сайту.

Часові рамки

Додати другу мову до робочого сайту: 1–2 дні. Налаштування мультисайту з двома Webspaces з нуля: 2–3 дні. Повна конфігурація (3 мови, 2 Webspaces, shadow pages, hreflang, навігація): 4–5 днів.