Cómo traducir tu tema de Publii a otro idioma

Entonces, ¿por qué no hay opciones para cambiar estos fragmentos de texto? Esto se debe a que estos elementos se crean y definen en el código del tema, en lugar de en la aplicación principal de Publii o en el contenido producido por el usuario. Como cada tema es único, no es posible producir una opción estandarizada para modificar este texto sin restringir gravemente la creatividad de los desarrolladores, ¡algo que no queremos fomentar!

Afortunadamente, desde el lanzamiento de la versión Beta 3, Publii ha incluido una nueva característica: compatibilidad con archivos de idioma en los temas, lo que permite a los desarrolladores de temas definir el texto de su tema a través de un archivo .json, en lugar de codificar todo el texto directamente en el tema. Este archivo se puede reemplazar con un archivo de usuario, traduciendo el idioma sin tocar los archivos originales. Si no estás familiarizado con el archivo .json, verás que modificarlo y, por lo tanto, traducir el tema a tu idioma local es como editar un archivo de texto estándar y no te supondrá ningún desafío.

El archivo de idioma del tema Publii

Con este nuevo formato, elementos como el texto de los botones del tema se definen en un archivo de idioma que está separado del código del tema. El formato de estos archivos de idioma es themeName.lang.json y el archivo se almacenará en la carpeta del tema en la ubicación de los archivos de Publii (esto se define en la Configuración global de Publii). Por lo tanto, si quisiéramos encontrar el archivo de idioma para el nuevo tema Portfolio, primero iríamos a nuestra carpeta de archivos de Publii y luego abriríamos la carpeta themes → portfolio , donde encontraremos el archivo de idioma:

Ahora bien, para traducir el texto del tema, técnicamente podríamos simplemente abrir el archivo de idioma y editarlo directamente, pero hay un problema: cuando se actualiza el tema, el archivo de idioma se sobrescribe y se pierden todos los cambios. En cambio, necesitamos una solución más permanente, que Publii ya ofrece.

En lugar de editar el archivo directamente, podemos crear una copia del archivo que sea exclusiva para nuestro sitio web, que Publii puede usar para anular el archivo de idioma predeterminado. Veámoslo paso a paso.

Traduciendo un tema de Publii

1. Primero, ubique el archivo de idioma para el tema que desea traducir; como se mencionó anteriormente, este estará en la carpeta Archivos Publii → Temas → NombreDeTema , donde Archivos Publii es la ruta definida en la opción Ubicación de Sitios de su Configuración Global de Publii. El nombre del archivo se llamará themeName.lang.json , donde ThemeName es el nombre del tema que está usando, por ejemplo, "portfolio.lang.json".

2. Crea una copia del archivo de idioma, dejando el original intacto. Coloca la copia en tu carpeta sites/siteName/input/languages , donde siteName es el nombre de tu sitio tal como se define en Publii (asegúrate de que el nombre del archivo coincida exactamente con el archivo de idioma original). Es posible que tu carpeta de entrada no tenga una carpeta de idiomas ; si ese es el caso, simplemente crea la carpeta manualmente y coloca el archivo de idioma dentro.

3. Abra la copia del archivo de idioma con el editor de texto que prefiera; ¡incluso el Bloc de notas funcionará! Dentro, verá un código; cada línea será una categoría para ordenar el texto que se puede ignorar, o el texto de traducción. El texto de traducción tendrá este formato: "placeHolderText": "translatedText", . El texto a la izquierda de los dos puntos es el texto de marcador de posición, que podemos ignorar. El texto a la derecha de los dos puntos es el texto real que aparecerá en el sitio web.

   {
      "partials": {
         "cookiebar": {
            "close": "Close"
         },
         "disqus": {
            "noscript1": "Please enable JavaScript to view the",
            "noscript2": "comments powered by Disqus."
         },
         "menu": {
            "label": "Menu"
         },
         "pagination": {
            "prev": "Previous",
            "next": "Next"
         },
         "shareButtons": {
            "shareWithFacebook": "Share with Facebook",
            "shareWithTwitter": "Share with Twitter",
            "shareWithGooglePlus": "Share with Google Plus",
            "shareWithPinterest": "Share with Pinterest",
            "shareWithStumbleUpon": "Share with StumbleUpon",
            "shareWithLinkedIn": "Share with LinkedIn",
            "shareWithBuffer": "Share with Buffer"
         }
      },
      "slider": {
         "button": "View project",
         "slide": "Slide %s"
      },
      "post": {
         "publishedBy": "By",
         "publishedOn": "Published on",
         "previousPost": "Previous Post",
         "nextPost": "Next Post"
      },
      "common": {
         "readmore": "View more"
      }
   }
   

   Copiar

