折叠评论击穿链接
这个bug其实很早就存在了，只不过一直没管它（Valine 官方于 v1.4.0~1.4.4（2020-04-11）版本修复），这篇笔记存在的目的在于那些仍在使用低于该版本需要单独修复该bug的同学（比方说还在用v1.3.10的我/doge）就需要手动修复该bug来确保点击折叠评论内链接直接跳转的问题..
问题根源
折叠评论内的 pointer-events:none 属性，这个属性则是影响击穿bug的主要原因。
打开 valine.min.js ctrl f 定位到 .v .vlist .vcard .vcontent.expand:before 或右键审查元素发现，评论超出字数后有 :before （透明渐变叠加样式）和 :after （文字区域） 两个伪元素组成 expend 折叠效果，看以下样式
.v .vlist .vcard .vcontent.expand:before {
display: block;
content: "";
position: absolute;
width: 100%;
left: 0;
top: 0;
bottom: 3.15em;
pointer-events: none;
background: -webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(hsla(0,0%,100%,.9)));
background: linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.9))
}
.v .vlist .vcard .vcontent.expand:after {
display: block;
content: "点击展开";
text-align: center;
color: #828586;
position: absolute;
width: 100%;
height: 3.15em;
line-height: 3.15em;
left: 0;
bottom: 0;
pointer-events: none;
background: hsla(0,0%,100%,.9)
}解决方案
了解以上结构后我们直接删除掉 :before 样式，将 :before 内的 background 渐变样式复制到 :after 内，再将 :after 内的 pointer-events 属性移除，将 height 设置 100% ，调整 line-height 至合适位置（ 17.15em ）即可（可修改 :after 颜色以便与评论内容区分）
适配方案
当需要适配 darkmode 时，只需对 :after 样式进行渐变覆盖即可。
.v .vlist .vcard .vcontent.expand:after {
display: block;
content: "点击展开";
text-align: center;
color: #949494;
position: absolute;
width: 100%;
height: 100%;
line-height: 15.15em;
left: 0;
bottom: 0;
background: -webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(hsla(0,0%,100%,.9)));
background: linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.9))
}以上，有问题评论留言反馈。
