CSS i18n in one page

[YunYouJun]

Is your feature request related to a problem? Please describe.

For now, vitepress's internationalization depends on multi articles xxx and zh/xxx and multi configurations. It solves all problems, but maintaining articles and examples from both places can be a bit of a chore for less well-staffed projects.

For documentation of small projects, I prefer to maintain both English and Chinese in a markdown and share the same examples. Once the example is changed, we do not need to maintain two places.

Describe the solution you'd like

For example, I can write in the following way.

::: zh-CN
另一种 i18n 方案。

更多内容：...
:::

::: en
Another i18n method.

More info...
:::

An Common Example.
<CommonExample />

::: zh-CN
中文
:::

::: en
English
:::

This reduces maintenance costs.

I came up with a very low cost implementation - CSS-I18N And I implemented it in my own project valaxy.

It works well. You can preview it here. And this is my implementation: How to realize CSS i18n?

---

It is very cost-effective and I hope to integrate it with vitepress. If you agree with my proposal, please let me know and I can create a PR for vitepress.

Describe alternatives you've considered

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[ShenQingchuan]

This is indeed a wonderful idea!

As the-other-lang's docs maintainer, I'd like to share my suggestions:

Splitting every paragraph into different languages may not be very nice and readable for the text content itself? What do you think about this? If there're more than 2 languages it may become chaos to maintain and review?

I prefer 2 kinds of solutions:

• Stay "Aligning-line" principle in order to keep maintaining convenient, so merge all languages translation of one paragraph into one line with the original English content, using some special tag to split or just using XML-like tag for simpler implementation.

• Inspired by Vue SFC custom block, split every language into their own block.

[YunYouJun]

You're right, big projects like vue/vite are available in many languages. In contrast, the maintenance staff is more abundant. In this case, it is more appropriate to use multiple sites.

However, for some small projects, users may not have the energy to translate all the articles one by one. In addition, for example, blogs, I almost always write in Chinese, but there are special cases when I want to translate a technical article into English to share. But I don't want the permalink to change.

In this case, CSS i18n can play a complementary role.

---

Using '|' in the same row is one way, but the syntax is similar to tables, and I'm not sure there's a good way to extract it without affecting the normal situation.

If we can accept xml in its form, then it actually works fine. And can handle almost any textual complexity.

<div lang="zh-CN">中文</div>
<div lang="en">English</div>

<div lang="zh-CN">中文</div><div lang="en">English</div>

---

Finally, speaking of blocks, I found out that VitePress already supports Markdown Extensions, which could get pretty cool.

::: zh-CN
<!--@include: ./parts/zh-CN.md-->
:::

::: en
<!--@include: ./parts/en.md-->
:::

Now we're free to combine them and reuse what we need.