4. Traduce cada fragmento de texto que está a la derecha de los dos puntos; no modifiques el texto de la categoría ni el texto a la izquierda de los dos puntos en cada línea, ya que se utilizan en el código del tema para indicarle a Publii qué texto reemplazar:

    {
      "partials": {
         "cookiebar": {
            "close": "Your close button text here"
         },
         "disqus": {
            "noscript1": "Your enable Javascript message here",
            "noscript2": "Your Disqus intro text here"
         },
         "menu": {
            "label": "Your menu label here"
         },
         "pagination": {
            "prev": "Your previous button text here",
            "next": "Your next button text here"
         },
         "shareButtons": {
            "shareWithFacebook": "Your Facebook share button text here",
            "shareWithTwitter": "Your Twitter share button text here",
            "shareWithGooglePlus": "Your Google+ share button text here",
            "shareWithPinterest": "Your Pinterest share button text here",
            "shareWithStumbleUpon": "Your StumbleUpon share button text here",
            "shareWithLinkedIn": "Your LinkedIn share button text here",
            "shareWithBuffer": "Your Buffer share button text here"
         }
      },
      "slider": {
         "button": "Your slide button text here",
         "slide": "Your slide text here"
      },
      "post": {
         "publishedBy": "Your published by text here",
         "publishedOn": "Your publication date text here",
         "previousPost": "Your previous post button text here",
         "nextPost": "Your next post button text here"
      },
      "common": {
         "readmore": "Your readmore button text here"
      }
   }
   

   Copiar

5. Una vez que haya reemplazado el texto con su propia traducción o interpretación, guarde los cambios en el archivo. Ahora, cuando Publii cree el sitio web que se cargará, el nuevo archivo de idioma que creó se utilizará para anular las opciones del archivo de idioma predeterminado y verá el texto traducido en su sitio en vivo o en vista previa.

Para usuarios avanzados

Hay dos cosas que los usuarios más avanzados deben tener en cuenta: no es necesario incluir todo el código del archivo de idioma original en la versión de reemplazo del archivo. En su lugar, puede incluir solo la cadena que desea cambiar. Por lo tanto, si solo deseamos cambiar la etiqueta del botón de la presentación de diapositivas de la página de inicio en el tema Portfolio, podríamos crear un archivo de idioma con el siguiente código dentro:

{
   "partials": {   
      "menu": {
         "label": "Menu"
      }
   },
   "slider": {
      "button": "View project",
      "slide": "Slide %s"
   }
}

Esto anulará el texto del botón, dejando el resto intacto. En segundo lugar, es importante tener en cuenta el propósito del texto %s que se puede ver en algunos textos de traducción, como en el ejemplo anterior; "diapositiva %s". El texto %s representa una variable que se tomará de otra parte de Publii. Por ejemplo, una cadena de texto podría decir "Bienvenido a mi sitio, de %s", y en el sitio en vivo, el texto %s se reemplazará con el nombre del autor, de modo que diga "Bienvenido a mi sitio, de nombreAutor". El símbolo %s representa un número, carácter o cadena de texto que se puede reemplazar por otras variables, por lo que antes de cambiarlas es importante verificar cuál es la variable que se muestra para asegurarse de que su traducción coincida.

Puede encontrar más información sobre esto a continuación, en la variable %s

Cómo funciona el archivo de idioma .json

¿Ya has descubierto cómo hacer traducciones, pero te gustaría saber un poco más sobre cómo funciona? ¡Sigue leyendo! En un tema de sitio web estándar, el texto incidental está codificado, oculto en los archivos del tema, lo que dificulta su acceso. Por supuesto, si tienes un pequeño conocimiento práctico de temas o código, entonces es extremadamente fácil cambiarlo directamente en los archivos. Sin embargo, esta no es una solución viable la mayoría de las veces; la persona promedio no tendrá mucho conocimiento sobre codificación, porque no es esencial; ¡por eso existen aplicaciones como Publii, después de todo! En segundo lugar, siempre que se actualicen los archivos del tema, los cambios se sobrescribirán y el texto volverá al valor predeterminado.

Por lo tanto, es evidente que se necesita un método más sencillo y fácil de usar para traducir temas. En el caso de Publii, en lugar de codificar texto en los temas, utilizamos un archivo .json de lenguaje, que actúa como una especie de libro de códigos. Básicamente, en lugar de poner texto en el código del tema, pondremos un fragmento de texto de marcador de posición; y en el archivo de lenguaje, definiremos con qué se debe reemplazar cada fragmento de texto de marcador de posición. Luego, cuando Publii crea los archivos para el sitio web, buscará todo el texto de marcador de posición y lo reemplazará con sus respectivas traducciones del archivo de lenguaje. Piense en ello como si estuviera leyendo un fragmento de álgebra; una fórmula como "x + y = z" no significa nada por sí sola, pero si define tanto "x" como "y", entonces se puede calcular la fórmula. En un tema de Publii, "x" e "y" serían el texto de marcador de posición, que luego se define en el archivo de lenguaje.

La estructura del archivo de idioma

La mejor forma de entender el archivo de idioma es echar un vistazo a su contenido. A pesar de la extensión .json, puedes ver el archivo con prácticamente cualquier editor de texto, ¡incluso con el Bloc de notas! Abramos el archivo portfolio.lang.json , que se encuentra en la carpeta Publii → themes → portfolio :

