在Svelte中实施本地化

尼耳多
648 阅读8分钟

在本教程中，我们将在一个Svelte应用程序中实现本地化。该应用程序将包括路由，因此你可以在应用程序的多个页面上划分内容。

我们将首先建立一个新的项目，然后为本地化的内容创建字典，配置本地化包，创建布局，最后为应用程序设计样式。

最后，我们将有一个本地化的应用程序，其默认语言由浏览器检测。同时，用户将能够使用下拉菜单手动切换语言。

作为参考，这里有源代码和完整的演示应用程序。

什么是Svelte？

使用Svelte的主要优点是它的反应性和它的轻量级。

与React和Vue等现有解决方案相比，Svelte在构建用户界面方面相当激进。Svelte并没有使用浏览器来完成大部分繁重的工作，而是将其转移到编译步骤中，这意味着内容可以更快地被显示。

根据StackOverflow在2021年的调查，Svelte被超过66000名受访者评为最受欢迎的框架。

Stackoverflow Survey

另外，如果我们看一下npm的趋势图和它的GitHub仓库，很明显，这个框架值得关注，并在未来拥有巨大的潜力。

Npm's Trends Graph

设置我们的Svelte项目

我们将使用Svelte的官方模板，通过degit来设置项目的模板。首先，打开你的终端，运行以下命令。

npx degit sveltejs/template svelte-localization

等待设置完成，然后通过运行cd svelte-localization ，将目录改为新创建的项目文件夹。接下来，运行npm install ，安装项目工作所需的所有依赖项。

完成后，你可以运行npm run dev ，这将启动Rollup.js。

