正文

关于 CSDN

不得不说 CSDN 博客页上聚集了大量的知识内容,可是深恶痛绝的是满屏的广告让你不能专注于博客内容,多的不说,一张图告诉你它的广告有多少

一个连搜索引擎检索的 SEO 关键都是广告词!吃惊!!!

知乎关于 CSDN 的讨伐

针对博客详情页

其实有不少的替代方案:掘金,segmentfault 等都是高质量的,可是一些比较偏的内容确实能在 CSDN 中快速检索得到,特别是经常百度一下全是 CSDN 的链接(:汗颜-,所以是免不了看它了,来吧,动手去广告

原理

利用插件在加载完毕的页面中加入定制样式以及脚本内容

在 Chrome 商店检索到了stylishstylus用于 Custom CSS 的神器(油猴脚本也可以哦,转为 JavaScript 就好了)

当然不仅仅用于 Chrome,上述插件在 FireFox、Opera、Safari、Edge 以及其他 WebKit 浏览器均有不同程度的支持,总之就是很方便了。P.S.:手机端也有,安卓 Yandex 等,不过我的代码适用于 PC 端,自行移植和修改定制

解决和实现

https://userstyles.org里面有非常多已经定制好的代码,可是我都不满意,他们均不能很好的除去广告,于是我就打算自己写

一般的隐藏 HTML 元素大家想到的选择都是比较常见的,通过标签、样式等选中后隐藏。可是这样做的代价很大:一个网页内的元素太多造成选取困难,甚至还有动态改变的内容

于是我就想能不能换个思路:既然我不能知道每个广告的位置,那么我就把除了文章的主要内容外的元素都隐藏,但是很快我就遇到了难题,CSS 好像没这样的选择器?

于是打开 CSS 选择器文档发现了 :not() 选择器,也就是除了的意思。

div: not(p); // div下面的非p的所有标签

可是使用中发现要除去多个,习惯测试用逗号分隔无效(也就是有顺序,前面的隐藏了就选不到了)于是又疯狂的百度

嘿嘿,原来 :not() 函数是可以并列的,可以说 CSS3 真的是好用,期待下下一代会有更优秀的选择器

div:not(p):not(a)   // div下面的除了p和a以外的所有标签

有了这个就好办了

仅保留文章主要文字和相关文章,其他可自行扩展

// 首先去除所有文章页以外的内容
body {
  background: url() #f2f2f2 !important;
}

body > :not(#mainBox) {
  display: none !important;
}
// 再将文章内文字部分保留(相当于去aside标签)
#mainBox > :not(main) {
  display: none !important;
}
// 去除评论以及部分广告
main > :not(.blog-content-box):not(.recommend-box):not(.hide-article-box) {
  display: none !important;
}
// 去除相关文章内的广告
.recommend-box > :not(.type_blog) {
  display: none !important;
}
// 对文章居中显示
main {
  position: absolute;
  top: 3em;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
// p 颜色控制
p {
  color: #000 !important;
}

效果图

不止于 CSDN 和去广告

现在你完全可以使用 CSS 和 JavaScript 定制任何网站的样式,无广告百度,任何主题的 bilibili,享你所想!

扩展阅读:CSS3 选择器

(完)

评论

版权所有 © 2017 - 2020 赤琦

Copyright © 2017 - 2020 RedBlue. All Rights Reserved.

RSS GitHub E-mail

复兴中华 - 新中国、新时代、新青年 - 中华复兴