reactjs - 链接 Gatsby JS 的音译

标签 reactjs gatsby

谁知道如何随时随地音译链接?我正在开发一个关于 Gatsby 的网站。我正在为那里的帖子创建一个类别,并将其写在 frontmatter 中。某些类别可以用西里尔字母书写。

---
title: "Yet Another Post"
date: "2021-07-25"
slug: "yet-another-post"
tags: ["animals", "Chicago", "zoos"]
categories: ["GatsbyJS", "Gatsby Develop", "Сайт с нуля"]
featuredImage: "./third.jpg"
---

然后在您的 gatsby-node.js 中,我正在为此类别创建一个页面(我使用烤肉串大小写,因为 url 是由类别名称构成的)

 createPage({
        path: `blog/category/${_.kebabCase(category)}`,
        component: require.resolve("./src/templates/categories.js"),

结果,指向“Сайт с нуля”(英语的“Site from scrap”)类别页面的链接将类似于 www.domain.ru/blog/category/сайт -с-нуля,我想要链接的音译,例如www.domain.ru/blog/category/sait-s-nulya。可能吗?

最佳答案

您可以使用映射辅助函数,例如:

const letters = {"Ё":"YO","Й":"I","Ц":"TS","У":"U","К":"K","Е":"E","Н":"N","Г":"G","Ш":"SH","Щ":"SCH","З":"Z","Х":"H","Ъ":"'","ё":"yo","й":"i","ц":"ts","у":"u","к":"k","е":"e","н":"n","г":"g","ш":"sh","щ":"sch","з":"z","х":"h","ъ":"'","Ф":"F","Ы":"I","В":"V","А":"a","П":"P","Р":"R","О":"O","Л":"L","Д":"D","Ж":"ZH","Э":"E","ф":"f","ы":"i","в":"v","а":"a","п":"p","р":"r","о":"o","л":"l","д":"d","ж":"zh","э":"e","Я":"Ya","Ч":"CH","С":"S","М":"M","И":"I","Т":"T","Ь":"'","Б":"B","Ю":"YU","я":"ya","ч":"ch","с":"s","м":"m","и":"i","т":"t","ь":"'","б":"b","ю":"yu"};

function transliterate(slug) {
  return slug
    .split("")
    .map((char) => letters[char] || char)
    .join("");
}


console.log(transliterate("www.domain.ru/blog/category/сайт-с-нуля"))

修改自 transliterating cyrillic to latin with javascript function

适用于您的案例:

 createPage({
        path: `blog/category/${_.kebabCase(transliterate(category))}`,
        component: require.resolve("./src/templates/categories.js"),

关于reactjs - 链接 Gatsby JS 的音译,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73464367/

相关文章:

javascript - 设置状态不是在 React/ES6 中重新渲染组件

javascript - 为什么我的 React 单元测试导入不起作用?

node.js - 使用 PM2 运行 Gatsby JS

gatsby - 如何在我的 gatsby 网站上添加 Google 结构化数据?

javascript - Gatsby :常规 anchor 标签在 Codesandbox 上不起作用

reactjs - 尝试使用应用程序中的授权 header ( react )打开新窗口以连接我们网站上的用户

javascript - create-react-app 正在显示我所有的生产代码,如何隐藏它?

reactjs - 如何通过 Redux 商店动态更新 Material UI 主题?

javascript - Gatsby `createPage` 正在生成具有相同数据的页面

graphql - 如何为 Gatsby 页面查询创建自定义解析器?