[i18n] Making everything translatable (website title, description...)

MisterFISHUP commented 3 years ago

🚀 Feature

First of all, the i18n feature of Docusaurus is terrific, thanks a lot!

It seems that the website's title can't be translated. It's not a big problem if the website title is just a simple name or doesn't have much meaning. However, It's really not ideal especially when the website uses languages that use different alphabet: imagine the main language of the website is Chinese (or Hebrew, Thai, Russian, etc) and the website title is also written in this language, then all final html pages' title will contain this website title, even for pages written in secondary/other languages (English for example), which is a bit bad for viewers and SEO since the website title in the html title is almost unreadable.

Thus, I think it's a good idea to include the possibility to translate the website title in the i18n feature, to improve readability and SEO in the cases illustrated above.

Have you read the Contributing Guidelines on issues?

Yes.

Motivation

See above.

Pitch

It would be great if the website title can be translated just like how the navbar/footer/react code is translated: add translations in some json file in i18n directory. Or even better: provide the website title translation in i18n in docusaurus.config.js directly (maybe in localConfigs for example, with a optional field for website title translation).

PS. Still need to mention this again: thanks for the awesome i18n feature!

TODOs

[ ] site metadata in docusaurus.config.js
- Website title
- Announcement bar
- Logo alt
- Tagilne
- Copyright
[x] Admonition title
- Blocked by 3p deps
[X] Strings in plugin options
- Blog sidebar title
[ ] DocSearch model
- Blocked by 3p deps

slorber commented 3 years ago

Thanks for the feedback :)

This has been reported here too: https://github.com/facebook/docusaurus/discussions/4480

I was thinking of adding i18n/en/site.json or something, allowing you to provide title and tagline for example.

I think it's a better place to translate content, particularly when you have a long list of locales: not sure we want to maintain a lot of translations in the config.

But at the same time, I'd also like a locale to be able to "override" config setting somehow, just not sure what this API should look like and need to think more about this.

MisterFISHUP commented 3 years ago

@slorber Agree with you, and yes it is not evident how to design this API... Besides the title, it would also be nice to be able to choose different img (social share image preview) for different locales, since this image often contains the site title (and other words/sentences depending on the current locale). I also noticed the html in footer is not translatable. I can imagine some cases where the html contains texts depending on locales (ex: alt tag, title tag or just normal texts inside an element), so I think making it translatable would also be a good idea.

To sum up, here is a small list of untranslatable things I noticed:

