Internacionalización

Statusfy fue diseñado con la internacionalización en mente y tiene algunas funcionalidades integradas para proporcionar una mejor experiencia de usuario (y para los Web Crawler Bots 🤓).

Caracteristicas

Generación automática de rutas prefijadas con código local

Para cualquier idioma adicional, se generarán URLs con prefijo de configuración regional. Por ejemplo, supongamos que tu Sistema de Páginas de Estado admite tres idiomas: inglés, francés y español como idioma predeterminado, tendrás las siguientes páginas en tu proyecto:

# Español
/
/history
/incidents/**
/...

# Inglés
/en/
/en/history
/en/incidents/**
/en/...

# Francés
/fr/
/fr/history
/fr/incidents/**
/fr/...

SEO

Statusfy intenta agregar algunos metadatos para mejorar el SEO de tus páginas. Esto es lo que hace:

  • Agregua un atributo lang que contiene el código ISO de la configuración regional actual a la etiqueta<html>.
  • Genera direcciones URL alternativas: etiquetas <link rel="alternate" hreflang="x"> para todos los idiomas configurados en el archivo de configuración. Para cada idioma, el código ISO se utiliza como valor del atributo hreflang.
  • Genera las metaetiquetas og:locale y og:locale:alternate como se define en el protocolo Open Graph.

ADVERTENCIA

Debes establecer una URL válida en el campo baseUrl (más información en la Referencia de Configuración), como tu dominio de producción para hacer que las URL Alternativas sean completamente válidas.

Traducciones de mensajes de carga diferida (lazy-loaded)

De forma predeterminada, todos los mensajes de traducción son cargados de manera diferida (lazy-loaded), y se descargan cuando un usuario selecciona un idioma. Esto acelera la carga inicial del sitio web y aligera su peso general.

Redirección basada en el idioma del navegador

Statusfy intenta redirigir a los usuarios a su idioma preferido detectando el idioma de su navegador. Establece una cookie después de la primera redirección para evitar la redirección de usuarios cada vez que visitan tu sitio web.

NOTA

Este comportamiento solo está disponible en el modo Renderizado por Servidor.

Interfaz del Sistema

Actualmente, Statusfy solo incluye la Traducción de la Interfaz del Sistema para cinco idiomas:

  • Inglés
  • Español
  • Alemán 0.3.0+
  • Húngaro 0.3.0+
  • Portugués (Brasil) 0.3.0+

Si deseas utilizar otro idioma, debes copiar una de estas traducciones y traducirla al idioma que desees.

🤓 Estamos abiertos a cualquier contribución que traduzca Statusfy a otros idiomas.

Configuración

De forma predeterminada, Statusfy asume que tu idioma predeterminado es el Inglés. Pero se puede cambiar fácilmente en tu archivo de configuración, modificando el campo defaultLocale:

{
  defaultLocale: 'fr'
}

También puedes indicar cuáles son los idiomas disponibles actualizando el campo locales en tu archivo de configuración:

{
  locales: [
    { code: 'es', iso: 'es-US', name: 'Español' },
    { code: 'fr', iso: 'fr-FR', name: 'Français' }
  ]
}

Ten en cuenta los campos para cada definición de idioma, son muy importantes y se utilizan por muchas razones:

  • code: La representación de dos letras (formato ISO 639-1) del idioma. Se usa al prefijar las URL.
  • iso: La identificación del idioma en una representación de dos letras (en formato ISO 639-1) con una región opcional (en formato ISO 3166- 1 Alpha 2). Más información aquí. Se usa al intentar mejorar el SEO de las páginas.
  • name: Un nombre fácil de usar para el idioma. Se usa en el seleccionador de idiomas ubicado en el Footer de cada página.

Finalmente, debes crear los archivos de traducción (en formato JSON) para tus idiomas en la carpeta ./locales.

/locales/es.json
/locales/fr.json

Ahora, puedes traducir el título, la descripción y los sistemas de su Sistema de Página de Estado, y también puedes definir enlaces adicionales ubicados en el Footer de cada página del sitio web:

{
  "title": "Statusfy Demo",
  "description": "Un merveilleux système de pages d'état Open Source.",
  "links": {
    "contact": "https://statusfy.co/fr/contact",
    "suport": "https://statusfy.co/fr/support",
    "home": "https://statusfy.co/fr/"
  },
  "defaultLocale": "fr",
  "systems": {
    "items": {
      "cdn": {
        "title": "CDN"
      },
      "conversions": {
        "title": "Conversions",
        "description": "Conversion d'un fichier à un autre"
      },
      "site-delivery": {
        "title": "Livraison du site"
      },
      "api": {
        "title": "API",
        "description": "Les points de terminaison de l'API auxquels tout développeur peut accéder"
      }
    }
  }
}

Recomendamos que se definan el Título y la Descripción del sitio web y, al menos, el título de cada Sistema. La descripción de los sistemas se mostrará como Tooltips en la sección Sistemas en la página de inicio del sitio web:

System Tooltip

Última Actualización: 2019-3-17 19:22:25
¿Deseas mantenerte al día con las últimas noticias, consejos y trucos de Statusfy?
¡Suscríbete a nuestro boletín!