NexT + Valine躺坑之路

背景

写了一段时间博客后，发现别人的文章有浏览次数以及评论功能★~★，这也某种程度上提高写 Blog 的动力，那我也来弄一个哈哈哈。。。

操作步骤

然而，事实总是那么折磨人。。。使用的是 nexT 主题的 v8.2.1 版本，按照网上的教程后一直没有达到最终的效果😭😭。

问题1: 使用 Valine 插件后，在页面上并没有显示具体的评论数量以及文章的浏览次数。

具体原因：因为 v8.2.1 版本已经将 Valine 功能去除掉了。（详情见官网解释）也尝试了官网中的解决办法以及各种网上的方法，但是仍然无效。（瞎折腾了3个小时都没结果。。。气到内伤😭😭）

那就将版本降低到能使用的 Valine 的 NexT 版本呢？（如降低到7.8.0版本呢？？）降低版本到7.8.0后，问题就解决了。

问题2: 降低版本后，发现原来文章中中文导航又不能用了，英文的就没有问题。

1 2	// 点击中文标题导航栏时候，console控制台中报错，并且页面上没有跳转到对应的标题位置。 Cannot read property 'getBoundingClientRect' of null

实际原因是: themes/next/source/js/utils.js 中的代码存在遗漏，没有对中文进行URL解码。具体代码如下：

... // 其他多余代码省略
// 在这个地方获取 event 的属性时候，中文的会被自动转成URI编码格式
// href="#%E6%93%8D%E4%BD%9C%E6%AD%A5%E9%AA%A4" 
// 但文章中的Id仍然是中文的 <h3 id="操作步骤">, 所以导致此处的target为null。
var target = document.getElementById(event.currentTarget.getAttribute('href').replace('#', ''));
var offset = target.getBoundingClientRect().top + window.scrollY;
... // 其他多余代码省略

// 解决办法：将上述代码替换如下代码即可。
var str_id = decodeURI(event.currentTarget.getAttribute('href').replace('#', ''));
var target = document.getElementById(str_id);
var offset = target.getBoundingClientRect().top + window.scrollY;

至此，终于得到了自己想要的效果。。。（＋﹏＋）（＋﹏＋）

总结

很多时候遇到的问题，通过网上不一定能适用自己当前的场景，并不一定是别人的方式有问题。。。很可能是你的环境和别人的就不一样，所以同样的操作不一定能解决同样现象的问题。。。还是需要多排查定位看看主要的问题点在哪。