为清爽的CSDN博客页面贡献力量

一、油猴插件

链接：https://pan.baidu.com/s/1yZ8nnssZnh_LiYKDabL5nw

提取码：m0sz

二、安装油猴

在谷歌浏览器中输入chrome://extensions/，然后打开开发者模式，如下图：

把Tampermonkey 4.11.crx拖到谷歌浏览器中就可以了，如下：

然后选择添加扩展程序，如下：

找到该油猴插件，如下：

点击添加新脚本，如下：

之后把以下脚本代码复制一下，如下：

// ==UserScript==
// @name         隐藏CSDN博客无用信息
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  隐藏CSDN博客无用信息
// @author       明快de玄米61
// @match        *://blog.csdn.net/*/article/details/*
// @match        *://*.blog.csdn.net/article/details/*
// @grant        yes
// @require      http://code.jquery.com/jquery-1.11.0.min.js
// ==/UserScript==

// 注意：本机为14寸电脑屏幕，如果不是这个屏幕的自己看着设置哈
// 页面加载完毕之后才执行这些操作，避免操作过早
$(function(){
// 设置文章内容宽度（无论是否存在目录都要做该操作）,我通过window.screen.width得到电脑宽度是1280px，然后127px是我给两边留出来的宽度，
// 所以剩下1153px，以下代码中所有1153px都是这里出来的；如果这个127这个两边宽度不适合大家的电脑，都可以在调节
$("#mainBox").css({
    "width": "1153px",
    "margin-left": "0px"
})
$("#mainBox main").css("width", "1153px")
// 解决图片太宽的问题，原来设置的是100%，全屏幕展示文章图片最大宽度设置60%就很合适
$("#article_content img").css("max-width","60%")
// 删除页面可能存在缩放的提示
$(".leftPop").remove()
// 删除顶部栏目的首页、博客、专题课程、……、直播等点击按钮
$("ul.toolbar-menus.csdn-toolbar-fl").remove()
// 改变包裹点赞、评论、收藏的div的id，避免内容被再次固定
$("#toolBarBox").attr("id","toolBox")
// 去除点赞、评论、收藏的固定效果
$("div.left-toolbox").css({
    "position": "",
    "left": "0px"
})
// 获取点赞、评论、收藏的数值
const dianzan = $("#spanCount").text().trim()
const pinglun = $("a.tool-item-href.go-side-comment > span").text().trim()
const shoucang = $("#get-collection").text().trim() == "" ? 0 : $("#get-collection").text().trim()
// 将点赞、评论、收藏放在顶部
let zuheti = `
<span style="cursor:default;">点赞（${dianzan}）评论（${pinglun}）收藏（${shoucang}） </span><a href="#" class="topLink">《《《回顶部 </a><a href="javascript:void(0);" id="lookComment" class="topLink"> 看评论》》》</a>`
// 添加点赞、评论、收藏代码到指定位置
$("div.toolbar-container-left").append(zuheti)
// 点击“看评论”到指定位置，其中48是顶部栏目的高度
$("#lookComment").click(function(){
    let shopHeight = $("#toolBox").offset().top
    if($("main").offset().top < 48) {
        window.scrollTo(0, shopHeight-48)
    }else {
        window.scrollTo(0, shopHeight-96)
    }
})
// 将鼠标放在“回顶部”或者“看评论”上，文字变成蓝色
$("a.topLink").hover(function() {
    $(this).css({
        "font-weight": "bold",
        "color": "blue"
    });
}, function() {
   $(this).css({
        "font-weight": "normal",
        "color": "black"
   });
});
// 删除顶部栏目的会员中心和动态
$("div.toolbar-btns.onlyUser").children().eq(1).remove()
$("div.toolbar-btns.onlyUser").children().eq(2).remove()
// 文章刚开始下面会有一个滚动条，我用这个方法把它去掉了
$("body").css("overflow-x", "hidden");
// 让右边的新手指导、客服、举报框、向上按钮放在一个合适的位置，这个根据你自己的电脑设置
$(".csdn-side-toolbar").css("left", "1216px");
// 删除新手指导和向上按钮（向上速度很慢，非常鸡肋）
$("div.csdn-side-toolbar").children().first().remove()
$("div.csdn-side-toolbar").children().last().remove()
// 原来的z-index太大，所以（点赞、评论、分享……）长条会遮挡目录内容，因此调小一点
$(".left-toolbox").css({
    "width": "1153px",
    "z-index": 10
});
// 文章太短不够一屏，或者当前页面已经超过了（点赞、评论、分享……）长条的位置，所以使用相对定位，因此left是0px；如果文章太长的话刚开始使用固定定位，因此left是55px，这个根据自己电脑设置哈
if ($(".left-toolbox").css("position") == "fixed") {
    $(".left-toolbox").css("left", "55px");
} else {
    $(".left-toolbox").css("left", "0px");
}
// 判断是否有目录
if ($("#asidedirectory").length <= 0) {
    // 情况1：不包含目录
    // 直接删除侧边所有作者信息
    $(".blog_container_aside").remove();
} else {
    // 情况2：包含目录
    // 删除侧边部分作者信息（不包括目录信息）
    $("#asideProfile").remove();
    $("#asideSearchArticle").remove();
    $("#asideHotArticle").remove();
    $("#asideCategory").remove();
    $("#asideNewComments").remove();
    $("#asideArchive").remove();
    $("#footerRightAds").remove();
    $("#asideCustom").remove();
    // 隐藏目录内容
    $("#asidedirectory").hide();
    // 设置目录内容显示位置，top也可以根据自己的要求进行设置
    $("#asidedirectory").css({
        "position": "fixed",
        "left": 0,
        "top": "40px",
        "z-index": 999
    });
    // 上方订阅专栏层级太高
    $("#blogColumnPayAdvert .column-advert-box").css("z-index", 10);
    // 下方会出现订阅此专栏的遮罩层，该遮罩层层级太高
    $(".hide-article-pos").css("z-index", 10);
    // 设置隐藏目录提示信息
    $("#asidedirectory .groupfile .aside-title").text("hello,点击我隐藏目录");
    $("#asidedirectory .groupfile .aside-title").css({
        "cursor": "pointer",
        "color": "blue"
    });
    // 添加目录小按钮
    $("body").prepend("<button id='catalogBtn' style='z-index:20;font-size:18px;font-family:SimSun;color: black;position:fixed;left:0;top:150px;border:1px black solid;border-left:0;padding:10px;background-color:white;border-top-right-radius:2em;border-bottom-right-radius:2em;'>目<br/>录</button>");
    // 将鼠标移动到目录小按钮上之后，将会改变小按钮颜色为黄色，并进行字体加粗
    $("#catalogBtn").hover(function() {
        $(this).css({
            "background-color": "yellow",
            "font-weight": "bold"
        });
    },
    function() {
        $(this).css({
            "background-color": "white",
            "font-weight": "normal"
        });
    });
    // 点击目录小按钮之后，将会隐藏目录小按钮，并且显示目录内容
    $("#catalogBtn").click(function() {
        $("#menuButton").hide();
        $("#asidedirectory").show();
    });
    // 点击目录所有部分都可以隐藏目录内容
    $("#asidedirectory").click(function() {
        $("#asidedirectory").hide();
        $("#menuButton").show();
    });
}
// 删除打赏内容
$("div.reward-box-new").remove()
// 删除评论框上方的两个推荐内容
$("div.first-recommend-box.recommend-box").remove()
$("div.second-recommend-box.recommend-box").remove()
// 删除“我的小店”
$("#csdn-shop-window-top").empty()
$("#csdn-shop-window").empty()
})
// 删除订阅专栏
$("#blogColumnPayAdvert").remove()
// 删除推荐/不推荐给好友
$("#asideNewNps").empty()
// 删除顶部广告
$(".toolbar-advert").remove()
// 删除文章下部广告
$("#marketingBox").remove()
// 删除推荐技能树
$("#treeSkill").remove()
// 删除华为广告
$("#blogHuaweiyunAdvert").remove()
// 删除用AI写文档
$("#asideWriteGuide").remove()
// 删除右侧-侧边栏
$("div.csdn-side-toolbar ").remove()
// 删除左边推荐文章
$("#asideHotArticle").remove()
// 删除左侧-广告1
$("div.swiper-wrapper").remove()
// 删除左侧-广告2
$("div.swiper-slide-box-remuneration").remove()

