Reactjs 链接的音译 Gatsby JS

发布于08月24日

谁知道如何在旅途中音译链接？我有一个网站正在 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"),

结果，链接到"Сайтснуля"(英文的"从零开始")类别的页面的链接将看起来像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(function (char) { 
return letters[char] || char; 
  }).join("");
}

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

Modified from 100

适用于您的 case :

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

Reactjs相关问答推荐

在迁移到Redux—Toolkit 2.0和Redux5.0之后，我在extraReducer和Slice方面有点挣扎，

Reactjs 链接的音译 Gatsby JS

推荐答案

Reactjs相关问答推荐

在迁移到Redux—Toolkit 2.0和Redux5.0之后，我在extraReducer和Slice方面有点挣扎，

react 表复选框不对任何操作做出react

单击按钮时在子元素中不显示任何内容-react

如何用Reaction做交互式的MathML？

是否在Extra Reducer完成作业(job)时触发createListenerMiddleware？

TanStack/Reaction-Query在我的Vercel应用程序中不起作用

Reaction路由-如何在布局路由内呈现&q；/：id&q；路由

useState导致对函数的无休止调用

无法使用导入app/page.jsx的组件中的tailwind 类文本操作和自定义动画

onClick 事件处理程序未应用于样式组件

错误：无法获取 RSC 负载.返回浏览器导航

无法使用 MongoDB Atlas 和 Next.js 删除正确的帖子

如何更新redux状态存在的输入框

无法读取未定义的属性(读取值)...TypeError：无法读取未定义的属性(读取值)

使用登录保护 React 中的 SPA 应用程序 - 为什么这种方法不起作用？

react 测试库不测试包含 react 路由 dom V6 的组件

如何通过 React JS 中的映射将新元素添加到对象数据数组中

在 Formik 表单中访问子组件的值

我在使用 Elements of stripe 时使用 React router v6

如何从另一个切片中的不同切片获取状态并对其进行处理？