表示、Ejs和i18next如何在语言之间切换？

Question

我一直试图找出如何使开关或语言选择器工作从前端部分的网站。这也是我第一次使用SSR，所以我不确定在两者之间的沟通。到目前为止，我处理的和工作得很好的是，翻译呈现的包含是有效的，当我为了测试目的手动更改语言时也是如此。

我一直在阅读文档，但是没有关于如何处理这个问题的具体教程，除了函数"changeLanguage“之外，我找到的一些解决方案已经用了5年的时间，涉及到了一些废弃的版本，以及一些额外的库来处理一些模板视图，我不知道这是否真的是可行的。然而，在来自i18Next-http-中间件的存储库内部，有一个例子基本上可以做我想做的事情。所以可以在"basic-pug“文件夹下找到。不同之处在于它被用作一个模板引擎，我不认为它会影响或造成任何不同。因此，我使用了完全相同的配置作为示例，我下载并测试了这个配置，它正在工作，所以它假定启用了一个cookie，然后在url上可以将cookie作为param传递给区域设置，它应该工作，但是在我的项目中不工作，我还想知道是否可以使用"/de/“代替"/?lang=de"，例如www.myweb.com/de/about而不是Www.myweb.com/约/?lang=de，因为这不是我想象的那样，也不清楚当你有嵌套或多个路由时该如何处理。

通常，我想知道如何在前端使用"changelanguage“函数，例如，我有如下内容：

<div>
<div onclick="Changelanguage("de")"> Deutsch</div>
<div onclick="Changelanguage("en")"> English</div>
</div>

因为通过声明函数就像在视图中一样，在脚本标签上，我的变更语言不是一个函数，因为两者之间没有通信。

请在下面找到我的配置：

Json文件：

{
  "name": "project",
  "version": "0.0.0",
  "private": true,
  "author": "project",
  "main": "dist/index.js",
  "scripts": {
    "start": "node dist/index.js",
    "dev": "nodemon src/index.js --exec \"node -r dotenv/config -r @babel/register\"",
    "clean": "rimraf dist",
    "build": "npm run clean && mkdir -p dist && babel src -s -D -d dist",
    "postinstall": "npm run build"
  },
  "dependencies": {
    "@babel/cli": "^7.18.9",
    "@babel/core": "^7.18.9",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
    "@babel/preset-env": "^7.18.9",
    "body-parser": "^1.19.0",
    "ejs": "^3.1.8",
    "express": "^4.18.1",
    "graphql": "^16.5.0",
    "graphql-request": "^4.3.0",
    "i18next": "^21.9.1",
    "i18next-fs-backend": "^1.1.5",
    "i18next-http-middleware": "^3.2.1",
    "locomotive-scroll": "^4.1.4",
    "morgan": "^1.10.0",
    "node-sass-middleware": "^1.0.1",
    "rimraf": "^3.0.0"
  },
  "devDependencies": {
    "@babel/register": "^7.18.9",
    "dotenv": "^16.0.1",
    "nodemon": "^2.0.19"
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "node": "current"
          }
        }
      ]
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-proposal-object-rest-spread"
    ]
  }
}

我的路线文件js

import { GraphQLClient
} from "graphql-request";
import { Router
} from "express";
import * as queries from "./queries";
import i18next from "i18next";

const routes = Router();

export function request({ query, variables, preview, includeDrafts
}) {
// ...some headers and client configs
};

  return client.request(query, variables);
}




let generalInfo = null;


const getData = async (options) => {
  options.page = options.page ? options.page : "";
  if (!generalInfo) {
    generalInfo = await request({
      query: queries.getGeneralInfo,
      variables: {
        locale: options.lang
        }
    });
}
  let q = queries.getPage(options.page);
  let data = await request({
    query: q,
    variables: {
      locale: options.lang
    }
});
  data = Object.assign(data, generalInfo);
  return data;
};