注意：我的电脑是14寸的，所以以上脚本可以完美适配14寸的浏览器屏幕，但是其他屏幕的可能就不是那么适合了，但是其他屏幕也是可以用的，如果不是14寸浏览器屏幕想用的话，朋友们可以把部分px值改改，其实大多数的功能我都已经完成了，需要改的地方如下： 1、1153px通过window.screen.width得到电脑宽度1280px，然后127px是我给两边留出来的宽度，所以两者相减之后剩下1153px，大家也可以先通过window.screen.width得到屏幕宽度，在给两边留个适合的宽度，最终调出合适的数值； 2、$(".csdn-side-toolbar").css("left","1216.17px");和右边的举报等图标有关，所以里面的数值你也用f12看着调一下，找个合适的值； 3、第一个if判断中的$(".left-toolbox").css("left","55px");也要改一下，这个和点赞、评论、分享底部栏有关，刚打开一个文章的时候，该底部栏的位置不是特别恰当，所以你可以用f12试着调一下； 4、注释“添加目录小按钮”下面的$("body").prepend("……");中字体大小、内边距、顶部距离都可以适当修改，毕竟屏幕大小不一样，调个合适的；

然后粘贴到脚本输入框中，使用Ctrl+S保存或者使用下方图片中的保存按钮都可以，如下：

如果想知道安装了哪些脚本，你可以通过后面的已安装版本查看，也可以通过油猴插件中的管理脚本查看，如下：

之后我们想要的效果就实现了，如下：