Chapters

11 Chapters | 45:05 |

01

Instalación del Componente de Traducción

4:49
02

Rutas localizadas

5:07
03

Crear un conmutador de idiomas

4:02
04

Traducir contenido

4:19
05

Traducción "Claves

4:29
06

Marcadores de posición y pluralización

3:17
07

HTML en traducciones

3:24
08

Depurar y limpiar traducciones

3:35
09

`translation:extract` Comando

3:33
10

Proveedores de traducción

4:09
11

Enviar y recibir traducciones

4:21

> Symfony 7 > Bonjour-> Hello-> Hola: Traduce tu Sitio

Buy Access to Course

02.

Rutas localizadas

Autoplay

Previous Challenge

Next Challenge

Hemos instalado el componente de traducción. ¡Adelante! Además, nuestras páginas se anuncian a través del atributo lang como nuestra configuración regional por defecto: en. Pero, ¿cómo podemos saber qué idioma quiere un usuario? Hay varias opciones.

Identificar el idioma del usuario

Un método consiste en utilizar la entidad User. Si un usuario ha iniciado sesión en nuestro sitio, uno de los ajustes de su cuenta podría ser "idioma". Pero entonces, ¿qué pasa con los usuarios no autentificados? Ya sabes, los tímidos que merodean por el borde de nuestro sitio.

Otro método es utilizar una cabecera de petición. La mayoría de los navegadores envían una cabeceraAccept-Language con cada petición, anunciando qué idiomas prefiere el usuario. Esto suele configurarse cuando instalas tu sistema operativo. Symfony tiene incluso un método Request::getLanguages() que puedes utilizar para obtener sus idiomas preferidos. El problema es que esto no es bueno para el SEO. Como una página tendrá la misma URL tanto si está en italiano, español o francés, los motores de búsqueda sólo pueden indexar uno de ellos. ¡Maldita sea!

Enrutamiento localizado

Un enfoque mejor es el enrutamiento localizado, o traducido. Probablemente lo hayas visto antes, donde el código del idioma pone el prefijo a cada ruta, como /en/about o /fr/about. Otro método es utilizar subdominios, comoen.example.com/about o fr.example.com/about. También puedes traducir el texto de la ruta, como /about para el inglés y /a-propos para el francés.

Para este tutorial, sólo utilizaremos la versión con prefijo de ruta: /en /fr , etc.

Configurar rutas

Podemos configurar esto por rutas. En src/Controller/ArticleController.php. En el atributo #[Route] para el método index(), sustituye el primer argumento por una matriz. Dentro, utiliza el código de configuración regional como clave y la ruta como valor:['en' => '/en', 'fr' => '/fr', 'es' => '/es']:

            Copy Code

                            Show All Lines

                        38 lines
            |
            src/Controller/ArticleController.php
        
                Show Lines

                                                    // ... lines 1 - 10
                            
            final class ArticleController extends AbstractController
        
                Show Lines

                                                    // ... line 12
                            
                #[Route([
        
                    'en' => '/en',
        
                    'fr' => '/fr',
        
                    'es' => '/es',
        
                ], name: 'app_homepage')]
        
                public function index(ArticleRepository $articles): Response
        
                Show Lines

                                                    // ... lines 19 - 38

Vuelve a nuestra aplicación y pruébalo añadiendo /fr a la URL. Hmm, parece lo mismo... Eso es porque aún no hemos creado ninguna traducción. Pero si inspeccionas el código fuente de esta página, el atributo lang de la etiqueta<html> es ahora fr. ¡Funciona! También puedes ir a /es y /en.

Localización de todas las rutas

Sin embargo, tenemos un pequeño error. Supongamos que estás en la versión /fr y haces clic en el enlace de un artículo. Ahora estamos en una ruta no localizada. Si inspeccionamos la fuente, veremos que el atributo lang ha vuelto a en. No es una gran experiencia para el usuario. Si estás en una página francesa y haces clic en un enlace, deberías permanecer en una página francesa, ¿no?

Una solución es duplicar nuestro mapa de localización de rutas para cada ruta... pero... eso es un fastidio. Por suerte, ¡hay una solución más fácil!

De vuelta a nuestro código, revierte el mapa de configuración regional que añadimos, y abre config/routes.yaml. Esta entrada controllers le está diciendo a Symfony que cargue todos los métodos marcados con el atributo #[Route] en nuestro directorio src/Controller. Podemos añadir aquí nuestro mapa de prefijo de configuración regional para aplicarlo a todas las rutas cargadas:prefix:, en: /en, fr: /fr, es: /es:

            Copy Code

                            Show All Lines

                        10 lines
            |
            config/routes.yaml
        
            controllers:
        
                Show Lines

                                                    // ... lines 2 - 5
                            
                prefix:
        
                    en: /en
        
                    fr: /fr
        
                    es: /es

En nuestra aplicación, vamos a la página de inicio en francés: /fr y hacemos clic en un artículo ¡Boom! ¡Estamos en la página de artículos en francés! Cambia a la versión /es de esta página y pulsa el logotipo para volver a la página de inicio. ¡Estupendo! Ahora estamos en la página de inicio en español. ¡La UX ha ganado!

