☰

ZhiHu Style Adjust

改善知乎在宽大屏幕上的阅读体验

  1. // ==UserScript==
  2. // @name         ZhiHu Style Adjust
  3. // @namespace    https://www.zhihu.com/
  4. // @version      0.1
  5. // @description  改善知乎在宽大屏幕上的阅读体验
  6. // @author       DistantSaviour_caofs
  7. // @match        https://www.zhihu.com/*
  8. // @license      MIT
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     'use strict';
  14.  
  15.     let fontFamily = localStorage.getItem('font-family') || 'sans';
  16.     let fontSize = Number(localStorage.getItem('font-size')) || 20;
  17.     //右侧div是否隐藏，默认是不隐藏的
  18.     let rightDivVisible = false;
  19.  
  20.     let customFont = localStorage.getItem('custom-font') || `'方正悠宋 GBK 508R', serif`
  21.     //字体格式
  22.     function fontFamilyPropertyValue() {
  23.         if (fontFamily === 'custom'){
  24.             return customFont;
  25.         }
  26.         if (fontFamily === 'serif'){
  27.             return `'Source Serif', 'Noto Serif', 'Source Han Serif SC', 'Noto Serif CJK SC', serif`;
  28.         }else{
  29.             return `'Source Sans', 'Noto Sans', 'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif`;
  30.         }
  31.     }
  32.     //字体大小
  33.     function fontSizePropertyValue() {
  34.         return `${fontSize}px`;
  35.     }
  36.  
  37.     // language=css
  38.     const css = `
  39.         :root {
  40.             --font-family: ${fontFamilyPropertyValue()};
  41.             --font-size: ${fontSizePropertyValue()};
  42.  
  43.             font-family: var(--font-family) !important;
  44.             font-size: var(--font-size) !important;
  45.             line-height: 2 !important;
  46.         }
  47.  
  48.         body {
  49.             font-family: unset;
  50.             line-height: unset;
  51.             font-size: unset;
  52.         }
  53.  
  54.         .Button {
  55.             font-size: unset;
  56.         }
  57.         .ContentItem-title{
  58.             font-size: unset;
  59.         }
  60.  
  61.         div.CommentItemV2{
  62.             font-size: unset;
  63.         }
  64.  
  65.  
  66.  
  67.         /* Control */
  68.         #control-button {
  69.             position: fixed;
  70.             top: 80px;
  71.             right: 0;
  72.             width: 48px;
  73.             height: 48px;
  74.  
  75.             font-size: 18px;
  76.             font-family: sans-serif;
  77.             line-height: 48px;
  78.             text-align: center;
  79.  
  80.             background: #FFFFFF;
  81.             border: 1px solid #CCCCCC;
  82.             border-right: 0;
  83.             border-top-left-radius: 6px;
  84.             border-bottom-left-radius: 6px;
  85.             cursor: pointer;
  86.             user-select: none;
  87.         }
  88.  
  89.         #control-panel {
  90.             position: fixed;
  91.             top: 120px;
  92.             left: 50%;
  93.             width: 320px;
  94.             margin-left: -160px;
  95.  
  96.             font-size: 16px;
  97.             font-family: sans-serif;
  98.  
  99.             display: none;
  100.             background: #FFFFFF;
  101.             border: 1px solid #CCCCCC;
  102.             user-select: none;
  103.         }
  104.  
  105.         #control-panel .control-title {
  106.             display: flex;
  107.             height: 40px;
  108.             border-bottom: 1px solid #CCCCCC;
  109.         }
  110.  
  111.         #control-panel .control-title-text {
  112.             line-height: 40px;
  113.             flex: 1;
  114.             padding-left: 8px;
  115.         }
  116.  
  117.         #control-panel #control-close {
  118.             width: 40px;
  119.             height: 40px;
  120.             line-height: 40px;
  121.             text-align: center;
  122.             font-size: 24px;
  123.             border-left: 1px solid #CCCCCC;
  124.             cursor: pointer;
  125.         }
  126.  
  127.         #control-panel .control-font-family-item {
  128.             height: 32px;
  129.             line-height: 32px;
  130.             text-align: center;
  131.             margin: 8px;
  132.             border: 1px solid #CCCCCC;
  133.             cursor: pointer;
  134.         }
  135.  
  136.         #control-panel #control-font-family-custom {
  137.             margin-bottom: 0;
  138.         }
  139.  
  140.         #control-panel #control-font-family-custom-input {
  141.             margin-top: 0;
  142.             border-top: 0;
  143.             cursor: unset;
  144.         }
  145.  
  146.         #control-panel #control-font-family-custom-input input {
  147.             font-family: monospace;
  148.             font-size: 0.8em;
  149.             width: 100%;
  150.             height: 100%;
  151.             box-sizing: border-box;
  152.             padding: 0 8px;
  153.             margin: 0;
  154.             border: 0;
  155.         }
  156.  
  157.         #control-panel .control-font-size {
  158.             height: 32px;
  159.             line-height: 32px;
  160.             margin: 8px;
  161.             border: 1px solid #CCCCCC;
  162.             display: flex;
  163.         }
  164.  
  165.         #control-panel .control-font-size-action {
  166.             height: 32px;
  167.             width: 32px;
  168.             text-align: center;
  169.             cursor: pointer;
  170.         }
  171.  
  172.         #control-panel #control-font-size-decrease {
  173.             border-right: 1px solid #CCCCCC;
  174.         }
  175.  
  176.         #control-panel #control-font-size-increase {
  177.             border-left: 1px solid #CCCCCC;
  178.         }
  179.  
  180.         #control-panel #control-font-size-value {
  181.             flex: 1;
  182.             text-align: center;
  183.         }
  184.     `;
  185.  
  186.     function addStyles() {
  187.         //         知乎主页
  188.         if(document.getElementsByClassName("Topstory-container")[0]){
  189.             document.getElementsByClassName("Topstory-container")[0].style.setProperty("width","90%");
  190.             //Topstory-mainColumn
  191.             document.getElementsByClassName("Topstory-mainColumn")[0].style.setProperty("width","70%");
  192.         }else{//知乎问题主页
  193.             //Question-main
  194.             document.getElementsByClassName("Question-main")[0].style.setProperty("width","90%");
  195.             //ListShortcut
  196.             document.getElementsByClassName("Question-mainColumn")[0].style.width='90%';
  197.             window.onload = function(){
  198.                 document.getElementsByClassName("ContentItem-actions Sticky RichContent-actions is-fixed is-bottom")[0].style.width='66%';
  199.             }
  200.         }
  201.         const style = document.createElement('style');
  202.         style.appendChild(document.createTextNode(css));
  203.         document.head.appendChild(style);
  204.     }
  205.  
  206.  
  207.     function addControlPanel() {
  208.         const panel = document.createElement('div');
  209.         panel.className = 'control-addon';
  210.         panel.id = 'control-panel';
  211.         // language=html
  212.         panel.innerHTML = `
  213.             <div class="control-title">
  214.                 <span class="control-title-text">阅读设置</span>
  215.                 <div id="control-close">&times;</div>
  216.             </div>
  217.             <div class="control-font-family">
  218.                 <div class="control-font-family-item" id="control-div-right-visible">隐藏右侧列表</div>
  219.                 <div class="control-font-family-item" id="control-font-family-serif">有衬线（思源宋体）</div>
  220.                 <div class="control-font-family-item" id="control-font-family-sans">无衬线（思源黑体）</div>
  221.                 <div class="control-font-family-item" id="control-font-family-custom">自定义</div>
  222.                 <div class="control-font-family-item" id="control-font-family-custom-input">
  223.                     <input type="text" />
  224.                 </div>
  225.             </div>
  226.             <div class="control-font-size">
  227.                 <div class="control-font-size-action" id="control-font-size-decrease">－</div>
  228.                 <span id="control-font-size-value">${fontSizePropertyValue()}</span>
  229.                 <div class="control-font-size-action" id="control-font-size-increase">＋</div>
  230.             </div>
  231.         `;
  232.  
  233.         const button = document.createElement('div');
  234.         button.className = 'control-addon';
  235.         button.id = 'control-button';
  236.         button.textContent = 'Aa';
  237.  
  238.         document.body.appendChild(panel);
  239.         document.body.appendChild(button);
  240.  
  241.         function updateFontSize(delta) {
  242.             fontSize += delta;
  243.             localStorage.setItem('font-size', fontSize);
  244.  
  245.             const propertyValue = fontSizePropertyValue();
  246.             document.documentElement.style.setProperty('--font-size', propertyValue);
  247.             document.getElementById('control-font-size-value').innerText = propertyValue;
  248.         }
  249.  
  250.         function updateFontFamily(family) {
  251.             fontFamily = family;
  252.             localStorage.setItem('font-family', fontFamily);
  253.  
  254.             document.documentElement.style.setProperty('--font-family', fontFamilyPropertyValue());
  255.             document.querySelectorAll('.control-font-family-item').forEach(el => el.style.background = 'none');
  256.             document.getElementById(`control-font-family-${family}`).style.background = '#CCCCCC';
  257.         }
  258. //隐藏右侧div
  259.         function visibleRightDiv(){
  260.             if(rightDivVisible){
  261.                 rightDivVisible = false;
  262.                 if(document.getElementsByClassName("Topstory-container")[0]){//主页
  263.                     document.getElementsByClassName("GlobalSideBar GlobalSideBar--old")[0].hidden=rightDivVisible;
  264.                     //Topstory-mainColumn
  265.                     document.getElementsByClassName("Topstory-mainColumn")[0].style.setProperty("width","70%");
  266.                 }else{//问题页面
  267.                     document.getElementsByClassName("Question-sideColumn Question-sideColumn--sticky")[0].hidden=rightDivVisible;
  268.                     //Topstory-mainColumn
  269.                     document.getElementsByClassName("Question-mainColumn")[0].style.width='90%';
  270.                     document.getElementsByClassName("ContentItem-actions Sticky RichContent-actions is-fixed is-bottom")[0].style.width='67%';
  271.                 }
  272.                 document.getElementById("control-div-right-visible").innerText="隐藏右侧列表";
  273.             }else {
  274.                 rightDivVisible = true;
  275.                 if(document.getElementsByClassName("Topstory-container")[0]){//主页
  276.                     document.getElementsByClassName("GlobalSideBar GlobalSideBar--old")[0].hidden=rightDivVisible;
  277.                     //Topstory-mainColumn
  278.                     document.getElementsByClassName("Topstory-mainColumn")[0].style.setProperty("width","100%");
  279.                 }else{//问题页面
  280.                     document.getElementsByClassName("Question-sideColumn Question-sideColumn--sticky")[0].hidden=rightDivVisible;
  281.                     //Topstory-mainColumn
  282.                     document.getElementsByClassName("Question-mainColumn")[0].style.width='100%';
  283.                     //ContentItem-actions Sticky RichContent-actions is-fixed is-bottom
  284.                     document.getElementsByClassName("ContentItem-actions Sticky RichContent-actions is-fixed is-bottom")[0].style.width='90%';
  285.                 }
  286.                 document.getElementById("control-div-right-visible").innerText="显示右侧列表";
  287.             }
  288.         }
  289.  
  290.         updateFontSize(0);
  291.         updateFontFamily(fontFamily);
  292.  
  293.         document.addEventListener('click', function (event) {
  294.             let target = event.target;
  295.             if (!target instanceof HTMLElement) {
  296.                 return;
  297.             }
  298.  
  299.             switch (target.id) {
  300.                 case 'control-button':
  301.                     panel.style.display = 'block';
  302.                     break;
  303.                 case 'control-close':
  304.                     panel.style.display = 'none';
  305.                     break;
  306.                 case 'control-font-family-serif':
  307.                     updateFontFamily('serif');
  308.                     break;
  309.                 case 'control-font-family-sans':
  310.                     updateFontFamily('sans');
  311.                     break;
  312.                 case 'control-font-family-custom':
  313.                     updateFontFamily('custom');
  314.                     break;
  315.                 case 'control-font-size-decrease':
  316.                     updateFontSize(-1);
  317.                     break;
  318.                 case 'control-font-size-increase':
  319.                     updateFontSize(1);
  320.                     break;
  321.                 case 'control-div-right-visible':
  322.                     visibleRightDiv();
  323.                     break;
  324.  
  325.             }
  326.         });
  327.  
  328.         const input = panel.querySelector('#control-font-family-custom-input input');
  329.         input.value = customFont;
  330.         input.addEventListener('input', function (event) {
  331.             let target = event.target;
  332.             if (!target instanceof HTMLInputElement) {
  333.                 return;
  334.             }
  335.  
  336.             customFont = target.value;
  337.             localStorage.setItem('custom-font', customFont);
  338.  
  339.             if (fontFamily === 'custom'){
  340.                 document.documentElement.style.setProperty('--font-family', customFont);
  341.             }
  342.         })
  343.     }
  344.  
  345.     // 添加样式
  346.     addStyles();
  347.     //增加控制面板
  348.     addControlPanel();
  349. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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