valaxy 0.15.11-alpha.0 → 0.15.12

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

@@ -1,4159 +0,0 @@
-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
-};