玩转CSDN之复制与专注阅读

2021-09-12 18:03:14 阅读：184 来源： 互联网

标签：style signElem 专注 CSDN 玩转复制 focusSwitch display

一、介绍
二、油猴基础
三、实现步骤
- 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全体可见');
    }
}

四、展示效果

哔哩哔哩-《玩转CSDN复制与专注阅读》 - 点击观看

五、开源地址（有更新）

当前时间为2021年9月12日，17点52分 内容基本思路没变，但是代码有改动，故更可以转至我的主页下载最新版，也有新功能更新和版本debug的解决。

跳转至 - Geasy Fork 玩转CSDN

六、外链

标签：style,signElem,专注,CSDN,玩转,复制,focusSwitch,display
来源： https://www.cnblogs.com/haiw2/p/hai-csdn.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9