如何在 Sapper 中重写 URL？ (SvelteJS)

Question

我已经用 Sapper 建立了很多网站，我喜欢它，但现在我用它来建立一个多语言网站，这有点难。

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

我正在尝试覆盖 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);
  });

但这不会影响客户端导航，所以如果用户点击 link 到 /it/chi-siamo 则页面将找不到，Sapper 将回退到传统服务器-侧导航，这并不理想。

如何在 Sapper 中重写 URL？ (SvelteJS)

How can I rewrite URLs in Sapper? (SvelteJS)

svelte

sapper