Question

我处于一个不幸的位置，几年前某人的设计选择现在影响了我对网站的重建。基本上，回溯最初创建网站时，设计师要求使所有URL都带有.html扩展名（例如，website.com/index.html）完全明确。我目前正在使用盖茨比（Gatsby）重建网站，并且引起了我的注意，我们需要继续解析那些旧的URL，因为它们仍然以链接的形式散布在互联网上。但是所有者希望不再使用这些URL，因此基本上我只需要支持解析它们以实现向后兼容。

我一直在使用onCreatePage函数，可以使它像下面这样解析.html链接：

exports.onCreatePage = async ({ page, actions }) => {
    const { createPage } = actions;
    console.log(actions);

    // Create resolvers for all pages with .html in URLs
    if (!page.path.endsWith(".html")) {
        const isIndex = page.path === "/";
        page.matchPath = isIndex
            ? page.path + "/index.html"
            : page.path.replace(/\/$/, ".html");

        createPage(page);
    }
};

但是不幸的是，它只能解析.html URL，而不能解析没有.html后缀的纯URL。

有没有办法可以做到这一点？我应该使用与onCreatePage不同的API吗？

更新：刚刚找到gatsby-plugin-client-side-redirect，并尝试了以下操作：

exports.onCreatePage = async ({ page, actions }) => {
    const { createRedirect } = actions;

    // Create resolvers for all pages with .html in URLs
    if (!page.path.endsWith(".html")) {
        const isIndex = page.path === "/";
        const legacyUrl = isIndex
            ? page.path + "/index.html"
            : page.path.replace(/\/$/, ".html");

        console.log("legacyUrl::", legacyUrl);
        createRedirect({ fromPath: legacyUrl, toPath: page.path, isPermanent: true });
    }
};

控制台输出的是正确的旧URL，但未重定向...不确定我在做什么错...

Answer 1

createRedirect有效，但是在开发模式下运行站点时无效。如果要观察重定向在本地正确运行，则需要进行完整的构建并在本地提供服务。

最终代码为：

exports.onCreatePage = async ({ page, actions }) => {
    const { createRedirect } = actions;

    // Create resolvers for all pages with .html in URLs
    if (!page.path.endsWith(".html")) {
        const isIndex = page.path === "/";
        const legacyUrl = isIndex
            ? "/index.html"
            : page.path.replace(/\/$/, ".html");

        createRedirect({
            fromPath: legacyUrl,
            toPath: page.path,
            isPermanent: true
        });
    }
};

GatsbyJS-解析带有和不带有“ .html”后缀的页面网址

1 个答案: