Cách xây dựng một trang web đa ngôn ngữ với Nuxt.js

[theanh]

Bài viết này nhận được sự hỗ trợ nhiệt tình từ những người bạn thân thiết của chúng tôi tại Hygraph, những người giúp các nhà phát triển xây dựng các giải pháp vô hạn bằng cách hỗ trợ các khuôn khổ, hệ thống và API giao diện người dùng yêu thích của họ với phương pháp tiếp cận API gốc GraphQL mạnh mẽ. Cảm ơn bạn!



Quốc tế hóa, thường được viết tắt là i18n, là quá trình thiết kế và phát triển các ứng dụng phần mềm theo cách có thể dễ dàng chuyển thể sang nhiều ngôn ngữ nói khác nhau như tiếng Anh, tiếng Đức, tiếng Pháp, v.v. mà không cần phải thay đổi đáng kể cơ sở mã. Nó bao gồm việc thoát khỏi các chuỗi và kỹ thuật được mã hóa cứng để dịch văn bản, định dạng ngày tháng và số, và xử lý các mã hóa ký tự khác nhau, trong số các tác vụ khác.

Quốc tế hóa có thể cung cấp cho người dùng quyền lựa chọn truy cập vào một trang web hoặc ứng dụng nhất định bằng ngôn ngữ mẹ đẻ của họ, điều này có thể gây ấn tượng tích cực đối với họ, khiến việc tiếp cận đối tượng toàn cầu trở nên rất quan trọng.

Những gì chúng tôi đang làm​

Trong hướng dẫn này, chúng tôi sẽ tạo một trang web kết hợp các phần i18n này lại với nhau bằng cách kết hợp các thư viện và một khuôn khổ UI. Bạn sẽ muốn có trình độ trung cấp về JavaScript, Vue và Nuxt để theo dõi. Trong suốt bài viết này, chúng ta sẽ học bằng ví dụ và từng bước xây dựng một trang web Nuxt đa ngôn ngữ. Chúng ta sẽ cùng nhau tìm hiểu cách cung cấp hỗ trợ i18n cho các ngôn ngữ khác nhau, tải chậm các thông điệp ngôn ngữ và chuyển đổi ngôn ngữ khi chạy.

Sau đó, chúng ta sẽ khám phá các tính năng như nội suy, số nhiều và dịch ngày/giờ.

Và cuối cùng, chúng ta sẽ lấy nội dung bản địa hóa động từ máy chủ API bằng Hygraph làm máy chủ API của chúng ta để lấy nội dung bản địa hóa. Nếu bạn không có tài khoản Hygraph vui lòng tạo một tài khoản miễn phí trước khi bắt đầu.

Như một chi tiết cuối cùng, chúng ta sẽ sử dụng Vuetify làm khuôn khổ giao diện người dùng của chúng ta, nhưng bạn có thể thoải mái sử dụng một khuôn khổ khác nếu muốn. Mã cuối cùng cho những gì chúng ta đang xây dựng được công bố trong kho lưu trữ GitHub để tham khảo. Và cuối cùng, bạn cũng có thể xem kết quả cuối cùng trong bản demo trực tiếp.

Thư viện nuxt-i18n​

nuxt-i18n là thư viện để triển khai quốc tế hóa trong các ứng dụng Nuxt.js và chúng ta sẽ sử dụng thư viện này trong hướng dẫn này. Thư viện được xây dựng dựa trên Vue I18n, một lần nữa, là thư viện chuẩn thực tế để triển khai i18n trong các ứng dụng Vue.

Điều khiến nuxt-i18n trở nên lý tưởng cho công việc của chúng tôi là nó cung cấp bộ tính năng toàn diện có trong Vue I18n đồng thời bổ sung thêm nhiều chức năng dành riêng cho Nuxt, như tải chậm các thông báo ngôn ngữ, tạo tuyến đường và chuyển hướng cho các ngôn ngữ khác nhau, siêu dữ liệu SEO cho từng ngôn ngữ, tên miền cụ thể của ngôn ngữ, v.v.

Thiết lập ban đầu​

Bắt đầu một dự án Nuxt.js mới và thiết lập dự án đó với một khuôn khổ giao diện người dùng theo lựa chọn của bạn. Một lần nữa, tôi sẽ sử dụng Vue để thiết lập giao diện cho hướng dẫn này.

