Saya mencoba menambahkan multi-bahasa ke template gatsbyjs ini menggunakan gatsby-plugin-intl.

Terjemahan tingkat bidang: Setiap bidang yang ditandai dengan terjemahan akan memiliki terjemahan dan Anda memiliki satu item konten untuk semua terjemahan.

Terjemahan multi-pohon: Setiap terjemahan akan memiliki item kontennya sendiri dan terjemahan disimpan di folder yang berbeda.

Halaman dalam folder pages menggunakan terjemahan tingkat bidang dan berfungsi sepenuhnya sebagaimana mestinya. Halaman dalam folder content menggunakan terjemahan Multi-pohon menggunakan file penurunan harga, tetapi tidak berfungsi sepenuhnya seperti yang diinginkan/seharusnya. Perutean mereka tidak aktif.

Pada dasarnya saya ingin halaman-halaman ini mengikuti perutean ini:

  • /en/mypage/ harus memberikan versi bahasa Inggris
  • /ko/mypage/ harus memberikan versi korea

Namun saya sekarang mendapatkan halaman sumber penurunan harga berikut:

  • /en/mypage/en/ dan /ko/mypage/en/ berikan versi bahasa Inggris
  • /en/mypage/ko/ dan /ko/mypage/ko/ berikan versi korea

Saya mencoba mengganti nama siput di salah satu kait (onCreatePage, onCreateNode, createPages), tetapi sejauh ini tidak berhasil. Saat mencoba sepertinya salah satu versi (en/ko) ditimpa sehingga Anda hanya memiliki satu bahasa untuk kedua rute. Bagaimana cara mengatasi ini?

Misalnya. amsterdamfurniturelab.nl/en/bear-desk/en berubah menjadi amsterdamfurniturelab.nl/nl/bear-desk/en tetapi tidak menunjukkan nl-translation.

2
musicformellons 15 Maret 2020, 12:57

1 menjawab

Jawaban Terbaik

gatsby-plugin-intl hanya mendukung terjemahan tingkat bidang, meneruskan kunci terjemahan JSON melalui Konteks.

Dari README plugin:

anda tidak perlu membuat halaman terpisah seperti pages/en/index.js atau pages/ko/index.js [...] plugin akan membuat halaman statis untuk setiap bahasa

Jadi jika Anda memiliki 2 bahasa, katakanlah NL dan EN, plugin akan menghasilkan 3 halaman untuk setiap slug. Jadi jika Anda memiliki halaman /bear-desk/, Anda akan mendapatkan:

"/en/bear-desk/" <-- EN locale
"/nl/bear-desk/" <-- NL locale
"/bear-desk/" <-- default: either redirects or renders the default locale based on plugin settings

Dalam repo yang Anda berikan, Anda menggunakan terjemahan gatsby-plugin-intl dan "manual" menggunakan dua halaman terpisah.

Karena /bear-desk/en/ dan /bear-desk/nl/ dilihat sebagai dua halaman berbeda oleh plugin, Anda sebenarnya menghasilkan 6 halaman untuk setiap slug:

For your /bear-desk/en/ page (no JSON translations found, all will be in EN)
"/en/bear-desk/en/"
"/nl/bear-desk/en/"
"/bear-desk/en/"

For your /bear-desk/nl/ page (no JSON translations found, all will be in NL)
"/en/bear-desk/nl/"
"/nl/bear-desk/nl/"
"/bear-desk/nl/"

Jika Anda ingin mengubah perilaku ini, Anda dapat membuat halaman secara manual menggunakan createPage" dari Gatsby API di gatsby-node.js dan pastikan Anda membuat halaman yang tepat di URL yang tepat.

Ada beberapa cara untuk melakukan ini. Jika Anda membutuhkan inspirasi, satu contoh yang tampaknya mendekati kasus Anda dijelaskan di Membuat situs statis multibahasa dengan Gatsby di Hiddentao.

Jika masalah lain muncul selama implementasi Anda, jangan ragu untuk membuka pertanyaan baru dan saya akan dengan senang hati membantu!

Memperbarui

Saya dapat membuat URL yang tepat di onCreatePage API:

/*
here's what we want to do:
 - for /nl/<slug>/nl/ create both /<slug>/ and /nl/<slug>/
 - for /en/<slug>/en/ create /en/<slug>/
 - for the rest of pages including <slug>, delete
*/

// note: optimally you would grab slugs from the fs or via graphql
const slugs = ["bear-desk", "cnc-explained"]

exports.onCreatePage = async ({
  page,
  actions: { createPage, deletePage },
}) => {
  slugs.forEach(slug => {
    if (page.path === `/nl/${slug}/nl/`) {
      // create page in the default language (NL) at /slug
      const defaultPage = { ...page, path: `/${slug}/` }
      createPage(defaultPage)
      console.log(`Created default page in NL at ${defaultPage.path}`)

      // create a page for /nl/slug
      const nlPage = { ...page, path: `/nl/${slug}/` }
      createPage(nlPage)
      console.log(`Created NL page at ${nlPage.path}`)

      // delete the page with duplicate locale
      deletePage(page)
      console.log(`Deleted ${page.path}`)
    }

    else if (page.path === `/en/${slug}/en/`) {
      // create a page for /en/slug
      const enPage = { ...page, path: `/en/${slug}/` }
      createPage(enPage)
      console.log(`Created EN page at ${enPage.path}`)

      // delete the page with duplicate locale
      deletePage(page)
      console.log(`Deleted ${page.path}`)
    }

    else if (page.path.includes(slug)) {
      // delete all other pages with that slug
      deletePage(page)
      console.log(`Deleted ${page.path}`)
    }
  })
}

Anda akan mendapatkan rute yang Anda inginkan:

"/en/<slug>/" <-- EN locale
"/nl/<slug>/" <-- NL locale
"/<slug>/" <-- default (NL locale in your case)

Meskipun ini membuat halaman yang benar di rute yang benar, ada batasan utama: gatsby-plugin-intl tidak menyadarinya. Ini berarti Anda perlu menerapkan peralihan bahasa dan penautan ke lokal yang tepat secara manual.

Ini jelas bukan solusi terbaik, tetapi karena plugin tidak mendukung jenis pelokalan ini, saya tidak yakin ada cara yang lebih terintegrasi untuk melakukan ini (mungkin orang lain akan memiliki ide yang lebih baik).

Satu hal lagi yang saya sarankan adalah membuat permintaan fitur di repo. Semoga berhasil!

2
Community 20 Juni 2020, 09:12