Para ver cómo funciona, salta a la consola y ejecuta:

symfony console debug:router

Nuestras rutas se duplican para cada configuración regional, y se les añade el código de la configuración regional. Symfony es lo suficientemente inteligente como para saber que la versión sin sufijo del nombre de la ruta, la que estás acostumbrado a usar, es la versión "mágica". Entre bastidores, utiliza la configuración regional actual para determinar qué versión sufijada de la ruta utilizar. Por ejemplo, cuando generas un enlace paraapp_article_show en la página de inicio fr, sabe que debe utilizar la versiónapp_article_show.fr de esa ruta. Genial, ¿eh?

Establecer una localización por defecto

Pero hay otro problema: ve a la página de inicio real, la que no tiene prefijo de configuración regional. Oh, esta es la página especial de "inicio" de Symfony que aparece si no tienes definida una ruta de "página de inicio" - recuerda, nuestra página de inicio es en realidad /<locale code>. Si te fijas en la parte inferior izquierda, se trata en realidad de un error 404.

¿Qué podemos hacer aquí? Bueno, podríamos crear una ruta de página de inicio no prefijada que permita al usuario elegir su idioma, o tal vez, redirigirle a la versión prefijada para el idioma de su navegador. Pero hagamos que nuestro idioma por defecto, el inglés, no esté prefijado por su código de configuración regional.

Esto es super sencillo de hacer. En config/routes.yaml, cambia el prefijo /en por sólo una cadena vacía:

            Copy Code

                            Show All Lines

                        10 lines
            |
            config/routes.yaml
        
            controllers:
        
                Show Lines

                                                    // ... lines 2 - 5
                            
                prefix:
        
                    en: ''
        
                Show Lines

                                                    // ... lines 8 - 10

Ahora, vuelve a la página de inicio real y actualiza. ¡Funciona! Navega hasta un artículo, y estaremos en la versión sin prefijo de la página del artículo. Ve a la página de inicio de /fr, haz clic en un artículo... bien, estamos en la versión /fr del artículo.

Ahora podemos navegar a la página de cualquier idioma, pero... tenemos que cambiar manualmente la URL en la barra de direcciones... ¡qué pena! Siguiente paso: ¡creemos un widget para cambiar de idioma!

4 Comments

Sort By

skipper-henrik 1 month ago edited

Hello,

I really would like how to do the "automatic language switcher" from the users browsers information.
And I'd prefer to keep all languages prefixed.

So I just keep the

prefix:
   en: '/en'

in the routes.yaml file?

But how to set a route for '/' now in my controller?!

Thank you!

| Reply |

kbond SFCASTS skipper-henrik 1 month ago

Sure, so when someone goes to /, you want to detect their preferred language and redirect them to that languages homepage?

Here's what I would do:

# config/routes.yaml
controllers:
    resource:
        path: ../src/Controller/
        namespace: App\Controller
    type: attribute
    trailing_slash_on_root: false
    prefix:
        en: /en
        fr: /fr
        es: /es

# add this
raw_homepage:
    path: /
    controller: App\Controller\RawHomepageController::homepage

Now, create the RawHomepageController:

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\DependencyInjection\Attribute\Autowire;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

final class RawHomepageController extends AbstractController
{
    public function homepage(
        Request $request,

        #[Autowire(param: 'kernel.enabled_locales')]
        array $enabledLocales,

        #[Autowire(param: 'kernel.default_locale')]
        string $defaultLocale,
    ): Response {
        // find the user's locales that also are in our enabled locales
        $matches = array_intersect($request->getLanguages(), $enabledLocales);
        
        // use the first match - if none, use our default
        $locale = reset($matches) ?: $defaultLocale;

        return $this->redirectToRoute('app_homepage', ['_locale' => $locale]);
    }
}

Now, / is no longer a 404 and you're redirected to /{locale} (or /en by default).

If you have a bunch of controllers you don't want prefixed (maybe your admin section), you can use subdirectories in your src/Controller directory:

# config/routes.yaml
localized_controllers:
    resource:
        path: ../src/Controller/Localized/
        namespace: App\Controller\Localized
    type: attribute
    trailing_slash_on_root: false
    prefix:
        en: /en
        fr: /fr
        es: /es

unlocalized_controllers:
    resource:
        path: ../src/Controller/Unlocalized/
        namespace: App\Controller\Unlocalized
    type: attribute

Now, routes in src/Controller/Localized will be prefixed, and ones in src/Controller/Unlocalized will not.

I hope this helps!

--Kevin

1 | Reply |

skipper-henrik kbond 1 month ago

Wow! Thank you so very much Kevin❗️

this helped me a lot! ⛵️

by the way, call me a nitpicker:
In the transcription code example (3:02) the tick marks are missing. Don't they?

| Reply |

kbond SFCASTS skipper-henrik 1 month ago

I'm glad this helped!

In the transcription code example (3:02) the tick marks are missing. Don't they?

Haha good catch, you're right, I'm missing the quotes in the code block. It isn't technically required (it works just fine without), but YAML has made syntax changes in the past that require certain text to be wrapped in quotes. Best to use quotes when possible.