您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
改善知乎在宽大屏幕上的阅读体验
- // ==UserScript==
- // @name ZhiHu Style Adjust
- // @namespace https://www.zhihu.com/
- // @version 0.1
- // @description 改善知乎在宽大屏幕上的阅读体验
- // @author DistantSaviour_caofs
- // @match https://www.zhihu.com/*
- // @license MIT
- // @grant none
- // ==/UserScript==
- (function () {
- 'use strict';
- let fontFamily = localStorage.getItem('font-family') || 'sans';
- let fontSize = Number(localStorage.getItem('font-size')) || 20;
- //右侧div是否隐藏,默认是不隐藏的
- let rightDivVisible = false;
- let customFont = localStorage.getItem('custom-font') || `'方正悠宋 GBK 508R', serif`
- //字体格式
- function fontFamilyPropertyValue() {
- if (fontFamily === 'custom'){
- return customFont;
- }
- if (fontFamily === 'serif'){
- return `'Source Serif', 'Noto Serif', 'Source Han Serif SC', 'Noto Serif CJK SC', serif`;
- }else{
- return `'Source Sans', 'Noto Sans', 'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif`;
- }
- }
- //字体大小
- function fontSizePropertyValue() {
- return `${fontSize}px`;
- }
- // language=css
- const css = `
- :root {
- --font-family: ${fontFamilyPropertyValue()};
- --font-size: ${fontSizePropertyValue()};
- font-family: var(--font-family) !important;
- font-size: var(--font-size) !important;
- line-height: 2 !important;
- }
- body {
- font-family: unset;
- line-height: unset;
- font-size: unset;
- }
- .Button {
- font-size: unset;
- }
- .ContentItem-title{
- font-size: unset;
- }
- div.CommentItemV2{
- font-size: unset;
- }
- /* Control */
- #control-button {
- position: fixed;
- top: 80px;
- right: 0;
- width: 48px;
- height: 48px;
- font-size: 18px;
- font-family: sans-serif;
- line-height: 48px;
- text-align: center;
- background: #FFFFFF;
- border: 1px solid #CCCCCC;
- border-right: 0;
- border-top-left-radius: 6px;
- border-bottom-left-radius: 6px;
- cursor: pointer;
- user-select: none;
- }
- #control-panel {
- position: fixed;
- top: 120px;
- left: 50%;
- width: 320px;
- margin-left: -160px;
- font-size: 16px;
- font-family: sans-serif;
- display: none;
- background: #FFFFFF;
- border: 1px solid #CCCCCC;
- user-select: none;
- }
- #control-panel .control-title {
- display: flex;
- height: 40px;
- border-bottom: 1px solid #CCCCCC;
- }
- #control-panel .control-title-text {
- line-height: 40px;
- flex: 1;
- padding-left: 8px;
- }
- #control-panel #control-close {
- width: 40px;
- height: 40px;
- line-height: 40px;
- text-align: center;
- font-size: 24px;
- border-left: 1px solid #CCCCCC;
- cursor: pointer;
- }
- #control-panel .control-font-family-item {
- height: 32px;
- line-height: 32px;
- text-align: center;
- margin: 8px;
- border: 1px solid #CCCCCC;
- cursor: pointer;
- }
- #control-panel #control-font-family-custom {
- margin-bottom: 0;
- }
- #control-panel #control-font-family-custom-input {
- margin-top: 0;
- border-top: 0;
- cursor: unset;
- }
- #control-panel #control-font-family-custom-input input {
- font-family: monospace;
- font-size: 0.8em;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- padding: 0 8px;
- margin: 0;
- border: 0;
- }
- #control-panel .control-font-size {
- height: 32px;
- line-height: 32px;
- margin: 8px;
- border: 1px solid #CCCCCC;
- display: flex;
- }
- #control-panel .control-font-size-action {
- height: 32px;
- width: 32px;
- text-align: center;
- cursor: pointer;
- }
- #control-panel #control-font-size-decrease {
- border-right: 1px solid #CCCCCC;
- }
- #control-panel #control-font-size-increase {
- border-left: 1px solid #CCCCCC;
- }
- #control-panel #control-font-size-value {
- flex: 1;
- text-align: center;
- }
- `;
- function addStyles() {
- // 知乎主页
- if(document.getElementsByClassName("Topstory-container")[0]){
- document.getElementsByClassName("Topstory-container")[0].style.setProperty("width","90%");
- //Topstory-mainColumn
- document.getElementsByClassName("Topstory-mainColumn")[0].style.setProperty("width","70%");
- }else{//知乎问题主页
- //Question-main
- document.getElementsByClassName("Question-main")[0].style.setProperty("width","90%");
- //ListShortcut
- document.getElementsByClassName("Question-mainColumn")[0].style.width='90%';
- window.onload = function(){
- document.getElementsByClassName("ContentItem-actions Sticky RichContent-actions is-fixed is-bottom")[0].style.width='66%';
- }
- }
- const style = document.createElement('style');
- style.appendChild(document.createTextNode(css));
- document.head.appendChild(style);
- }
- function addControlPanel() {
- const panel = document.createElement('div');
- panel.className = 'control-addon';
- panel.id = 'control-panel';
- // language=html
- panel.innerHTML = `
- <div class="control-title">
- <span class="control-title-text">阅读设置</span>
- <div id="control-close">×</div>
- </div>
- <div class="control-font-family">
- <div class="control-font-family-item" id="control-div-right-visible">隐藏右侧列表</div>
- <div class="control-font-family-item" id="control-font-family-serif">有衬线(思源宋体)</div>
- <div class="control-font-family-item" id="control-font-family-sans">无衬线(思源黑体)</div>
- <div class="control-font-family-item" id="control-font-family-custom">自定义</div>
- <div class="control-font-family-item" id="control-font-family-custom-input">
- <input type="text" />
- </div>
- </div>
- <div class="control-font-size">
- <div class="control-font-size-action" id="control-font-size-decrease">-</div>
- <span id="control-font-size-value">${fontSizePropertyValue()}</span>
- <div class="control-font-size-action" id="control-font-size-increase">+</div>
- </div>
- `;
- const button = document.createElement('div');
- button.className = 'control-addon';
- button.id = 'control-button';
- button.textContent = 'Aa';
- document.body.appendChild(panel);
- document.body.appendChild(button);
- function updateFontSize(delta) {
- fontSize += delta;
- localStorage.setItem('font-size', fontSize);
- const propertyValue = fontSizePropertyValue();
- document.documentElement.style.setProperty('--font-size', propertyValue);
- document.getElementById('control-font-size-value').innerText = propertyValue;
- }
- function updateFontFamily(family) {
- fontFamily = family;
- localStorage.setItem('font-family', fontFamily);
- document.documentElement.style.setProperty('--font-family', fontFamilyPropertyValue());
- document.querySelectorAll('.control-font-family-item').forEach(el => el.style.background = 'none');
- document.getElementById(`control-font-family-${family}`).style.background = '#CCCCCC';
- }
- //隐藏右侧div
- function visibleRightDiv(){
- if(rightDivVisible){
- rightDivVisible = false;
- if(document.getElementsByClassName("Topstory-container")[0]){//主页
- document.getElementsByClassName("GlobalSideBar GlobalSideBar--old")[0].hidden=rightDivVisible;
- //Topstory-mainColumn
- document.getElementsByClassName("Topstory-mainColumn")[0].style.setProperty("width","70%");
- }else{//问题页面
- document.getElementsByClassName("Question-sideColumn Question-sideColumn--sticky")[0].hidden=rightDivVisible;
- //Topstory-mainColumn
- document.getElementsByClassName("Question-mainColumn")[0].style.width='90%';
- document.getElementsByClassName("ContentItem-actions Sticky RichContent-actions is-fixed is-bottom")[0].style.width='67%';
- }
- document.getElementById("control-div-right-visible").innerText="隐藏右侧列表";
- }else {
- rightDivVisible = true;
- if(document.getElementsByClassName("Topstory-container")[0]){//主页
- document.getElementsByClassName("GlobalSideBar GlobalSideBar--old")[0].hidden=rightDivVisible;
- //Topstory-mainColumn
- document.getElementsByClassName("Topstory-mainColumn")[0].style.setProperty("width","100%");
- }else{//问题页面
- document.getElementsByClassName("Question-sideColumn Question-sideColumn--sticky")[0].hidden=rightDivVisible;
- //Topstory-mainColumn
- document.getElementsByClassName("Question-mainColumn")[0].style.width='100%';
- //ContentItem-actions Sticky RichContent-actions is-fixed is-bottom
- document.getElementsByClassName("ContentItem-actions Sticky RichContent-actions is-fixed is-bottom")[0].style.width='90%';
- }
- document.getElementById("control-div-right-visible").innerText="显示右侧列表";
- }
- }
- updateFontSize(0);
- updateFontFamily(fontFamily);
- document.addEventListener('click', function (event) {
- let target = event.target;
- if (!target instanceof HTMLElement) {
- return;
- }
- switch (target.id) {
- case 'control-button':
- panel.style.display = 'block';
- break;
- case 'control-close':
- panel.style.display = 'none';
- break;
- case 'control-font-family-serif':
- updateFontFamily('serif');
- break;
- case 'control-font-family-sans':
- updateFontFamily('sans');
- break;
- case 'control-font-family-custom':
- updateFontFamily('custom');
- break;
- case 'control-font-size-decrease':
- updateFontSize(-1);
- break;
- case 'control-font-size-increase':
- updateFontSize(1);
- break;
- case 'control-div-right-visible':
- visibleRightDiv();
- break;
- }
- });
- const input = panel.querySelector('#control-font-family-custom-input input');
- input.value = customFont;
- input.addEventListener('input', function (event) {
- let target = event.target;
- if (!target instanceof HTMLInputElement) {
- return;
- }
- customFont = target.value;
- localStorage.setItem('custom-font', customFont);
- if (fontFamily === 'custom'){
- document.documentElement.style.setProperty('--font-family', customFont);
- }
- })
- }
- // 添加样式
- addStyles();
- //增加控制面板
- addControlPanel();
- })();
QingJ © 2025
镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址