const getCase = async (slug, lang) => {
  if (!generalInfo) {
    generalInfo = await request({
      query: queries.getGeneralInfo,
      variables: {
        locale: lang
        }
    });
}
  slug = slug ? slug : "";
  let q = queries.getCase;
  let data = await request({
    query: q,
    variables: {
      locale: lang
    }
});
  data = Object.assign(data, generalInfo);
  const filter = data.allCases.filter((n) => n.slug == slug)
  return filter;
};

const getInnerPage = async (slug, lang) => {
  if (!generalInfo) {
    generalInfo = await request({
      query: queries.getGeneralInfo,
      variables: {
        locale: lang
        }
    });
}
  slug = slug ? slug : "";
  let q = queries.getInner;
  let data = await request({
    query: q,
    variables: {
      locale: lang
    }
});
  data = Object.assign(data, generalInfo);
  const filter = data.allPages.filter((n) => n.slug == slug);
  return filter;
};

routes.get("/cases/:slug", (req, res) => {
  let slug = req.params.slug;
  getCase(slug, req.locale).then(filter => {
    if (filter.length) {
      res.render("case",
        { title: filter.project_title, filter, t: i18next.t
        });
    } else {
      res.render("404");
    }
}).catch(e => {
    console.error(e);
});
});




routes.get("/page/:slug", (req, res) => {
  let slug = req.params.slug;
  getInnerPage(slug, req.locale).then(filter => {
    if (filter.length) {
      res.render("page",
        { title: filter[
                0
            ].titlePage, filter, t: i18next.t
        });
    } else {
      res.render("404");
    }
}).catch(e => {
    console.error(e);
});
});

routes.get("/", (req, res) => {
  let options = { 'lang': req.locale, 'page': ""
}
//console.log(req.locale + " locale selected");
  getData(options).then(data => {
    res.render("home",
    { title: "Home", data, t: i18next.t
    });
}).catch(e => {
    console.error(e);
});
});

export default routes;

我的索引js

import express from "express";
import path from "path";
import logger from "morgan";
import bodyParser from "body-parser";
import routes from "./routes";
import sassMiddleware from "node-sass-middleware";

import i18next from "i18next";
import i18nextBackend from "i18next-fs-backend";
import i18nextMiddleware from "i18next-http-middleware";


const { PORT = 5050 } = process.env;
const app = express();


i18next.use(i18nextBackend)
  .use(i18nextMiddleware.LanguageDetector)
  .init({
    //lng: 'de',
    debug: true,
    fallbackLng: 'en',
    preload: ['de', 'en'],
    backend: {
      loadPath: './locales/{{lng}}/translation.json'
    },
    detection: {
      order: ['querystring', 'cookie'],
      caches: ['cookie'],
      lookupQuerystring: 'lang',
      lookupCookie: 'lang',
      ignoreCase: true,
      cookieSecure: false
    },
  })


app.use(i18nextMiddleware.handle(i18next));



//i18next.changeLanguage('de');



app.set("views", path.join(__dirname, "../views"));
app.set("view engine", "ejs");
app.use(logger("dev"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.locals = { config: { whatever: 'this is' } };

app.use(
  sassMiddleware({
    src: path.join(__dirname, "../public/scss"),
    dest: path.join(__dirname, "../public"),
    indentedSyntax: false, 
    sourceMap: false
  })
);
app.use(express.static(path.join(__dirname, "../public")));
app.use("/", routes);


app.use(function (req, res) {
  res.status(404).render('404.ejs');
});

app.use(function (req, res) {
  res.status(500).render('500.ejs');
});



app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}`);
});

export default app;

预先感谢您的帮助，我想我主要是挣扎，因为我过去在客户端工作，但仍然学习有关SSR。

Answer 1

您也应该能够在路由中定义语言，如下面所描述的：https://github.com/i18next/i18next-http-middleware#language-detection

在检测选项中定义“路径”：order: ['path', /*'session', */ 'querystring', 'cookie', 'header'],

关于语言的变化。您可能只需要使用适当的语言导航到路线。