Yuorb Multilingual Translation Guide

Overview

Multilingual Support

The website (Yuorb) leverages VuePress to support multiple languages, allowing you to translate documents into various languages and enabling users to switch languages easily.

Streamlined Configuration: By simple configuration, you can effortlessly add multilingual support.
Flexible Translation: Translate various aspects of the website such as titles, descriptions, content, navigation bars, sidebars, and more.
Automatic Generation: VuePress will automatically generate website files in different languages.

Translation Process

Create Language Folders: Within the docs folder, create language-specific folders like zh for Chinese translation. Use IETF language tags to represent your language.
Copy Content: Duplicate English content files (from the en folder) into the language-specific folders.
Translate Content: Translate the content within the language-specific folders.
Configure Language: In the /.vuepress/ directory, configure language information within the TypeScript file.

Website Multilingual Configuration

Configuring Language Information

locales Option: In the /.vuepress/ directory, use the locales option in the config.ts file to configure language information.
Language Path: The language path specifies the path to the language folder, for instance, /zh/ for Chinese translation.
Language Information: Each language path corresponds to an object containing language codes, titles, descriptions, and more.

export default defineUserConfig({
  locales: {
    "/": {
    lang: "zh-CN",
    title: "NiGHT",
    description: "悦耳部: New Ithkuil 语法 S·T·I（意指、翻译、解释）",
    },
    "/en/": {
    lang: "en-US",
    title: "NiGHT",
    description: "Yuorb: New Ithkuil Grammar S·T·I (Signification, Translation, Interpretation)",
    },
    "/ja/": {
    lang: "ja-JP",
    title: "NiGHT",
    description: "ユオルブ：新イスクイル語文法 S・T・I (意味、翻訳、解釈)",
    },
    },
}

Configuring hopeTheme Language Information

locales Option: In the /.vuepress/ directory, utilize the locales option within the theme.ts file to configure language information for hopeTheme.
Language Path: Specify the language folder path, like /zh/ for Chinese translation.
Language Information: Each language path corresponds to an object containing language codes, titles, descriptions, etc.

Note that the constants enNavbar and enSidebar are also corrected accordingly.

import { zhNavbar } from "./navbar/index.ts";
import { zhSidebar } from "./sidebar/index.ts";
import { enNavbar } from "./navbar/index.ts";
import { enSidebar } from "./sidebar/index.ts";
import { jaNavbar } from "./navbar/index.ts";
import { jaSidebar } from "./sidebar/index.ts";
/* import your Navbar and Sidebar */

export default hopeTheme({
  locales: {
    "/": {
      // navbar
      navbar: zhNavbar,

      // sidebar
      sidebar: zhSidebar,

      footer: "Yuorb: 该非官方组织旨在为提供 New Ithkuil 的 S·T·I（意指、翻译、解释）服务。",

      displayFooter: true,

      // page meta
      metaLocales: {
        editLink: "在 GitHub 上编辑此页",
      },
    },
    "/en/": {
      // navbar
      navbar: enNavbar,

      // sidebar
      sidebar: enSidebar,

      footer: "Yuorb: The unofficial organization aiming to provide the S·T·I (Signification, Translation, Interpretation) service for New Ithkuil.",

      displayFooter: true,

      // page meta
      metaLocales: {
        editLink: "Edit this page on GitHub",
      },
    },
    "/ja/": {
      // navbar
      navbar: jaNavbar,

      // sidebar
      sidebar: jaSidebar,

      footer: "Yuorb: New Ithkuil に S・T・I (Signification、Translation、Interpretation) サービスを提供することを目的とした非公式組織",

      displayFooter: true,

      // page meta
      metaLocales: {
        editLink: "Edit this page on GitHub",
      },
    },
  },
});

Navigation Bar Multilingual Configuration

Navbar Configuration

navbar Option: In the /.vuepress/navbar/ directory, duplicate the en.ts file, rename it using your language tag, and modify its content to customize the navbar option configuration for the navigation bar.
Language Configuration: Each language path corresponds to an array to specify the navigation bar links.

Note that the constant enNavbar and the path /en/ are also corrected accordingly.

export const enNavbar = navbar([
  { text: "Home", icon: "fas fa-house", link: "/en/" },
  { text: "Docs", icon: "fas fa-book-open", link: "/en/docs/" },
  { text: "Tutorial", icon: "fas fa-person-chalkboard", link: "/tutorial/" },
  {
    text: "Tools",
    icon: "fas fa-tools",
    children: [
      {
        text: "Dictionary: Enţrirç",
        icon: "fas fa-book",
        link: "/enthrirhc/",
      },
      {
        text: "Word formation tool: Hwirbuvie-Ekţgyil",
        icon: "fas fa-pen-to-square",
        link: "https://thexxos.github.io/ithkapp/",
      },
      {
        text: "Ithkuil Script Generator",
        icon: "fas fa-signature",
        link: "https://v8.zsnout.com/ithkuil/script",
      },
      {
        text: "Numeral Converter",
        icon: "fas fa-hashtag",
        link: "/tool/num",
      },
      {
        text: "Color picker",
        icon: "fas fa-palette",
        link: "https://ithkuil.place/4/colors/",
      }
    ]
  },

]);

In the index.ts file within the same directory, import the modified navbar files

export * from "./en.ts";
export * from "./zh.ts";
export * from "./ja.ts";

Sidebar Multilingual Configuration

Sidebar Configuration

sidebar Option: In the /.vuepress/sidebar/ directory, duplicate the en.ts file, rename it using your language tag, and modify its content to configure the sidebar option for the sidebar menu.
Language Configuration: Each language path corresponds to an array specifying the sidebar links.

Note that the constant enSidebar and the path /en/ are also corrected accordingly.

export const enSidebar = sidebar({
  "/en/": [
    "",
    {
      text: "Grammar docs",
      prefix: "docs/",
      link: "docs/readme.md",
      children: [
        // "term",
        "cheat",
        {
          text: "Sections",
          children: ["00", "01","02","03","04","05","06","07","08","09","10","11","12","13","14", "15", "pt"],
        },
      ],
    },
    /* {
      text: "Tutorials",
      prefix: "tutorial/",
      link: "tutorial/readme.md",
      children: [
        "beginner","numerals","loanwords","idioms","old"
      ],
    }, */
  ],
});

In the index.ts file within the same directory, import the modified navbar files

export * from "./en.ts";
export * from "./zh.ts";
export * from "./ja.ts";

Markdown Multilingual Support

Markdown Translation

Translate Content: Copy English content files into the language-specific folders and proceed with translation.
Preserve Format: Ensure not to delete Markdown and HTML code and tags; keep the formatting consistent.

Markdown Syntax Extensions

Built-in Syntax: VuePress provides built-in Markdown syntax extensions like tables, code blocks, etc.
Custom Syntax: You can extend Markdown syntax using Markdown plugins.

Translation Considerations

Translation Consistency

Uniform Terminology: Ensure consistency in all translations.
Consistent Style: Maintain uniform translation style, including tone and voice.

Translation Quality

Thorough Proofreading: Carefully proofread translation content for accuracy.
Test Verification: Test the translated website to ensure all functions operate correctly.

Conclusion

Multilingual Translation Guide

Create language folders within the docs directory.
Duplicate and translate content files.
Configure language settings in the config.ts and theme.ts files within the .vuepress directory.
Configure theme for multilingual support.
Configure navigation bar links according to language.
Configure sidebar links based on language.
Utilize appropriate translation tools.
Ensure translation consistency and quality.

Useful Links

We hope this guide assists you in completing the multilingual translation work for the Yuorb website.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly