CSDN Blog 极致简化

去除作者信息面板、广告,评论区移至左侧 & 免登陆查看评论, 免登录复制, 自动阅读全文, 去除登陆弹窗(如需登陆点右上角)

目前为 2022-09-03 提交的版本。查看 最新版本

// ==UserScript==
// @name         CSDN Blog 极致简化
// @name:en   CSDN Blog Super Simplification
// @namespace    csdn_blog_super_simplification
// @version      4.0.1
// @description  去除作者信息面板、广告,评论区移至左侧 & 免登陆查看评论, 免登录复制, 自动阅读全文, 去除登陆弹窗(如需登陆点右上角)
// @description:en  remove author panel/remove ads/move comment area to left & remove login requirement/auto trigger read more button/hide login pop up panel
// @author       Xavier Wong
// @run-at       document-start
// @include      https://*blog.csdn.net/*
// @exclude      https://www.csdn.net/*
// @grant        GM_addStyle
// @license      Xavier Wong
// ==/UserScript==

GM_addStyle(
    '#commentSideBoxshadow{display:block !important;width:unset !important;}' +
    '#commentSideBoxshadow>.comment-side-content{right: unset !important; top: 48px !important; margin-top: 8px !important;height:calc(100% - 118px) !important;overflow: hidden !important}' +
    '.comment-side-tit-close{display: none !important}' +
    '#pcCommentSideBox{height: unset !important;overflow-y:scroll !important; display: block !important; padding: 0 !important}' +
    // Background & Color
    '[id^="dmp_ad"] {display:none}'+
    '#csdn-toolbar{position:static !important}'+
    '.toolbar-container{width: fit-content !important}'+
    '.toolbar-search{width: auto !important;flex: unset !important}'+
    '#mainBox{margin-left: 0 !important; width:100% !important;overflow:hidden;}' +
    'body{background-color:#f5f6f7 !important;background-image:none !important;  overflow-y:auto; overflow-x:auto}' +
    // Layout Rearrangement
    '.has-comment,.unhas-comment,#recommendNps,#csdn-shop-window,#toolBarBox,.reward-box-new,#rightAside,#btnMoreComment,#tip_comment,#quickComment,.hide-article-box,.csdn-side-toolbar,.recommend-box,.template-box,.footer-box,.blog-footer-bottom,aside,.toolbar-advert{display:none !important}' +
    '.main_father{height: calc(100% - 110px) !important;}' +
    '#article_content{width:100% !important;height:100% !important}' +
    'main{width:100% !important;height:100% !important;margin-bottom: unset !important}'+
    '.blog-content-box{width:70%;float:right;z-index:1;height: 100%;overflow-y: auto;-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);}' +
    // Toolbox
    '.more-toolbox{width:98.5% !important;position:fixed !important;bottom:0;left:unset !important;-webkit-box-shadow: 0 0 10px 3px rgba(0,0,0,0.05);box-shadow: 0 0 10px 3px rgba(0,0,0,0.05);}' +
    // Comment Area
    '#pcCommentBox{display: block!important;margin-top:0px !important;position:relative;width:29% !important;height:100%;overflow:hidden;}' +
    '.comment-list-box{overflow-y:auto !important;height: 100%;max-height:unset !important;margin-bottom:10px !important;}' +
    '.comment-list-container{overflow:scroll !important;padding-bottom:57px}' +
    '#commentPage{top:15px;width:100%;margin-bottom:25px !important;display:block !important}' +
    '.bt-comment-show{display: none !important} .opt-box{display: block !important}' +
    '#myDrap>a{box-shadow: none;border: 1px solid #dadde0;} #myDrap>a>svg{color: #999aaa;width: 2rem;height: 2rem;} #comment_content{height:64px}' +
    '.comment-operate-box{bottom: 8px; top: unset !important}' +
    '.new-comment{display:block !important;text-align: justify;}'+
    // Login Box
    '.login-box,.login-mark{visibility:hidden !important}' +
    '#commentControl{position:absolute;right: 0; top:50%;width:30px;height:30px}' +
    '#hideCom{position:absolute;right:0;top:50%;line-height:50px;height:50px;width:25px;background:#f5f6f7;cursor:pointer;color:darkgrey;padding-left:10px;font-weight:bolder;border-radius:50px 0 0 50px}' +
    '#hideCom:hover{width:40px;}' +
    '#showCom{display:none;position:fixed;left:12px;top:50%;line-height:50px;height:50px;width:25px;background:#f5f6f7;cursor:pointer;color:darkgrey;padding-right:10px;text-align:end;font-weight:bolder;border-radius:0 50px 50px 0}' +
    '#showCom:hover{width:40px;}' +
    '#moveCom{position:absolute; right:0;top:0;width:0;height:0;border-top: 15px solid red;border-left: 15px solid transparent;cursor:move}' +
    '#resizeCom{display:none;position:absolute; right:0;bottom:0;width:0;height:0;border-bottom: 15px solid red;border-left: 15px solid transparent;cursor:nwse-resize}' +
    '.new-info-box{padding-right:0px !important}'+
    // Code Copy
    'code{user-select: text !important}'
);

function scrollToTop(){
    document.querySelector('.article-header-box').scrollIntoView()
}
function commentArea(toolbar, comment){
    if(toolbar.style.position !== comment.style.position){
        comment.style.position = toolbar.style.position;
    }
    if(comment.style.position === "fixed"){
        if(document.getElementsByTagName("main")[0].offsetWidth*0.28 !== comment.offsetWidth){
            comment.style.width = document.getElementsByTagName("main")[0].offsetWidth*0.28 + "px";
        }
    }else{
        comment.style.width = "28%";
    }
}
function showComment(){
    let commentBox = document.querySelector('#pcCommentBox');
    commentBox.style.left = 'unset';
    commentBox.style.top = 'unset';
    commentBox.style.width = '29%';
    commentBox.style.height = '100%';
    GM_addStyle(".blog-content-box{width:70%} #showCom{display:none !important}");
}
(
    function() {
        var isComFloat = false;
        var hideCom = document.createElement('div');
        hideCom.id = 'hideCom';
        hideCom.innerHTML = '<';
        hideCom.onclick = function(){
            if(isComFloat){
                GM_addStyle("#pcCommentBox{position:relative; width:0; height:100%; border-color: unset;border:0;} #resizeCom{display:none !important}");
                isComFloat = false;
                showComment();
                return;
            }
            GM_addStyle("#pcCommentBox, #commentSideBoxshadow>.comment-side-content{display: none !important;} .blog-content-box{width:100%} #showCom{display:block !important}");
        }
        var showCom = document.createElement('div');
        showCom.id = 'showCom';
        showCom.innerHTML = '>';
        showCom.onclick = function(){
            let commentBox = document.querySelector('#pcCommentBox, #commentSideBoxshadow>.comment-side-content');
            commentBox.style.width = '29%';
            commentBox.style.height = '100%';
            GM_addStyle("#pcCommentBox, #commentSideBoxshadow>.comment-side-content{display: block !important;} .blog-content-box{width:70%} #showCom{display:none !important}");
        }
        var moveCom = document.createElement('div');
        moveCom.id = 'moveCom';
        moveCom.title = '移动';
        var x = 0;
        var y = 0;
        var l = 0;
        var t = 0;
        var w = 0;
        var h = 0;
        var resizeCom = document.createElement('div');
        resizeCom.id = 'resizeCom';
        resizeCom.title = '调节';
        var isMoving = false, isResizing = false;
        moveCom.onmousedown = function(e){
            let commentBox = document.querySelector('#pcCommentBox');
            if(!isComFloat){
                commentBox.style.width = '60%';
                commentBox.style.height = '50%';
            }
            GM_addStyle("#pcCommentBox{position:fixed;float:left;z-index:10;border:4px solid;border-color: rgb(235,67,82) rgb(243,164,85) rgb(243,164,85) rgb(235,67,82);} .blog-content-box{width:100%} #resizeCom{display:block !important}");
            //获取x坐标和y坐标
            x = e.clientX;
            y = e.clientY;

            //获取左部和顶部的偏移量
            l = commentBox.offsetLeft;
            t = commentBox.offsetTop;
            //开关打开
            isMoving = true;
            isComFloat = true;
            e.preventDefault();
        }
        resizeCom.onmousedown = function(e){
            let commentBox = document.querySelector('#pcCommentBox');
            //获取x坐标和y坐标
            x = e.clientX;
            y = e.clientY;

            //获取左部和顶部的偏移量
            w = commentBox.offsetWidth;
            h = commentBox.offsetHeight;
            //开关打开
            isResizing = true;
            e.preventDefault();
        }
        window.onmousemove = function(e) {
            if (isMoving) {
                let commentBox = document.querySelector('#pcCommentBox');
                //获取x和y
                let nx = e.clientX;
                let ny = e.clientY;
                //计算移动后的左偏移量和顶部的偏移量
                let nl = nx - (x - l);
                let nt = ny - (y - t);
                var sw = document.documentElement.offsetWidth || document.body.offsetWidth ;
                var sh = document.documentElement.offsetHeight || document.body.offsetHeight ;
                if(commentBox.offsetWidth + nl < 100 ) nl = 100 - commentBox.offsetWidth;
                if(nt < 0 ) nt = 0;
                if(nl+commentBox.offsetWidth > sw) nl = sw - commentBox.offsetWidth;
                if(sh - nt < 100 ) nt = sh - 100;

                commentBox.style.left = nl + 'px';
                commentBox.style.top = nt + 'px';
            }
            if (isResizing) {
                let commentBox = document.querySelector('#pcCommentBox');
                //获取x和y
                let nx = e.clientX;
                let ny = e.clientY;
                //计算移动后的左偏移量和顶部的偏移量
                let nw = w + (nx - x);
                let nh = h + (ny - y);

                commentBox.style.width = nw + 'px';
                commentBox.style.height = nh + 'px';
            }
        }
        //鼠标抬起事件
        window.onmouseup = function() {
            if(isMoving){
                isMoving = false;
                let commentBox = document.querySelector('#pcCommentBox');
                commentBox.style.cursor = 'default';
            }
            if(isResizing){
                isResizing = false;
                let commentBox = document.querySelector('#pcCommentBox');
                commentBox.style.cursor = 'default';
            }
        }
        window.onload = function(){
            'use strict';
            //document.querySelector('#pcCommentBox').innerHTML = `<div class="unlogin-comment-model"><span>评论加载中...</span></div>`;
            let bodyLayout = document.querySelector('body');
            bodyLayout.style.setProperty('background-image', 'none', 'important');
            bodyLayout.style.setProperty('background-color', '#f5f6f7', 'important');
            let blogBox = document.querySelector('.blog-content-box');
            blogBox.appendChild(showCom);
            let commentBox = document.querySelector('#commentSideBoxshadow>.comment-side-content');
            commentBox.appendChild(hideCom);
            // commentBox.appendChild(moveCom);
            // commentBox.appendChild(resizeCom);
            if(getCookie('UserName') == null){
                $.ajax({
                    url: 'https://blog.csdn.net/phoenix/web/v1/comment/list/'+articleId+'?page=0&size=3000',
                    type: "POST",
                    success: function (data) {
                        console.log(data);
                        let commentCustom = document.querySelector('#commentSideBoxshadow>.comment-side-content').outerHTML + `<div class="comment-list-container"><div class="comment-list-box">`;
                        $.each(data.data.list, function(i, r){
                            commentCustom = `${commentCustom}<ul class="comment-list">` +
                                `<li class="comment-line-box">` +
                                `<div class="comment-list-item">` +
                                `<a class="comment-list-href" target="_blank" href="https://blog.csdn.net/${r.info.userName}">` +
                                `<img src="${r.info.avatar}" username="${r.info.userName}" alt="${r.info.userName}" class="avatar">` +
                                `</a>` +
                                `<div class="right-box">` +
                                `<div class="new-info-box clearfix">` +
                                `<div class="comment-top">` +
                                `<div class="user-box">` +
                                `<a class="name-href" target="_blank" href="https://blog.csdn.net/${r.info.userName}">` +
                                `<span class="name ">${r.info.nickName}</span>` +
                                `</a>` +
                                `<span class="date" title="${r.info.postTime}">${r.info.dateFormat}</span>` +
                                `</div>` +
                                `</div>` +
                                `<div class="comment-center">` +
                                `<div class="new-comment">${r.info.content}</div>` +
                                `</div>` +
                                `</div>` +
                                `</div>` +
                                `</div>` +
                                `</li>` +
                                `<li class="replay-box" style="display:block"><ul class="comment-list">`;
                            $.each(r.sub, function(i1, r1){
                                commentCustom = `${commentCustom}<li class="comment-line-box">` +
                                    `<div class="comment-list-item">` +
                                    `<a class="comment-list-href" target="_blank" href="https://blog.csdn.net/${r1.userName}">` +
                                    `<img src="${r1.avatar}" username="${r1.userName}" alt="${r1.userName}" class="avatar">` +
                                    `</a>` +
                                    `<div class="right-box">` +
                                    `<div class="new-info-box clearfix">` +
                                    `<div class="comment-top">` +
                                    `<div class="user-box">` +
                                    `<a class="name-href" target="_blank" href="https://blog.csdn.net/${r1.userName}">` +
                                    `<span class="name ">${r1.nickName}</span>` +
                                    `</a>` +
                                    `<span class="date" title="${r1.postTime}">${r1.dateFormat}</span>` +
                                    `</div>` +
                                    `</div>` +
                                    `<div class="comment-center">` +
                                    `<div class="new-comment">${r1.content}</div>` +
                                    `</div>` +
                                    `</div>` +
                                    `</div>` +
                                    `</div>` +
                                    `</li>`;
                            });
                            commentCustom = `${commentCustom}</ul></li></ul>`;
                        });
                        commentCustom = `${commentCustom}</div></div>`;
                        document.querySelector('#pcCommentSideBox').innerHTML = `<div class="unlogin-comment-model">` + commentCustom + `</div>`;
                        let commentBox = document.querySelector('#commentSideBoxshadow>.comment-side-content');
                        commentBox.appendChild(hideCom);
                        // commentBox.appendChild(moveCom);
                        // commentBox.appendChild(resizeCom);
                        //document.querySelector('.has-comment').innerHTML = null;
                        //document.querySelector('.has-comment').innerHTML = commentCustom;
                    }
                });
            }
            // modify directory jump
            let directory = document.querySelectorAll('#content_views a[target=_self]');
            $.each(directory,function(i, r){
                r.onclick = function() {
                    if(!!document.querySelector('[name="'+$(r).attr('href').replace('#', '')+'"]')) {
                        document.querySelector('[name="'+$(r).attr('href').replace('#', '')+'"]').scrollIntoView()
                    }
                    if(!!document.querySelector('[id="'+$(r).attr('href').replace('#', '')+'"]')) {
                        document.querySelector('[id="'+$(r).attr('href').replace('#', '')+'"]').scrollIntoView()
                    }
                }
                console.log($(r).attr('href'))
            })

            // monitor copy
            document.addEventListener('copy',function(e){
                let clipboardData = e.clipboardData || window.clipboardData;
                if(!clipboardData) return ;
                clipboardData.setData('text/plain', window.getSelection().toString())
            })
        }
    }
)();