Tạo trang web đa ngôn ngữ với Gatsby & Cosmic JS

Một người bạn gần đây đã đề nghị tôi xây dựng một trang web có version tiếng Nhật và tiếng Anh. Tôi chưa bao giờ viết một trang web quốc tế hóa nhưng tôi có ý kiến mạnh mẽ về cách hoạt động của bản địa hóa. Vì vậy, đây là một cách để tiếp cận quốc tế hóa trong Gatsby bằng cách sử dụng Cosmic JS, một CMS không đầu.

Một chút bối cảnh

Có nhiều cách để tiếp cận bản địa hóa và như mọi khi không có viên đạn bạc. Mỗi cách tiếp cận giải quyết vấn đề theo những cách khác nhau. Vì vậy, đây là bối cảnh của tôi:

Tôi muốn xây dựng một trang web với chi phí bảo trì càng ít càng tốt.
Người viết nội dung không có bất kỳ kinh nghiệm lập trình nào
Chi phí bảo trì của trang web phải càng thấp càng tốt.
Trang web không nên ép buộc user trên một version của trang web.

Điểm cuối cùng này rất quan trọng đối với tôi. Khi bạn ở nước ngoài, một số trang web buộc bạn phải sử dụng version local của trang web của họ. Khi [array of multinational companies] buộc tôi phải sử dụng version [long array of languages I don't understand] của trang web, điều đó khiến tôi phát điên. Tôi gặp vấn đề tương tự với bản dịch tự động của một trang. Nếu tôi muốn có bản dịch tự động cho trang web của bạn , tôi có thể sử dụng tiện ích mở rộng Google dịch tuyệt vời của Chrome .

Trang web này dành cho cả user tiếng Nhật và tiếng Anh. Vì vậy, tất cả các trang của trang web nên có version tiếng Anh và version tiếng Nhật. Nếu user muốn thay đổi version hiện tại của trang web, họ có thể nhấp vào menu ngôn ngữ trong thanh chuyển .

Cách tiếp cận của tôi

Gatsby và React cung cấp nhiều công cụ để tiếp cận nội địa hóa (l10n) và quốc tế hóa (i18n) .

Lần đầu tiên tôi sử dụng gatsby-plugin-i18n để dễ dàng tạo các tuyến đường.

Ví dụ: /page/team.ja.js sẽ tạo URL sau: /ja/team ( ja là mã ngôn ngữ của Nhật Bản).

Đây là một plugin thực sự tốt nhưng vấn đề là nó không có lập trình. Tôi phải viết một file mới cho mỗi ngôn ngữ. Trong mỗi file , tôi phải thực hiện một truy vấn GraphQL cụ thể để tìm nạp dữ liệu. Vì vậy, ví dụ: nếu tôi giới thiệu một ngôn ngữ mới cho CMS của bạn , tôi phải tạo lại tất cả các tuyến bằng phần mở rộng ngôn ngữ mới.

Vì vậy, thay vào đó, tôi quyết định xây dựng l10n mà không cần bất kỳ plugin nào. Tất cả mã cho dự án này có sẵn tại https://github.com/alligatorio/kodou .

Trong bối cảnh này, người viết nội dung hoàn toàn chịu trách nhiệm về việc bản địa hóa. Khi viết version tiếng Nhật của trang web, cô ấy nên đảm bảo các định dạng ngày tháng là chính xác. Đây là lý do tại sao ta không sử dụng react-intl dựa trên API quốc tế hóa và sẽ là chủ đề của một bài đăng trong tương lai.

Cài đặt Cosmic JS

Cosmic JS, một tùy chọn CMS không đầu tuyệt vời, cho phép bạn kích hoạt bản địa hóa khi bạn tạo một loại đối tượng mới.

ảnh chụp màn hình: tùy chọn l10n trong Cosmic JS

Đừng quên chọn một ngôn ngữ ưu tiên nếu không đối tượng mới sẽ không lưu.

Trong trang web mới của ta , ta có một trang group nên ta tạo đối tượng Thành viên group . Khi ta tạo Thành viên group mới, bây giờ ta có thể chọn ngôn ngữ 'của nó.

ảnh chụp màn hình: Lựa chọn ngôn ngữ thành viên group trong Cosmic JS

Bây giờ để truy cập dữ liệu đó từ Gatsby, ta cần thêm plugin nguồn gatsby-source-cosmicjs :

$ yarn add gatsby-source-cosmicjs

Sau đó, ta cần cấu hình gatsby-config.js để sử dụng gatsby-source-cosmicjs bằng cách thêm mã sau vào các plugins .

Mô-đun: gatsby-config.js

{   resolve: "gatsby-source-cosmicjs",   options: {     bucketSlug: process.env.COSMIC_BUCKET,     // We add the 'team-members' object type to be able to fetch it later     objectTypes: ["team-members"],     // If you have enabled read_key to fetch data (optional).     apiAccess: {       read_key: process.env.COSMIC_ENV_KEY,     }   } }

Trong phần còn lại của mã, ta có thể truy cập dữ liệu thành viên trong group từ Cosmic JS bằng lệnh:

graphql(`   {     allCosmicjsTeamMembers  {       edges {       # Here we have the structure of out `team-members` object         node {           title           locale           content           metadata {             profile_picture {               imgix_url             }           }         }       }     }   } `)

Bây giờ điều kỳ diệu bản địa hóa xảy ra.

Tạo các trang được bản địa hóa

Tôi muốn bạn tôi có thể tự mình thực hiện bất kỳ thay đổi nào mà anh ấy muốn. Vì vậy, tôi đã bỏ hoàn toàn folder /pages để thay thế cho folder /templates . Các mẫu Gatsby cho phép ta có nội dung có thể sử dụng lại và tạo các trang theo chương trình; đó chính xác là những gì ta cần làm!

Trước khi xem file mẫu, hãy xem cách ta có thể tìm nạp dữ liệu từ Cosmic JS để tạo các trang mới.

Mô-đun: gatsby-node.js

// langs contains the languages of our blog and default langKey is the default language of the site // To be fully programmatic we could calculate langs // here langs = ['en', 'ja'] and defaultLangKey = 'en' const { langs, defaultLangKey } = require('../config/languages') const path = require(`path`) const { localizeUrl, createLanguagesObject } = require('../utils/localization')  exports.createPages = async ({ actions, graphql }) => {   const { createPage } = actions    const result = await graphql(`     {       allCosmicjsTeamMembers  {         edges {           node {             title             locale             content             metadata {               profile_picture {                 imgix_url               }             }           }         }       }     }   `)    if (result.errors) {     console.error(result.errors)   }    // Creates a profiles object with out site's languages    const profiles = createLanguagesObject(langs)   // profiles = {   // 'en': [],   // 'ja': []     // }    // converting the raw cosmic data into a more useable data structure   result.data.allCosmicjsTeamMembers.edges.forEach(({ node }) => {     profiles[node.locale].push(node)   })   // profiles = {   // 'en': [...all English profiles],   // 'ja': [...all Japanese profiles]     // }    // we create a new page for each language   langs.forEach(lang =>{      createPage({       // the localizeUrl function creates a url which takes into consideration what the default language is       path: localizeUrl(lang, defaultLangKey, '/team'),       component: path.resolve(`src/templates/team.js`),       context: {         profiles: profiles[lang]       }     })   }) }

Đoạn mã này sẽ tạo hai trang mới với các đường dẫn /ja/team và /team (Không có /en vì ta đặt tiếng Anh làm ngôn ngữ mặc định).

Như bạn thấy , createPage nhận làm đối số, một đối tượng với 3 trường path , component và context . Đường dẫn đơn giản là đường dẫn mà ta muốn trang mới của bạn có. component là mẫu mà ta muốn sử dụng. context là dữ liệu ta muốn chuyển đến mẫu của bạn . Ở đây ta chuyển các profile được viết bằng ngôn ngữ mong muốn của ta .

Đúc

Hãy xem qua mẫu group của ta .

import React from "react" import Layout from "../components/layout" import SEO from "../components/seo"  const TeamPage = (props) => {   // We will see about pageContext in the next section   const {profiles} = props.pageContext   return (   <Layout location={props.location}>     <SEO title="Team" />     <h1>Team</h1>     // Iterating trough the array of profiles     {profiles.map((profile,i)=>(       <div key={i} className="columns">         <div className="column">           // Here are some nice profile pictures of our team members           <div className="square-image" style={{backgroundImage: `url("${profile.metadata.profile_picture.imgix_url}")`}}/>         </div>         <div className="column is-two-thirds">           <div className="team-member-title">{profile.title}</div>           // Here is some html content we get from Cosmic           <div dangerouslySetInnerHTML={{ __html: profile.content }}/>         </div>       </div>       )     )}   </Layout>   ) }  export default TeamPage

Tóm lại, đoạn mã trên sử dụng một đạo cụ profiles , đây là một mảng cấu hình mà ta nhận được từ Cosmic JS. Mỗi profile có một đối tượng ảnh profile , một title và một trường content . Các content thực sự là một chuỗi HTML để ta phải cài đặt nó bằng cách sử dụng dangerouslySetInnerHTML prop.

Để mẫu này hoạt động, điều quan trọng là phải chuẩn bị trước các file CSS của bạn để có được kết quả nhất quán. Bạn của tôi sẽ không thể thêm tên hoặc id lớp vào WYSIWYG của Cosmic.

Còn nhiều điều cần nói và làm:

Tạo thanh chuyển và bố cục nhận biết vị trí
Cách sử dụng API quốc tế hóa
Cách chuyển hướng nhẹ nhàng user đến version trang web của họ

Bạn có thể khám phá repo Github để tìm hiểu cách tôi giải quyết những vấn đề này và xem kết quả trên kodou.me . Hoặc sử dụng Alligator.io để xem liệu ta có tải lên một số nội dung mới về chủ đề đó hay không. Nhưng tôi nghĩ rằng nó đã rất nhiều để xử lý trong một bài đăng. Ở trên, tôi hy vọng điều này sẽ giúp được một chút hoặc rất nhiều để xây dựng trang web quốc tế hóa của bạn và hãy theo dõi để biết thêm chi tiết! 😉

Tags:

Các tin liên quan