Chúng ta hãy thêm một bố cục cơ bản cho trang web của mình và thiết lập một số mẫu Vue mẫu.

Đầu tiên, một trang "Blog":

    Trang chủ   Đây là mô tả trang chủ

Tiếp theo, trang “Giới thiệu”:

    Giới thiệu   Đây là mô tả trang giới thiệu

Điều này cung cấp cho chúng ta một chút boilerplate mà chúng ta có thể tích hợp công việc i18n của mình vào.

Dịch văn bản thuần túy​

Các mẫu trang trông đẹp, nhưng hãy chú ý cách văn bản được mã hóa cứng. Đối với i18n, nội dung được mã hóa cứng rất khó dịch sang các ngôn ngữ khác nhau. Đó là nơi thư viện nuxt-i18n xuất hiện, cung cấp các chuỗi ngôn ngữ cụ thể mà chúng ta cần cho các thành phần Vue trong các mẫu.

Chúng ta sẽ bắt đầu bằng cách cài đặt thư viện thông qua dòng lệnh:

npx nuxi@latest module add i18n

Bên trong tệp nuxt.config.ts, chúng ta cần đảm bảo rằng có @nuxtjs/i18n bên trong mảng modules. Chúng ta có thể sử dụng thuộc tính i18n để cung cấp các cấu hình dành riêng cho mô-đun.

// nuxt.config.tsexport default defineNuxtConfig({ // ... modules: [ ... "@nuxtjs/i18n", // ... ], i18n: { // nuxt-i18n module configurations here } // ...});

Vì thư viện nuxt-i18n được xây dựng dựa trên thư viện Vue I18n nên chúng ta cũng có thể sử dụng các tính năng của thư viện này trong ứng dụng Nuxt của mình. Hãy tạo một tệp mới, i18n.config.ts, mà chúng ta sẽ sử dụng để cung cấp tất cả các cấu hình vue-i18n.

// i18n.config.tsexport default defineI18nConfig(() => ({ legacy: false, locale: "en", messages: { en: { homePage: { title: "Home", description: "This is the home page description." }, aboutPage: { title: "About", description: "This is the about page description." }, }, },}));

Tại đây, chúng tôi đã chỉ định các cấu hình quốc tế hóa, như sử dụng ngôn ngữ en và thêm các thông báo cho ngôn ngữ en. Những thông báo này có thể được sử dụng bên trong đánh dấu trong các mẫu mà chúng ta đã tạo với sự trợ giúp của hàm $t từ Vue I18n.

Tiếp theo, chúng ta cần liên kết các cấu hình i18n.config.ts trong tệp cấu hình Nuxt của chúng ta.

// nuxt.config.tsexport default defineNuxtConfig({ ... i18n: { vueI18n: "./i18n.config.ts" } ...});

Bây giờ, chúng ta có thể sử dụng hàm $t trong các thành phần của mình — như được hiển thị bên dưới — để phân tích cú pháp các chuỗi từ các cấu hình quốc tế hóa của chúng ta.

Lưu ý: Không cần phải import $t vì chúng ta có chức năng tự động nhập mặc định của Nuxt.

    {{ $t("homePage.title") }}   {{ $t("homePage.description") }}

Bản dịch tải chậm​

Chúng tôi có tiêu đề và mô tả được cung cấp từ các cấu hình. Tiếp theo, chúng tôi có thể thêm nhiều ngôn ngữ hơn vào cùng một cấu hình. Ví dụ, đây là cách chúng ta có thể thiết lập bản dịch cho tiếng Anh (en), tiếng Pháp (fr) và tiếng Tây Ban Nha (es):

// i18n.config.tsexport default defineI18nConfig(() => ({ legacy: false, locale: "en", messages: { en: { // English }, fr: { // French }, es: { // Spanish } },}));

Đối với một trang web sản xuất có nhiều nội dung cần dịch, sẽ không khôn ngoan khi đóng gói tất cả các thông báo từ các ngôn ngữ khác nhau trong gói chính. Thay vào đó, chúng ta nên sử dụng tính năng tải chậm nuxt-i18 để chỉ tải ngôn ngữ cần thiết một cách không đồng bộ thay vì tải tất cả cùng một lúc. Ngoài ra, việc có các thông báo cho tất cả các ngôn ngữ trong một tệp cấu hình duy nhất có thể trở nên khó quản lý theo thời gian và việc chia nhỏ chúng như thế này giúp mọi thứ dễ tìm hơn.

Hãy thiết lập tính năng tải chậm trong nuxt.config.ts:

// v.v. i18n: { vueI18n: "./i18n.config.ts", lazy: true, langDir: "locales", locales: [ { code: "en", file: "en.json", name: "English", }, { code: "es", file: "es.json", name: "Spanish", }, { code: "fr", file: "fr.json", name: "French", }, ], defaultLocale: "en", strategy: "no_prefix", },// v.v.

Điều này cho phép tải chậm và chỉ định thư mục locales sẽ chứa tệp locale. Cấu hình mảng locales chỉ định những tệp nào Nuxt.js sẽ lấy thông báo cho một ngôn ngữ cụ thể.

Bây giờ, chúng ta có thể tạo các tệp riêng cho từng ngôn ngữ. Tôi sẽ thả cả ba tệp đó ngay tại đây:

// locales/en.json{ "homePage": { "title": "Home", "description": "Đây là mô tả trang chủ." }, "aboutPage": { "title": "About", "description": "Đây là mô tả trang giới thiệu." }, "selectLocale": { "label": "Select Locale" }, "navbar": { "homeButton": "Home", "aboutButton": "About" }}

// locales/fr.json{ "homePage": { "title": "Bienvenue sur la page d'accueil", "description": "Ceci est la description de la page d'accueil." }, "aboutPage": { "title": "À propos de nous", "description": "Ceci est la description de la page à propos de nous." }, "selectLocale": { "label": "Sélectionner la langue" }, "navbar": { "homeButton": "Accueil", "aboutButton": "À propos" }

// locales/es.json{ "homePage": { "title": "Bienvenido a la página de inicio", "description": "Esta es la descripción de la página de inicio." }, "aboutPage": { "title": "Sobre nosotros", "description": "Esta es la descripción de la página sobre nosotros." }, "selectLocale": { "label": "Chọn ngôn ngữ" }, "navbar": { "homeButton": "Trang chủ", "aboutButton": "Giới thiệu" }}

Chúng tôi đã thiết lập tải chậm, thêm nhiều ngôn ngữ vào ứng dụng của mình và di chuyển các thông báo ngôn ngữ của mình vào các tệp riêng biệt. Người dùng nhận được ngôn ngữ phù hợp cho đúng thông báo và các thông báo ngôn ngữ được lưu giữ theo cách có thể bảo trì bên trong cơ sở mã.

Chuyển đổi giữa các ngôn ngữ​

Chúng tôi có các ngôn ngữ khác nhau, nhưng để xem chúng hoạt động, chúng tôi sẽ xây dựng một thành phần có thể được sử dụng để chuyển đổi giữa các ngôn ngữ có sẵn.

const { locale, locales, setLocale } = useI18n();const language = computed({ get: () => locale.value, set: (value) => setLocale(value),});

Thành phần này sử dụng hook useI18n do thư viện Vue I18n cung cấp và thuộc tính được tính toán language để lấy và đặt ngôn ngữ toàn cục từ đầu vào . Để làm cho trang web này giống với trang web thực tế hơn nữa, chúng tôi sẽ bao gồm một thanh điều hướng nhỏ liên kết tất cả các trang của trang web.

    {{ $t("navbar.homeButton") }}   {{ $t("navbar.aboutButton") }}

Vậy là xong! Bây giờ, chúng ta có thể chuyển đổi giữa các ngôn ngữ một cách nhanh chóng.





Chúng tôi có một bố cục cơ bản, nhưng tôi nghĩ chúng tôi sẽ tiến xa hơn một bước và xây dựng một trang sân chơi mà chúng tôi có thể sử dụng để khám phá thêm các tính năng i18n khá hữu ích khi xây dựng một trang web đa ngôn ngữ.

Nội suy và số nhiều​

Nội suy và số nhiều là các kỹ thuật quốc tế hóa để xử lý nội dung động và các biến thể ngữ pháp giữa các ngôn ngữ khác nhau. Nội suy cho phép các nhà phát triển chèn các biến hoặc biểu thức động vào các chuỗi đã dịch. Số nhiều giải quyết sự phức tạp của các dạng số nhiều trong ngôn ngữ bằng cách chọn dạng ngữ pháp phù hợp dựa trên các giá trị số. Với sự trợ giúp của nội suy và số nhiều, chúng ta có thể tạo ra các bản dịch tự nhiên và chính xác hơn.

