The nuxt-link works fine, but when I reload, it can't find the route.
The translated routes are informed like this:
nuxtI18n: { paths: { en: "/for-sale/", es: "/en-venta/", ru: "/для-продажи/", } }
I have observed that if I go directly to the encoded path, it will work, but if I use the russian characters it won't.
So if I go to http://localhost:3000/ru/для-продажи won't work, but going to http://localhost:3000/ru/%D0%B4%D0%BB%D1%8F-%D0%BF%D1%80%D0%BE%D0%B4%D0%B0%D0%B6%D0%B8 will.
How can I make it so it will encode russian characters when looking for route?
My problem disappeared by adding
// nuxt.config.js
['nuxt-i18n', {
encodePaths: false
}]
Related
I'm looking for a solution/idea to dynamically change the translation value of each key in Sparatcus translations files outside the code. I don't want only to create a file and override the I18nModule config, I'm looking for some kind of service/API like Lokalize API to be able to change the translation values outside the code.
Thanks in advance!
The internationalisation features are prepared for this. Although we do not have a service at hand for the localised labels, Spartacus is prepared for this. You can read more about this at https://sap.github.io/spartacus-docs/i18n/#lazy-loading. You can configure loadPath to an API endpoint, including the variable language (lng) and namespace (ns).
imports: [
B2cStorefrontModule.withConfig({
i18n: {
backend: {
loadPath: 'assets/i18n-assets/{{lng}}/{{ns}}.json'
// crossOrigin: true (use this option when i18n assets come from a different domain)
},
chunks: translationChunksConfig
}
})
];
I've just finished building a nuxt.js & contentful website. There are several routes that need to be generated when people hit the website but it doesn't seem to generate all the routes or not recognise some pages unless I refresh. Example - I upload a blog post to contentful and it doesn't appear in the list of blog posts but when I change the text of a blog that is appearing with no issue, I have attached my config generate below
generate: {
routes () {
return Promise.all([
client.getEntries({
'content_type': 'product'
}),
client.getEntries({
'content_type': 'kebaProduct'
}),
client.getEntries({
'content_type': 'blogPost'
}),
])
.then(([productEntries, kebaEntries, blogEntries]) => {
return [
...blogEntries.items.map(entry => `/blog/${entry.fields.slug}`),
...productEntries.items.map(entry => `/products/${entry.fields.slug}`),
...kebaEntries.items.map(entry => `/products/ev-charging/${entry.fields.slug}`),
]
})
}
It works fine when I am on localhost and all the product routes are being generated and updated fine, only some of the 'kebaProduct' routes are being created when I run npm run generate. Not sure what I am missing
Note when I do generate although I have 5 'kebaProducts on contentful' it only generates one .html file not sure what the expected behaviour is.
Figured it out. If some content has been specified and it isn't present in the contentful code then the page will fail to be generated as it will throw an error. You can do checks with v-if for content and conditionally render it that way or make sure all fields are 'required' in the Contentful validations
This issue only happens when live on netlify ( despite their prerender option turned off ), not while being served locally.
the live site shows :
<title>about | anonplayer about | anonplayer</title>
title and meta tags are set using the vue-head package like so
head: {
title: {
inner: "about | anonplayer",
separator: ' ',
}, ...
and this happens for all routes of my single page app and also to meta tags where there are two sets of the tags I intended to have.
looks like this
I used the default prerender settings like so:
config.plugins.push(new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, 'dist'),
// Required - Routes to render.
routes: ['/', '/about'].concat(contracts.map(each => `/${each.abi}/${each.contract}`)),
}))
was the same, but with Angular
in my case helped replacing function this.meta.addTag() with this.meta.updateTag()
so think it's not hosting issue)
I'm using the following angular files for translations:
angular-translate.min.js (v2.2.0)
angular-translate-loader-static-files.min.js (v2.2.0)
angular-translate-storage-cookie.min.js (v2.2.0 )
angular-translate-storage-local.min.js (v2.2.0)
angular-cookies.min.js (v1.2.22)
angular-translate works when I do the following:
$translateProvider.translations('en_us', {
"label.test": "It works."
});
But not when I attempt to use a static file...
My HTML:
<html data-ng-app="myApp">
...
{{"label.test" | translate}}
My app.js:
var myApp = angular.module('myApp', ['ngCookies', 'pascalprecht.translate']).config(['$translateProvider', function($translateProvider) {
$translateProvider.preferredLanguage('en_us');
$translateProvider.useStaticFilesLoader({
prefix: '/app/resources/messages/i18n_',
suffix: '.json'
});
$translateProvider.useLocalStorage();
$translateProvider.storageKey('lang');
}]);
My Get Response (with Content-Type set to: application/json):
{
"label.test":"It works from JSON."
};
The rendered HTML page shows: label.test
Additionally, there are no errors in my console. I also tried renaming the key to TEST, but that didn't work, either.
Any ideas?
Thanks.
Check that the path to your .json is correct. If it is not found, in your template, it will just print out label.test instead of the actual translation It works from JSON. just like it is doing.
Your app root is most likely app, so if your translation file is located in /app/resources/messages/i18n_en_us.json then try:
$translateProvider.useStaticFilesLoader({
prefix: '/resources/messages/i18n_',
suffix: '.json'
});
Also make sure your JSON is valid JSON. Remove the semi-colon at the end.
{
"label.test":"It works from JSON."
}
I'm trying to internationalize my application that uses Express and Handlebars. Is it possible to get Handlebars partials (fragments) to load and render the localization resource file?
Noting that I've already read this question: express3-handlebars and 18next-node - internationalisation based on page?.
Here is my directory structure:
views/
index.html
login.html
fragments/
frag1.html
frag2.html
frag3.html
locales/
index.json
login.json
fragments/
frag1.json
frag2.json
frag3.json
If necessary, I can separate the JSON files in the locales/ directory to be something like this:
locales/
en-CA/
index.json
...other files
fr-CA/
index.json
...other files
Here is the relevant code in my server.js file:
// ...
hbs = exphbs.create({
extname: '.html',
layoutsDir: [
__dirname + '/views'
],
partialsDir: [
__dirname + '/views/fragments'
],
helpers: {
'json': function(context) {
return JSON.stringify(context);
},
't': function(k) {
// ?
}
}
});
app.engine('.html', hbs.engine);
app.set('view engine', 'html');
The t helper is what I need help with. In my templates/template fragments, I have these:
<h1>{{ t 'pageTitle' }}</h1>
<p>{{ t 'foo' }}</p>
<p>{{ t 'moreThings' }}</p>
And my JSON file could look like this:
{
"pageTitle": "Hello world",
"foo": "Paragraph contents here",
"moreThings": "There are %d things"
}
Also how do I deal with the printf parameters?
Doing internationalization in your application means doing two things:
1) Determine which locale should be used
Depending on how you determine the used locale it can be difficult to do this inside a helper. Helpers do not have access to the request object for instance. To be honest i cannot think of a good way to do this inside a helper.
Personally i use the i18n-abide middle-ware to do internationalization. They have several options to determine the locale for a given request. Once locale is determined it is added as a property to the request object. So you only need to determine the locale once for each request. An other advantage is that you have also access to the locale outside the handlebars helper.
2) Access the resource files
To access the resource files from within a helper means that you should read and parse the resource files outside the helper. Parsing resource files every time you need to translate a string really hurts performance.
Here you also should use middle-ware. You can do something like the pseudo code below.
function setup() {
// Load resource files from disk and parse them.
var resources = { /* parsed resources*/ }
return function(req, res, next) {
var locale = determineLocalFunction(req);
req.getText = function(label) {
return resources[local][label];
}
}
}
Now you can use the req.getText function every where in your code. Personally i never use language labels inside a partial. Instead i pass all the language strings needed in a partial using a data object. The reason behind this is that i think partials should be as re-usable as possible. Using hardcoded language labels inside them makes them less re-useable.
When you do want to use the getText function in your partials you can pass to getText function to your partial.
Something like this:
var objectPassedToPartial = {
getText: req.getText
}
Use it like:
{{getText 'label'}}
Read more about Mozilla's i18n-abide solution, i really love it.