title (website title): because the html document title uses it (ex: html document title = \<description> | )</li> <li>img (social share preview): may contain texts that need to be translated</li> <li>announcement bar: simply because it contains texts depending on locales</li> <li>html string in footer item: may contain texts that need to be translated</li> </ul> <p>Making the above things translatable can avoid unreadable texts for visitors and provide better SEO (better html document title)</p> <h3>Other untranslatable things:</h3> <ul> <li>tagline: it's not used anywhere by default so strictly speaking it's not really an issue</li> <li>logo alt in navbar: it's also an untranslatable string, but it's less important to be honest</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Thanks @MisterFISHUP for the exhaustive reporting.</p> <ul> <li>site title/description/tagLine: generating a <code>site.json</code> is probably better. It will also simplify translating those data through Crowdin for users that use it (or another SaaS)</li> <li>image/favicon: I'll add a <code>i18n/<locale>/static</code> folder to override the default static assets</li> <li>announcement bar/html footer items/logo alt in navbar: those are just missing theme translations Note html items would have to be translated in html, not very convenient</li> </ul> <p>Does it make sense?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/MisterFISHUP"><img src="https://avatars.githubusercontent.com/u/68397336?v=4" />MisterFISHUP</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>@slorber That sounds great! Moreover, the two solutions <code>site.json</code> and <code>i18n/<locale>/static</code> look very logic/natural.</p> <p>A few comments:</p> <ul> <li>Maybe I'm wrong, I don't think there is <em>description</em> in the current site config. For example, if description is not provided in a page (react or md), then the generated html won't have any description.</li> <li>For the <code>i18n/<locale>/static</code> folder, if I understood correctly, it's not restricted to image/favicon: once it's implemented, we can override any static assets, am I right?</li> <li> <p>I agree that html items will have to be translated in html, but I think when we use the translation API (at least the current one), the generated json file will have the original string in that field, which is handy for translation imo since we can just translate the locale-depending part.</p> <p>Making html footer items translatable would be useful if we want to turn a plain-text footer item into a more interesting one, e.g. add an image beside the text or style the text with some css class. With the translation API, I think when we open the json file, since the original html string is there, we can just change the 'text' part and don't need to touch any other html markup.</p> </li> </ul> <p>By the way I noticed the copyright in the footer is often of form <code>`Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`</code>, just to avoid hardcoding the current year, but it seems that we need to hardcode this in the translated copyright (this has nothing to do with copyright of course, it's just a common use case). I'm actually ok with this but maybe this could be improved? Sorry that this is not fully related to the issue here, but I'm not sure if it's really an <em>issue</em> to open an issue neither.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Another case is the admonitions when they don't have a title:</p> <pre><code class="language-md">:::caution We only copy `.md` and `.mdx` files, as pages React components are translated through JSON translation files already. :::</code></pre> <p><img src="https://user-images.githubusercontent.com/749374/117188208-16649400-addd-11eb-9328-149e41e11191.png" alt="image" /></p> <p>It requires to use <code>:::caution Attention</code> to ensure the admonition title is translated:</p> <p><img src="https://user-images.githubusercontent.com/749374/117188335-3e53f780-addd-11eb-9fc3-5f80f008367c.png" alt="image" /></p> <p>We should find a way to provide automatic default admonition titles in the selected language</p> <p>Reported here: <a href="https://github.com/facebook/docusaurus/issues/3526#issuecomment-832709579">https://github.com/facebook/docusaurus/issues/3526#issuecomment-832709579</a></p> <p>Remark-admonition issue: <a href="https://github.com/elviswolcott/remark-admonitions/issues/35">https://github.com/elviswolcott/remark-admonitions/issues/35</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>The blog sidebar title is not translatable (reported in <a href="https://github.com/facebook/docusaurus/issues/3643#issuecomment-833614997">https://github.com/facebook/docusaurus/issues/3643#issuecomment-833614997</a>)</p> <p>See: <a href="https://docusaurus.io/fr/blog">https://docusaurus.io/fr/blog</a></p> <p><img src="https://user-images.githubusercontent.com/749374/117327873-5b4b0200-ae93-11eb-9b51-8cd55a8ac4c3.png" alt="image" /></p> <p>This label is provided by config for now:</p> <p><img src="https://user-images.githubusercontent.com/749374/117327968-71f15900-ae93-11eb-9dbc-af9aeb6dcc66.png" alt="image" /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>The DocSearch modal is also not translated currently. </p> <p>We'll have to wait for Algolia to provide APIs to translate it.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Versioned sites have a "Versions" label on the mobile sidebar that we currently cannot translate:</p> <p><img src="https://user-images.githubusercontent.com/749374/122209227-997d0d80-cea4-11eb-9da0-d57b7bdec161.png" alt="image" /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>The blog <code>blogSidebarTitle</code> option is not translatable (<a href="https://github.com/facebook/docusaurus/issues/5350">https://github.com/facebook/docusaurus/issues/5350</a>)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Josh-Cena"><img src="https://avatars.githubusercontent.com/u/55398995?v=4" />Josh-Cena</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>The blog <code>blogSidebarTitle</code> option is not translatable</p> </blockquote> <p>Didn't experiment, but could it be translatable by wrapping it with <code><Translate></code> here?</p> <p><a href="https://github.com/facebook/docusaurus/blob/416e2a7a29ffc9785faf9494039ae431d9e6d547/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx#L28">https://github.com/facebook/docusaurus/blob/416e2a7a29ffc9785faf9494039ae431d9e6d547/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx#L28</a></p> <p>The translations will still be written in <code>code.json</code></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>The <code><Translate></code> component is only meant to be used for hardcoded labels in React components, and <code>code.json</code> becomes available in the JS runtime in the React context. It is not really suited for the Node.js side, user-provided config, or for dynamically created translation keys.</p> <p>For all other use-cases (including <code>blogSidebarTitle</code>), we have plugin translation lifecycles so that a plugin can translate the content before passing it to the React components.</p> <p>Examples:</p> <ul> <li> <p><a href="https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-theme-classic/src/translations.ts">https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-theme-classic/src/translations.ts</a></p> </li> <li> <p><a href="https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-plugin-content-docs/src/translations.ts">https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-plugin-content-docs/src/translations.ts</a></p> </li> <li> <p><code>getTranslationFiles</code> permits to know which files the plugin should write to disc when using <code>docusaurus write</code></p> </li> <li> <p><code>translateThemeConfig</code> / <code>translateLoadedContent</code> is responsible for "applying" localized translation files to the plugin content/theme config</p> </li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Josh-Cena"><img src="https://avatars.githubusercontent.com/u/55398995?v=4" />Josh-Cena</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>I'll look into some of them, and it would be great if we can make a task list for this issue</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Josh-Cena"><img src="https://avatars.githubusercontent.com/u/55398995?v=4" />Josh-Cena</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>For the theme config, I think there're a lot that can be translated besides the announcement bar: metadata, light/dark icons, etc. Maybe put them in a <code>docusaurus-theme-classic/config.json</code> file?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Yes something like <code>themeConfig.json</code> can make sense if it's useless to split a single label in a separate file.</p> <hr /> <p>ATM blog tag labels are not translatable, and docs tag labels (<a href="https://github.com/facebook/docusaurus/pull/3646">https://github.com/facebook/docusaurus/pull/3646</a>) won't either. I don't think it's a very high priority for now (nobody noticed) so we'll figure this one last.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Josh-Cena"><img src="https://avatars.githubusercontent.com/u/55398995?v=4" />Josh-Cena</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>ATM blog tag labels are not translatable</p> </blockquote> <p>Not sure what you mean, since at least tags in Markdown front matter are translated once you provide different front matter in the translated MD file?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Oh you are right didn't think about that 😅 </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>It's not possible to customize sidebar items' labels of type doc/ref (only labels provided in the sidebars.json, as the frontmatter such as <code>sidebar_label</code> can be translated with md already).</p> <p>See comment here: <a href="https://github.com/facebook/docusaurus/pull/5593#issuecomment-925806203">https://github.com/facebook/docusaurus/pull/5593#issuecomment-925806203</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/azeeka"><img src="https://avatars.githubusercontent.com/u/17175112?v=4" />azeeka</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>It's not possible to customize sidebar items' labels of type doc/ref (only labels provided in the sidebars.json, as the frontmatter such as <code>sidebar_label</code> can be translated with md already).</p> <p>See comment here: <a href="https://github.com/facebook/docusaurus/pull/5593#issuecomment-925806203">#5593 (comment)</a></p> </blockquote> <p>Has that issue been closed? So it is not going to be implemented?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Josh-Cena"><img src="https://avatars.githubusercontent.com/u/55398995?v=4" />Josh-Cena</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Has that issue been closed? So it is not going to be implemented?</p> </blockquote> <p>That PR isn't really going in the right direction, and TBH I don't think I even understood the use-case. We are recently doing lots of changes with the sidebar (#5830, #5782), and we will see how translation works after that</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/diezcode"><img src="https://avatars.githubusercontent.com/u/7522882?v=4" />diezcode</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>hi, any update on the translation of footer html parts ?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/cainmagi"><img src="https://avatars.githubusercontent.com/u/32186723?v=4" />cainmagi</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Dear developers of Docusaurus:</p> <p>The i18n for the index pages automatically generated by <code>generated-index</code> is not working, although I can find the i18n config files and have written the translation, see the example below:</p> <ul> <li><a href="https://github.com/cainmagi/FFmpeg-Encoder-Decoder-for-Python/blob/e517591b0ec1f84358912058066f3f766cf101d3/versioned_sidebars/version-3.2.x-sidebars.json#L12">Codes where the original text of the index description is defined :memo:</a></li> <li><a href="https://github.com/cainmagi/FFmpeg-Encoder-Decoder-for-Python/blob/e517591b0ec1f84358912058066f3f766cf101d3/i18n/zh-cn/docusaurus-plugin-content-docs/version-3.2.x.json#L22">Codes where the translation is written :memo:</a></li> <li>The page built by Github Action can be viewed <a href="https://cainmagi.github.io/FFmpeg-Encoder-Decoder-for-Python/zh-cn/docs/category/installation">here :link:</a>, where the translation does not work correctly, and the text is still in English.</li> </ul> <p>By the way, I suggest your teams to check your own website. Take a look at <a href="https://docusaurus.io/zh-CN/docs/category/guides">this example :link:</a>, please. I am not sure whether you have written the translation. But the page description is definitely not translated yet.</p> <p>So I suspect that there should be a bug currently. I hope your team can fix this issue soon.</p> <p>Thank you!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Josh-Cena"><img src="https://avatars.githubusercontent.com/u/55398995?v=4" />Josh-Cena</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>@cainmagi Thanks for the report. Will be fixed in <a href="https://github.com/facebook/docusaurus/pull/7233">https://github.com/facebook/docusaurus/pull/7233</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/cainmagi"><img src="https://avatars.githubusercontent.com/u/32186723?v=4" />cainmagi</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>@Josh-Cena Thank you! I will wait for the next release.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Admonition default titles are now translatable (<a href="https://github.com/facebook/docusaurus/pull/7556">https://github.com/facebook/docusaurus/pull/7556</a>) (canary or next release)</p> <p>Please help us and provide the missing admonition translations for your language: <a href="https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-theme-translations/locales">https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-theme-translations/locales</a></p> <p>(tip: also provide all the other missing translations at the same time)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Note for myself: </p> <p>Autogenerated category labels (<code>_category_.json</code>) can be translated through JSON files already. However it is not always convenient or intuitive, and we should probably make it easier to translate using a <code>_category_.json</code> file in the localized folder directly (reported in <a href="https://github.com/facebook/docusaurus/discussions/8213">https://github.com/facebook/docusaurus/discussions/8213</a>). But being able to translate those labels with both <code>_category_.json</code> files and JSON i18n files might also be confusing, as one of them has to be used in priority.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>We don't have a good API design to translate many things of the site config at the moment. </p> <p>However I'd like to present you a temporary workaround introduced in <a href="https://github.com/facebook/docusaurus/pull/8677">https://github.com/facebook/docusaurus/pull/8677</a>.</p> <p>Your site config will receive a <code>process.env.DOCUSAURUS_CURRENT_LOCALE</code> environment variable that you can read from the config file.</p> <p><strong>IMPORTANT</strong>: the <code>docusaurus build</code> will first load the Docusaurus config with an <strong>empty value</strong> for <code>DOCUSAURUS_CURRENT_LOCALE</code>. This is because... the i18n config is in the config file so we must first load it before being able to inject any value as an env variable. For this reason this env variable is only a best-effort awkward temporary workaround to unlock users. It is undocumented on purpose, not part of the public API, and will likely be refactored some day.</p> <p>If you decide to use this variable, you'd rather program defensively and assume the locale value might be absent, and fallback yourself to your defaultLocale.</p> <p>2 possible defensive examples, assuming "en" is your default locale:</p> <pre><code>process.env.DOCUSAURUS_CURRENT_LOCALE ??= "en"</code></pre> <pre><code class="language-js">function getSiteTagline() { switch(process.env.DOCUSAURUS_CURRENT_LOCALE) { case "fr": return "Mon site en Français"; default: return "My English website"; } }</code></pre> <p>Some cases where <code>DOCUSAURUS_CURRENT_LOCALE</code> will be undefined:</p> <ul> <li>When Docusaurus first loads the config file on <code>docusaurus build</code> to get the i18n config</li> <li>When you run <code>docusaurus start</code> with no locale arg</li> <li>When you run any other docusaurus CLI script unrelated to i18n, that requires reading the config (<code>swizzle</code>, <code>docs:version</code>...)</li> </ul> <p>The <code>DOCUSAURUS_CURRENT_LOCALE</code> env variable will be provided when:</p> <ul> <li>You run <code>docusaurus build</code>, <strong>only after the first load</strong>, once we start iterating over locales</li> <li>You run <code>docusaurus build --locale fr</code></li> <li>You run <code>docusaurus start --locale fr</code></li> </ul> <p>Note: <code>DOCUSAURUS_CURRENT_LOCALE</code> is not designed to be set "from the outside". Please don't set this value as an env variable in your CI or local computer, it will be ignored. </p> <p>I hope this makes sense and is not too confusing. Hopefully, we will provide a better way to translate the config later, but this should be good enough to unlock many use cases.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/chenyuncai"><img src="https://avatars.githubusercontent.com/u/8945203?v=4" />chenyuncai</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Thanks @MisterFISHUP for the exhaustive reporting.</p> <ul> <li>site title/description/tagLine: generating a <code>site.json</code> is probably better. It will also simplify translating those data through Crowdin for users that use it (or another SaaS)</li> <li>image/favicon: I'll add a <code>i18n/<locale>/static</code> folder to override the default static assets</li> <li>announcement bar/html footer items/logo alt in navbar: those are just missing theme translations Note html items would have to be translated in html, not very convenient</li> </ul> <p>Does it make sense?</p> </blockquote> <p>Really need it. we sent our docs to a translate platform and push back to i18n dir. now we had to manually update the the image link to another image path and save new img files to a different dir.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/peirstom"><img src="https://avatars.githubusercontent.com/u/48523132?v=4" />peirstom</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Just for tracking purposes: Logo Alt is fixed <a href="https://github.com/facebook/docusaurus/pull/8616">https://github.com/facebook/docusaurus/pull/8616</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/volkantash"><img src="https://avatars.githubusercontent.com/u/25375593?v=4" />volkantash</a> commented <strong> 9 months ago</strong> </div> <div class="markdown-body"> <p>"Recent Post" yazısı niye çevrilmiyor? ... Why is not translating "Recent Post" text?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 9 months ago</strong> </div> <div class="markdown-body"> <p>@volkantash you can translate this label thanks to the <code>options.blogSidebarTitle</code> and the workaround suggested here: <a href="https://github.com/facebook/docusaurus/issues/4542#issuecomment-1434839071">https://github.com/facebook/docusaurus/issues/4542#issuecomment-1434839071</a></p> <p>It's not super convenient, I agree, and we'll try to improve, but at least it is possible.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/kkhr1341"><img src="https://avatars.githubusercontent.com/u/71240682?v=4" />kkhr1341</a> commented <strong> 9 months ago</strong> </div> <div class="markdown-body"> <blockquote> <blockquote> <p>ATM blog tag labels are not translatable</p> </blockquote> <p>Not sure what you mean, since at least tags in Markdown front matter are translated once you provide different front matter in the translated MD file?</p> </blockquote> <p>I think that @slorber had a point. We have a English site with Japanese and Chinese translation. So in the English version of a blog article we might set a tag like "Product" in the front matter, which would then be "商品" in the Japanese .mdx file.</p> <p>On first view everything looks fine, as we get both a page for the "product" tag as well as for the "商品" tag.</p> <ol> <li>.../blog/tags/product/</li> <li>.../ja/blog/tags/商品/</li> </ol> <p>However, we also get two 404 errors, as apparently no direct connection is formed between the English tag and the Japanese tag: 404 Error 1: .../blog/tags/商品/ 404 Error 2: .../ja/blog/tags/product/</p> <p>Maybe we made a mistake during our setup, but we think that the handling of tags and their translatability should be looked at one more time.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 9 months ago</strong> </div> <div class="markdown-body"> <p>@kkhr1341 the translation of urls/slugs is not a goal of Docusaurus currently (see <a href="https://docusaurus.io/docs/i18n/introduction#i18n-non-goals">https://docusaurus.io/docs/i18n/introduction#i18n-non-goals</a>). It would be quite complicated for us to support it properly, not just for tags but for all other urls as well.</p> <p>However, the problem here is that your tag label is tightly coupled to the tag url segment. If you keep using the same url segment for all the localized sites, you shouldn't get 404 errors anymore, and indeed we should let you translate the tag label.</p> <p>This is already possible, with an historical API that is lightly documented but I don't like it much because it's awkward and you'll have to add the permalink to all your docs using this tag, ensuring they remain in sync: <a href="https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog#tags">https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog#tags</a></p> <pre><code class="language-yaml">tags: - label: "商品" permalink: "product"</code></pre> <p>In the future, we'll likely have a <code>tags.yml</code> registry, similar to how we handle <code>authors.yml</code></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/alienzhangyw"><img src="https://avatars.githubusercontent.com/u/58874541?v=4" />alienzhangyw</a> commented <strong> 6 months ago</strong> </div> <div class="markdown-body"> <p>How to translate navbar and footer with variables?</p> <p>For example, I load brandName from ENV file when building with CI: <img src="https://github.com/facebook/docusaurus/assets/58874541/f59899dd-f4ab-4c92-8ea7-9a55369c1be9" alt="image" /></p> <p>but the <code>footer.json</code> and the <code>navbar.json</code> generated by <code>write-translations</code> is hard coded. How can I change <code>title</code> or <code>copyright</code> texts during build, while keeping other messages translated?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/slorber"><img src="https://avatars.githubusercontent.com/u/749374?v=4" />slorber</a> commented <strong> 6 months ago</strong> </div> <div class="markdown-body"> <p>@alienzhangyw you can use <code>process.env.DOCUSAURUS_CURRENT_LOCALE</code> in the config file, as explained here:</p> <p><a href="https://github.com/facebook/docusaurus/issues/4542#issuecomment-1434839071">https://github.com/facebook/docusaurus/issues/4542#issuecomment-1434839071</a></p> <p>If you prefer to translate things thanks to env vars, you can also delete the generated files here:</p> <pre><code class="language-bash">i18n/en/docusaurus-theme-classic/navbar.json i18n/en/docusaurus-theme-classic/footer.json</code></pre> <p>You can also remove individual keys from this file, if you only want your config to take over for certain keys. Docusaurus will use this file's labels in priority if it exists, but it can also be "partially complete" and we'll merge labels from your config/env with what's in those files.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

facebook / docusaurus