前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，最终效果查看：TypeScript中文文档。VuePress会在每个标题的左侧添加一个锚链接：点击后链接变为：http://ts.yayujs.com/learn-typescript/handbook/TheBasics.html#downgrade-downleveling在此刷新下一页这时，你会发现页面无法正确定位到锚点，打开开发者工具会看到错误：如何解决这个问题？错误定位在线由于代码经过压缩和混淆处理，不易排查。我们在本地运行项目，然后查看报错信息：可以看到错误来自vuerepss-plugin-smooth-scroll插件。详情点击查看源码：可以看到错误来自于document.querySelector(to.hash)这句。这里为什么会报错？这是因为对于每一个标题，VuePress都会生成这样一个DOM结构：可以看到h2标签的id是以hash值命名的。如果我们的hash是纯英文的，没有问题，但是现在我们的hash有中文了，因为中文是编码的，document.querySelector报错。官方解决方案的问题是那么容易复现，那么明显。我想肯定有人提出了一个问题。查看VuePressissue，可以看到有人在2020年10月3日提出了PR，并合并了。那为什么还是报错呢？如果我们去掉当前使用的reco主题，我们会发现页面不会报错，但是仍然无法定位锚点。其实我们的错误来自于我们使用的reco主题使用的vuerepss-plugin-smooth-scroll插件。做一个社区解决方案，然后搜索看看其他人是否遇到过这个问题。可以找到这样的解决方案：新建一个docs/.vuepress/theme/layouts/Layout.vue文件，写代码：使用后页面不会报错，但是会发现所有样式都丢失了，因为使用这个方法相当于新建了一个主题，vuePress已经切换到我们自定义的主题了。不过VuePress提供了主题继承的功能，新建一个docs/.vuepress/theme/index.js，写代码：module.exports={extend:'@vuepress/theme-default'}样式就恢复了，但是因为我们原来使用的是reco主题，现在改成了继承vuepress的默认主题。reco主题带来的一些功能全部丢失。我们可以继承reco主题吗？答案是不。这个在VuePress官方文档的“主题继承”一章中提到：主题继承暂时不支持高层继承，即派生的主题不能被继承。所以为了解决这个方案，我们不得不放弃reco主题，如果放弃reco主题，就不会报错了……那我们换个方案吧。自己动手，我自己解决。解决当前的问题。访问带有中文锚点的链接时：页面出错，错误来自reco主题使用的vuepress-plugin-smooth-scroll主题。无法跳转到锚点位置页面报错。最简单粗暴的方法就是修改源代码。我们打开node_modules/vuepress-plugin-smooth-scroll/lib/enhanceApp.js，直接修改：constenhanceApp=({Vue,router})=>{router.options.scrollBehavior=(to,from,savedPosition)=>{//...elseif(to.hash){//...//加decodeURIComponentconsttargetElement=document.querySelector(decodeURIComponent(to.hash));//...}//...};};因为我们不会提交源码，而是将编译后的文件提交给服务器，所以我们改了依赖的源码也没有效果。下一步是在页面加载后跳转到锚点位置。之前我们在《VuePress 博客优化之添加数据统计功能》中监听enhanceApp.js中路由的变化，我们也可以监听路由的ready事件，然后跳转到直接的位置。让我们修改一下.vuepress/enhanceApp.js中的代码：exportdefault({router})=>{//...router.onReady(()=>{const{hash}=document.location;setTimeout(()=>{if(hash.length>1){constid=decodeURIComponent(hash);constel=document.querySelector(`.reco-side-${decodeURIComponent(id).substring(1)}`);el.click();}},1000);});};这里并没有直接获取titleDOM元素的位置，然后使用window.scrollTo进行跳转。不断切换后，右边的目录会发生变化。这里直接模拟右边目录的点击操作，也是将具体的跳转行为交给reco实现。系列文章博客搭建系列是我目前为止写的唯一实用系列教程。预计20篇左右，讲解如何使用VuePress搭建和优化博客，并部署到GitHub、Gitee、私服等平台。本文为第20篇，全系列文章地址：https://github.com/mqyqingfeng/Blog微信：“mqyqingfeng”，加SaeYu好友，拉你进前端学习交流群。如有错误或不准确的地方，请务必指正，万分感谢。如果你喜欢或者有启发，欢迎star，这也是对作者的鼓励。
