将旧锚链接重定向到新锚链接
Posted
技术标签:
【中文标题】将旧锚链接重定向到新锚链接【英文标题】：Redirecting old anchor links to new anchor links 【发布时间】：2019-11-06 04:21:31 【问题描述】：我正在大修别人为我的组织构建的网站。它最初是用“不太好”的锚链接设置的，其中包括空格。我已经用效果更好的新锚替换了这些锚。
示例：
其中一个旧锚看起来像这样/course/#To Have，幸运的是浏览器会转换为/course/#To%20Have。我把那个锚改成了：/course/#to-have。
我现在想确保任何可能已在社交媒体上共享或可能从其他网站链接到的锚点仍然有效；我打算通过 .htaccess 文件中的重定向来执行此操作，例如这个：
Redirect 301 /course/#To%20Have /course/#to-have
经过一些研究，我发现这是不可能的，因为 URL 中有 #。而且我也没有看到一个锚被重定向到另一个锚的例子。
这可能吗？
【问题讨论】：
是的，.htaccess 无法做到这一点。但是，您可以使用 javascript 来转换哈希值并重定向。或者，更好的是，使用 JavaScript 进行转换，然后简单地找到要滚动到的元素（使用转换后的值） - 这可以防止重定向，我认为在这种情况下没有必要。
谢谢迈克。你能告诉我更多关于这方面的信息吗？我不确定我将如何完成您的建议。
请看下面我的回答。
【参考方案1】：
正如我在评论中提到的，.htaccess 无法做到这一点。
原因是：散列部分（称为 片段）实际上并未发送到服务器，因此 Apache 无法获取它。服务器只能在此之前获取所有内容，这在this article 的语法部分中进行了描述。
作为替代方案，我建议您在滚动到其位置之前使用 JavaScript 转换片段。你可以通过拉入[window.]location.hash的值来实现（方括号中的部分是可选的，因为location在全局范围内也可用）如果它存在，如下所示：
if (window.location.hash)
// Function to 'slugify' the fragment
// @see https://gist.github.com/mathewbyrne/1280286#gistcomment-1606270
var slugify = function(input)
return input.toString().toLowerCase().trim()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/&/g, '-and-') // Replace & with 'and'
.replace(/[^\w\-]+/g, '') // Remove all non-word chars
.replace(/\-\-+/g, '-'); // Replace multiple - with single -
// Now get the hash and 'slugify' it
var hash = slugify(window.location.hash.split('#')[1]);
// Go to the new hash by setting it
window.location.hash = '#' + hash;
【讨论】：
谢谢迈克。所以对于我上面的例子，这是我对最后两行所做的吗？var hash = slugify(window.location.hash.split('/course/#To%20Have')[1]); window.location.hash = '/course/#to-have' + hash; 我也想知道我会把这个javascript放在哪里？非常感谢您的帮助！
您不需要更改任何代码 - 这是自动的，因为它会获取当前片段，将其转换为您正在使用的新格式，然后滚动查看。我建议将其放在您的 <head> 中的某个位置。
谢谢迈克。我设法把这个 javascript 放到了头部（我现在可以在网站的源代码中看到它）！耶！但是，当从旧锚点“重定向”到新锚点时，页面不会向下滚动到正确的位置（锚点 ID 的实际位置）。这个javascript应该能够滚动到锚点的位置吗？
它应该在设置散列时自动完成（最后一行）。也许尝试将脚本标签向下移动到 </body> 上方 - 这应该可以解决它。或者，如果您使用的是 jQuery，请将代码包装在 $(function() <put the code here> ) 中。
啊，它现在可以正常工作，无需进行任何更改！只需将包含在add_action('wp_head','hook_javascript'); function hook_javascript() $output="<script> code </script>"; echo $output; 中的代码添加到我的子主题functions.php 文件中。谢谢！以上是关于将旧锚链接重定向到新锚链接的主要内容，如果未能解决你的问题，请参考以下文章