104 lines
4.7 KiB
Markdown
104 lines
4.7 KiB
Markdown
# 原创
|
||
： 教你屏蔽CSDN广告
|
||
|
||
# 教你屏蔽CSDN广告
|
||
|
||
### 吐槽一下
|
||
|
||
CSDN博客的优点就不提了，但是有一点很难忍受，那就是广告，几乎每一个页面都少不了广告。之前我就是因为受不了广告，所以干脆就不玩CSDN了，后来发现这些广告都是可以屏蔽的，只是我这种小白不清楚而已…
|
||
|
||
基本上就是安装几个插件就可以让CSDN变得绿色健康，不仅可以屏蔽广告，还能进行页面排版优化，简直不能再方便了。
|
||
|
||
废话不多说，开始安装插件。
|
||
|
||
### 步骤
|
||
|
||
#### 1.Stylus插件
|
||
|
||
先在Google的扩展程序商店中搜索`Stylus`，第一个就是，有了这个插件，我们才能对网页进行自定义样式和排版修改。 <br/> <img alt="" src="https://raw.githubusercontent.com/ds19991999/githubimg/master/picgo/20180819214140.jpg" title=""/> <br/> 这个插件真的是一个插件神器，有了它，可以安装各种第三方插件进行各种网页的自定义样式修改，还可以使用自己写的`CSS`样式进行网页优化，十分方便，比喻在`Github`上面安装几个插件，然后页面就变成这个样子了。 <br/> <img alt="" src="https://raw.githubusercontent.com/ds19991999/githubimg/master/picgo/20180819214543.jpg" title=""/> <br/> 比喻在百度贴吧安装一个插件，然后页面就变成这个样子了，是不是很惊艳。 <br/> <img alt="" src="https://raw.githubusercontent.com/ds19991999/githubimg/master/picgo/20180819215228.jpg" title=""/> <br/> 这些网页样式插件在 [https://userstyles.org/](https://userstyles.org/) 上面都可以找到，之后直接傻瓜式的点安装就完事了。
|
||
|
||
好了，回到我们要解决的问题，屏蔽 `CSDN` 广告。
|
||
|
||
#### 2.CSDN去广告插件
|
||
|
||
在 [https://userstyles.org/styles/browse/csdn](https://userstyles.org/styles/browse/csdn) 中搜索`CSDN去广告插件`，如下图，然后安装就可以了。 <br/> <img alt="" src="https://raw.githubusercontent.com/ds19991999/githubimg/master/picgo/20180819220008.jpg" title=""/> <br/> 可以看到这插件还是近两天更新的，然后就被我无意中发现了，源码其实就是下面几十行。
|
||
|
||
```
|
||
.aside-box div:first-child{
|
||
display:none;
|
||
}
|
||
.box-box-large{
|
||
display:none;
|
||
}
|
||
.box-box-aways{
|
||
display:none;
|
||
}
|
||
main div:nth-child(5){
|
||
display:none;
|
||
}
|
||
.csdn-tracking-statistics.mb8.box-shadow{
|
||
display:none;
|
||
}
|
||
.J_adv{
|
||
display:none;
|
||
}
|
||
.post_body div:nth-last-child(2){
|
||
display:none;
|
||
}
|
||
/*update 2018-08-15*/
|
||
#_360_interactive{
|
||
display:none;
|
||
}
|
||
.meau-list li:nth-child(7){
|
||
display:none;
|
||
}
|
||
.text.float-left{
|
||
display:none;
|
||
}
|
||
.recommend-item-box.recommend-ad-box{
|
||
display:none;
|
||
}
|
||
/*update 2018-08-16*/
|
||
.bbs_detail_wrap div:nth-child(5){
|
||
display:none;
|
||
}
|
||
.bbs_feed.bbs_feed_ad_box{
|
||
display:none;
|
||
}
|
||
/* 分享请注明作者姓名 create by Demo_Liu */
|
||
```
|
||
|
||
这些东西对于前端的同学来说就太容易了，鼠标右键调试网页源码，找到广告位 <br/> <img alt="" src="https://raw.githubusercontent.com/ds19991999/githubimg/master/picgo/20180819221002.jpg" title=""/> <br/> 看这一行：
|
||
|
||
```
|
||
<div class="csdn-tracking-statistics mb8 box-shadow" data-pid="blog" data-mod="popu_4" style="height:250px;">
|
||
...
|
||
```
|
||
|
||
这里就是广告位，那我们就在 `CSS` 中定义它不展示，也就是
|
||
|
||
```
|
||
.csdn-tracking-statistics.mb8.box-shadow{
|
||
display:none;
|
||
}
|
||
```
|
||
|
||
**通过这种方式我们可以自定义展示网页排版板块，比喻`background` 这个属性可以调节板块背景色和透明度，前面那两张图就是典型例子，有透明度的模块看起来总感觉有点 * 格，所以只要我们有了 [Stylus插件](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?utm_source=chrome-ntp-icon)，就可以在各种网页随心所欲，为所欲为**。
|
||
|
||
基本上这个简短的`CSS`就可以屏蔽掉CSDN广告，感谢 [Demo_Liu](https://blog.csdn.net/demo_liu/article/month/2018/08?orderby=UpdateTime) 博主提供的插件。
|
||
|
||
#### 3.其他优化
|
||
|
||
在 [https://userstyles.org/styles/browse/csdn](https://userstyles.org/styles/browse/csdn) 中可以看到其他不少插件，这里我推荐一个`CSDN正文前置` 插件。 <br/> <img alt="" src="https://raw.githubusercontent.com/ds19991999/githubimg/master/picgo/20180819222711.jpg" title=""/> <br/> 将所有样式统一换成这种左右排版格式。 <br/> <img alt="" src="https://raw.githubusercontent.com/ds19991999/githubimg/master/picgo/20180819222926.jpg" title=""/> <br/> 源码：
|
||
|
||
```
|
||
main {
|
||
float: left;
|
||
}
|
||
aside {
|
||
float: right;
|
||
}
|
||
```
|
||
|
||
没错就是这几行。。。当然你也可以试试其他样式，自己写一个自己喜欢的网页样式也不是很难，不过我还是太懒了，不想折腾这些东西，有别人造轮子就直接用了。。。
|