玩转CSDN之复制与专注阅读

2023-09-26 22:17:16

一、介绍
二、油猴基础
三、实现步骤
- 3.1 取消：登录复制限制
- 3.2 添加：专注阅读模式（含目录）
四、展示效果
五、开源地址（有更新）
六、外链

一、介绍

本文章仅供参考学习，内容皆通过测试开发出来的结果编写。
众所周知，CSDN部分文章一直饱受大家的诟病，本文便入门般地介绍一下如何通过u猴^[1]脚本来解决CSDN中部分文章的登录复制限制，以及对接浏览器F9进入阅读模式的功能实现CSDN文章的专注阅读模式。

二、油猴基础

2.1 匹配站点

在自定义的脚本中添加如下代码，匹配站点支持正则^[2]
注：但不完全符合正则的所有语法

//@match        *://*.blog.csdn.net/*；

2.2 配置信息

其中 name、namespace、version 三个字段为必填。

// ==UserScript==
// @name        <脚本名称>
// @namespace     <命名空间[类似C++的引入]>
// @version         <版本号>
// @match        <站点[URL]>
// @icon        <脚本图标[URL]>
// @description   <描述>
// @author        <作者>
// @grant        <内置库方法[eg. GM_xhrHttpRequest]>
// ==/UserScript==

2.2 闭包

模板代码主体类似闭包^[3]，作用域是整个页面。

三、实现步骤

3.1 取消：登录复制限制

解决绑定在对应DOM元素上的属性和监听事件。

解除限制
禁止复制的逻辑主要是通过 DOM元素上的CSS属性字段user-select: none设置的用户不可选中复制的原理限制，我们可以通过修改元素上的该字段属性值为auto或者删除即可解除复制限制。
热复制
热复制即一键点击复制，点击后自动将对应的代码内容格式化的复制到剪贴板上。主要逻辑代码可以网上搜索，但是网上关于Web上复制的逻辑业务方法有很多种，当然大多数也是与作者相同的处理技术：ClipboardJS。
一开始我也以为需要通过CDN的方式引入外部资源文件，然而本文实现的热复制的主要逻辑并不需要引入外步额外的ClipboardJS资源，可以通过浏览器内置的onCopy方法进行复写，进而实现热复制

/*
@name    复制
@func
    modifyCopyPriviledge: 修改权限
    copy: 复制逻辑
*/
modifyCopyPriviledge(codeElem,signElem){
    //代码容器修改
    codeElem.removeAttribute(‘onclick‘);
    codeElem.style.setProperty(‘user-select‘,‘auto‘);
    codeElem.setAttribute(‘id‘,‘code-‘+i);
    codeElem.parentNode.style.setProperty(‘user-select‘,‘auto‘);
    // 登录容器修改
    try{
        signElem.removeAttribute(‘onclick‘);
        signElem.setAttribute(‘data-title‘,‘点击复制‘);
        signElem.removeAttribute(‘data-report-click‘);
		
		// 适配clipboardJS在DOM元素上的绑定
		bindAttribute2DOM(signElem);
		
        signElem.style.position = ‘inherit‘;
        signElem.style.display = "block";
        signElem.style.setProperty(‘max-width‘,‘65px‘);
        return true
    }catch(e){
        return false
    }
};
copy(signElem) {
    let codeelem = null;
    try{
        codeelem = signElem.parentNode;
        if(codeelem.id.indexOf(‘code‘)===-1){ // 父节点
            throw new EvalError(‘值错误‘);
        }
    }catch(err){// 兄弟节点
        codeelem = signElem.previousElementSibling;
    }
    
     // 复制逻辑业务
	addCodeContent2Clipboard(innerText);
    
    signElem.setAttribute(‘data-title‘,‘复制成功‘);
    signElem.style.cssText += ‘background-color: green‘;
    // 动画
    setTimeout(()=>{ // 先延时1000ms，再执行回调函数
        signElem.setAttribute(‘data-title‘,‘点击复制‘);
        signElem.style.removeProperty(‘background-color‘,‘green‘);
    },1000);
};

3.2 添加：专注阅读模式（含目录）

添加此模式的想法是起源于使用via浏览器后，享受那种极简的风格，然而原本的CSDN文章页面充斥着各种影响极简阅读的板块。这里说明一下为什么特意强调含目录呢，因为CSDN的侧边栏目录是真的良心，阅读很方便，emmmm，一开始我还想仅仅实现保留文章主体的效果，但是仔细一想具有自动审阅与跳转的功能的目录要是被我摘除了，岂不是多此一举，然后我就保留了目录。
注：知道F9进入阅读模式后差点实现到一半放弃，然而F9仅仅保留类似爬虫过程中对response.text #纯文本的效果，不可热复制也不可阅读目录。

添加专注模式开关
这里我删除了原本的页面右下角的三个按钮，添加了我自定义的一个图标按钮——小飞侠图标，点击即可进入专注模式，再次点击即可回到默认初始页面。
调整页面布局
删除不必要的板块需要对页面的板块重新布局，仅保留文章主体和目录两个必要板块。根据不给页面过多的负载问题，主要业务原理通过复制文章主体和目录节点并通过与原始的属性display值的动态修改切换显示。

/*
@name 专注模式
@func
    modifyFocusPriviledge: 修改专注权限
    showFocusModel: 展开专注模式
*/
modifyFocusPriviledge(mainBox, main, catalog){
    // 修改toolbar
    let toolbar = document.querySelector(‘.csdn-side-toolbar‘);
    let focusSwitch = document.querySelector(‘.option-box‘).cloneNode(true);
    focusSwitch.firstElementChild.src = ‘https://s1.aigei.com/src/img/png/05/055f0df239ef4451a25be1e5c4617f96.png?imageMogr2/auto-‘+
        ‘orient/thumbnail/!199x199r/gravity/Center/crop/199x199/quality/85/&e=1735488000&‘+
        ‘token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:pxpJ0L3fOUppABVi15gOFs94eqk=‘;
    focusSwitch.style.background = "rgba(0,0,0,0.1)";
    focusSwitch.firstElementChild.style.width = "200%";
    focusSwitch.firstElementChild.style.display = "block"; // 去除初始鼠标放上有动态加载事件
    focusSwitch.removeChild(focusSwitch.lastElementChild);
    toolbar.replaceChildren(focusSwitch);
    
    // 文章主体内容保留业务逻辑
    storeMainContent(mainBox, main);
    
	// 目录保留悬挂业务逻辑
    storeCataLlogAndFloat(_catalog);
    
    return {
        a: focusSwitch,
        b: _catalog
    };

};
showFocusModel(status, mainBox, main,catalog){
    if(status===0){ // 进入专注模式
        console.log(`----${status}: 专注模式----`)
        mainBox.style.display = ‘none‘;
        mainBox.nextElementSibling.style.display = ‘none‘;
        main.style.display = ‘block‘;
        catalog.style.display = ‘block‘;
        console.log(‘主体可见\n全体不可见‘)
    }else{
        console.log(`----${status}: 初始模式----`);
        mainBox.style.display = ‘block‘;
        mainBox.nextElementSibling.style.display = ‘block‘;
        main.style.display = ‘none‘;
        catalog.style.display = ‘none‘;
        console.log(‘主体不可见\n全体可见‘);
    }
}