Để sử dụng số nhiều trong ứng dụng Nuxt của mình, trước tiên chúng ta sẽ thêm cấu hình vào tệp ngôn ngữ tiếng Anh.

// locales/en.json{ // v.v. "playgroundPage": { "pluralization": { "title": "Số nhiều", "apple": "Không có Apple | Một Apple | {count} Apples", "addApple": "Thêm" } } // v.v.}

Cấu hình số nhiều được thiết lập cho khóa apple định nghĩa một đầu ra — Không có Apple — nếu số lượng là 0 được truyền vào khóa này, đầu ra thứ hai — Một Apple — nếu số lượng là 1 được truyền vào và đầu ra thứ ba — 2 Apples, 3 Apples, v.v. — nếu số lượng được truyền vào lớn hơn 1.

Sau đây là cách chúng ta có thể sử dụng nó trong thành phần của bạn: Bất cứ khi nào bạn nhấp vào nút thêm, bạn sẽ thấy số nhiều đang hoạt động, thay đổi các chuỗi.

let appleCount = ref(0);const addApple = () => { appleCount.value += 1;};     {{ $t("playgroundPage.pluralization.title") }}   {{ $t("playgroundPage.pluralization.apple", { count: appleCount }) }}   {{ $t("playgroundPage.pluralization.addApple") }}

Để sử dụng nội suy trong ứng dụng Nuxt của chúng tôi, trước tiên, hãy thêm cấu hình vào tệp ngôn ngữ tiếng Anh:

// locales/en.json{ ... "playgroundPage": { ... "interpolation": { "title": "Nội suy", "sayHello": "Xin chào, {name}", "hobby": "Sở thích yêu thích của tôi là {0}.", "email": "Bạn có thể liên hệ với tôi tại {account}{'@'}{domain}.com" }, // v.v. } // v.v.}

Thông báo cho sayHello mong đợi một đối tượng được truyền cho nó có khóa name khi được gọi — một quy trình được gọi là nội suy có tên.

Thông báo hobby mong đợi một mảng được truyền vào nó và sẽ chọn phần tử thứ 0, được gọi là nội suy danh sách.

Thông báo email mong đợi một đối tượng có khóa account và domain và nối cả hai bằng một chuỗi ký tự "@". Đây được gọi là nội suy theo nghĩa đen.

Dưới đây là ví dụ về cách sử dụng nội suy theo nghĩa đen trong các thành phần Vue:

     {{ $t("playgroundPage.interpolation.title") }}   
 {{ $t("playgroundPage.interpolation.sayHello", { name: "Jane", }) }} 
 
 {{ $t("playgroundPage.interpolation.hobby", ["Football", "Cricket"]) }} 
 
 {{ $t("playgroundPage.interpolation.email", { account: "johndoe", domain: "hygraph", }) }}

Dịch ngày và giờ​

Dịch ngày và giờ liên quan đến việc dịch định dạng ngày và giờ theo các quy ước của các ngôn ngữ khác nhau. Chúng ta có thể sử dụng các tính năng của Vue I18n để định dạng chuỗi ngày, xử lý múi giờ và dịch tên ngày và tháng để quản lý bản dịch ngày giờ. Chúng ta có thể cung cấp cấu hình cho cùng một mục đích bằng cách sử dụng khóa datetimeFormats bên trong đối tượng cấu hình vue-i18n.

// i18n.config.tsexport default defineI18nConfig(() => ({ fallbackLocale: "en", datetimeFormats: { en: { short: { year: "numeric", month: "short", day: "numeric", }, long: { year: "numeric", month: "short", day: "numeric", weekday: "short", hour: "numeric", minute: "numeric", hour12: false, }, }, fr: { short: { year: "numeric", month: "short", day: "numeric", }, long: { year: "numeric", month: "short", day: "numeric", weekday: "long", hour: "numeric", minute: "numeric", hour12: true, }, }, es: { short: { year: "số", month: "short", day: "số", }, long: { year: "2 chữ số", month: "short", day: "số", weekday: "dài", hour: "số", minute: "số", hour12: true, }, }, },}));

