7.3 KiB
Cómo probar las traducciones localmente
[!NOTE] Este proceso no es requerido, pero esta documentado en caso de que quieras previsualizar como lucirán tus traducciones.
En caso de que quieras probar tus traducciones en una instancia local del sitio /learn
de freeCodeCamp, primero asegúrate de haber configurado la base de código.
Habilitando un lenguage
Hay algunos pasos a seguir para permitirle a la base de código compilar en tu lenguaje deseado.
First, visit the config/i18n/all-langs.ts
file to add the language to the available languages list and configure the values. Hay cuatro objetos aquí.
avaliableLangs
: Tanto para el arregloclient
como para el arreglocurriculum
, añade el nombre en texto del lenguaje. Este es el valor que se utilizará en el archivo.env
más tarde.auditedCerts
: Add the text name of the language as the key, and add an array ofSuperBlocks.{cert}
variables as the value. This tells the client which certifications are fully translated.i18nextCodes
: These are the ISO language codes for each language. You will need to add the appropriate ISO code for the language you are enabling. These do need to be unique for each language.langDisplayNames
: These are the display names for the language selector in the navigation menu.langCodes
: These are the language codes used for formatting dates and numbers. These should be Unicode CLDR codes instead of ISO codes.
Por ejemplo, si quisieras habilitar Dothraki como un lenguaje, tus objetos all-langs.js
deberían verse así:
const availableLangs = {
client: ['english', 'espanol', 'chinese', 'chinese-traditional', 'dothraki'],
curriculum: [
'english',
'espanol',
'chinese',
'chinese-traditional',
'dothraki'
]
};
export const auditedCerts = {
espanol: [
SuperBlocks.RespWebDesign,
SuperBlocks.JsAlgoDataStruct,
SuperBlocks.FrontEndDevLibs,
SuperBlocks.DataVis,
SuperBlocks.BackEndDevApis
],
chinese: [
SuperBlocks.RespWebDesign,
SuperBlocks.JsAlgoDataStruct,
SuperBlocks.FrontEndDevLibs,
SuperBlocks.DataVis,
SuperBlocks.BackEndDevApis,
SuperBlocks.QualityAssurance,
SuperBlocks.SciCompPy,
SuperBlocks.DataAnalysisPy,
SuperBlocks.InfoSec,
SuperBlocks.MachineLearningPy
],
'chinese-traditional': [
SuperBlocks.RespWebDesign,
SuperBlocks.JsAlgoDataStruct,
SuperBlocks.FrontEndDevLibs,
SuperBlocks.DataVis,
SuperBlocks.BackEndDevApis,
SuperBlocks.QualityAssurance,
SuperBlocks.SciCompPy,
SuperBlocks.DataAnalysisPy,
SuperBlocks.InfoSec,
SuperBlocks.MachineLearningPy
],
dothraki: [
SuperBlocks.RespWebDesign,
SuperBlocks.JsAlgoDataStruct,
SuperBlocks.FrontEndDevLibs
]
};
const i18nextCodes = {
english: 'en',
espanol: 'es',
chinese: 'zh',
'chinese-traditional': 'zh-Hant',
dothraki: 'mis'
};
const langDisplayNames = {
english: 'English',
espanol: 'Español',
chinese: '中文(简体字)',
'chinese-traditional': '中文(繁體字)',
dothraki: 'Dothraki'
};
const langCodes = {
english: 'en-US',
espanol: 'es-419',
chinese: 'zh',
'chinese-traditional': 'zh-Hant',
dothraki: 'mis'
};
Next, open the client/src/utils/algolia-locale-setup.ts
file. Estos datos son utilizados por la barra de búsqueda que carga artículos de /news
(noticias). While it is unlikely that you are going to test this functionality, missing the data for your language can lead to errors when attempting to build the codebase locally.
Add an object for your language to the algoliaIndices
object. You should use the values for the english
object for local testing, replacing the english
key with your language's availableLangs
value.
[!NOTE] If we have already deployed an instance of news in your target language, you can update the values to reflect the live instance. Otherwise, use the English values.
If you were to add Dothraki:
const algoliaIndices = {
english: {
name: 'news',
searchPage: 'https://www.freecodecamp.org/news/search/'
},
espanol: {
name: 'news-es',
searchPage: 'https://www.freecodecamp.org/espanol/news/search/'
},
chinese: {
name: 'news-zh',
searchPage: 'https://chinese.freecodecamp.org/news/search/'
},
'chinese-traditional': {
name: 'news-zh',
searchPage: 'https://chinese.freecodecamp.org/news/search'
},
dothraki: {
name: 'news',
searchPage: 'https://www.freecodecamp.org/news/search/'
}
};
Finally, in your .env
file, set CLIENT_LOCALE
and CURRICULUM_LOCALE
to your new language (use the availableLangs
value.)
CLIENT_LOCALE="dothraki"
CURRICULUM_LOCALE="dothraki"
Enabling Localized Videos
For the video challenges, you need to change a few things. First add the new locale to the GraphQL query in the client/src/templates/Challenges/video/Show.tsx
file. For example, adding Dothraki to the query:
query VideoChallenge($slug: String!) {
challengeNode(fields: { slug: { eq: $slug } }) {
videoId
videoLocaleIds {
espanol
italian
portuguese
dothraki
}
...
Then add an id for the new language to any video challenge in an audited block. For example, if auditedCerts
in all-langs.ts
includes scientific-computing-with-python
for dothraki
, then you must add a dothraki
entry in videoLocaleIds
. The frontmatter should then look like this:
videoLocaleIds:
espanol: 3muQV-Im3Z0
italian: hiRTRAqNlpE
portuguese: AelGAcoMXbI
dothraki: new-id-here
dashedName: introduction-why-program
---
Update the VideoLocaleIds
interface in client/src/redux/prop-types
to include the new language.
export interface VideoLocaleIds {
espanol?: string;
italian?: string;
portuguese?: string;
dothraki?: string;
}
And finally update the challenge schema in curriculum/schema/challengeSchema.js
.
videoLocaleIds: Joi.when('challengeType', {
is: challengeTypes.video,
then: Joi.object().keys({
espanol: Joi.string(),
italian: Joi.string(),
portuguese: Joi.string(),
dothraki: Joi.string()
})
}),
Loading Translations
Because the language has not been approved for production, our scripts are not automatically downloading the translations yet. Only staff have the access to directly download the translations - you are welcome to reach out to us in our contributors chat room, or you can translate the English markdown files locally for testing purposes.
Once you have the files, you will need to place them in the correct directory. For the curriculum challenges, you should place the certification folders (i.e. 01-responsive-web-design
) within the curriculum/challenges/{lang}
directory. For our Dothraki translations, this would be curriculum/challenges/dothraki
. The client translation .json
files will go in the client/i18n/locales/{lang}
directory.
Once these are in place, you should be able to run npm run develop
to view your translated version of freeCodeCamp.
[!ATTENTION] While you may perform translations locally for the purpose of testing, we remind everyone that translations should not be submitted through GitHub and should only be done through Crowdin. Be sure to reset your local codebase after you are done testing.