最后，打开你的浏览器并导航到 [http://localhost:5000/](http://localhost:5000/)，这时应该会出现一个功能齐全的Svelte应用程序，看起来像这样。

Svelte Tutorial Page

默认的模板带有一些我们不需要的额外代码。要清理它，请导航到src 文件夹，打开App.svelte 文件，并删除里面的所有内容。稍后我们将从头开始编写所有内容。

在Svelte中创建字典

我们将为每一种语言创建一个单独的定位词典。英语、西班牙语和法语。每个地区的词典将包括导航项目（主页、功能和关于）的翻译，以及每个页面的内容（标题和描述）。

要做到这一点，创建一个新的文件夹，名为langs ，并在其中创建三个文件。

  • en.json
  • es.json
  • fr.json

你可以手动操作或在终端使用此命令。

mkdir langs && cd langs && touch en.json es.json fr.json

要创建一个英语的语言环境，打开文件en.json ，并包括以下代码。

{
  "nav": {
    "home": "Home",
    "features": "Features",
    "about": "About"
  },
  "home": {
    "title": "Welcome, Everyone!",
    "description": "Switch between different tabs and languages to see the action."
  },
  "features": {
    "title": "Main Features",
    "description": "The default language on the launch is detected by the user's browser. If it is not supported, English is used. If the user selects the language manually from the menu, that particular language is used."
  },
  "about": {
    "title": "Stack of Technologies",
    "description": "This demo was built by Madza. I used 'Svelte', 'svelte-routing' and 'svelte-i18n' as the stack of technologies."
  }
}

接下来，要创建一个西班牙语的语言环境，打开文件es.json ，并包含以下代码。

{
  "nav": {
    "home": "Hogar",
    "features": "Características",
    "about": "Sobre"
  },
  "home": {
    "title": "¡Todos bienvenidos!",
    "description": "Cambie entre diferentes pestañas e idiomas para ver la acción."
  },
  "features": {
    "title": "Principales características",
    "description": "El navegador del usuario detecta el idioma predeterminado en el lanzamiento. Si no es compatible, se utiliza el inglés. Si el usuario selecciona el idioma manualmente en el menú, se utiliza ese idioma en particular."
  },
  "about": {
    "title": "Pila de tecnologías",
    "description": "Esta demostración fue construida por Madza. Usé 'Svelte', 'svelte-routing' y 'svelte-i18n' como pila de tecnologías."
  }
}

最后，要创建一个法语区，打开文件fr.json ，并包括以下代码。

{
  "nav": {
    "home": "Domicile",
    "features": "Caractéristiques",
    "about": "À propos"
  },
  "home": {
    "title": "Bienvenue tout le monde!",
    "description": "Basculez entre différents onglets et langues pour voir l'action."
  },
  "features": {
    "title": "Caractéristiques principales",
    "description": "La langue par défaut au lancement est détectée par le navigateur de l'utilisateur. S'il n'est pas pris en charge, l'anglais est utilisé. Si l'utilisateur sélectionne la langue manuellement dans le menu, cette langue particulière est utilisée."
  },
  "about": {
    "title": "Pile de technologies",
    "description": "Cette démo a été construite par Madza. J'ai utilisé 'Svelte', 'svelte-routing' et 'svelte-i18n' comme pile de technologies."
  }
}

安装软件包

接下来，我们将设置一些外部软件包，以便我们能够访问和使用以前创建的字典。为此，我们将使用svelte-i18n和@rollup/plugin-json。

要安装这两个包，请打开终端并运行命令。

npm i svelte-i18n @rollup/plugin-json

Svelte-i18n是一个简单明了的软件包，它使用存储来跟踪当前的locale，包括一个字典，帮助格式化文件，等等。@rollup/plugin-json是一个帮助包，它允许我们导入JSON文件来与Rollup一起工作。

让我们也实现一个简单的路由，以便我们可以在多个页面上使用本地化。为此，我们将使用svelte-routing，它简化了路由过程，由于内置了Router,Link 和Route 组件。

要安装该软件包，请打开终端并运行该命令。

npm i svelte-routing

在Svelte中初始化本地化

在这一点上，我们已经安装了所有必要的包--我们只需要对它们进行配置。

打开App.svelte 文件，添加以下代码。

<script>
  import { Router, Route, Link } from "svelte-routing";
  import {
    _,
    getLocaleFromNavigator,
    isLoading,
    register,
    init,
    locale
  } from "svelte-i18n";

  register("en", () => import("./langs/en.json"));
  register("es", () => import("./langs/es.json"));
  register("fr", () => import("./langs/fr.json"));

  init({
    fallbackLocale: "en",
    initialLocale: getLocaleFromNavigator()
  });

  const handleLocaleChange = e => {
    e.preventDefault();
    locale.set(e.target.value);
  };
</script>

让我们来介绍一下我们在这个代码块中完成了什么。首先，我们从svelte-routing 中导入了所有必要的组件（Router,Route, 和Link ），这样我们以后就可以为页面实现全功能的路由机制。

然后，我们从svelte-i18n 中导入了必要的方法，这样我们以后就可以用它们来实现应用程序的本地化。_ 将允许我们访问字典，getLocaleFromNavigator 将从浏览器中获取默认的语言，isLoading 将帮助我们控制语言的加载状态，init 将让我们初始化它们，而locale 将允许我们手动设置它们。

之后，我们注册了每种语言，并设置了默认（初始）语言，以及在不支持默认语言的情况下的回退语言。

最后，我们创建了handleLocaleChange 函数，通过下拉菜单设置语言，我们将在下一节中实现。

构建应用程序的布局

为了使用我们刚刚初始化的本地化功能，我们必须创建一个布局，显示字典的内容并允许我们切换语言。

在App.svelte 的脚本标签下，添加以下代码。

// script tags..

{#if $isLoading}
  <p>Loading</p>
{:else}
  <main>
    <Router>
      <select on:change={handleLocaleChange}>
        <option value="en">en</option>
        <option value="es">es</option>
        <option value="fr">fr</option>
      </select>
      <header >
        <nav>
          <Link to="/">{$_('nav.home')}</Link>
          <Link to="features">{$_('nav.features')}</Link>
          <Link to="about">{$_('nav.about')}</Link>
        </nav>
      </header>
      <section>
        <Route path="/">
          <h3>{$_('home.title')}</h3>
          <p>{$_('home.description')}</p>
        </Route>
        <Route path="features">
          <h3>{$_('features.title')}</h3>
          <p>{$_('features.description')}</p>
        </Route>
        <Route path="about">
        <h3>{$_('about.title')}</h3>
          <p>{$_('about.description')}</p>
        </Route>
      </section>
    </Router>
  </main>
{/if}

首先，我们使用if和else语句来检测字典是否已经被加载。为此，我们使用了$isLoading 存储。

如果字典没有被加载，我们返回一个消息来通知用户（只在加载时间超过200ms后显示，这种情况很少）。当字典被加载后，Svelte会渲染应用程序。

整个应用程序驻留在main 包装器中。在它里面，有一个Router 组件，它是路由机制的一个封装器。

我们还有一个select 下拉菜单，允许我们选择应用程序的语言。我们使用输入事件on:change ，并传入先前创建的handleLocaleChange 函数，以获得所选择的语言，并将其设置为活动区域。

在header 内，每个nav 元素通过$_ 方法接收来自语言字典的输入，该方法是svelte-i18n 的$format 的速记别名。

每个section 元素包括Route 组件，它使用一个特定的路径，并通过来自svelte-i18n 的$_ 方法包括页面的标题和描述。

让我们测试一下目前的情况。打开你的终端，运行npm run dev ，启动Rollup，然后在浏览器中导航到 [http://localhost:5000/](http://localhost:5000/)在你的浏览器中。

你应该看到一个元素的基本布局结构。

Basic Layout Structure

塑造Svelte应用程序的风格

为了设计我们的应用程序，我们将为每个元素添加一些样式规则。

打开App.svelte ，添加以下样式规则。

// script tags..

// elements..

<style>
  @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
  }

  :global(body) {
    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
    min-height: 100vh;
    color: black;
    padding: 10px;
  }

  main {
    max-width: 600px;
    margin: 0 auto;
  }

  select {
    border: none;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
  }

  nav {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    gap: 20px;
  }

  nav > :global(a) {
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px;
    color: black;
    font-weight: bold;
    text-decoration: none;
  }

  section {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
  }

  h3 {
    margin-bottom: 10px;
  }

  @media screen and (max-width: 500px) {
    nav {
      grid-template-columns: 1fr;
    }
  }
</style>

在这里，我们首先导入Montserrat字体，并将其设置为在所有元素中使用。我们还重新设置了margin,padding, 和box-sizing 的规则，这样它们就不会因为使用的默认值而在不同的浏览器中出现差异。

然后，我们通过设置绿色渐变作为background ，对body 进行了风格化处理，将height 设置为至少使用整个视口，将color 的文字设置为黑色，并添加了一些padding ，以便应用程序在响应式屏幕上看起来很棒。

对于main 包装器，我们定义了一个特定的width ，它永远不能被超越，并将其水平居中于视口。

我们还删除了select 下拉菜单的默认边框，给它添加了一些radius ，设置了一些padding ，并设置了一些底部margin 。这确保了下面的直接元素之间有一些空间。

对于nav ，我们使用了一个有三列的网格布局，在它们之间有一个20px 。我们将包含的文本居中，并添加了一个底部空白。

对于包含的链接，我们去掉了文本装饰，将字体颜色设置为黑色，将其加粗，将background-color 设置为白色，并添加了一些padding 和border-radius 。

请注意，我们通过添加白色的background ，一些padding ，和一个边框radius ，对section 元素进行了风格化处理，所以它更适合于应用程序的整体风格化。

我们还为h3 元素添加了一些底部margin ，所以在章节标题和描述之间有一些空间。

最后，我们为响应式屏幕添加了一个媒体规则，所以nav 元素在小于500px 的屏幕上切换为单栏布局width ，这意味着每个导航项届时都会显示在彼此的正下方。

如果我们现在检查浏览器，输出的应该是一个功能齐全的应用程序。

Fully Functioning App

结论

如果你知道你的目标受众是国际客户，他们的母语与你的应用程序中使用的默认语言不同，你应该实施本地化。这样，用户就知道你关心他们，而且，总的来说，它大大改善了整个UI/UX。

你可以根据自己的需要添加任意多的地区性语言。另外，你可以随时通过添加更多的页面和内容来更新这个演示应用程序。也许你甚至可以添加一个后台功能，支持私人路线，所以用户必须登录才能看到它们。

谢谢你的阅读，我希望你能为这个演示找到一个实际的用途

The postImplementing localization in Svelteappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