Open thewebisyourfriend opened 5 years ago
Hi,
This is exactly what the tool has been designed for, so hopefully it should work out for your use case.
The tool does not try to make any guess about how links should look so you need to explicitly add the path in the link. There is data-attr-t
and data-attr-t-interpolate
which are exactly made for this.
For the language, you could have
<html data-attr-t lang-t="lang">
and have a key named lang
in your translation file, with the correct value for each language.
For the link you could have something like this:
<a data-attr-t data-attr-t-interpolate
href-t="{{langPrefix}}/blog/test-post/" rel="bookmark">
Test Post
</a>
And langPrefix
could be an empty string for the default and "/fr"
for French, for example.
Here is a working example, which can be compiled with the following command
static-i18n -l en -i en -i fr www
index.html
<!DOCTYPE html>
<html data-attr-t lang-t="lang">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 data-t="title"></h1>
<a data-attr-t data-attr-t-interpolate
href-t="{{langPrefix}}/blog/test-post/" rel="bookmark">
Test Post
</a>
</body>
</html>
locales/en.json
{
"lang": "en",
"title": "My page",
"langPrefix": ""
}
locales/fr.json
{
"lang": "fr",
"title": "Ma page",
"langPrefix": "/fr"
}
Thank you! I assumed that it would work this out automatically as stated in the documentation:
fixPaths (default: true): When true, the script[src] and link[href] relative paths are fixed to fit the new subdirectory structure.
Is this not the case that it does it automatically?
fixPaths
is not meant to translate but simply to avoid having wrong paths when generating the HTML if the paths were relative.
For example, ./css/style.css
would be changed to ../css/style.css
if the HTML is included in a sub-directory. In your case, all the paths are absolute so fixPaths
does not change anything.
I hope this helps.
Thank you, but what you mention doesn't work for me; In your example, ./css/style.css does not change to ../css/style.css so paths to js and css become incorrect for each translation.
Hi, Could you please provide a minimum example? I cannot reproduce. I added the following line to the above example and compiled with the same command but it behaves as expected
<link rel="stylesheet" href="./css/style.css">
The output for this particular line is
index.html
: <link rel="stylesheet" href="./css/style.css">
fr/index.html
<link rel="stylesheet" href=".././css/style.css">
Hi,
I planned to use the gulp plugin you mention in the README. The gulp tool calls the process()
method of your lib which (if I got it right) does not handle processing the paths for styles and scripts since options.file
is not set and undefined
by default.
My question is: Since process()
handles the translation of each locale given in options.locales
, why it is not possible to change the paths for each translated file besides the file defined by options.locale
? I didn't look at the shell command you mentioned above but I guess it calls the processDir()
method which does exactly that?!
Please let me know if I got this all wrong. But maybe we can discuss if having process()
change the paths is an option for your tool.
Thanks a lot!
Hi @danhper ,
I got in contact with the author of the gulp-plugin to tackle the problem of my previous post. However I experience a strange behavior when working with "nested" html files. Assume the following structure:
src
|
+-- assets
| |
| +-- styles.css
|
+-- index.html
|
+-- nestedHtml
| |
| +-- nested.html
Within the index.html
the styles.css file is linked with:
<link rel="stylesheet" href="./assets/styles.css">
whereas within the nestedHtml/nested.html
file the stylesheet is linked with:
<link rel="stylesheet" href="../assets/styles.css">
When I now run static18n.processDir('./src', {})
the href
of the stylesheet link within the index.html
file does not change (as expected) but the link of nestedHtml/nested.html
changes to:
<link rel="stylesheet" href="../../assets/styles.css">
It adds another ../
where I would've expected it to also not change since the structure of the directory has not changed either. Where did I go wrong here? Thanks a lot.
Edit:
What I figured out so far is that the problem might be within the getPath()
method.
For index.html
:
For nestedHtml/nested.html
:
Thanks for the detailed investigation and sorry for the huge delay. Would you have time to send a PR for this, please? Thanks a lot!
I have been searching for a tool I could use in my build process to translate a simple blog into multiple languages getting the translations from json, and this tool looks great for this. However I cannot get the file path attributes to become relative for each language.
For example:
All remain the same url for each language....
Also I was not sure how to translate the
<html lang="en">
tag either.