隐藏CSDN博客无用信息

浅浅的花香味﹌ 2022-11-14 10:10 153阅读 0赞

### 一、油猴插件 ###

链接：[https://pan.baidu.com/s/1yZ8nnssZnh\_LiYKDabL5nw][https_pan.baidu.com_s_1yZ8nnssZnh_LiYKDabL5nw]

提取码：`m0sz`

### 二、安装油猴 ###

在谷歌浏览器中输入`chrome://extensions/`，然后打开开发者模式，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70]

把`Tampermonkey 4.11.crx`拖到谷歌浏览器中就可以了，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 1]

然后选择添加扩展程序，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 2]

找到该油猴插件，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 3]

点击添加新脚本，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 4]

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

// ==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 = $("#is-like").next().find("span").first().text().trim()
    const shoucang = $("#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": "50px",
            "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()

**注意：我的电脑是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保存`或者使用下方图片中的保存按钮都可以，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 5]

如果想知道安装了哪些脚本，你可以通过后面的已安装版本查看，也可以通过油猴插件中的管理脚本查看，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 6]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 7]

[https_pan.baidu.com_s_1yZ8nnssZnh_LiYKDabL5nw]: https://pan.baidu.com/s/1yZ8nnssZnh_LiYKDabL5nw
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70]: /images/20221022/df8b9d44643349e2add93ac34e700277.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 1]: /images/20221022/073d4de91a2647f4bfb4d0305de34474.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 2]: /images/20221022/65442c335a124243841ec2153ce0f580.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 3]: /images/20221022/2bd47cb5c242435bad2e0236ad3d8517.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 4]: /images/20221022/8e57a74f150541fe849e101c3b908050.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 5]: /images/20221022/7458136caf054abaa186c6a5728dcb83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 6]: /images/20221022/da50e7dfcf1a46f6825c73cd3675274c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 7]: /images/20221022/d25c83ed48bb490dacdab1a77a42c216.png