随意修改你文章的 url 吧，一个 js 解决原 url 不能访问的问题

作者：DeppWang

阅读提示：此文适用于有自己博客的同学。

昨天在公众号分享了一篇在如何在 Markdown 里面插入幻灯片的文章，微信公众号由于平台限制，幻灯片只能在原文里面才能看到效果，不巧，原文链接手误写错了一个单词，本来是 insert，写成了 inset。

https://depp.wang/2020/03/26/how-to-inset-slide-in-markdown/
应该是
https://depp.wang/2020/03/26/how-to-insert-slide-in-markdown/

作为一个强迫症患者，不能忍受这样的问题。可一旦我修改了原文链接，公众号这边要么删了重发，要么来个留言，说原文链接已经修改。两种方式可以解决问题，但是不爽。

除了像我手误写错链接单词的情况，很多时候，我们文章修改题目后，如果想修改 url（url 是文章题目的英文），就会面临原 url 失效的问题。

如果你也有上面这种困扰，那么可以看看我的解决思路。

解决思路

我的思路是这样：自定义一个 404 页面，链接失效就显示 404 页面，404 页面引入一个重定向指定 url 的 js。

重定向指定 url 的 js 的代码很简单：

function redirectUrl() {
    const redirectObj = {
        "https://depp.wang/2020/03/26/how-to-inset-slide-in-markdown/": "https://depp.wang/2020/03/26/how-to-insert-slide-in-markdown/"
    };

    const newUrl = redirectObj[window.location.href];
    if (typeof newUrl !== 'undefined') {
        window.location = newUrl;
    }
}

redirectUrl();

此 js 使用条件：显示 404 页面时，原 url 不变，不能是重定向到 404 页面

404 页面引入 js，404 页面可以用腾讯公益 404 页面：

<!--404.html-->
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="robots" content="all"/>
    <meta name="robots" content="index,follow"/>
    <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
    <script type="text/javascript" src="https://depp.wang/redirectUrl.js"></script> // 此处修改为你自己的 js 地址
</head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"
        charset="utf-8" homePageUrl="/"
        homePageName="回到主页">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

代码来源：http://theme-next.iissnan.com/theme-settings.html#volunteer-404
如果你使用 Hexo + Next，注意 404.html 放在主题的 source 目录下。

引入 js 代码时要注意路径，最好直接使用绝对路径。使用相对路径要考虑原文章所在路径与 js 文件路径之间的关联。

多说一嘴，相对路径有时候有点不好理解，需要理解相对路径常用两个符号 . 和 .. 的含义：

.：一个点代表当前文件所在的文件夹（路径）。在 Linux 中，复制文件到当前路径的命令：cp **/test.md .。示例：src="./redirectUrl.js"，代表引入和当前文件在同一个文件夹的 redirectUrl.js
..：两个点代表当前文件所在的上一层文件夹（路径）。在 Linux 中，切换到上一层的命令： cd ..

解决思路

最终效果