valaxy 0.15.10 → 0.15.11-alpha.0

package/client/.vite-ssg-temp/tbbjcbuyn2/assets/i18n-4cd1bb86.js

@@ -0,0 +1,4159 @@
+import { _ as _export_sfc, c as _sfc_main$1, a as _sfc_main$2 } from "../main.mjs";
+import { _ as __unplugin_components_0 } from "./ValaxyMain-26e77dc6.js";
+import { provide, mergeProps, withCtx, createTextVNode, createVNode, createCommentVNode, renderSlot, useSSRContext } from "vue";
+import { useRoute } from "vue-router";
+import { ssrRenderComponent, ssrRenderStyle, ssrRenderSlot } from "vue/server-renderer";
+import "vite-ssg";
+import "pinia";
+import "@vueuse/core";
+import "dayjs";
+import "dayjs/plugin/utc.js";
+import "dayjs/plugin/timezone.js";
+import "dayjs/locale/zh-cn.js";
+import "body-scroll-lock";
+import "@intlify/shared";
+import "@intlify/core-base";
+import "@vue/devtools-api";
+import "@unhead/schema-org";
+import "@unhead/vue";
+import "dayjs/plugin/relativeTime.js";
+import "defu";
+import "nprogress";
+import "medium-zoom";
+import "vanilla-lazyload";
+const __pageData = JSON.parse('{"title":"How to realize CSS i18n?","description":"","frontmatter":{"title":"How to realize CSS i18n?","title_zh-CN":"如何实现 CSS i18n？","date":"2022-04-09T00:00:00.000Z","categories":"Valaxy 开发笔记","tags":["valaxy","i18n","笔记"],"end":true},"headers":[{"level":2,"title":"Vue-i18n","slug":"vue-i18n","link":"#vue-i18n","children":[{"level":3,"title":"Messages when SSG","slug":"messages-when-ssg","link":"#messages-when-ssg","children":[]}]},{"level":2,"title":"CSS i18n - Another solution","slug":"css-i18n-another-solution","link":"#css-i18n-another-solution","children":[{"level":3,"title":"Result","slug":"result","link":"#result","children":[]},{"level":3,"title":"Steps","slug":"steps","link":"#steps","children":[]}]}],"relativePath":"pages/posts/i18n.md","path":"C:\\\\Users\\\\me\\\\repos\\\\yyj\\\\valaxy\\\\docs\\\\pages\\\\posts\\\\i18n.md","lastUpdated":1696263339000}');
+const data = JSON.parse('{"title":"How to realize CSS i18n?","description":"","frontmatter":{"title":"How to realize CSS i18n?","title_zh-CN":"如何实现 CSS i18n？","date":"2022-04-09T00:00:00.000Z","categories":"Valaxy 开发笔记","tags":["valaxy","i18n","笔记"],"end":true},"headers":[{"level":2,"title":"Vue-i18n","slug":"vue-i18n","link":"#vue-i18n","children":[{"level":3,"title":"Messages when SSG","slug":"messages-when-ssg","link":"#messages-when-ssg","children":[]}]},{"level":2,"title":"CSS i18n - Another solution","slug":"css-i18n-another-solution","link":"#css-i18n-another-solution","children":[{"level":3,"title":"Result","slug":"result","link":"#result","children":[]},{"level":3,"title":"Steps","slug":"steps","link":"#steps","children":[]}]}],"relativePath":"pages/posts/i18n.md","path":"C:\\\\Users\\\\me\\\\repos\\\\yyj\\\\valaxy\\\\docs\\\\pages\\\\posts\\\\i18n.md","lastUpdated":1696263339000}');
+const _sfc_main = {
+  name: "pages/posts/i18n.md",
+  data() {
+    return { data, frontmatter: data.frontmatter, $frontmatter: data.frontmatter };
+  },
+  setup() {
+    const route = useRoute();
+    route.meta.frontmatter = Object.assign(route.meta.frontmatter, data.frontmatter);
+    provide("pageData", data);
+  }
+};
+function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_ValaxyMain = __unplugin_components_0;
+  const _component_PressToggleLocale = _sfc_main$1;
+  const _component_AppLink = _sfc_main$2;
+  _push(ssrRenderComponent(_component_ValaxyMain, mergeProps({
+    frontmatter: $data.frontmatter,
+    data: $data.data
+  }, _attrs), {
+    "main-content-md": withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<div class="tip custom-block"${_scopeId}><p class="custom-block-title"${_scopeId}><i class="icon i-carbon-thumbs-up"${_scopeId}></i><span lang="en"${_scopeId}>TIP</span><span lang="zh-CN"${_scopeId}>提示</span></p><p${_scopeId}>You can click this button to toggle locales.</p></div><div class="text-center"${_scopeId}>`);
+        _push2(ssrRenderComponent(_component_PressToggleLocale, { class: "btn shadow" }, null, _parent2, _scopeId));
+        _push2(`</div><div lang="zh-CN"${_scopeId}><blockquote${_scopeId}><p${_scopeId}>在一个页面中实现 i18n</p></blockquote><p${_scopeId}>为了使 `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          href: "https://github.com/YunYouJun/valaxy",
+          target: "_blank",
+          rel: "noreferrer"
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`Valaxy`);
+            } else {
+              return [
+                createTextVNode("Valaxy")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(` 成为一个国际化的项目，i18n 是必不可少的。</p><p${_scopeId}>常见的 i18n 方案为采用不同的路径（如 <code${_scopeId}>/zh-CN/</code>）或解析不同的域名（<code${_scopeId}>cn.xxx.xxx</code>）来分别维护。</p><blockquote${_scopeId}><p${_scopeId}>此外还可使用 `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          href: "https://crowdin.com/",
+          target: "_blank",
+          rel: "noreferrer"
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`crowdin`);
+            } else {
+              return [
+                createTextVNode("crowdin")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(` 平台辅助用户进行多语言翻译。</p></blockquote><p${_scopeId}>但对于博客来说，这显然都很麻烦。 当你需要 i18n 时，你不得不同时维护多个目录下的文章。<br${_scopeId}> 当文章间存在相同的示例时，你还需要维护相同的内容。非常不优雅。</p><p${_scopeId}>Valaxy 中， 站点的独立字段部分（如文章目录：Table of Contents）基于 `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          href: "https://vue-i18n.intlify.dev/",
+          target: "_blank",
+          rel: "noreferrer"
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`vue-i18n`);
+            } else {
+              return [
+                createTextVNode("vue-i18n")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(` 实现， 而文章内容部分的大段文本则采用另一种 CSS i18n 的方案。</p><p${_scopeId}>`);
+        _push2(ssrRenderComponent(_component_AppLink, { href: "#result" }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`我想先看看效果`);
+            } else {
+              return [
+                createTextVNode("我想先看看效果")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(`</p></div><!-- more --><div lang="en"${_scopeId}><blockquote${_scopeId}><p${_scopeId}><strong${_scopeId}>i18n in One Page</strong></p></blockquote><p${_scopeId}>In order to make `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          href: "https://github.com/YunYouJun/valaxy",
+          target: "_blank",
+          rel: "noreferrer"
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`Valaxy`);
+            } else {
+              return [
+                createTextVNode("Valaxy")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(` an international project, i18n is essential.</p><p${_scopeId}>Common i18n schemes are maintained separately using different paths (e.g. <code${_scopeId}>/zh-CN/</code>) or resolving different domain names (<code${_scopeId}>cn.xxx.xxx</code>).</p><blockquote${_scopeId}><p${_scopeId}>In addition, the `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          href: "https://crowdin.com/",
+          target: "_blank",
+          rel: "noreferrer"
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`crowdin`);
+            } else {
+              return [
+                createTextVNode("crowdin")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(` platform can be used to assist users with multilingual translations.</p></blockquote><p${_scopeId}>But for blogs, this is obviously all a hassle. When you need i18n, you have to maintain articles in multiple directories at the same time.<br${_scopeId}> You also have to maintain the same content when the same examples exist between articles. Very inelegant.</p><p${_scopeId}>In Valaxy, the The standalone fields of the site (e.g. Table of Contents) are implemented based on `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          href: "https://vue-i18n.intlify.dev/",
+          target: "_blank",
+          rel: "noreferrer"
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`vue-i18n`);
+            } else {
+              return [
+                createTextVNode("vue-i18n")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(`. The large text sections of the article content section use a different CSS i18n scheme.</p><p${_scopeId}>`);
+        _push2(ssrRenderComponent(_component_AppLink, { href: "#result" }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`I want to see the result first.`);
+            } else {
+              return [
+                createTextVNode("I want to see the result first.")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(`</p></div><h2 id="vue-i18n" tabindex="-1"${_scopeId}>Vue-i18n `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          class: "header-anchor",
+          href: "#vue-i18n",
+          "aria-label": 'Permalink to "Vue-i18n"'
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`​`);
+            } else {
+              return [
+                createTextVNode("​")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(`</h2><div lang="zh-CN"${_scopeId}><p${_scopeId}>配置 Vite Vue-i18n 插件 `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          href: "https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n",
+          target: "_blank",
+          rel: "noreferrer"
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`@intlify/unplugin-vue-i18n`);
+            } else {
+              return [
+                createTextVNode("@intlify/unplugin-vue-i18n")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(`：</p></div><div lang="en"${_scopeId}><p${_scopeId}>Config Vite Vue-i18n plugin `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          href: "https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n",
+          target: "_blank",
+          rel: "noreferrer"
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`@intlify/unplugin-vue-i18n`);
+            } else {
+              return [
+                createTextVNode("@intlify/unplugin-vue-i18n")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(`：</p></div><div class="language-ts"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>ts</span><pre class="shiki github-dark vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> path </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;node:path&#39;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> { defineConfig } </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;vite&#39;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> VueI18n </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;@intlify/unplugin-vue-i18n/vite&#39;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>export</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>default</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>defineConfig</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>({</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  plugins: [</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>VueI18n</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>({</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      runtimeOnly: </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>true</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      compositionOnly: </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>true</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      include: [path.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>resolve</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(__dirname, </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;locales/**&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>)],</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    }),</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  ],</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>})</span></span></code></pre><pre class="shiki github-light vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> path </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;node:path&#39;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> { defineConfig } </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;vite&#39;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> VueI18n </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;@intlify/unplugin-vue-i18n/vite&#39;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>export</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>default</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>defineConfig</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>({</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  plugins: [</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>VueI18n</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>({</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      runtimeOnly: </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>true</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      compositionOnly: </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>true</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      include: [path.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>resolve</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(__dirname, </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;locales/**&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>)],</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    }),</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  ],</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>})</span></span></code></pre></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>在 <code${_scopeId}>locales</code> 目录下配置 <code${_scopeId}>zh-CN.yml</code> 与 <code${_scopeId}>en.yml</code>：</p></div><div lang="en"${_scopeId}><p${_scopeId}>Write <code${_scopeId}>zh-CN.yml</code> and <code${_scopeId}>en.yml</code> in <code${_scopeId}>locales</code>.</p></div><div class="language-yaml"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>yaml</span><pre class="shiki github-dark vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}># zh-CN.yml</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>sidebar</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>:</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>toc</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>: </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>文章目录</span></span></code></pre><pre class="shiki github-light vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}># zh-CN.yml</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>sidebar</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>:</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>toc</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>: </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>文章目录</span></span></code></pre></div><div class="language-yaml"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>yaml</span><pre class="shiki github-dark vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}># en.yml</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>sidebar</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>:</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>toc</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>: </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>Table of Contents</span></span></code></pre><pre class="shiki github-light vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}># en.yml</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>sidebar</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>:</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>toc</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>: </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>Table of Contents</span></span></code></pre></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>并在主入口文件（如 <code${_scopeId}>main.ts</code>）中初始化：</p></div><div lang="en"${_scopeId}><p${_scopeId}>and initialized in the main entry file (e.g. <code${_scopeId}>main.ts</code>).</p></div><div class="language-ts"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>ts</span><pre class="shiki github-dark vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> { createI18n } </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;vue-i18n&#39;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// import { createApp } from &#39;vue&#39;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// import App from &#39;./App.vue&#39;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>/*</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}> * All i18n resources specified in the plugin \`include\` option can be loaded</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}> * at once using the import syntax</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}> */</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> messages </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;@intlify/unplugin-vue-i18n/messages&#39;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>i18n</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>createI18n</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>({</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  legacy: </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>false</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  locale: </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;en&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  messages,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>})</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// const app = createApp(App)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>app.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>use</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(i18n)</span></span></code></pre><pre class="shiki github-light vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> { createI18n } </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;vue-i18n&#39;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// import { createApp } from &#39;vue&#39;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// import App from &#39;./App.vue&#39;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>/*</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}> * All i18n resources specified in the plugin \`include\` option can be loaded</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}> * at once using the import syntax</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}> */</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> messages </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;@intlify/unplugin-vue-i18n/messages&#39;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>i18n</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>createI18n</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>({</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  legacy: </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>false</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  locale: </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;en&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  messages,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>})</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// const app = createApp(App)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>app.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>use</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(i18n)</span></span></code></pre></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>此时即可在 Vue 中使用 <code${_scopeId}>t(&#39;&#39;)</code> 来翻译对应字段文本。</p></div><div lang="en"${_scopeId}><p${_scopeId}>You can then use <code${_scopeId}>t(&#39;&#39;)</code> in Vue to translate the text of the corresponding field.</p></div><div class="language-vue"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>vue</span><pre class="shiki github-dark vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&lt;</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>script</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&quot;ts&quot;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>setup</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> { useI18n } </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;vue-i18n&#39;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> { </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>t</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> } </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>useI18n</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>()</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&lt;/</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>script</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&lt;</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>template</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  &lt;</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>h2</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt; {{ t(&quot;sidebar.toc&quot;) }} &lt;/</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>h2</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&lt;/</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>template</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&lt;</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>script</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&quot;ts&quot;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>setup</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> { useI18n } </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;vue-i18n&#39;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> { </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>t</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> } </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>useI18n</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>()</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&lt;/</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>script</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&lt;</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>template</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  &lt;</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>h2</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt; {{ t(&quot;sidebar.toc&quot;) }} &lt;/</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>h2</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&lt;/</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>template</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt;</span></span></code></pre></div><h3 id="messages-when-ssg" tabindex="-1"${_scopeId}>Messages when SSG `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          class: "header-anchor",
+          href: "#messages-when-ssg",
+          "aria-label": 'Permalink to "Messages when SSG"'
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`​`);
+            } else {
+              return [
+                createTextVNode("​")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(`</h3><div lang="zh-CN"${_scopeId}><p${_scopeId}><code${_scopeId}>vue-i18n</code> 支持使用虚拟模块 <code${_scopeId}>@intlify/unplugin-vue-i18n/messages</code> 的方式来导入多语言。</p><p${_scopeId}>可惜的是，它并没有完美地支持 SSR。`);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          href: "https://github.com/intlify/bundle-tools/issues/78",
+          target: "_blank",
+          rel: "noreferrer"
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`#78 | intlify/bundle-tools`);
+            } else {
+              return [
+                createTextVNode("#78 | intlify/bundle-tools")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(`</p><p${_scopeId}>而 Vite 的 <code${_scopeId}>i<wbr${_scopeId}>mport.meta.globEager</code> 导入必须使用静态字符串。</p></div><div lang="en"${_scopeId}><p${_scopeId}><code${_scopeId}>vue-i18n</code> supports importing multiple languages by using the virtual module <code${_scopeId}>@intlify/unplugin-vue-i18n/messages</code>.</p><p${_scopeId}>Unfortunately, it doesn&#39;t support SSR perfectly.`);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          href: "https://github.com/intlify/bundle-tools/issues/78",
+          target: "_blank",
+          rel: "noreferrer"
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`#78 | intlify/bundle-tools`);
+            } else {
+              return [
+                createTextVNode("#78 | intlify/bundle-tools")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(`</p><p${_scopeId}>And Vite&#39;s <code${_scopeId}>i<wbr${_scopeId}>mport.meta.globEager</code> import must use a static string.</p></div><div class="language-ts"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>ts</span><pre class="shiki github-dark has-highlighted-lines vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>messages</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> Object.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>fromEntries</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  Object.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>entries</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span></span>
+<span class="line highlighted"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>.</span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>meta</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>globEager</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;../../locales/*.y(a)?ml&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  )</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    .</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>map</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(([</span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>key</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>, </span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>value</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>]) </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=&gt;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>yaml</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> key.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>endsWith</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;.yaml&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>return</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> [key.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>slice</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>14</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>, yaml </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>?</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>-</span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>5</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>-</span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>4</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>), value.default]</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    }),</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>)</span></span></code></pre><pre class="shiki github-light has-highlighted-lines vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>messages</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> Object.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>fromEntries</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  Object.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>entries</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span></span>
+<span class="line highlighted"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>.</span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>meta</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>globEager</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;../../locales/*.y(a)?ml&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  )</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    .</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>map</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(([</span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>key</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>, </span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>value</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>]) </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=&gt;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>yaml</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> key.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>endsWith</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;.yaml&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>return</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> [key.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>slice</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>14</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>, yaml </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>?</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>-</span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>5</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>-</span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>4</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>), value.default]</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    }),</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>)</span></span></code></pre></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>当拥有确定目录时，它是奏效的，但 Valaxy 还需要将 Valaxy 自身的 <code${_scopeId}>locales</code> 与主题的 <code${_scopeId}>locales</code> 以及用户自定义的 <code${_scopeId}>locales</code> 进行合并。 这意味着我们不能使用变量来拼接字符串进行导入，对于不同包管理器的目录结构不同，我们很难确定这些 <code${_scopeId}>locales</code> 处于何处的相对位置。</p><p${_scopeId}>因此我采用插件虚拟模块（<code${_scopeId}>@valaxyjs/locales</code>）的形式实现（依次导入各目录下的 locales 数据并合并）：</p><blockquote${_scopeId}><p${_scopeId}>Vite 虚拟模块的原理其实就是拼接字符串。</p></blockquote></div><div lang="en"${_scopeId}><p${_scopeId}>It works when there is a defined directory, but Valaxy also needs to merge Valaxy&#39;s own <code${_scopeId}>locales</code> with the theme&#39;s <code${_scopeId}>locales</code> and user-defined <code${_scopeId}>locales</code>. This means that we cannot use variables to splice strings for import, and it is difficult to determine the relative location of where these <code${_scopeId}>locales</code> are for different package managers with different directory structures.</p><p${_scopeId}>So I implemented it in the form of a plugin virtual module (<code${_scopeId}>@valaxyjs/locales</code>):</p><blockquote${_scopeId}><p${_scopeId}>The principle of the Vite virtual module is actually a spliced string.</p></blockquote></div><div class="language-ts"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>ts</span><pre class="shiki github-dark vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>type</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> { Plugin } </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;vite&#39;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// import the locales data in each directory in turn and merge them</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>function</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>generateLocales</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>roots</span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>string</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>[]) {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>imports</span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>string</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>[] </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> [</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;const messages = { &quot;zh-CN&quot;: {}, en: {} }&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  ]</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>languages</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> [</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;zh-CN&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>, </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;en&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>]</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  roots.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>forEach</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>((</span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>root</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>, </span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>i</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>) </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=&gt;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    languages.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>forEach</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>((</span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>) </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=&gt;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>langYml</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>\`\${</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>root</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>}/locales/\${</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>}.yml\`</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>if</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> (fs.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>existsSync</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(langYml) </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>&amp;&amp;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> fs.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>readFileSync</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(langYml, </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;utf-8&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>)) {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>        </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>varName</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> lang.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>replace</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;-&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>, </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>) </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>+</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> i</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>        </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// in windows, you need to change slash</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>        </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// more info you can refer &#39;packages/valaxy/src/node/plugins/index.ts&#39;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>        imports.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>push</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>\`import \${</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>varName</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>} from &quot;\${</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>langYml</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>}&quot;\`</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>        imports.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>push</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>\`Object.assign(messages[&#39;\${</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>}&#39;], \${</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>varName</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>})\`</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      }</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    })</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  })</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  imports.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>push</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;export default messages&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>return</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> imports.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>join</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;</span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>\\n</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>}</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>export</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>function</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>createValaxyPlugin</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>options</span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>ResolvedValaxyOptions</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>)</span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>Plugin</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// ...</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>roots</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> [options.clientRoot, options.themeRoot, options.userRoot]</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>return</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    name: </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;Valaxy&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>load</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>id</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>) {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// ...</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>if</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> (id </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>===</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;/@valaxyjs/locales&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>        </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>return</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>generateLocales</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(roots)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    },</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>async</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>handleHotUpdate</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>ctx</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>) {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// ...</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    },</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  }</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>}</span></span></code></pre><pre class="shiki github-light vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>type</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> { Plugin } </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;vite&#39;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// import the locales data in each directory in turn and merge them</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>function</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>generateLocales</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>roots</span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>string</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>[]) {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>imports</span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>string</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>[] </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> [</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;const messages = { &quot;zh-CN&quot;: {}, en: {} }&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  ]</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>languages</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> [</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;zh-CN&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>, </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;en&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>]</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  roots.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>forEach</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>((</span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>root</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>, </span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>i</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>) </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=&gt;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    languages.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>forEach</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>((</span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>) </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=&gt;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>langYml</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>\`\${</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>root</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>}/locales/\${</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>}.yml\`</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>if</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> (fs.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>existsSync</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(langYml) </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>&amp;&amp;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> fs.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>readFileSync</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(langYml, </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;utf-8&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>)) {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>        </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>varName</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> lang.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>replace</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;-&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>, </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>) </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>+</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> i</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>        </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// in windows, you need to change slash</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>        </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// more info you can refer &#39;packages/valaxy/src/node/plugins/index.ts&#39;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>        imports.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>push</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>\`import \${</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>varName</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>} from &quot;\${</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>langYml</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>}&quot;\`</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>        imports.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>push</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>\`Object.assign(messages[&#39;\${</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>}&#39;], \${</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>varName</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>})\`</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      }</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    })</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  })</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  imports.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>push</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;export default messages&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>return</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> imports.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>join</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;</span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>\\n</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>}</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>export</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>function</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>createValaxyPlugin</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>options</span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>ResolvedValaxyOptions</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>)</span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>Plugin</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// ...</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>roots</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> [options.clientRoot, options.themeRoot, options.userRoot]</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>return</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    name: </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;Valaxy&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>load</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>id</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>) {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// ...</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>if</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> (id </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>===</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;/@valaxyjs/locales&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>        </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>return</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>generateLocales</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(roots)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    },</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>async</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>handleHotUpdate</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>ctx</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>) {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// ...</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    },</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  }</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>}</span></span></code></pre></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>最后在 i18n 的初始化文件加载：</p></div><div lang="en"${_scopeId}><p${_scopeId}>Finally load in the i18n initialization file:</p></div><div class="language-ts"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>ts</span><pre class="shiki github-dark vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// i18n.ts</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> messages </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;/@valaxyjs/locales&#39;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>i18n</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>createI18n</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>({</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  legacy: </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>false</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  locale: </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;en&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  messages,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>})</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>app.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>use</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(i18n)</span></span></code></pre><pre class="shiki github-light vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// i18n.ts</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>import</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> messages </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>from</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;/@valaxyjs/locales&#39;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>i18n</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>createI18n</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>({</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  legacy: </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>false</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  locale: </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;en&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  messages,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>})</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>app.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>use</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(i18n)</span></span></code></pre></div><h2 id="css-i18n-another-solution" tabindex="-1"${_scopeId}>CSS i18n - Another solution `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          class: "header-anchor",
+          href: "#css-i18n-another-solution",
+          "aria-label": 'Permalink to "CSS i18n - Another solution"'
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`​`);
+            } else {
+              return [
+                createTextVNode("​")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(`</h2><div lang="zh-CN"${_scopeId}><blockquote${_scopeId}><p${_scopeId}>CSS i18n - 另一种互补解决方案</p></blockquote></div><div lang="en"${_scopeId}><blockquote${_scopeId}><p${_scopeId}>CSS i18n - Another complementary solution</p></blockquote></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>文章部分拥有大段的文本，而 <code${_scopeId}>vue-i18n</code> 的场景则在于一些独立的字段翻译。</p><p${_scopeId}>而传统的分文件独立管理的方式，对于博客来说其实并不方便。<br${_scopeId}> 大多数情况，你并不会想专门建立一个文件夹来管理它。</p><p${_scopeId}>因此我尝试使用纯 CSS 解决该问题。</p></div><div lang="en"${_scopeId}><p${_scopeId}>While the article section has large sections of text, the scenario of <code${_scopeId}>vue-i18n</code> lies in some separate field translations.</p><p${_scopeId}>And the traditional way of managing them independently in separate files is not really convenient for blogs.<br${_scopeId}> In most cases, you don&#39;t want to create a dedicated folder to manage it.</p><p${_scopeId}>So I tried to solve the problem using pure CSS.</p></div><div lang="zh-CN"${_scopeId}><div class="tip custom-block"${_scopeId}><p class="custom-block-title"${_scopeId}><i class="icon i-carbon-thumbs-up"${_scopeId}></i><span lang="en"${_scopeId}>思路</span><span lang="zh-CN"${_scopeId}>思路</span></p><p${_scopeId}>即借助 CSS 规则，根据对应语言，显示对应区块内容。<br${_scopeId}> 大体方案：通过 `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          href: "https://github.com/markdown-it/markdown-it-container",
+          target: "_blank",
+          rel: "noreferrer"
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`markdown-it-container`);
+            } else {
+              return [
+                createTextVNode("markdown-it-container")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(` 设置 fence 预编译 Markdown， 为需要进行 i18n 的段落包裹新的 <code${_scopeId}>&lt;div lang=&quot;zh-CN&quot;&gt;&lt;/div&gt;</code>，并使用 CSS 默认隐藏它们。 当页面初始化或切换语言时，为 html 添加对应语言类，编写对应 CSS 以在该类下显示对应语言的区块。</p></div></div><div lang="en"${_scopeId}><div class="tip custom-block"${_scopeId}><p class="custom-block-title"${_scopeId}><i class="icon i-carbon-thumbs-up"${_scopeId}></i><span lang="en"${_scopeId}>IDEA</span><span lang="zh-CN"${_scopeId}>IDEA</span></p><p${_scopeId}>That is, with the help of CSS rules, the content of the corresponding block is displayed according to the corresponding language.<br${_scopeId}> The general solution: set fence to pre-compile Markdown via `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          href: "https://github.com/markdown-it/markdown-it-container",
+          target: "_blank",
+          rel: "noreferrer"
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`markdown-it-container`);
+            } else {
+              return [
+                createTextVNode("markdown-it-container")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(`. Wrap new <code${_scopeId}>&lt;div lang=&quot;zh-CN&quot;&gt;&lt;/div&gt;</code>s for the paragraphs that need to be i18n and hide them by default with CSS. When the page initializes or switches languages, add the corresponding language class to html and write the corresponding CSS to display the corresponding language block under that class.</p></div></div><div lang="zh-CN"${_scopeId}><p${_scopeId}><strong${_scopeId}>优势</strong>：</p><ul${_scopeId}><li${_scopeId}>可在同一个 Markdown 文件中进行维护，书写便捷</li><li${_scopeId}>预加载与实时切换</li><li${_scopeId}>URL 不变，便于管理与分享，且切换无需刷新页面</li><li${_scopeId}>渐进式翻译（只翻译部分内容并可共用示例内容等）</li></ul><p${_scopeId}><strong${_scopeId}>劣势</strong>：</p><ul${_scopeId}><li${_scopeId}>多语言内容被渲染在同一页面中，增加冗余（但我觉得这微小的体积完全是可以接受的）</li></ul></div><div lang="en"${_scopeId}><p${_scopeId}><strong${_scopeId}>Advantages</strong>:</p><ul${_scopeId}><li${_scopeId}>Can be maintained in the same Markdown file, easy to write</li><li${_scopeId}>Pre-loading and real-time switching</li><li${_scopeId}>URLs remain unchanged, easy to manage and share, and switch without refreshing the page</li></ul><p${_scopeId}><strong${_scopeId}>Disadvantages</strong>:</p><ul${_scopeId}><li${_scopeId}>Multi-language content is rendered in the same page, adding redundancy (but I think the tiny size is perfectly acceptable)</li></ul></div><h3 id="result" tabindex="-1"${_scopeId}>Result `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          class: "header-anchor",
+          href: "#result",
+          "aria-label": 'Permalink to "Result"'
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`​`);
+            } else {
+              return [
+                createTextVNode("​")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(`</h3><div lang="zh-CN"${_scopeId}><p${_scopeId}><strong${_scopeId}>效果如下</strong>（点击按钮切换）：</p></div><div lang="en"${_scopeId}><p${_scopeId}><strong${_scopeId}>The effect is as follows</strong> (click the button to switch).</p></div>`);
+        _push2(ssrRenderComponent(_component_PressToggleLocale, { class: "shadow" }, null, _parent2, _scopeId));
+        _push2(`<div lang="zh-CN"${_scopeId}><p${_scopeId}>另一种 i18n 方案。</p><blockquote${_scopeId}><p${_scopeId}>更多内容：...</p></blockquote></div><div lang="en"${_scopeId}><p${_scopeId}>Another i18n method.</p><blockquote${_scopeId}><p${_scopeId}>More info...</p></blockquote></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>中文</p></div><div lang="en"${_scopeId}><p${_scopeId}>English</p></div><hr${_scopeId}><div lang="zh-CN"${_scopeId}><p${_scopeId}><strong${_scopeId}>书写方式</strong>如下：</p></div><div lang="en"${_scopeId}><p${_scopeId}><strong${_scopeId}>Written like this</strong>:</p></div><div class="language-md"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>md</span><pre class="shiki github-dark vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>::: zh-CN</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>另一种 i18n 方案。</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>更多内容：...</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>:::</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>::: en</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>Another i18n method.</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>More info...</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>:::</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>::: zh-CN</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>中文</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>:::</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>::: en</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>English</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>:::</span></span></code></pre><pre class="shiki github-light vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>::: zh-CN</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>另一种 i18n 方案。</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>更多内容：...</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>:::</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>::: en</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>Another i18n method.</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>More info...</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>:::</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>::: zh-CN</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>中文</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>:::</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>::: en</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>English</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>:::</span></span></code></pre></div><h3 id="steps" tabindex="-1"${_scopeId}>Steps `);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          class: "header-anchor",
+          href: "#steps",
+          "aria-label": 'Permalink to "Steps"'
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`​`);
+            } else {
+              return [
+                createTextVNode("​")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(`</h3><div lang="zh-CN"${_scopeId}><p${_scopeId}><strong${_scopeId}>实现步骤</strong></p></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>为了能够借助 CSS 处理 i18n，我们借助 markdown-it-container 的 fence 包裹 Markdown 中需要参与 i18n 的内容。</p></div><div lang="en"${_scopeId}><p${_scopeId}>To be able to handle i18n with CSS, we use markdown-it-container&#39;s fence to wrap Markdown content that needs to participate in i18n.</p></div><div class="language-ts"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>ts</span><pre class="shiki github-dark vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>export</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>function</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>containerPlugin</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>md</span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>MarkdownIt</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>) {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// ...</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>languages</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> [</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;zh-CN&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>, </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;en&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>]</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  languages.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>forEach</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>((</span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>) </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=&gt;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    md.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>use</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(container, lang, {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>render</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>: (</span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>tokens</span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>Token</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>[], </span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>idx</span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>number</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>) </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=&gt;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> tokens[idx].nesting </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>===</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>1</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>?</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>\`&lt;div lang=&quot;\${</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>}&quot;&gt;</span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>\\n</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>\`</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;&lt;/div&gt;</span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>\\n</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    })</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  })</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>}</span></span></code></pre><pre class="shiki github-light vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>export</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>function</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>containerPlugin</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>md</span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>MarkdownIt</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>) {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// ...</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>languages</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> [</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;zh-CN&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>, </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;en&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>]</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  languages.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>forEach</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>((</span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>) </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=&gt;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    md.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>use</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(container, lang, {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>render</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>: (</span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>tokens</span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>Token</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>[], </span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>idx</span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>number</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>) </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=&gt;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> tokens[idx].nesting </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>===</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>1</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>?</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>\`&lt;div lang=&quot;\${</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>}&quot;&gt;</span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>\\n</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>\`</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;&lt;/div&gt;</span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>\\n</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>,</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    })</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  })</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>}</span></span></code></pre></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>这可以使：</p></div><div lang="en"${_scopeId}><p${_scopeId}>This allows:</p></div><div class="language-md"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>md</span><pre class="shiki github-dark vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>::: zh-CN</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>中文</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>:::</span></span></code></pre><pre class="shiki github-light vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>::: zh-CN</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>中文</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>:::</span></span></code></pre></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>变成 <code${_scopeId}>&lt;div lang=&quot;zh-CN&quot;&gt;&lt;/div&gt;</code> 的形式。</p><blockquote${_scopeId}><p${_scopeId}>`);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang",
+          target: "_blank",
+          rel: "noreferrer"
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`lang`);
+            } else {
+              return [
+                createTextVNode("lang")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(` 是 HTML 的一个标准字段。</p></blockquote><p${_scopeId}>为避免 class 命名冲突，我们可以采用 CSS attribute 的查询方式。</p><p${_scopeId}>首先将 i18n 全部隐藏：</p></div><div lang="en"${_scopeId}><p${_scopeId}>Be <code${_scopeId}>&lt;div lang=&quot;zh-CN&quot;&gt;&lt;/div&gt;</code>.</p><blockquote${_scopeId}><p${_scopeId}>`);
+        _push2(ssrRenderComponent(_component_AppLink, {
+          href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang",
+          target: "_blank",
+          rel: "noreferrer"
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`lang`);
+            } else {
+              return [
+                createTextVNode("lang")
+              ];
+            }
+          }),
+          _: 1
+          /* STABLE */
+        }, _parent2, _scopeId));
+        _push2(` is a standard field in HTML.</p></blockquote><p${_scopeId}>To avoid class naming conflicts, we can use the CSS attribute query.</p><p${_scopeId}>First, hide all i18n:</p></div><div class="language-scss"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>scss</span><pre class="shiki github-dark vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>html</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>[</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>] {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>.markdown-body</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>div</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>[</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>] {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>display</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>: </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>none</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    }</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  }</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>}</span></span></code></pre><pre class="shiki github-light vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>html</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>[</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>] {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>.markdown-body</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>div</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>[</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>] {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>display</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>: </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>none</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    }</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  }</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>}</span></span></code></pre></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>编写 CSS/SCSS 规则，设定 html <code${_scopeId}>lang</code> 为对应语言时，显示对应语言的元素即可。</p></div><div lang="en"${_scopeId}><p${_scopeId}>Write CSS/SCSS rules and set html <code${_scopeId}>lang</code> to display elements in the corresponding language when it is the corresponding language.</p></div><div class="language-scss"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>scss</span><pre class="shiki github-dark vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>$languages</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>: zh</span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>-</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>CN, en;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>@each</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>$lang</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>in</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>$languages</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>html</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>[</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&quot;</span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>#{$lang}</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&quot;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>] {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// only for markdown</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>.markdown-body</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>div</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>[</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&quot;</span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>#{$lang}</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&quot;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>] {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>        </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>display</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>: </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>block</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      }</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    }</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  }</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>}</span></span></code></pre><pre class="shiki github-light vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>$languages</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>: zh</span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>-</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>CN, en;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>@each</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>$lang</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>in</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>$languages</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>html</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>[</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&quot;</span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>#{$lang}</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&quot;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>] {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// only for markdown</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>.markdown-body</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>div</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>[</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&quot;</span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>#{$lang}</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&quot;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>] {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>        </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>display</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>: </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>block</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      }</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    }</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  }</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>}</span></span></code></pre></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>为了帮助用户记住自己的语言，还请不要忘记初始化。</p></div><div lang="en"${_scopeId}><p${_scopeId}>To help users remember their language, please also don&#39;t forget to initialize.</p></div><div class="language-html"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>html</span><pre class="shiki github-dark has-highlighted-lines vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&lt;!</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>DOCTYPE</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>html</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&lt;</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>html</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&quot;en&quot;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>class</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&quot;i18n&quot;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&lt;</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>head</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>&lt;!-- ... --&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  &lt;</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>script</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    (</span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>function</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>() {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#79B8FF" })}"${_scopeId}>locale</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> localStorage.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>getItem</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;valaxy-locale&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>) </span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>||</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;en&#39;</span></span>
+<span class="line highlighted"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>      document.documentElement.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>setAttribute</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;lang&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>, locale)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>    })()</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  &lt;/</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>script</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&lt;/</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>head</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&lt;</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>body</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt;...&lt;/</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>body</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&lt;/</span><span style="${ssrRenderStyle({ "color": "#85E89D" })}"${_scopeId}>html</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>&gt;</span></span></code></pre><pre class="shiki github-light has-highlighted-lines vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&lt;!</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>DOCTYPE</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>html</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&lt;</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>html</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&quot;en&quot;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>class</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&quot;i18n&quot;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&lt;</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>head</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>&lt;!-- ... --&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  &lt;</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>script</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    (</span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>function</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>() {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>const</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#005CC5" })}"${_scopeId}>locale</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>=</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> localStorage.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>getItem</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;valaxy-locale&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>) </span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>||</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;en&#39;</span></span>
+<span class="line highlighted"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>      document.documentElement.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>setAttribute</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;lang&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>, locale)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>    })()</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  &lt;/</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>script</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&lt;/</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>head</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&lt;</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>body</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt;...&lt;/</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>body</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt;</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&lt;/</span><span style="${ssrRenderStyle({ "color": "#22863A" })}"${_scopeId}>html</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>&gt;</span></span></code></pre></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>切换语言时则可做如下处理：</p></div><div lang="en"${_scopeId}><p${_scopeId}>When switching languages, the following can be done.</p></div><div class="language-ts"${_scopeId}><button title="Copy Code" class="copy"${_scopeId}></button><span class="lang"${_scopeId}>ts</span><pre class="shiki github-dark vp-code-dark"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>function</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>toggleLocales</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#FFAB70" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#F97583" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>val</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>) {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// ...</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// save locale</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  localStorage.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>setItem</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;valaxy-locale&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>, lang)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// set html lang</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>  document.documentElement.</span><span style="${ssrRenderStyle({ "color": "#B392F0" })}"${_scopeId}>setAttribute</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#9ECBFF" })}"${_scopeId}>&#39;lang&#39;</span><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>, lang)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#E1E4E8" })}"${_scopeId}>}</span></span></code></pre><pre class="shiki github-light vp-code-light"${_scopeId}><code${_scopeId}><span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>function</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>toggleLocales</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#E36209" })}"${_scopeId}>lang</span><span style="${ssrRenderStyle({ "color": "#D73A49" })}"${_scopeId}>:</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}> </span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>val</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>) {</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// ...</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// save locale</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  localStorage.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>setItem</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;valaxy-locale&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>, lang)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  </span><span style="${ssrRenderStyle({ "color": "#6A737D" })}"${_scopeId}>// set html lang</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>  document.documentElement.</span><span style="${ssrRenderStyle({ "color": "#6F42C1" })}"${_scopeId}>setAttribute</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>(</span><span style="${ssrRenderStyle({ "color": "#032F62" })}"${_scopeId}>&#39;lang&#39;</span><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>, lang)</span></span>
+<span class="line"${_scopeId}><span style="${ssrRenderStyle({ "color": "#24292E" })}"${_scopeId}>}</span></span></code></pre></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>值得一提的是，在查看 <code${_scopeId}>lang</code> 文档时，我意外地发现 <code${_scopeId}>:lang</code> 也是一种支持的选择器。 因此上述的 CSS 中 <code${_scopeId}>[lang=&quot;xxx&quot;]</code> 也可以替换为 <code${_scopeId}>:lang(xxx)</code>。</p><p${_scopeId}>但是 <code${_scopeId}>:lang()</code> 也会命中默认语言的 <code${_scopeId}>div</code>（没有 lang 字段，但处于含有 lang 的标签中），因此为了安全，我们还是应该使用 class 的属性查询。</p></div><div lang="en"${_scopeId}><p${_scopeId}>It&#39;s worth mentioning that when looking at the <code${_scopeId}>lang</code> documentation, I accidentally found that <code${_scopeId}>:lang</code> is also a supported selector. So <code${_scopeId}>[lang=&quot;xxx&quot;]</code> in the CSS above could also be replaced with <code${_scopeId}>:lang(xxx)</code>.</p><p${_scopeId}>However, <code${_scopeId}>:lang()</code> will also hit the default language <code${_scopeId}>div</code> (which has no lang field but is in a tag containing lang), so to be safe we should still use the class attribute query.</p></div><div lang="zh-CN"${_scopeId}><p${_scopeId}>我认为 vue-i18n 与 CSS i18n 的互补，可以非常好地解决单页内的 i18n 切换。 不妨一试？</p></div><div lang="en"${_scopeId}><p${_scopeId}>I think vue-i18n complements CSS i18n and could be a very good solution for i18n switching within a single page. Why not give it a try?</p></div>`);
+      } else {
+        return [
+          createVNode("div", { class: "tip custom-block" }, [
+            createVNode("p", { class: "custom-block-title" }, [
+              createVNode("i", { class: "icon i-carbon-thumbs-up" }),
+              createVNode("span", { lang: "en" }, "TIP"),
+              createVNode("span", { lang: "zh-CN" }, "提示")
+            ]),
+            createVNode("p", null, "You can click this button to toggle locales.")
+          ]),
+          createVNode("div", { class: "text-center" }, [
+            createVNode(_component_PressToggleLocale, { class: "btn shadow" })
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("blockquote", null, [
+              createVNode("p", null, "在一个页面中实现 i18n")
+            ]),
+            createVNode("p", null, [
+              createTextVNode("为了使 "),
+              createVNode(_component_AppLink, {
+                href: "https://github.com/YunYouJun/valaxy",
+                target: "_blank",
+                rel: "noreferrer"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("Valaxy")
+                ]),
+                _: 1
+                /* STABLE */
+              }),
+              createTextVNode(" 成为一个国际化的项目，i18n 是必不可少的。")
+            ]),
+            createVNode("p", null, [
+              createTextVNode("常见的 i18n 方案为采用不同的路径（如 "),
+              createVNode("code", null, "/zh-CN/"),
+              createTextVNode("）或解析不同的域名（"),
+              createVNode("code", null, "cn.xxx.xxx"),
+              createTextVNode("）来分别维护。")
+            ]),
+            createVNode("blockquote", null, [
+              createVNode("p", null, [
+                createTextVNode("此外还可使用 "),
+                createVNode(_component_AppLink, {
+                  href: "https://crowdin.com/",
+                  target: "_blank",
+                  rel: "noreferrer"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("crowdin")
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }),
+                createTextVNode(" 平台辅助用户进行多语言翻译。")
+              ])
+            ]),
+            createVNode("p", null, [
+              createTextVNode("但对于博客来说，这显然都很麻烦。 当你需要 i18n 时，你不得不同时维护多个目录下的文章。"),
+              createVNode("br"),
+              createTextVNode(" 当文章间存在相同的示例时，你还需要维护相同的内容。非常不优雅。")
+            ]),
+            createVNode("p", null, [
+              createTextVNode("Valaxy 中， 站点的独立字段部分（如文章目录：Table of Contents）基于 "),
+              createVNode(_component_AppLink, {
+                href: "https://vue-i18n.intlify.dev/",
+                target: "_blank",
+                rel: "noreferrer"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("vue-i18n")
+                ]),
+                _: 1
+                /* STABLE */
+              }),
+              createTextVNode(" 实现， 而文章内容部分的大段文本则采用另一种 CSS i18n 的方案。")
+            ]),
+            createVNode("p", null, [
+              createVNode(_component_AppLink, { href: "#result" }, {
+                default: withCtx(() => [
+                  createTextVNode("我想先看看效果")
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ])
+          ]),
+          createCommentVNode(" more "),
+          createVNode("div", { lang: "en" }, [
+            createVNode("blockquote", null, [
+              createVNode("p", null, [
+                createVNode("strong", null, "i18n in One Page")
+              ])
+            ]),
+            createVNode("p", null, [
+              createTextVNode("In order to make "),
+              createVNode(_component_AppLink, {
+                href: "https://github.com/YunYouJun/valaxy",
+                target: "_blank",
+                rel: "noreferrer"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("Valaxy")
+                ]),
+                _: 1
+                /* STABLE */
+              }),
+              createTextVNode(" an international project, i18n is essential.")
+            ]),
+            createVNode("p", null, [
+              createTextVNode("Common i18n schemes are maintained separately using different paths (e.g. "),
+              createVNode("code", null, "/zh-CN/"),
+              createTextVNode(") or resolving different domain names ("),
+              createVNode("code", null, "cn.xxx.xxx"),
+              createTextVNode(").")
+            ]),
+            createVNode("blockquote", null, [
+              createVNode("p", null, [
+                createTextVNode("In addition, the "),
+                createVNode(_component_AppLink, {
+                  href: "https://crowdin.com/",
+                  target: "_blank",
+                  rel: "noreferrer"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("crowdin")
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }),
+                createTextVNode(" platform can be used to assist users with multilingual translations.")
+              ])
+            ]),
+            createVNode("p", null, [
+              createTextVNode("But for blogs, this is obviously all a hassle. When you need i18n, you have to maintain articles in multiple directories at the same time."),
+              createVNode("br"),
+              createTextVNode(" You also have to maintain the same content when the same examples exist between articles. Very inelegant.")
+            ]),
+            createVNode("p", null, [
+              createTextVNode("In Valaxy, the The standalone fields of the site (e.g. Table of Contents) are implemented based on "),
+              createVNode(_component_AppLink, {
+                href: "https://vue-i18n.intlify.dev/",
+                target: "_blank",
+                rel: "noreferrer"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("vue-i18n")
+                ]),
+                _: 1
+                /* STABLE */
+              }),
+              createTextVNode(". The large text sections of the article content section use a different CSS i18n scheme.")
+            ]),
+            createVNode("p", null, [
+              createVNode(_component_AppLink, { href: "#result" }, {
+                default: withCtx(() => [
+                  createTextVNode("I want to see the result first.")
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ])
+          ]),
+          createVNode("h2", {
+            id: "vue-i18n",
+            tabindex: "-1"
+          }, [
+            createTextVNode("Vue-i18n "),
+            createVNode(_component_AppLink, {
+              class: "header-anchor",
+              href: "#vue-i18n",
+              "aria-label": 'Permalink to "Vue-i18n"'
+            }, {
+              default: withCtx(() => [
+                createTextVNode("​")
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, [
+              createTextVNode("配置 Vite Vue-i18n 插件 "),
+              createVNode(_component_AppLink, {
+                href: "https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n",
+                target: "_blank",
+                rel: "noreferrer"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("@intlify/unplugin-vue-i18n")
+                ]),
+                _: 1
+                /* STABLE */
+              }),
+              createTextVNode("：")
+            ])
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, [
+              createTextVNode("Config Vite Vue-i18n plugin "),
+              createVNode(_component_AppLink, {
+                href: "https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n",
+                target: "_blank",
+                rel: "noreferrer"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("@intlify/unplugin-vue-i18n")
+                ]),
+                _: 1
+                /* STABLE */
+              }),
+              createTextVNode("：")
+            ])
+          ]),
+          createVNode("div", { class: "language-ts" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "ts"),
+            createVNode("pre", { class: "shiki github-dark vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "import"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " path "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "from"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'node:path'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "import"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " { defineConfig } "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "from"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'vite'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "import"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " VueI18n "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "from"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'@intlify/unplugin-vue-i18n/vite'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "export"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "default"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "defineConfig"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "({")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  plugins: [")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "VueI18n"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "({")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      runtimeOnly: "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "true"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      compositionOnly: "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "true"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      include: [path."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "resolve"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "(__dirname, "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'locales/**'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ")],")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    }),")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  ],")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "})")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "import"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " path "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "from"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'node:path'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "import"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " { defineConfig } "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "from"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'vite'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "import"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " VueI18n "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "from"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'@intlify/unplugin-vue-i18n/vite'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "export"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "default"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "defineConfig"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "({")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  plugins: [")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "VueI18n"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "({")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      runtimeOnly: "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "true"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      compositionOnly: "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "true"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      include: [path."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "resolve"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "(__dirname, "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'locales/**'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ")],")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    }),")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  ],")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "})")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, [
+              createTextVNode("在 "),
+              createVNode("code", null, "locales"),
+              createTextVNode(" 目录下配置 "),
+              createVNode("code", null, "zh-CN.yml"),
+              createTextVNode(" 与 "),
+              createVNode("code", null, "en.yml"),
+              createTextVNode("：")
+            ])
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, [
+              createTextVNode("Write "),
+              createVNode("code", null, "zh-CN.yml"),
+              createTextVNode(" and "),
+              createVNode("code", null, "en.yml"),
+              createTextVNode(" in "),
+              createVNode("code", null, "locales"),
+              createTextVNode(".")
+            ])
+          ]),
+          createVNode("div", { class: "language-yaml" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "yaml"),
+            createVNode("pre", { class: "shiki github-dark vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "# zh-CN.yml")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#85E89D" } }, "sidebar"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ":")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "toc"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ": "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "文章目录")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "# zh-CN.yml")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#22863A" } }, "sidebar"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ":")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#22863A" } }, "toc"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ": "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "文章目录")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("div", { class: "language-yaml" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "yaml"),
+            createVNode("pre", { class: "shiki github-dark vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "# en.yml")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#85E89D" } }, "sidebar"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ":")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "toc"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ": "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "Table of Contents")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "# en.yml")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#22863A" } }, "sidebar"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ":")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#22863A" } }, "toc"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ": "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "Table of Contents")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, [
+              createTextVNode("并在主入口文件（如 "),
+              createVNode("code", null, "main.ts"),
+              createTextVNode("）中初始化：")
+            ])
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, [
+              createTextVNode("and initialized in the main entry file (e.g. "),
+              createVNode("code", null, "main.ts"),
+              createTextVNode(").")
+            ])
+          ]),
+          createVNode("div", { class: "language-ts" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "ts"),
+            createVNode("pre", { class: "shiki github-dark vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "import"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " { createI18n } "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "from"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'vue-i18n'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// import { createApp } from 'vue'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// import App from './App.vue'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "/*")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, " * All i18n resources specified in the plugin `include` option can be loaded")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, " * at once using the import syntax")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, " */")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "import"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " messages "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "from"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'@intlify/unplugin-vue-i18n/messages'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "const"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "i18n"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "="),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "createI18n"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "({")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  legacy: "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "false"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  locale: "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'en'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  messages,")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "})")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// const app = createApp(App)")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "app."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "use"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "(i18n)")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "import"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " { createI18n } "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "from"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'vue-i18n'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// import { createApp } from 'vue'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// import App from './App.vue'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "/*")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, " * All i18n resources specified in the plugin `include` option can be loaded")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, " * at once using the import syntax")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, " */")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "import"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " messages "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "from"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'@intlify/unplugin-vue-i18n/messages'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "const"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "i18n"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "="),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "createI18n"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "({")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  legacy: "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "false"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  locale: "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'en'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  messages,")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "})")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// const app = createApp(App)")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "app."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "use"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "(i18n)")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, [
+              createTextVNode("此时即可在 Vue 中使用 "),
+              createVNode("code", null, "t('')"),
+              createTextVNode(" 来翻译对应字段文本。")
+            ])
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, [
+              createTextVNode("You can then use "),
+              createVNode("code", null, "t('')"),
+              createTextVNode(" in Vue to translate the text of the corresponding field.")
+            ])
+          ]),
+          createVNode("div", { class: "language-vue" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "vue"),
+            createVNode("pre", { class: "shiki github-dark vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "<"),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "script"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "lang"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "="),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, '"ts"'),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "setup"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "import"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " { useI18n } "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "from"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'vue-i18n'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "const"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " { "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "t"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " } "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "="),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "useI18n"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "()")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "</"),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "script"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "<"),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "template"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  <"),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "h2"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, '> {{ t("sidebar.toc") }} </'),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "h2"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "</"),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "template"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ">")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "<"),
+                  createVNode("span", { style: { "color": "#22863A" } }, "script"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "lang"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "="),
+                  createVNode("span", { style: { "color": "#032F62" } }, '"ts"'),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "setup"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "import"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " { useI18n } "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "from"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'vue-i18n'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "const"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " { "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "t"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " } "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "="),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "useI18n"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "()")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "</"),
+                  createVNode("span", { style: { "color": "#22863A" } }, "script"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "<"),
+                  createVNode("span", { style: { "color": "#22863A" } }, "template"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  <"),
+                  createVNode("span", { style: { "color": "#22863A" } }, "h2"),
+                  createVNode("span", { style: { "color": "#24292E" } }, '> {{ t("sidebar.toc") }} </'),
+                  createVNode("span", { style: { "color": "#22863A" } }, "h2"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "</"),
+                  createVNode("span", { style: { "color": "#22863A" } }, "template"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ">")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("h3", {
+            id: "messages-when-ssg",
+            tabindex: "-1"
+          }, [
+            createTextVNode("Messages when SSG "),
+            createVNode(_component_AppLink, {
+              class: "header-anchor",
+              href: "#messages-when-ssg",
+              "aria-label": 'Permalink to "Messages when SSG"'
+            }, {
+              default: withCtx(() => [
+                createTextVNode("​")
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, [
+              createVNode("code", null, "vue-i18n"),
+              createTextVNode(" 支持使用虚拟模块 "),
+              createVNode("code", null, "@intlify/unplugin-vue-i18n/messages"),
+              createTextVNode(" 的方式来导入多语言。")
+            ]),
+            createVNode("p", null, [
+              createTextVNode("可惜的是，它并没有完美地支持 SSR。"),
+              createVNode(_component_AppLink, {
+                href: "https://github.com/intlify/bundle-tools/issues/78",
+                target: "_blank",
+                rel: "noreferrer"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("#78 | intlify/bundle-tools")
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ]),
+            createVNode("p", null, [
+              createTextVNode("而 Vite 的 "),
+              createVNode("code", null, [
+                createTextVNode("i"),
+                createVNode("wbr"),
+                createTextVNode("mport.meta.globEager")
+              ]),
+              createTextVNode(" 导入必须使用静态字符串。")
+            ])
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, [
+              createVNode("code", null, "vue-i18n"),
+              createTextVNode(" supports importing multiple languages by using the virtual module "),
+              createVNode("code", null, "@intlify/unplugin-vue-i18n/messages"),
+              createTextVNode(".")
+            ]),
+            createVNode("p", null, [
+              createTextVNode("Unfortunately, it doesn't support SSR perfectly."),
+              createVNode(_component_AppLink, {
+                href: "https://github.com/intlify/bundle-tools/issues/78",
+                target: "_blank",
+                rel: "noreferrer"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("#78 | intlify/bundle-tools")
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ]),
+            createVNode("p", null, [
+              createTextVNode("And Vite's "),
+              createVNode("code", null, [
+                createTextVNode("i"),
+                createVNode("wbr"),
+                createTextVNode("mport.meta.globEager")
+              ]),
+              createTextVNode(" import must use a static string.")
+            ])
+          ]),
+          createVNode("div", { class: "language-ts" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "ts"),
+            createVNode("pre", { class: "shiki github-dark has-highlighted-lines vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "const"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "messages"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "="),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " Object."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "fromEntries"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "(")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  Object."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "entries"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "(")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line highlighted" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "import"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "."),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "meta"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "globEager"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'../../locales/*.y(a)?ml'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ")")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  )")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    ."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "map"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "((["),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "key"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ", "),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "value"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "]) "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "=>"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "const"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "yaml"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "="),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " key."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "endsWith"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'.yaml'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ")")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "return"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " [key."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "slice"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "14"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ", yaml "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "?"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "-"),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "5"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, ":"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "-"),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "4"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "), value.default]")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    }),")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ")")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light has-highlighted-lines vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "const"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "messages"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "="),
+                  createVNode("span", { style: { "color": "#24292E" } }, " Object."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "fromEntries"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "(")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  Object."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "entries"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "(")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line highlighted" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "import"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "."),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "meta"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "globEager"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'../../locales/*.y(a)?ml'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ")")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  )")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    ."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "map"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "((["),
+                  createVNode("span", { style: { "color": "#E36209" } }, "key"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ", "),
+                  createVNode("span", { style: { "color": "#E36209" } }, "value"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "]) "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "=>"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "const"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "yaml"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "="),
+                  createVNode("span", { style: { "color": "#24292E" } }, " key."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "endsWith"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'.yaml'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ")")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "return"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " [key."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "slice"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "14"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ", yaml "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "?"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "-"),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "5"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, ":"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "-"),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "4"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "), value.default]")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    }),")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, ")")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, [
+              createTextVNode("当拥有确定目录时，它是奏效的，但 Valaxy 还需要将 Valaxy 自身的 "),
+              createVNode("code", null, "locales"),
+              createTextVNode(" 与主题的 "),
+              createVNode("code", null, "locales"),
+              createTextVNode(" 以及用户自定义的 "),
+              createVNode("code", null, "locales"),
+              createTextVNode(" 进行合并。 这意味着我们不能使用变量来拼接字符串进行导入，对于不同包管理器的目录结构不同，我们很难确定这些 "),
+              createVNode("code", null, "locales"),
+              createTextVNode(" 处于何处的相对位置。")
+            ]),
+            createVNode("p", null, [
+              createTextVNode("因此我采用插件虚拟模块（"),
+              createVNode("code", null, "@valaxyjs/locales"),
+              createTextVNode("）的形式实现（依次导入各目录下的 locales 数据并合并）：")
+            ]),
+            createVNode("blockquote", null, [
+              createVNode("p", null, "Vite 虚拟模块的原理其实就是拼接字符串。")
+            ])
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, [
+              createTextVNode("It works when there is a defined directory, but Valaxy also needs to merge Valaxy's own "),
+              createVNode("code", null, "locales"),
+              createTextVNode(" with the theme's "),
+              createVNode("code", null, "locales"),
+              createTextVNode(" and user-defined "),
+              createVNode("code", null, "locales"),
+              createTextVNode(". This means that we cannot use variables to splice strings for import, and it is difficult to determine the relative location of where these "),
+              createVNode("code", null, "locales"),
+              createTextVNode(" are for different package managers with different directory structures.")
+            ]),
+            createVNode("p", null, [
+              createTextVNode("So I implemented it in the form of a plugin virtual module ("),
+              createVNode("code", null, "@valaxyjs/locales"),
+              createTextVNode("):")
+            ]),
+            createVNode("blockquote", null, [
+              createVNode("p", null, "The principle of the Vite virtual module is actually a spliced string.")
+            ])
+          ]),
+          createVNode("div", { class: "language-ts" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "ts"),
+            createVNode("pre", { class: "shiki github-dark vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "import"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "type"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " { Plugin } "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "from"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'vite'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// import the locales data in each directory in turn and merge them")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "function"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "generateLocales"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "roots"),
+                  createVNode("span", { style: { "color": "#F97583" } }, ":"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "string"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "[]) {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "const"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "imports"),
+                  createVNode("span", { style: { "color": "#F97583" } }, ":"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "string"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "[] "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "="),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " [")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, `'const messages = { "zh-CN": {}, en: {} }'`),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  ]")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "const"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "languages"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "="),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " ["),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'zh-CN'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ", "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'en'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "]")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  roots."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "forEach"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "(("),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "root"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ", "),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "i"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ") "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "=>"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    languages."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "forEach"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "(("),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "lang"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ") "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "=>"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "const"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "langYml"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "="),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "`${"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "root"),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "}/locales/${"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "lang"),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "}.yml`")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "if"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " (fs."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "existsSync"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "(langYml) "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "&&"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " fs."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "readFileSync"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "(langYml, "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'utf-8'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ")) {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "        "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "const"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "varName"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "="),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " lang."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "replace"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'-'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ", "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "''"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ") "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "+"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " i")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "        "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// in windows, you need to change slash")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "        "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// more info you can refer 'packages/valaxy/src/node/plugins/index.ts'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "        imports."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "push"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "`import ${"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "varName"),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, '} from "${'),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "langYml"),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, '}"`'),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ")")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "        imports."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "push"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "`Object.assign(messages['${"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "lang"),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "}'], ${"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "varName"),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "})`"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ")")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      }")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    })")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  })")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  imports."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "push"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'export default messages'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ")")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "return"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " imports."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "join"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'"),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "\\n"),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ")")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "}")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "export"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "function"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "createValaxyPlugin"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "options"),
+                  createVNode("span", { style: { "color": "#F97583" } }, ":"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "ResolvedValaxyOptions"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ")"),
+                  createVNode("span", { style: { "color": "#F97583" } }, ":"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "Plugin"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// ...")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "const"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "roots"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "="),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " [options.clientRoot, options.themeRoot, options.userRoot]")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "return"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    name: "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'Valaxy'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "load"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "id"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ") {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// ...")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "if"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " (id "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "==="),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'/@valaxyjs/locales'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ")")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "        "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "return"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "generateLocales"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "(roots)")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    },")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "async"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "handleHotUpdate"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "ctx"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ") {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// ...")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    },")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  }")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "}")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "import"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "type"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " { Plugin } "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "from"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'vite'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// import the locales data in each directory in turn and merge them")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "function"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "generateLocales"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#E36209" } }, "roots"),
+                  createVNode("span", { style: { "color": "#D73A49" } }, ":"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "string"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "[]) {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "const"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "imports"),
+                  createVNode("span", { style: { "color": "#D73A49" } }, ":"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "string"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "[] "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "="),
+                  createVNode("span", { style: { "color": "#24292E" } }, " [")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    "),
+                  createVNode("span", { style: { "color": "#032F62" } }, `'const messages = { "zh-CN": {}, en: {} }'`),
+                  createVNode("span", { style: { "color": "#24292E" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  ]")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "const"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "languages"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "="),
+                  createVNode("span", { style: { "color": "#24292E" } }, " ["),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'zh-CN'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ", "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'en'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "]")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  roots."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "forEach"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "(("),
+                  createVNode("span", { style: { "color": "#E36209" } }, "root"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ", "),
+                  createVNode("span", { style: { "color": "#E36209" } }, "i"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ") "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "=>"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    languages."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "forEach"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "(("),
+                  createVNode("span", { style: { "color": "#E36209" } }, "lang"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ") "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "=>"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "const"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "langYml"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "="),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "`${"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "root"),
+                  createVNode("span", { style: { "color": "#032F62" } }, "}/locales/${"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "lang"),
+                  createVNode("span", { style: { "color": "#032F62" } }, "}.yml`")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "if"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " (fs."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "existsSync"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "(langYml) "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "&&"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " fs."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "readFileSync"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "(langYml, "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'utf-8'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ")) {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "        "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "const"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "varName"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "="),
+                  createVNode("span", { style: { "color": "#24292E" } }, " lang."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "replace"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'-'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ", "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "''"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ") "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "+"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " i")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "        "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// in windows, you need to change slash")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "        "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// more info you can refer 'packages/valaxy/src/node/plugins/index.ts'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "        imports."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "push"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#032F62" } }, "`import ${"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "varName"),
+                  createVNode("span", { style: { "color": "#032F62" } }, '} from "${'),
+                  createVNode("span", { style: { "color": "#24292E" } }, "langYml"),
+                  createVNode("span", { style: { "color": "#032F62" } }, '}"`'),
+                  createVNode("span", { style: { "color": "#24292E" } }, ")")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "        imports."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "push"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#032F62" } }, "`Object.assign(messages['${"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "lang"),
+                  createVNode("span", { style: { "color": "#032F62" } }, "}'], ${"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "varName"),
+                  createVNode("span", { style: { "color": "#032F62" } }, "})`"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ")")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      }")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    })")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  })")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  imports."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "push"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'export default messages'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ")")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "return"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " imports."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "join"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'"),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "\\n"),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ")")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "}")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "export"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "function"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "createValaxyPlugin"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#E36209" } }, "options"),
+                  createVNode("span", { style: { "color": "#D73A49" } }, ":"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "ResolvedValaxyOptions"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ")"),
+                  createVNode("span", { style: { "color": "#D73A49" } }, ":"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "Plugin"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// ...")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "const"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "roots"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "="),
+                  createVNode("span", { style: { "color": "#24292E" } }, " [options.clientRoot, options.themeRoot, options.userRoot]")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "return"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    name: "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'Valaxy'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "load"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#E36209" } }, "id"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ") {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// ...")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "if"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " (id "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "==="),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'/@valaxyjs/locales'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ")")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "        "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "return"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "generateLocales"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "(roots)")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    },")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "async"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "handleHotUpdate"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#E36209" } }, "ctx"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ") {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// ...")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    },")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  }")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "}")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, "最后在 i18n 的初始化文件加载：")
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, "Finally load in the i18n initialization file:")
+          ]),
+          createVNode("div", { class: "language-ts" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "ts"),
+            createVNode("pre", { class: "shiki github-dark vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// i18n.ts")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "import"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " messages "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "from"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'/@valaxyjs/locales'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "const"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "i18n"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "="),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "createI18n"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "({")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  legacy: "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "false"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  locale: "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'en'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  messages,")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "})")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "app."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "use"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "(i18n)")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// i18n.ts")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "import"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " messages "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "from"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'/@valaxyjs/locales'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "const"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "i18n"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "="),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "createI18n"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "({")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  legacy: "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "false"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  locale: "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'en'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  messages,")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "})")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "app."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "use"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "(i18n)")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("h2", {
+            id: "css-i18n-another-solution",
+            tabindex: "-1"
+          }, [
+            createTextVNode("CSS i18n - Another solution "),
+            createVNode(_component_AppLink, {
+              class: "header-anchor",
+              href: "#css-i18n-another-solution",
+              "aria-label": 'Permalink to "CSS i18n - Another solution"'
+            }, {
+              default: withCtx(() => [
+                createTextVNode("​")
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("blockquote", null, [
+              createVNode("p", null, "CSS i18n - 另一种互补解决方案")
+            ])
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("blockquote", null, [
+              createVNode("p", null, "CSS i18n - Another complementary solution")
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, [
+              createTextVNode("文章部分拥有大段的文本，而 "),
+              createVNode("code", null, "vue-i18n"),
+              createTextVNode(" 的场景则在于一些独立的字段翻译。")
+            ]),
+            createVNode("p", null, [
+              createTextVNode("而传统的分文件独立管理的方式，对于博客来说其实并不方便。"),
+              createVNode("br"),
+              createTextVNode(" 大多数情况，你并不会想专门建立一个文件夹来管理它。")
+            ]),
+            createVNode("p", null, "因此我尝试使用纯 CSS 解决该问题。")
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, [
+              createTextVNode("While the article section has large sections of text, the scenario of "),
+              createVNode("code", null, "vue-i18n"),
+              createTextVNode(" lies in some separate field translations.")
+            ]),
+            createVNode("p", null, [
+              createTextVNode("And the traditional way of managing them independently in separate files is not really convenient for blogs."),
+              createVNode("br"),
+              createTextVNode(" In most cases, you don't want to create a dedicated folder to manage it.")
+            ]),
+            createVNode("p", null, "So I tried to solve the problem using pure CSS.")
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("div", { class: "tip custom-block" }, [
+              createVNode("p", { class: "custom-block-title" }, [
+                createVNode("i", { class: "icon i-carbon-thumbs-up" }),
+                createVNode("span", { lang: "en" }, "思路"),
+                createVNode("span", { lang: "zh-CN" }, "思路")
+              ]),
+              createVNode("p", null, [
+                createTextVNode("即借助 CSS 规则，根据对应语言，显示对应区块内容。"),
+                createVNode("br"),
+                createTextVNode(" 大体方案：通过 "),
+                createVNode(_component_AppLink, {
+                  href: "https://github.com/markdown-it/markdown-it-container",
+                  target: "_blank",
+                  rel: "noreferrer"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("markdown-it-container")
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }),
+                createTextVNode(" 设置 fence 预编译 Markdown， 为需要进行 i18n 的段落包裹新的 "),
+                createVNode("code", null, '<div lang="zh-CN"></div>'),
+                createTextVNode("，并使用 CSS 默认隐藏它们。 当页面初始化或切换语言时，为 html 添加对应语言类，编写对应 CSS 以在该类下显示对应语言的区块。")
+              ])
+            ])
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("div", { class: "tip custom-block" }, [
+              createVNode("p", { class: "custom-block-title" }, [
+                createVNode("i", { class: "icon i-carbon-thumbs-up" }),
+                createVNode("span", { lang: "en" }, "IDEA"),
+                createVNode("span", { lang: "zh-CN" }, "IDEA")
+              ]),
+              createVNode("p", null, [
+                createTextVNode("That is, with the help of CSS rules, the content of the corresponding block is displayed according to the corresponding language."),
+                createVNode("br"),
+                createTextVNode(" The general solution: set fence to pre-compile Markdown via "),
+                createVNode(_component_AppLink, {
+                  href: "https://github.com/markdown-it/markdown-it-container",
+                  target: "_blank",
+                  rel: "noreferrer"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("markdown-it-container")
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }),
+                createTextVNode(". Wrap new "),
+                createVNode("code", null, '<div lang="zh-CN"></div>'),
+                createTextVNode("s for the paragraphs that need to be i18n and hide them by default with CSS. When the page initializes or switches languages, add the corresponding language class to html and write the corresponding CSS to display the corresponding language block under that class.")
+              ])
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, [
+              createVNode("strong", null, "优势"),
+              createTextVNode("：")
+            ]),
+            createVNode("ul", null, [
+              createVNode("li", null, "可在同一个 Markdown 文件中进行维护，书写便捷"),
+              createVNode("li", null, "预加载与实时切换"),
+              createVNode("li", null, "URL 不变，便于管理与分享，且切换无需刷新页面"),
+              createVNode("li", null, "渐进式翻译（只翻译部分内容并可共用示例内容等）")
+            ]),
+            createVNode("p", null, [
+              createVNode("strong", null, "劣势"),
+              createTextVNode("：")
+            ]),
+            createVNode("ul", null, [
+              createVNode("li", null, "多语言内容被渲染在同一页面中，增加冗余（但我觉得这微小的体积完全是可以接受的）")
+            ])
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, [
+              createVNode("strong", null, "Advantages"),
+              createTextVNode(":")
+            ]),
+            createVNode("ul", null, [
+              createVNode("li", null, "Can be maintained in the same Markdown file, easy to write"),
+              createVNode("li", null, "Pre-loading and real-time switching"),
+              createVNode("li", null, "URLs remain unchanged, easy to manage and share, and switch without refreshing the page")
+            ]),
+            createVNode("p", null, [
+              createVNode("strong", null, "Disadvantages"),
+              createTextVNode(":")
+            ]),
+            createVNode("ul", null, [
+              createVNode("li", null, "Multi-language content is rendered in the same page, adding redundancy (but I think the tiny size is perfectly acceptable)")
+            ])
+          ]),
+          createVNode("h3", {
+            id: "result",
+            tabindex: "-1"
+          }, [
+            createTextVNode("Result "),
+            createVNode(_component_AppLink, {
+              class: "header-anchor",
+              href: "#result",
+              "aria-label": 'Permalink to "Result"'
+            }, {
+              default: withCtx(() => [
+                createTextVNode("​")
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, [
+              createVNode("strong", null, "效果如下"),
+              createTextVNode("（点击按钮切换）：")
+            ])
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, [
+              createVNode("strong", null, "The effect is as follows"),
+              createTextVNode(" (click the button to switch).")
+            ])
+          ]),
+          createVNode(_component_PressToggleLocale, { class: "shadow" }),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, "另一种 i18n 方案。"),
+            createVNode("blockquote", null, [
+              createVNode("p", null, "更多内容：...")
+            ])
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, "Another i18n method."),
+            createVNode("blockquote", null, [
+              createVNode("p", null, "More info...")
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, "中文")
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, "English")
+          ]),
+          createVNode("hr"),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, [
+              createVNode("strong", null, "书写方式"),
+              createTextVNode("如下：")
+            ])
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, [
+              createVNode("strong", null, "Written like this"),
+              createTextVNode(":")
+            ])
+          ]),
+          createVNode("div", { class: "language-md" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "md"),
+            createVNode("pre", { class: "shiki github-dark vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "::: zh-CN")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "另一种 i18n 方案。")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "更多内容：...")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ":::")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "::: en")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "Another i18n method.")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "More info...")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ":::")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "::: zh-CN")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "中文")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ":::")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "::: en")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "English")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ":::")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "::: zh-CN")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "另一种 i18n 方案。")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "更多内容：...")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, ":::")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "::: en")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "Another i18n method.")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "More info...")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, ":::")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "::: zh-CN")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "中文")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, ":::")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "::: en")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "English")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, ":::")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("h3", {
+            id: "steps",
+            tabindex: "-1"
+          }, [
+            createTextVNode("Steps "),
+            createVNode(_component_AppLink, {
+              class: "header-anchor",
+              href: "#steps",
+              "aria-label": 'Permalink to "Steps"'
+            }, {
+              default: withCtx(() => [
+                createTextVNode("​")
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, [
+              createVNode("strong", null, "实现步骤")
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, "为了能够借助 CSS 处理 i18n，我们借助 markdown-it-container 的 fence 包裹 Markdown 中需要参与 i18n 的内容。")
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, "To be able to handle i18n with CSS, we use markdown-it-container's fence to wrap Markdown content that needs to participate in i18n.")
+          ]),
+          createVNode("div", { class: "language-ts" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "ts"),
+            createVNode("pre", { class: "shiki github-dark vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "export"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "function"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "containerPlugin"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "md"),
+                  createVNode("span", { style: { "color": "#F97583" } }, ":"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "MarkdownIt"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ") {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// ...")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "const"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "languages"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "="),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " ["),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'zh-CN'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ", "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'en'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "]")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  languages."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "forEach"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "(("),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "lang"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ") "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "=>"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    md."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "use"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "(container, lang, {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "render"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ": ("),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "tokens"),
+                  createVNode("span", { style: { "color": "#F97583" } }, ":"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "Token"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "[], "),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "idx"),
+                  createVNode("span", { style: { "color": "#F97583" } }, ":"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "number"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ") "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "=>"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " tokens[idx].nesting "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "==="),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "1"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "?"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, '`<div lang="${'),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "lang"),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, '}">'),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "\\n"),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "`"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, ":"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'</div>"),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "\\n"),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    })")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  })")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "}")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "export"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "function"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "containerPlugin"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#E36209" } }, "md"),
+                  createVNode("span", { style: { "color": "#D73A49" } }, ":"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "MarkdownIt"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ") {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// ...")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "const"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "languages"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "="),
+                  createVNode("span", { style: { "color": "#24292E" } }, " ["),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'zh-CN'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ", "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'en'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "]")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  languages."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "forEach"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "(("),
+                  createVNode("span", { style: { "color": "#E36209" } }, "lang"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ") "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "=>"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    md."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "use"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "(container, lang, {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "render"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ": ("),
+                  createVNode("span", { style: { "color": "#E36209" } }, "tokens"),
+                  createVNode("span", { style: { "color": "#D73A49" } }, ":"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "Token"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "[], "),
+                  createVNode("span", { style: { "color": "#E36209" } }, "idx"),
+                  createVNode("span", { style: { "color": "#D73A49" } }, ":"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "number"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ") "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "=>"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " tokens[idx].nesting "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "==="),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "1"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "?"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#032F62" } }, '`<div lang="${'),
+                  createVNode("span", { style: { "color": "#24292E" } }, "lang"),
+                  createVNode("span", { style: { "color": "#032F62" } }, '}">'),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "\\n"),
+                  createVNode("span", { style: { "color": "#032F62" } }, "`"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, ":"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'</div>"),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "\\n"),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ",")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    })")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  })")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "}")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, "这可以使：")
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, "This allows:")
+          ]),
+          createVNode("div", { class: "language-md" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "md"),
+            createVNode("pre", { class: "shiki github-dark vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "::: zh-CN")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "中文")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ":::")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "::: zh-CN")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "中文")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, ":::")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, [
+              createTextVNode("变成 "),
+              createVNode("code", null, '<div lang="zh-CN"></div>'),
+              createTextVNode(" 的形式。")
+            ]),
+            createVNode("blockquote", null, [
+              createVNode("p", null, [
+                createVNode(_component_AppLink, {
+                  href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang",
+                  target: "_blank",
+                  rel: "noreferrer"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("lang")
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }),
+                createTextVNode(" 是 HTML 的一个标准字段。")
+              ])
+            ]),
+            createVNode("p", null, "为避免 class 命名冲突，我们可以采用 CSS attribute 的查询方式。"),
+            createVNode("p", null, "首先将 i18n 全部隐藏：")
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, [
+              createTextVNode("Be "),
+              createVNode("code", null, '<div lang="zh-CN"></div>'),
+              createTextVNode(".")
+            ]),
+            createVNode("blockquote", null, [
+              createVNode("p", null, [
+                createVNode(_component_AppLink, {
+                  href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang",
+                  target: "_blank",
+                  rel: "noreferrer"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("lang")
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }),
+                createTextVNode(" is a standard field in HTML.")
+              ])
+            ]),
+            createVNode("p", null, "To avoid class naming conflicts, we can use the CSS attribute query."),
+            createVNode("p", null, "First, hide all i18n:")
+          ]),
+          createVNode("div", { class: "language-scss" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "scss"),
+            createVNode("pre", { class: "shiki github-dark vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#85E89D" } }, "html"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "["),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "lang"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "] {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, ".markdown-body"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    "),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "div"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "["),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "lang"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "] {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "display"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ": "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "none"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ";")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    }")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  }")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "}")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#22863A" } }, "html"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "["),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "lang"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "] {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, ".markdown-body"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    "),
+                  createVNode("span", { style: { "color": "#22863A" } }, "div"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "["),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "lang"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "] {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "display"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ": "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "none"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ";")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    }")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  }")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "}")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, [
+              createTextVNode("编写 CSS/SCSS 规则，设定 html "),
+              createVNode("code", null, "lang"),
+              createTextVNode(" 为对应语言时，显示对应语言的元素即可。")
+            ])
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, [
+              createTextVNode("Write CSS/SCSS rules and set html "),
+              createVNode("code", null, "lang"),
+              createTextVNode(" to display elements in the corresponding language when it is the corresponding language.")
+            ])
+          ]),
+          createVNode("div", { class: "language-scss" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "scss"),
+            createVNode("pre", { class: "shiki github-dark vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "$languages"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ": zh"),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "-"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "CN, en;")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "@each"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "$lang"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "in"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "$languages"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "html"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "["),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "lang"),
+                  createVNode("span", { style: { "color": "#F97583" } }, "="),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, '"'),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "#{$lang}"),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, '"'),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "] {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// only for markdown")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, ".markdown-body"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      "),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "div"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "["),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "lang"),
+                  createVNode("span", { style: { "color": "#F97583" } }, "="),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, '"'),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "#{$lang}"),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, '"'),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "] {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "        "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "display"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ": "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "block"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ";")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      }")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    }")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  }")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "}")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E36209" } }, "$languages"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ": zh"),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "-"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "CN, en;")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "@each"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#E36209" } }, "$lang"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "in"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#E36209" } }, "$languages"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#22863A" } }, "html"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "["),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "lang"),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "="),
+                  createVNode("span", { style: { "color": "#032F62" } }, '"'),
+                  createVNode("span", { style: { "color": "#E36209" } }, "#{$lang}"),
+                  createVNode("span", { style: { "color": "#032F62" } }, '"'),
+                  createVNode("span", { style: { "color": "#24292E" } }, "] {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// only for markdown")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, ".markdown-body"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      "),
+                  createVNode("span", { style: { "color": "#22863A" } }, "div"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "["),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "lang"),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "="),
+                  createVNode("span", { style: { "color": "#032F62" } }, '"'),
+                  createVNode("span", { style: { "color": "#E36209" } }, "#{$lang}"),
+                  createVNode("span", { style: { "color": "#032F62" } }, '"'),
+                  createVNode("span", { style: { "color": "#24292E" } }, "] {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "        "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "display"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ": "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "block"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ";")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      }")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    }")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  }")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "}")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, "为了帮助用户记住自己的语言，还请不要忘记初始化。")
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, "To help users remember their language, please also don't forget to initialize.")
+          ]),
+          createVNode("div", { class: "language-html" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "html"),
+            createVNode("pre", { class: "shiki github-dark has-highlighted-lines vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "<!"),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "DOCTYPE"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "html"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "<"),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "html"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "lang"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "="),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, '"en"'),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "class"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "="),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, '"i18n"'),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "<"),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "head"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "<!-- ... -->")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  <"),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "script"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    ("),
+                  createVNode("span", { style: { "color": "#F97583" } }, "function"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "() {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "const"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#79B8FF" } }, "locale"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "="),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " localStorage."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "getItem"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'valaxy-locale'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ") "),
+                  createVNode("span", { style: { "color": "#F97583" } }, "||"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'en'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line highlighted" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "      document.documentElement."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "setAttribute"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'lang'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ", locale)")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "    })()")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  </"),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "script"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "</"),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "head"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "<"),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "body"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ">...</"),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "body"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "</"),
+                  createVNode("span", { style: { "color": "#85E89D" } }, "html"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ">")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light has-highlighted-lines vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "<!"),
+                  createVNode("span", { style: { "color": "#22863A" } }, "DOCTYPE"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "html"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "<"),
+                  createVNode("span", { style: { "color": "#22863A" } }, "html"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "lang"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "="),
+                  createVNode("span", { style: { "color": "#032F62" } }, '"en"'),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "class"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "="),
+                  createVNode("span", { style: { "color": "#032F62" } }, '"i18n"'),
+                  createVNode("span", { style: { "color": "#24292E" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "<"),
+                  createVNode("span", { style: { "color": "#22863A" } }, "head"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "<!-- ... -->")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  <"),
+                  createVNode("span", { style: { "color": "#22863A" } }, "script"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    ("),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "function"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "() {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "const"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#005CC5" } }, "locale"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "="),
+                  createVNode("span", { style: { "color": "#24292E" } }, " localStorage."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "getItem"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'valaxy-locale'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ") "),
+                  createVNode("span", { style: { "color": "#D73A49" } }, "||"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'en'")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line highlighted" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "      document.documentElement."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "setAttribute"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'lang'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ", locale)")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "    })()")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  </"),
+                  createVNode("span", { style: { "color": "#22863A" } }, "script"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "</"),
+                  createVNode("span", { style: { "color": "#22863A" } }, "head"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "<"),
+                  createVNode("span", { style: { "color": "#22863A" } }, "body"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ">...</"),
+                  createVNode("span", { style: { "color": "#22863A" } }, "body"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ">")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "</"),
+                  createVNode("span", { style: { "color": "#22863A" } }, "html"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ">")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, "切换语言时则可做如下处理：")
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, "When switching languages, the following can be done.")
+          ]),
+          createVNode("div", { class: "language-ts" }, [
+            createVNode("button", {
+              title: "Copy Code",
+              class: "copy"
+            }),
+            createVNode("span", { class: "lang" }, "ts"),
+            createVNode("pre", { class: "shiki github-dark vp-code-dark" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#F97583" } }, "function"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "toggleLocales"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#FFAB70" } }, "lang"),
+                  createVNode("span", { style: { "color": "#F97583" } }, ":"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, " "),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "val"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ") {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// ...")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// save locale")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  localStorage."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "setItem"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'valaxy-locale'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ", lang)")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// set html lang")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "  document.documentElement."),
+                  createVNode("span", { style: { "color": "#B392F0" } }, "setAttribute"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "("),
+                  createVNode("span", { style: { "color": "#9ECBFF" } }, "'lang'"),
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, ", lang)")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#E1E4E8" } }, "}")
+                ])
+              ])
+            ]),
+            createVNode("pre", { class: "shiki github-light vp-code-light" }, [
+              createVNode("code", null, [
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#D73A49" } }, "function"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "toggleLocales"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#E36209" } }, "lang"),
+                  createVNode("span", { style: { "color": "#D73A49" } }, ":"),
+                  createVNode("span", { style: { "color": "#24292E" } }, " "),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "val"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ") {")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// ...")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// save locale")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  localStorage."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "setItem"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'valaxy-locale'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ", lang)")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  "),
+                  createVNode("span", { style: { "color": "#6A737D" } }, "// set html lang")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "  document.documentElement."),
+                  createVNode("span", { style: { "color": "#6F42C1" } }, "setAttribute"),
+                  createVNode("span", { style: { "color": "#24292E" } }, "("),
+                  createVNode("span", { style: { "color": "#032F62" } }, "'lang'"),
+                  createVNode("span", { style: { "color": "#24292E" } }, ", lang)")
+                ]),
+                createTextVNode("\n"),
+                createVNode("span", { class: "line" }, [
+                  createVNode("span", { style: { "color": "#24292E" } }, "}")
+                ])
+              ])
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, [
+              createTextVNode("值得一提的是，在查看 "),
+              createVNode("code", null, "lang"),
+              createTextVNode(" 文档时，我意外地发现 "),
+              createVNode("code", null, ":lang"),
+              createTextVNode(" 也是一种支持的选择器。 因此上述的 CSS 中 "),
+              createVNode("code", null, '[lang="xxx"]'),
+              createTextVNode(" 也可以替换为 "),
+              createVNode("code", null, ":lang(xxx)"),
+              createTextVNode("。")
+            ]),
+            createVNode("p", null, [
+              createTextVNode("但是 "),
+              createVNode("code", null, ":lang()"),
+              createTextVNode(" 也会命中默认语言的 "),
+              createVNode("code", null, "div"),
+              createTextVNode("（没有 lang 字段，但处于含有 lang 的标签中），因此为了安全，我们还是应该使用 class 的属性查询。")
+            ])
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, [
+              createTextVNode("It's worth mentioning that when looking at the "),
+              createVNode("code", null, "lang"),
+              createTextVNode(" documentation, I accidentally found that "),
+              createVNode("code", null, ":lang"),
+              createTextVNode(" is also a supported selector. So "),
+              createVNode("code", null, '[lang="xxx"]'),
+              createTextVNode(" in the CSS above could also be replaced with "),
+              createVNode("code", null, ":lang(xxx)"),
+              createTextVNode(".")
+            ]),
+            createVNode("p", null, [
+              createTextVNode("However, "),
+              createVNode("code", null, ":lang()"),
+              createTextVNode(" will also hit the default language "),
+              createVNode("code", null, "div"),
+              createTextVNode(" (which has no lang field but is in a tag containing lang), so to be safe we should still use the class attribute query.")
+            ])
+          ]),
+          createVNode("div", { lang: "zh-CN" }, [
+            createVNode("p", null, "我认为 vue-i18n 与 CSS i18n 的互补，可以非常好地解决单页内的 i18n 切换。 不妨一试？")
+          ]),
+          createVNode("div", { lang: "en" }, [
+            createVNode("p", null, "I think vue-i18n complements CSS i18n and could be a very good solution for i18n switching within a single page. Why not give it a try?")
+          ])
+        ];
+      }
+    }),
+    "main-header": withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "main-header", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "main-header")
+        ];
+      }
+    }),
+    "main-header-after": withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "main-header-after", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "main-header-after")
+        ];
+      }
+    }),
+    "main-nav": withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "main-nav", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "main-nav")
+        ];
+      }
+    }),
+    "main-content": withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "main-content", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "main-content")
+        ];
+      }
+    }),
+    "main-content-after": withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "main-content-after", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "main-content-after")
+        ];
+      }
+    }),
+    "main-nav-before": withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "main-nav-before", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "main-nav-before")
+        ];
+      }
+    }),
+    "main-nav-after": withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "main-nav-after", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "main-nav-after")
+        ];
+      }
+    }),
+    comment: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "comment", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "comment")
+        ];
+      }
+    }),
+    footer: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "footer", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "footer")
+        ];
+      }
+    }),
+    aside: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "aside", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "aside")
+        ];
+      }
+    }),
+    "aside-custom": withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "aside-custom", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "aside-custom")
+        ];
+      }
+    }),
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "default", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "default")
+        ];
+      }
+    }),
+    _: 3
+    /* FORWARDED */
+  }, _parent));
+}
+const _sfc_setup = _sfc_main.setup;
+_sfc_main.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("../../../docs/pages/posts/i18n.md");
+  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+};
+const i18n = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
+export {
+  __pageData,
+  i18n as default
+};