☰

知乎Plus

知乎Plus: 1. 暗色极简阅读模式；2. 去除官方或用户插入的广告

目前为 2020-09-21 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         知乎Plus
  3. // @namespace    zhihu_plus
  4. // @version      0.3
  5. // @description  知乎Plus: 1. 暗色极简阅读模式；2. 去除官方或用户插入的广告
  6. // @author       Gaofang Huang
  7. // @match        https://*.zhihu.com/*
  8. // @match        https://v.vzuu.com/video/*
  9. // @match        https://video.zhihu.com/video/*
  10. // @connect      zhihu.com
  11. // @connect      vzuu.com
  12. // @require      https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js
  13. // @require      https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js
  14. // @grant        none
  15. // ==/UserScript==
  16.  
  17. // 图标-眼睛关
  18. const iconEyeClose = `<svg t="1600160078250" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1172" width="200" height="200"><path d="M0 0h853.333333v853.333333H0z" fill="#FFFFFF" opacity=".01" p-id="1173"></path><path d="M942.933333 566.442667a32.256 32.256 0 0 1-2.602666 46.805333 36.693333 36.693333 0 0 1-22.741334 8.490667 35.584 35.584 0 0 1-25.856-10.965334l-85.248-91.605333c-0.512-0.512-0.512-0.981333-1.024-1.493333-44.458667 23.893333-95.104 41.813333-153.472 51.797333l35.626667 104.533333a32.426667 32.426667 0 0 1-21.674667 41.813334 40.704 40.704 0 0 1-10.88 1.493333 34.133333 34.133333 0 0 1-32.554666-22.869333l-39.765334-116.522667a1012.650667 1012.650667 0 0 1-166.912-0.981333l-38.229333 111.530666a34.133333 34.133333 0 0 1-32.554667 22.869334 40.704 40.704 0 0 1-10.88-1.493334c-18.090667-5.973333-27.904-24.362667-21.674666-41.813333l34.602666-101.077333c-62.506667-12.458667-112.64-31.872-153.472-56.277334l-90.965333 97.621334a33.962667 33.962667 0 0 1-25.813333 10.965333 34.602667 34.602667 0 0 1-22.741334-8.490667c-13.952-12.458667-15.488-33.365333-2.56-46.805333l86.272-93.098667c-31.530667-24.917333-57.344-52.778667-81.152-80.64a32.426667 32.426667 0 0 1 5.205334-46.848 35.370667 35.370667 0 0 1 48.554666 4.992c59.434667 70.229333 141.056 166.826667 392.192 166.826667 254.762667 0 342.101333-93.141333 385.536-162.858667a34.773333 34.773333 0 0 1 47.018667-11.434666c16.512 9.472 21.674667 29.866667 11.861333 45.312a366.976 366.976 0 0 1-84.736 94.122666l80.64 86.101334z" fill="#8590a6" p-id="1174"></path></svg>`
  19.  
  20. // 图标-眼睛开
  21. const iconEyeOpen = `<svg t="1600160150452" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1307" width="200" height="200"><path d="M0 0h853.333333v853.333333H0z" fill="#8590a6" opacity=".01" p-id="1308"></path><path d="M512 341.333333a170.666667 170.666667 0 1 1 0 341.333334 170.666667 170.666667 0 0 1 0-341.333334z m0 64a106.666667 106.666667 0 1 0 0 213.333334 106.666667 106.666667 0 0 0 0-213.333334z" fill="#8590a6" p-id="1309"></path><path d="M513.664 170.666667c143.658667 0 299.52 91.221333 467.626667 273.664l14.08 15.402666a85.333333 85.333333 0 0 1-0.725334 114.986667C823.253333 760.448 662.912 853.333333 513.706667 853.333333c-145.066667 0-301.44-88.106667-469.162667-264.32l-14.421333-15.36a85.333333 85.333333 0 0 1-0.426667-115.626666C204.8 266.453333 366.165333 170.666667 513.664 170.666667z m0 64c-126.122667 0-272.554667 86.954667-436.778667 266.538666a21.333333 21.333333 0 0 0-2.56 25.472l2.389334 3.157334 14.122666 15.018666c156.8 164.736 298.325333 244.48 422.826667 244.48 128.213333 0 273.493333-84.138667 433.962667-258.048a21.333333 21.333333 0 0 0 2.773333-25.301333l-2.346667-3.157333-13.781333-15.146667C777.088 317.141333 636.16 234.666667 513.664 234.666667z" fill="#8590a6" p-id="1310"></path></svg>`
  22.  
  23. ;(function () {
  24.   'use strict'
  25.  
  26.   // 添加自定义样式
  27.   const userStyle = document.createElement('style')
  28.   userStyle.innerHTML = createUserStyle()
  29.   $('head').append(userStyle)
  30.   $('html').attr('data-plus', 'true')
  31.  
  32.   // 添加插件按钮
  33.   const $plusButton = $(
  34.     `<div class="switch-plus-btn"><div class="switch-plus-icon">${iconEyeClose}</div></div>`
  35.   )
  36.   $plusButton.click(() => {
  37.     if ($('html').attr('data-plus') == 'true') {
  38.       $('html').attr('data-plus', 'false')
  39.       $('.switch-plus-icon').html(iconEyeClose)
  40.       $.cookie('plusMode', 0, { expires: 365, path: '/', domain: 'zhihu.com' })
  41.     } else {
  42.       $('html').attr('data-plus', 'true')
  43.       $('.switch-plus-icon').html(iconEyeOpen)
  44.       $.cookie('plusMode', 1, { expires: 365, path: '/', domain: 'zhihu.com' })
  45.     }
  46.   })
  47.   if ($('.switch-plus-btn').length === 0) {
  48.     $('body').append($plusButton)
  49.   }
  50.   if (Number($.cookie('plusMode')) === 1) {
  51.     $('html').attr('data-plus', 'true')
  52.     $('.switch-plus-icon').html(iconEyeOpen)
  53.   } else {
  54.     $('html').attr('data-plus', 'false')
  55.     $('.switch-plus-icon').html(iconEyeClose)
  56.   }
  57.  
  58.   // 外站地址直接跳转
  59.   const webHost = window.location.host
  60.   if (webHost === 'link.zhihu.com') {
  61.     const rule = /target=(.+?)(&|$)/
  62.     const regRet = location.search.match(rule)
  63.     if (regRet && regRet.length === 3) {
  64.       location.href = decodeURIComponent(regRet[1])
  65.     }
  66.   }
  67.  
  68. })()
  69.  
  70. function createUserStyle() {
  71.   return `
  72.   .switch-plus-btn {
  73.     position: fixed;
  74.     right: 40px;
  75.     top: 15px;
  76.     cursor: pointer;
  77.     font-size: 12px;
  78.     z-index: 999;
  79.   }
  80.   .switch-plus-icon svg {
  81.     width: 24px;
  82.     height: 24px;
  83.   }
  84.   /* 滚动条优化 */
  85.   html[data-plus=true] .Favlists-items::-webkit-scrollbar,
  86.   html[data-plus=true] .highlight pre::-webkit-scrollbar,
  87.   html[data-plus=true] body::-webkit-scrollbar,
  88.   html[data-plus=true] .CommentListV2::-webkit-scrollbar {
  89.     width: 4px;
  90.     height: 4px;
  91.   }
  92.   html[data-plus=true] .Favlists-items::-webkit-scrollbar-thumb,
  93.   html[data-plus=true] .highlight pre::-webkit-scrollbar-thumb,
  94.   html[data-plus=true] body::-webkit-scrollbar-thumb,
  95.   html[data-plus=true] .CommentListV2::-webkit-scrollbar-thumb {
  96.     background-color: rgb(133 144 166 / 0.2);
  97.     transition: 0.2s;
  98.     border-radius: 2px;
  99.   }
  100.   html[data-plus=true] .Favlists-items::-webkit-scrollbar-track,
  101.   html[data-plus=true] .highlight pre::-webkit-scrollbar-track,
  102.   html[data-plus=true] body::-webkit-scrollbar-track,
  103.   html[data-plus=true] .CommentListV2::-webkit-scrollbar-track {
  104.       background-color: rgba(0,0,0,0);
  105.   }
  106.   html[data-plus=true] .Favlists-items::-webkit-scrollbar-thumb,
  107.   html[data-plus=true] .highlight pre::-webkit-scrollbar-thumb,
  108.   html[data-plus=true] body::-webkit-scrollbar-thumb,
  109.   html[data-plus=true] .CommentListV2:hover::-webkit-scrollbar-thumb {
  110.       background-color: rgb(133 144 166 / 0.6);
  111.   }
  112.   /* 隐藏界面 */
  113.   html[data-plus=true] .SearchSideBar,
  114.   html[data-plus=true] .SearchTabs,
  115.   html[data-plus=true] .PostIndex-Contributions,
  116.   html[data-plus=true] .Recommendations-Main,
  117.   html[data-plus=true] .ColumnPageHeader,
  118.   html[data-plus=true] .Topstory-mainColumn .TopstoryItem--advertCard,
  119.   html[data-plus=true] .TopstoryMain .TopstoryItem--advertCard,
  120.   html[data-plus=true] .RichText-MCNLinkCardContainer,
  121.   html[data-plus=true] .Reward,
  122.   html[data-plus=true] .ContentItem-meta .AuthorInfo + .Labels,
  123.   html[data-plus=true] .QuestionHeader,
  124.   html[data-plus=true] .Question-sideColumn,
  125.   html[data-plus=true] .GlobalSideBar,
  126.   html[data-plus=true] .AppHeader {
  127.     display: none !important;
  128.   }
  129.   /* 布局调整 */
  130.   html[data-plus=true] .SearchMain,
  131.   html[data-plus=true] .Question-mainColumn,
  132.   html[data-plus=true] .Topstory-mainColumn {
  133.     margin-left: auto;
  134.     margin-right: auto;
  135.   }
  136.   /* 全局背景色 */
  137.   html[data-plus=true] body {
  138.     background: #333333;
  139.   }
  140.   /* 卡片背景色 & 内容工具栏 */
  141.   html[data-plus=true] .Post-content {
  142.     background: transparent;
  143.   }
  144.   html[data-plus=true] .HotListNavEditPad {
  145.     background: #c9cdd8;
  146.     border-color: #b6b8c3;
  147.   }
  148.   html[data-plus=true] .HotListNav-item--deleteButton {
  149.     background: #a4adb3;
  150.   }
  151.   html[data-plus=true] .RichContent-actions.is-fixed,
  152.   html[data-plus=true] .Post-RichTextContainer,
  153.   html[data-plus=true] .ProfileHeader-wrapper,
  154.   html[data-plus=true] .CommentsV2-withPagination,
  155.   html[data-plus=true] .CommentEditorV2-inputWrap--active,
  156.   html[data-plus=true] .CommentsV2-footer,
  157.   html[data-plus=true] .CommentListV2-header-divider,
  158.   html[data-plus=true] .Topbar,
  159.   html[data-plus=true] .Modal-inner,
  160.   html[data-plus=true] .InputLike,
  161.   html[data-plus=true] .HotItem,
  162.   html[data-plus=true] .HotListNav-wrapper,
  163.   html[data-plus=true] .ContentItem-actions,
  164.   html[data-plus=true] .Card {
  165.     background: #bfc2ca;
  166.   }
  167.   html[data-plus=true] .Post-Main .Post-Title {
  168.     color: #bfc2ca;
  169.   }
  170.   html[data-plus=true] .Post-Header {
  171.     margin-bottom: 20px;
  172.   }
  173.   html[data-plus=true] .Post-RichTextContainer {
  174.     box-sizing: border-box;
  175.     padding: 20px;
  176.     border-radius: 8px;
  177.   }
  178.   html[data-plus=true] .RichContent-actions {
  179.     padding-left: 10px;
  180.   }
  181.   html[data-plus=true] .Highlight em {
  182.     color: #5f649c;
  183.   }
  184.   /* 点赞按钮 */
  185.   html[data-plus=true] .Post-SideActions button.like .Post-SideActions-icon,
  186.   html[data-plus=true] .Tag,
  187.   html[data-plus=true] .HotListNav-item,
  188.   html[data-plus=true] .VoteButton {
  189.     background: rgb(138 138 138 / 10%);
  190.     color: #8590a6;
  191.   }
  192.   html[data-plus=true] .HotListNav-item.is-active {
  193.     background: rgb(32 43 74 / 10%);
  194.     color: #8590a6;
  195.   }
  196.   html[data-plus=true] .Button--blue {
  197.     color: #7d94a9;
  198.     border-color: #8fa5b9;
  199.   }
  200.   html[data-plus=true] .VoteButton.is-active {
  201.     background: rgb(51 57 125 / 10%);
  202.     color: #8590a6;
  203.   }
  204.   html[data-plus=true] .Button--primary.Button--blue {
  205.     background: rgb(191 194 202);
  206.     color: #50638a;
  207.   }
  208.   html[data-plus=true] .Modal-closeIcon {
  209.     fill: #8590a6;
  210.   }
  211.   html[data-plus=true] .Post-SideActions button.like {
  212.     color: #8590a6;
  213.   }
  214.   /* tab栏 & 卡片 */
  215.   html[data-plus=true] .Favlists-item,
  216.   html[data-plus=true] .CommentsV2-pagination,
  217.   html[data-plus=true] .CommentsV2-withPagination,
  218.   html[data-plus=true] .CommentEditorV2-inputWrap--active,
  219.   html[data-plus=true] .NestComment .NestComment--child:after,
  220.   html[data-plus=true] .NestComment--rootComment:after,
  221.   html[data-plus=true] .NestComment:not(:last-child):after,
  222.   html[data-plus=true] .Topbar,
  223.   html[data-plus=true] .List-item+.List-item:after,
  224.   html[data-plus=true] .List-header,
  225.   html[data-plus=true] .Topstory--old .HotItem:not(:first-child),
  226.   html[data-plus=true] .Topstory--old .HotListNav,
  227.   html[data-plus=true] .Topstory-mainColumnCard .Card:not(.Topstory-tabCard),
  228.   html[data-plus=true] .Topstory-tabs {
  229.     border-color: rgb(181 185 197);
  230.   }
  231.   html[data-plus=true] .TopstoryTabs-link {
  232.     color: #8590a6;
  233.   }
  234.   html[data-plus=true] .TopstoryTabs-link.is-active {
  235.     color: #333333;
  236.     font-weight: 600;
  237.   }
  238.   /* 查看更多 */
  239.   html[data-plus=true] .ContentItem-more {
  240.     color: rgb(106 114 119);
  241.   }
  242.   /* 卡片封面 & 标识 */
  243.   html[data-plus=true] .css-18biwo,
  244.   html[data-plus=true] .Avatar,
  245.   html[data-plus=true] .HotItem-img,
  246.   html[data-plus=true] .RichContent-cover {
  247.     opacity: 0.45;
  248.   }
  249.   /* 返回顶部按钮 */
  250.   html[data-plus=true] .CornerButton {
  251.     background: #484b54;
  252.   }
  253.   /* 热度序号 */
  254.   html[data-plus=true] .HotItem-hot {
  255.     color: #4d72ab;
  256.   }
  257.   html[data-plus=true] .HotItem-label {
  258.     background-color: #4d72ab !important;
  259.   }
  260.   /* 没有更多 */
  261.   html[data-plus=true] .HotList-end {
  262.     color: #47494c;
  263.   }
  264.   html[data-plus=true] .HotList-end:after, .HotList-end:before {
  265.     background-color: #47494c;
  266.   }
  267.   /* 评论输入框 */
  268.   html[data-plus=true] .ZVideoLinkCard-info,
  269.   html[data-plus=true] .CommentsV2-footer {
  270.     background-color: #b9beca;
  271.   }
  272.   html[data-plus=true] .CommentsV2-footer {
  273.     border-color: #b6b9c1;
  274.   }
  275.   html[data-plus=true] .CommentEditorV2-inputWrap {
  276.     border-color: #b6b9c1;
  277.     background-color: #b9beca;
  278.   }
  279.   `
  280. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址