valine breakdown 05/14/2020
最近更新于:

折叠评论击穿链接

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


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