{
   "partials": {
      "cookiebar": {
         "close": "Close"
      },
      "disqus": {
         "noscript1": "Please enable JavaScript to view the",
         "noscript2": "comments powered by Disqus."
      },
      "menu": {
         "label": "Menu"
      },
      "pagination": {
         "prev": "Previous",
         "next": "Next"
      },
      "shareButtons": {
         "shareWithFacebook": "Share with Facebook",
         "shareWithTwitter": "Share with Twitter",
         "shareWithGooglePlus": "Share with Google Plus",
         "shareWithPinterest": "Share with Pinterest",
         "shareWithStumbleUpon": "Share with StumbleUpon",
         "shareWithLinkedIn": "Share with LinkedIn",
         "shareWithBuffer": "Share with Buffer"
      }
   },
   "slider": {
      "button": "View project",
      "slide": "Slide %s"
   },
   "post": {
      "publishedBy": "By",
      "publishedOn": "Published on",
      "previousPost": "Previous Post",
      "nextPost": "Next Post"
   },
   "common": {
      "readmore": "View more"
   }
}

Como podemos ver en el código anterior, hay varios grupos de texto separados por llaves. Cada línea de texto se puede clasificar como uno de dos tipos; ya sea como una categoría o como un marcador de posición con traducción. Se utiliza una categoría para dividir las traducciones en grupos de modo que sean fáciles de encontrar, y cada categoría puede tener subcategorías si es necesario. En el ejemplo anterior, podemos ver que la primera línea es una categoría, partials , que contiene varias subcategorías; cookiebar , disqus , menu , pagination y shareButtons . Es fácil saber cuándo una línea es una categoría, porque solo tendrá una cadena de texto ininterrumpida entre comillas seguida de dos puntos, como "newCategory": . Tenga en cuenta que no es necesario agrupar las traducciones en categorías; es solo una buena práctica para que otras personas que trabajen con el código y las traducciones puedan encontrar fácilmente lo que necesitan.

El segundo tipo de contenido es el marcador de posición con traducciones; este es el verdadero meollo del archivo. A diferencia de las categorías, las referencias y traducciones tendrán dos palabras separadas entre comillas, a la izquierda y a la derecha de los dos puntos, de esta manera: "placeholderText": "translationText" . El texto a la izquierda de los dos puntos (en este caso, "placeholderText"), es el marcador de posición que se ingresará en el código del tema para que Publii lo reemplace cuando cree el sitio web. El texto a la derecha de los dos puntos ("translationText"), es el texto que Publii usará para reemplazar el texto del marcador de posición en el sitio web completo.

Anulación del archivo de idioma

Debido a que los archivos principales del tema se reemplazarán con cada actualización, se agregó una característica adicional para permitir traducciones; Overrides . Al crear un archivo con el mismo nombre que el archivo de idioma, pero colocándolo en la carpeta sites/websiteName/input/languages ​​(donde websiteName es el nombre del sitio como se define en el backend de la aplicación Publii), puede agregar sus propias traducciones que anularán el archivo de idioma, como se describe en la sección de traducción anterior en este artículo. Cuando Publii crea las páginas para su sitio, primero toma el texto de marcador de posición del archivo de idioma, pero luego verifica si hay un archivo de anulación. Si encuentra uno, buscará las cadenas de texto de traducción de reemplazo en el archivo de anulación y las usará para reemplazar el texto que tomó del archivo de idioma. Esto le permitirá modificar el texto sin tener que modificar los archivos principales ni preocuparse por perder sus cambios cuando se realice una actualización.

Variable %s

El %s que a veces ves en el texto es otro fragmento de texto de marcador de posición, pero en este caso obtendrá una variable que puede ser dinámica o modificable. Digamos que un tema tiene un fragmento de texto en la página de inicio que dice "Hola de parte de la gente de websiteName", donde websiteName es el nombre del sitio web. Cada usuario que instale este tema tendrá un sitio web diferente, por lo que no pueden simplemente codificar un nombre de sitio web en particular en el tema. En su lugar, usarán un elemento %s en el archivo de idioma y luego, en el código del tema, definirán cuál debería ser la variable, como @website.name . De esta manera, cuando Publii crea el código del sitio en vivo, reemplazará automáticamente el %s con la variable del nombre del sitio web, que será diferente para cada sitio web.

Por ejemplo, en la página Etiquetas, en lugar de %s, coloquemos el número de todas las etiquetas. Para ello, utilizaremos la etiqueta {{tagsNumber}} ( https://getpublii.com/dev/tags-page-tags/#templatespecific-tags ). 

Archivo de idioma:

{
   "tags": {
		"pageTitle": "Tags",
		"description": "Collection of all %s tags"	
   },
}

En el archivo tags.hbs coloque lo siguiente:

{{ translate "tags.description" tagsNumber }}

Como resultado obtendremos: "Colección de las 5 etiquetas", donde 5 es el número de todas las etiquetas disponibles.