VuePress 博客优化之中文锚点跳转问题

前端

2024-01-12 02:13:36

在 VuePress 博客中解决中文锚点跳转问题

中文锚点跳转问题

在使用 VuePress 搭建博客时，可能会遇到中文锚点跳转问题，即点击文章中的中文锚点时，页面无法正常跳转到相应的锚点位置。这是因为 VuePress 使用的是英文锚点，而中文锚点在 URL 中会被编码成乱码，导致页面无法正确解析锚点。

解决中文锚点跳转问题的优化方法

为了解决中文锚点跳转问题，可以采用以下优化方法：

1. 使用中文锚点插件

可以使用第三方中文锚点插件来解决此问题。这些插件通常会提供一个转换函数，将中文锚点转换为英文锚点，然后在页面加载时将英文锚点转换为中文锚点。常用的中文锚点插件有：

2. 手动转换中文锚点

如果不想使用第三方插件，也可以手动将中文锚点转换为英文锚点。具体步骤如下：

在 Markdown 文档中，找到需要添加锚点的标题或文本。
在标题或文本后面添加一个 HTML 注释，注释内容为 ，其中 中文锚点 为需要转换的中文锚点。
在页面的 <head> 标签中，添加以下代码：

<script>
  document.querySelectorAll('.markdown-body a[href^="#"]').forEach(function (anchor) {
    anchor.href = anchor.href.replace(/#([a-z\d-]+)/, '#$1-zh');
  });
</script>

3. 使用原生 JavaScript

也可以使用原生 JavaScript 来解决中文锚点跳转问题。具体步骤如下：

在页面的 <head> 标签中，添加以下代码：

<script>
  window.onload = function () {
    document.querySelectorAll('.markdown-body a[href^="#"]').forEach(function (anchor) {
      anchor.href = anchor.href.replace(/#([a-z\d-]+)/, '#$1-zh');
    });
  };
</script>