知识能不能改变命运我不清楚，但知识可以屏蔽CSDN广告！

1. 简洁版CSDN

打开浏览器控制台（Chrome是按F12），在Console里粘贴下面代码回车，然后关闭控制台就行了，当然，刷新会失效，你需要重新执行代码。

var style = document.createElement("style");
style.type = "text/css";
var text = document.createTextNode(".recommend-item-box, .recommend-right, #dmp_ad_58, aside{display: none!important;} main{width: 100%!important;");
style.appendChild(text);
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

使用前，两侧边栏被无关信息和广告充斥，无法专心阅读博客。

使用后，祛除了两侧边栏，放宽了博客主内容，还您一个干净的博客空间。

谁用谁知道，用过的都说好~！！！

2. 知识讲解

比较忙的同学已经可以走了。下面说说里面涉及的知识。

2.1 网页如何加载样式

有两种方式：

<link>加载外部样式文件。

<link rel="stylesheet" type="text/css" href="xxx.css">

<style>嵌入样式代码。

<style> body{ background-color: red; } </style>

2.2 动态加载样式

上述方式是编写网页时静态的写法，我们还可以通过JavaScript动态地加载样式。
方式同样有两种：

动态生成<link>加载外部样式文件

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "xxx.css";

动态生成<style>嵌入样式代码

var style = document.createElement("style");
style.type = "text/css";
var text = document.createTextNode("body{background: red;}"); /* 这里编写css代码 */
style.appendChild(text);
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

我们上面采用的就是第二种方式，里面的css代码是我查看了CSDN博客的DOM结构写的，如果你想在其他网站做这样的事，你就得去分析网站DOM结构，具体情况具体分析。

/* 依次是下方推荐条、右侧推荐条、底部广告、左侧边栏，我把他们隐藏了 */
.recommend-item-box, .recommend-right, #dmp_ad_58, aside{
	display: none!important;
} 
/* 然后把中间博客区域放宽成了百分百 */
main{
	width: 100%!important;
}

3. 使用Chrome浏览器的`snippet`保存代码，每次可以手动执行

每次都写这些代码，或者打开我的博客复制这些代码都会很麻烦~。所以

打开控制台（F12）
找到Sources面板
选择New snippet
把代码粘进去，取个名字保存起来
以后你只要在Sources里找到它，然后右键Run就行了。

4. 使用tampermonkey（油猴）自动执行脚本

上面这样每次打开控制台执行代码的方式，虽然颇有点“黑客”的味道，适合装逼，但每次手动去执行，依然不方便。于是，借助伟大的tampermonkey插件，我们可以执行用户自定义脚本。

你最好能上得了chrome应用商店
搜索找到tampermonkey，并安装它，(可能还需要打开chrome扩展程序右上角的开发者模式)
打开这个家伙，然后在编辑器里写入我们的代码
下面的配置都是最基本的，名称，版本，描述，作者和你要应用到的网址，这里选择CSDN下所有页面

// ==UserScript==
// @name CSDN filter
// @version 0.1
// @description make CSDN concise
// @author https://github.com/18202409203
// @match https://blog.csdn.net/*
// ==/UserScript==

(function() {
var style = document.createElement("style");
style.type = "text/css";
var text = document.createTextNode(".recommend-item-box, .recommend-right, #dmp_ad_58, aside, #container, .box-box-large, .meau-gotop-box{display: none!important;} main{width: 100%!important;");
style.appendChild(text);
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
})();

保存启用。最后打开任意博客测试，这样我们只要打开页面油猴就帮助我们自动执行了动态改变样式的代码！

最后，吹爆tampermonkey，简直是神器！！！

5. 补充

【2019年7月2日18:16:57】
使用中还发现评论回复系统简直垃圾的要死，只能看见3行，一怒之下又添加了300px的评论textarea

.comment-box .comment-edit-box form .comment-content.open{
	height: 500px!important;
}

效果图：

【2019年7月4日17:28:33】
我的谷歌书签塞满了，而实际上常用的就几个网址，在书签里找起来很麻烦，所以自定义一个右键菜单，快速链接。

// 创建自定义上下文菜单
var menu = document.createElement("ul");
menu.innerHTML = ` <li> <a href="www.baidu.com" target="_blank">BaiDu</li> <li><a href="https://github.com/18202409203" target="_blank">Github</li> <li><a href="https://blog.csdn.net/pangji0417" target="_blank">CSDN</li> `;
menu.id = "myMenu";
menu.style.background = "#fff";
menu.style.border = "1px solid #000";
menu.style.color = "red";
menu.style.visibility = "hidden";
document.body.appendChild(menu);

function menuHandler(event){
	event.preventDefault();
	var mm = document.getElementById("myMenu");
	mm.style.left = event.clientX + 'px';
	mm.style.top = event.clientY + 'px';
	mm.style.position = 'absolute';
	mm.style.visibility = "visible";
}
function clickHandler(event){
	var mm = document.getElementById("myMenu");
	mm.style.visibility = 'hidden';
}

document.addEventListener("contextmenu", menuHandler);
document.addEventListener("click", clickHandler);

样式有点丑哦…效果图：

【JavaScript+CSS+tampermonkey】动态加载样式——还你一个干净无广告的CSDN博客