如何在Sapper中重写URL？ （SvelteJS）

Question

我已经使用Sapper建立了许多网站，我很喜欢它，但是现在我正在使用它来构建多语言网站，这要困难一些。

我想我知道如何处理字符串的翻译，但是我也希望能够翻译URL。例如， / en / about 在意大利语中应为 / it / chi-siamo ，并且两者都应使用 / [lang] /about.svelte < / p>

我正在尝试覆盖server.js上的URL，但无法使其正常运行。

这是我的server.js

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';
import admin from './firebase/admin.js'

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
const cv = customVars;

const server = polka(); // You can also use Express

if(dev) server.use(sirv('static', { dev: dev, etag: true, maxAge: 1000000, immutable: true  }));

server
  .use(
    compression({ level: 9, threshold: 1000 }),
    sapper.middleware()
  )

// only listen when started in dev
server.listen(PORT, err => {
  if (err) console.log('error', err);
});

export { sapper, cv, admin};

我的问题： 我该如何重写URL，以便当用户访问/ it / chi-siamo时它以/[lang]/about.svelte作出响应？

Answer 1

不幸的是，如果不这样做[lang]/[page]，目前还不是很简单。这是我们想要address in future的东西。

您可以执行此操作以更改服务器上的请求，尽管有点混乱：

const paths = {
  it: {
    'chi-siamo': 'about',
    // others...
  },
  fr: {
    // ...
  },
  // ...
};

server
  .use(
    compression({ threshold: 0 }),
    (req, res, next) => {
      const [, lang, ...parts] = req.url.split('/');
      const path = (paths[lang] || {})[parts.join('/')];

      if (path) {
        // mutate the request object
        req.url = req.path = req.originalUrl = `/${lang}/${path}`;
      }

      // let Sapper handle the mutated request
      next();
    },
    sapper.middleware()
  )
  .listen(PORT, err => {
    if (err) console.log('error', err);
  });

但这不会影响客户端导航，因此，如果用户单击指向/it/chi-siamo的链接，则将找不到该页面，并且Sapper将退回到传统的服务器端导航，即不理想。