Valine 诞生于2017年8月7日,是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客,目前已有Hexo、Jekyll、Typecho、Hugo、Ghost、Docsify 等博客和文档程序在使用Valine。并且根据实际情况来看,valine确实得到了广泛的使用,特别是在一些小站/小博客站里面,毕竟很好用,而且还是免费的评论系统。
但是在使用的过程中,一直觉得他默认显示的评论者的设备类型和浏览器版本功能非常多余,甚至对他人的隐私有一定的弊端。所以想着把这两个显示的字符串给隐藏掉。

通过浏览器控制台的查看器功能我们发现,是否显示评论者设备类型和浏览器版本是通过class=”vsys”这个css样式来控制的。

.v[data-class="v"] .vsys {
  display: inline-block;
  padding: .2em .5em;
  font-size: .75em;
  border-radius: .2em;
  margin-right: .3em;
}

因此我们要想办法覆盖掉这个class才行。
所以首先我们要在valine存在的那个页面或者更高层次的页面的css样式中加入如下样式:

.vsys{
  display:none !important;
}

如果不生效,可以检查是否将style scoped标签中的scoped给去掉,去掉之后就表明该样式是全局有效了。

但是删除scoped有时候会造成其他意想不到的情况发生,对其他的css样式有一定的影响,所以可以在样式前面加上::v-deep来进行深度穿透,这样一来,就可以将这个valine的样式穿透到valine的库本身了。

::v-deep .vsys{
  display:none !important;
}