Tại đây, chúng tôi đã thiết lập định dạng short và long cho cả ba ngôn ngữ. Nếu bạn đang viết mã, bạn sẽ có thể thấy các cấu hình có sẵn cho các trường, như tháng và năm, nhờ các tính năng TypeScript và Intellisense do trình soạn thảo mã của bạn cung cấp. Để hiển thị ngày và giờ đã dịch trong các thành phần, chúng ta nên sử dụng hàm $d và truyền định dạng cho hàm đó.

     {{ $t("playgroundPage.dateTime.title") }}   
Ngắn: {{ (new Date(), $d(new Date(), "ngắn")) }}
 
Dài: {{ (new Date(), $d(new Date(), "dài")) }}

Bản địa hóa ở phía Hygraph​

Chúng ta đã thấy cách triển khai bản địa hóa với nội dung tĩnh. Bây giờ, chúng ta sẽ cố gắng hiểu cách lấy nội dung bản địa hóa động trong Nuxt.

Chúng ta có thể xây dựng một trang blog trong Ứng dụng Nuxt của mình để lấy dữ liệu từ máy chủ. API máy chủ phải chấp nhận một bản địa hóa và trả về dữ liệu ở bản địa hóa cụ thể đó.

Hygraph có API bản địa hóa linh hoạt cho phép bạn xuất bản và truy vấn nội dung bản địa hóa. Nếu bạn chưa tạo tài khoản Hygraph miễn phí, bạn có thể tạo trên trang web Hygraph để tiếp tục theo dõi.

Vào Cài đặt dự án → Ngôn ngữ và thêm ngôn ngữ cho API.



Chúng tôi đã thêm hai ngôn ngữ: tiếng Anh và tiếng Pháp. Bây giờ chúng ta cần mô hình aq localized_post trong lược đồ của mình mà chỉ có hai trường: title và body. Đảm bảo tạo các trường "Bản địa hóa" này khi tạo chúng.



Thêm quyền để sử dụng nội dung đã bản địa hóa, hãy vào Cài đặt dự án → Truy cập → Truy cập API → Public Content API và chỉ định quyền Đọc cho mô hình localized_post.



Bây giờ, chúng ta có thể đến sân chơi API Hygrapgh và thêm một số dữ liệu bản địa hóa vào cơ sở dữ liệu với sự trợ giúp của GraphQL đột biến. Để giới hạn phạm vi của ví dụ này, tôi chỉ cần thêm dữ liệu từ sân chơi Hygraph API. Trong thế giới lý tưởng, đột biến tạo/cập nhật sẽ được kích hoạt từ giao diện sau khi nhận được đầu vào của người dùng.

Chạy đột biến này trong sân chơi Hygraph API:

