i18n while keeping path /en /fr
So I want to use i18n for a portfolio website I have because I currently just have all my files duplicated for every language. Is there any way that I can keep my /en and /fr without having duplicated files and using i18n ? I'm using html/css/js/jquery here is my current website https://antonycd.com/en
22 Replies
no, but you can fake it
You would need to have the text inserted in the template in some way (via some JS or preferably on the server). To do so you would need the template to have translation keys pointing to the string you want to substitute it with. ( Like the title could be
page.title in the template and the translation file would have a string with the same key)are you just dumping the files into the server?
basically I host with github pages. I just edit the files in the repos and that's it.
why did you re-send the same message just to ping me?
yes so you would see. sorry if that bothers you
and to be clear that i was talking to you
i know
well, i have a terrible idea for you
i actually have 2 horrible ideas
1- use a single css file that has all the translations, and you use the ::before to set the text
2- roll your own-ish translation layer, which loads a json file from somewhere (it can even be just a global variable thrown into the html) and use that
other options include using a template language, like twigjs or handbrake
why can't i use i18n normally ?
define "i18n normally"
if you're talking about fluent or something like that, you can use it
if you're talking about something else, i don't know until you say what you mean
isn't there frameworks that I can use to define keys and set translation for many languages ? that's basically what i want to achieve
in react? yes
in pure vanilla javascript, without any server behind it? i very strongly doubt it
maybe look into svelte as well?
damn okay
you can always just make shit up, and roll your own
I mean it's a portfolio website, i guess i can do one of your ideas. I don't want to make something overkill. I just want a managable way to add translation without changing my page for every language each time i update my portfolio
i used the css idea to generate my cv in 2 languages
it is absolutely horrible, but for a small project like yours, it might be enough
yeah for sure. I did use i18n in a react project before but I didn't feel like making this in react it felt overkill for no reason. Also, I'm not sure what you mean by having translation in a css file. can you set text by css ???
yes, using ::before
in fact, you're required to set the
content property to use the ::before and ::afterthanks. sorry for newbie question but i guess ::before is the text that I want at first but then what triggers the new content with ::after ?
how do i make it so the new content appears
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
this is ABSOLUTELY HORRIBLE AND I DO NOT RECOMMEND IT
but it works
thanks, I'll look into it
you have 11 strings, so, it's a manageable situation, but it quickly gets horrible
again, i recommend you to do something else