CSDN Focus

🌚 黑暗模式上线, 一键变天 | CSDN, 脚本之家 无弹窗无广告无任何干扰, 自动展开文章和评论, 外链直达! 隐藏属性等你发现, 不试一下? 😃

As of 2021-05-27. See the latest version.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

  1. // ==UserScript==
  2. // @name CSDN Focus
  3. // @description 🌚 黑暗模式上线, 一键变天 | CSDN, 脚本之家 无弹窗无广告无任何干扰, 自动展开文章和评论, 外链直达! 隐藏属性等你发现, 不试一下? 😃
  4. // @version 1.8
  5. // @author Finn
  6. // @namespace https://github.com/Germxu
  7. // @homepage https://github.com/Germxu/Scripts-for-TamperMonkey
  8. // @supportURL https://github.com/Germxu/Scripts-for-TamperMonkey/issues/new
  9. // @run-at document-start
  10. // @match blog.csdn.net/*/article/details/*
  11. // @match *.blog.csdn.net/article/details/*
  12. // @match www.jb51.net/article/*
  13. //
  14. // @grant GM_setValue
  15. // @grant GM_getValue
  16. // @license MIT
  17. // @compatible chrome 54+
  18. //
  19. // @note V1.8 Bugfix: 无法检测更新
  20. // @note V1.7 重要更新: 支持拉伸调节内容宽度, 尺寸限定: 888 ~ 80%
  21. // @note V1.6 重要更新: 修复了一直以来可能出现的运行不成功和后台加载脚本失败的问题
  22. // @note V1.5 重要更新: 添加黑暗模式, 一键切换, 优化精简大量静态代码,修复隐性Bug
  23. // ==/UserScript==
  24.  
  25. (function () {
  26. 'use strict';
  27. const finnWidth =GM_getValue('FinnData') && GM_getValue('FinnData').finnWidth || 1000;
  28. const csdn = `<style>:root{--finn-width:${finnWidth}px}[DarkMode],[darkMode] #darkBtn,[darkMode] img,[darkMode] code.hljs,[darkMode] pre.prettyprint{filter:invert(1) hue-rotate(180deg);transition:all 0.5s}[darkModE] body{background:#ebebeb !important;transition:background 0.7s}#darkBtn{position:fixed;top:8px;left:50px;width:32px;height:32px;z-index:9999;background:gold;cursor:pointer;border-radius:50%;transition:all 0.5s}[darkMode] #darkBtn{background:transparent;box-shadow:-0.5em 0.3em 0 0 gold;left:60px;top:4px}div#darkBtn:before{content:"";width:50px;height:50px;display:block;transform:translate(-10px,-10px)}#darkBtn:after{content:"打开夜间模式";width:100px;position:absolute;right:-120px;top:4px;font-size:14px;font-weight:600;transition:all 0.5s;display:none}[darkMode] #darkBtn:after{content:"关闭夜间模式";right:-110px;top:8px;filter:invert(1) hue-rotate(180deg);font-weight:600;}#darkBtn:hover:after{display:block}#csdn-toolbar .toolbar-advert,#csdn-toolbar .toolbar-container-left,#csdn-toolbar .toolbar-container-right,.toolbar-search-drop-menu.toolbar-search-half,::-webkit-input-placeholder,#placeholder,#blogColumnPayAdvert,.csdn-side-toolbar,#dmp_ad_58,#footerRightAds,.csdn-shop-window-common,.login-mark,.blog-footer-bottom,.template-box,.leftPop,#toolBarBox,.comment-edit-box.d-flex,#passportbox,.opt-box.text-center,.hide-article-box.hide-article-pos.text-center,#rightAside,.hljs-button.signin{display:none !important;color:transparent;visibility:hidden}.toolbar-search.onlySearch{transition:all 0.3s ease;}body #csdn-toolbar{box-shadow:0 2px 10px 0 rgba(0,0,0,.15);position:fixed !important;top:0px;left:0px;width:100%;z-index:1993;}.toolbar-search.onlySearch:focus-within{max-width:var(--finn-width) !important;width:var(--finn-width) !important}.d-flex{display:block !important}.main_father{height:auto !important;}main{cursor: auto;width:100% !important;box-shadow:0 0 30px #959fa378;margin-bottom:0 !important;}#mainBox{position:relative;margin:50px auto;width:var(--finn-width) !important;padding: 0 20px;box-sizing: content-box;cursor: e-resize;}.comment-list-box{max-height:none !important}#commentPage,.toolbar-container-middle{display:block !important}#article_content{height:auto !important}.comment-list-container{padding:4px 0 !important}.article-header-box{padding-top:18px !important}main .comment-box{padding:0;box-shadow:0 0 10px rgba(0,0,0,0.05);margin:8px 0;}#FinnTop{width:36px;height:36px;color:#ff4d4d;font:600 14px/44px arial;text-align:center;position:fixed;left:50%;margin-left:calc(var(--finn-width)/2 + 20px);bottom:80px;z-index:999;cursor:pointer;background:#fff;border-radius:50%;box-shadow:0 0 20px #75757545;}#FinnTop:before{content:"";position:absolute;left:28%;top:16%;color:#ff4d4d;width:14px;height:14px;border-top:2px solid #ff4d4d;border-left:2px solid #ff4d4d;transform:rotate(45deg)}.blog_container_aside{height:calc(100% - 100px);overflow-y:auto;overflow-x:hidden;border:solid #fff;border-width:20px 4px 0 4px;background:#fff;box-sizing:content-box;position:fixed;top:initial !important;left:-307.8px !important;;transition:all 0.35s;box-shadow:2px 0 10px 0 rgba(0,0,0,.15);z-index:99;}.blog_container_aside::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 15px rgba(0,0,0,0.13);background-color:#fefefe;}.blog_container_aside::-webkit-scrollbar{width:6px;height:6px;background-color:#eee;}.blog_container_aside::-webkit-scrollbar-thumb{border-radius:6px;background-color:#cecece;}.blog_container_aside:hover{left:0px !important;}.recommend-box.insert-baidu-box{height:79%;overflow:scroll;position:fixed;background:#fff;box-sizing:content-box;transition:all 0.38s;box-shadow:0 -3px 10px 0 rgba(0,0,0,.25);border:10px solid #fff;z-index:1995;top:calc(100% - 7px);left:0;right:0;margin:auto;width:var(--finn-width);}.recommend-box.insert-baidu-box:hover{top:29%}.recommend-box.insert-baidu-box::-webkit-scrollbar-thumb{background-color:rgba(153,154,170,0.3);}.recommend-box.insert-baidu-box::-webkit-scrollbar{width:5px;height:100px;}.recommend-item-box{display:none !important;}.recommend-item-box.type_blog{display:block !important;}aside.blog_container_aside:before{width:14px;animation:_l 1s ease-in forwards;position:fixed;top:58px;left:0;z-index:999;padding:5px 1px;background:#ff4d4d;text-align:center;color:#fff;content:" "attr(username) " ";writing-mode:tb-rl;font-size:12px;line-height:1.4;transition:all 0.35s ease;}@keyframes _l{from{left:-20px;}to{left:0;}}aside.blog_container_aside:hover::before{width:308px;height:18px;padding:4px 0;writing-mode:rl-tb;font-size:14px;}.recommend-box.insert-baidu-box:before{position:fixed;bottom:40px;left:50%;margin-left:calc( var(--finn-width)/2 + 10px);padding:4px;background:#ff4d4d;color:#fff;content:"推荐阅读";font-size:13px}</style><div id="darkBtn"></div><div id="FinnTop">TOP</div>`;
  29. const jb51 = `<style> #main .main-right,#topbar,#footer,.pt10,.lbd,.xgcomm,#header,.lbd_bot,#ewm,.subnav,.art_xg,.tags,#comments{display:none !important;}body #main .main-left{padding:0;width:unset;float:none}body #article{padding:15px 20px 20px;box-shadow:0 0 30px rgb(0 0 0 / 25%)}#ewm+p{font-weight:bold;text-align:center;margin:20px;font-size:24px;}body .syntaxhighlighter .line.alt1,body .syntaxhighlighter .line.alt2{background:#d4dbdc !important}body .syntaxhighlighter div{padding:10px 0px !important}.jb51code{width:960px !important}.jb51code .syntaxhighlighter table{background:#d4dbdc !important}</style>`;
  30. let h = document.documentElement, _Ds;
  31. let FinnData = new Proxy(GM_getValue('FinnData', {}), {
  32. set(target, key, val) {
  33. key === "dark" && val ? h.setAttribute("darkMode", true) : h.removeAttribute("darkMode");
  34. const B = Reflect.set(target, key, val);
  35. GM_setValue('FinnData', FinnData);
  36. return B;
  37. }
  38. })
  39. if (location.host === "www.jb51.net") { _Ds = jb51; } else {
  40. _Ds = csdn;
  41. window.addEventListener("DOMContentLoaded", () => {
  42. document.querySelector(".blog_container_aside").setAttribute("username", username);
  43. mainBox.addEventListener('click', e => {
  44. let ev = e.target;
  45. if (ev.nodeName.toLocaleLowerCase() === 'a') {
  46. if (ev.host.indexOf("csdn") === -1) {
  47. e.stopImmediatePropagation();
  48. window.open(ev.href);
  49. e.preventDefault();
  50. }
  51. }
  52. }, true);
  53. $("#darkBtn").click(() => { FinnData.dark = !FinnData.dark })
  54. $("#FinnTop").click(() => { $("body,html").animate({ scrollTop: 0 }, 300) });
  55.  
  56. let resize = mainBox;
  57. resize.addEventListener("mousedown", e => {
  58. let startX = e.clientX,
  59. offsetWidth = resize.offsetWidth;
  60. const maxSize = window.innerWidth * 0.8;
  61. if (e.target !== mainBox) return;
  62. resize.style.userSelect = "none";
  63. e.stopPropagation();
  64.  
  65. document.onmousemove = e => {
  66. let endX = e.clientX;
  67. var moveLen = (startX / maxSize < 0.5) ? startX - endX : endX - startX;
  68. let l = offsetWidth + moveLen - 40;
  69. l = l < 888 ? 888 : l > maxSize ? maxSize : l;
  70. FinnData.finnWidth = l;
  71. document.querySelector('html').style.setProperty('--finn-width', l + "px");
  72. }
  73. document.onmouseup = e => {
  74. resize.style.userSelect = "auto";
  75. e.stopPropagation();
  76. document.onmousemove = null;
  77. document.onmouseup = null;
  78. resize.releaseCapture && resize.releaseCapture();
  79. }
  80. resize.setCapture && resize.setCapture();
  81. }, true)
  82. })
  83. }
  84. function ins() {
  85. h = document.documentElement;
  86. h.insertAdjacentHTML('afterbegin', _Ds);
  87. FinnData.dark && h.setAttribute("darkMode", true);
  88. }
  89. if (!h) {
  90. let OB = new MutationObserver(ins);
  91. OB.observe(document, { childList: true })
  92. } else {
  93. ins()
  94. }
  95. })();