Valine – 修复折叠评论击穿链接

文章摘要chatGPT

standby chatGPT responsing..

折叠评论击穿链接

这个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))
  }

以上，有问题评论留言反馈。