mutation createLocalizedPost { createLocalizedPost( data: { title: "A Journey Through the Alps", body: "Khám phá những ngọn núi hùng vĩ của dãy Alps mang lại trải nghiệm ly kỳ. Phong cảnh tuyệt đẹp, động vật hoang dã đa dạng và môi trường hoang sơ khiến nơi đây trở thành điểm đến hoàn hảo cho những người yêu thiên nhiên.", localizations: { create: [ {locale: fr, data: {title: "Un Voyage à travers les Alpes", body: "Explorer les majestueuses montagnes des Alpes offre une expérience palpitante. Les paysages époustouflants, la faune diversifiée et l'environnement immaculé en font une Destination parfaite pour les amoureux de la Nature."}} ] } } ) { id }

Đột biến ở trên tạo ra một bài đăng có ngôn ngữ en và bao gồm một Phiên bản fr của cùng bài đăng. Hãy thoải mái thêm dữ liệu vào mô hình của bạn nếu bạn muốn xem mọi thứ hoạt động từ một tập dữ liệu rộng hơn.

Ghép mọi thứ lại với nhau​

Bây giờ chúng ta đã có nội dung API Hygraph sẵn sàng để sử dụng, hãy dành chút thời gian để hiểu cách nội dung đó được sử dụng bên trong ứng dụng Nuxt.

Để thực hiện việc này, chúng ta sẽ cài đặt nuxt-graphql-client để làm ứng dụng khách GraphQL của ứng dụng. Đây là một ứng dụng khách GraphQL tối giản để thực hiện các hoạt động GraphQL mà không cần phải lo lắng về cấu hình phức tạp, tạo mã, nhập và các tác vụ thiết lập khác.

npx nuxi@latest module add graphql-client

// nuxt.config.tsexport default defineNuxtConfig({ modules: [ // ... "nuxt-graphql-client" // ... ], runtimeConfig: { public: { GQL_HOST: 'ADD_YOUR_GQL_HOST_URL_HERE_OR_IN_.env' } },});

Tiếp theo, hãy thêm các truy vấn GraphQL của chúng ta vào graphql/queries.graphql.

query getPosts($locale: [Locale!]!) { localizedPosts(locales: $locale) { title body }}

Máy khách GraphQL sẽ tự động quét các tệp .graphql và .gql và tạo mã và kiểu dữ liệu phía máy khách trong thư mục .nuxt/gql. Tất cả những gì chúng ta cần làm là dừng và khởi động lại ứng dụng Nuxt. Sau khi khởi động lại ứng dụng, máy khách GraphQL sẽ cho phép chúng ta sử dụng hàm GqlGetPosts để kích hoạt truy vấn.

Bây giờ, chúng ta sẽ xây dựng trang Blog bằng cách truy vấn máy chủ Hygraph và hiển thị dữ liệu động.

// pages/blog.vue import type { GetPostsQueryVariables } from "#gql"; import type { PostItem, Locale } from "../types/types"; const { locale } = useI18n(); const posts = ref
([]); const isLoading = ref(false); const isError = ref(false); const fetchPosts = async (localeValue: Locale) => { try { isLoading.value = true; const variables: GetPostsQueryVariables = { locale: [localeValue], }; const data = await GqlGetPosts(variables); posts.value = data?.localizedPosts ?? []; } catch (err) { console.log("Lỗi khi tải, Có gì đó không ổn", err); isError.value = true; } finally { isLoading.value = false; } }; // Tải bài đăng trên thành phần mount onMounted(() => { fetchPosts(locale.value as Locale); }); // Theo dõi các thay đổi về ngôn ngữ watch(locale, (newLocale) => { fetchPosts(newLocale as Locale); });

Đoạn mã này chỉ lấy ngôn ngữ hiện tại từ hook useI18n và gửi đến hàm fetchPosts khi thành phần Vue được gắn kết. Hàm fetchPosts sẽ truyền ngôn ngữ đến truy vấn GraphQL dưới dạng một biến và lấy dữ liệu bản địa hóa từ máy chủ Hygraph. Chúng ta cũng có một trình theo dõi trên locale để bất cứ khi nào ngôn ngữ toàn cục được người dùng thay đổi, chúng ta sẽ thực hiện một lệnh gọi API đến máy chủ một lần nữa và lấy các bài đăng ở ngôn ngữ đó.

Và cuối cùng, hãy thêm đánh dấu để xem dữ liệu đã lấy của chúng ta!

  Blog     
Đã xảy ra lỗi khi tải blog, vui lòng kiểm tra nhật ký.
     {{ post.title }} {{ post.body }}

Tuyệt! Nếu mọi việc diễn ra theo đúng kế hoạch, thì ứng dụng của bạn sẽ trông giống như ứng dụng trong video sau.

Kết thúc​

Xem thử nhé — chúng tôi vừa tạo ra chức năng dịch nội dung cho trang web đa ngôn ngữ! Bây giờ, người dùng có thể chọn ngôn ngữ từ danh sách các tùy chọn và ứng dụng sẽ tìm nạp nội dung cho ngôn ngữ đã chọn và tự động cập nhật nội dung được hiển thị.

Bạn có nghĩ rằng việc dịch thuật sẽ yêu cầu nhiều bước khó hơn không? Thật tuyệt vời khi chúng tôi có thể ghép nối một vài thư viện, kết nối chúng với API và kết nối mọi thứ để hiển thị trên một trang.

Tất nhiên, vẫn còn nhiều thư viện và tài nguyên khác để xử lý quốc tế hóa trong bối cảnh đa ngôn ngữ. Việc sử dụng công cụ chính xác không quan trọng bằng việc xem xét những phần nào cần thiết để xử lý các bản dịch động và cách chúng kết hợp với nhau.