随意修改你文章的 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>

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

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

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

最终效果

DeppWang wechat
个人公众号