背景

之前有一个页面，地址是

https://kakawanyifan.com/software-engineering/hexo/

后来，我进行了目录结构重排。新的地址是

https://kakawanyifan.com/10100

但是，仍希望上一个地址是有效的。所以考虑进行重定向。

关于重定向，其实有很多种方法。包括可以在网络层面实现，我们这里主要讲如何通过JavaScript实现。

方案

重定向的方法

我们用JavaScript进行重定向，JavaScript这门语言分为三个部分：

ECMAScript(JavaScript语法)
DOM(页面文档对象类型)
BOM(浏览器对象模型)

重定向基于的是BOM(浏览器对象模型)中的Window.open()、localtion中的href和replace方法，其中localtion实际上是window的子对象。
关于该部分，具体可以参考《基于JavaScript的前端开发入门：2.DOM和BOM》中，关于BOM的讨论。

open

具体代码如下

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <script type="text/javascript">
        open("https://kakawanyifan.com/10100")
    </script>
</body>
</html>

该方法会打开一个新的tab页。这并不友好，我们并不希望打开新的tab页。
而且有时候，浏览器会拦截弹出式窗口，所以该方法不一定有效。

href

具体代码如下：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <script type="text/javascript">
        location.href = "https://kakawanyifan.com/10100"
    </script>
</body>
</html>

该方法不会打开新的tab页，浏览器当然也不会拦截了。但是如果在浏览器上点击返回的话，能够返回到重定向之前的页面。这个似乎也不够好。

replace

具体代码如下

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <script type="text/javascript">
        location.replace("https://kakawanyifan.com/10100");
    </script>
</body>
</html>

该方法不会打开新的tab页，而且无法返回。似乎是最符合要求的方法了。

重定向的实现

在比较了上述三种方法后，我们选择replace这种方法。
接下来是具体的实现。

在原地址上放置重定向文件

首先，我们需要在原地址上放置重定向文件。
比如，我们在source/software-engineering/hexo这个地址下，放置上一步我们确定的代码，并且该文件命名为index.html。

配置不渲染重定向文件。

我们还需要配置Hexo不要渲染该重定向文件。
在Hexo的_config.yml，找到skip_render。
比如，我们修改为如下内容

1	skip_render: software-engineering/hexo/index.html

关于skip_render配置方法，也可以用* 通配符。另外，如果需要配置多个文件均不进行渲染，配置如下：

1
2
3

skip_render:
    - demo/*.html
    - demo/**

在《一些关于游戏整合的例子：一些关于游戏整合的方案》，也有利用skip_render，集成一些游戏在博客中，并且不让Hexo渲染相关的页面。

总结

至此，我们的重定向已经完成了。
总结下来，核心是这两个：

采用JavaScript进行重定向
配置不渲染重定向文件

文章作者: Kaka Wan Yifan

文章链接: https://kakawanyifan.com/10108

评论区