知乎手机网页版

知乎手机网页版,用PC模式,去赞按钮,改元素宽度适应手机

  1. // ==UserScript==
  2. // @name 知乎手机网页版
  3. // @namespace http://tampermonkey.net/
  4. // @version 2024/12/18.1
  5. // @description 知乎手机网页版,用PC模式,去赞按钮,改元素宽度适应手机
  6. // @author longlongloveyou
  7. // @match *://www.zhihu.com/*
  8. // @grant none
  9. // @license longlongloveyou
  10. // ==/UserScript==
  11. (function() {
  12. 'use strict';
  13. //屏蔽某些元素
  14. var idlist=[
  15. '.Card.TopstoryItem.TopstoryItem--advertCard.TopstoryItem-isRecommend', //广告?
  16. '.AppHeader-inner.css-ellrqg',
  17. '.css-1qyytj7',
  18. '.AppHeader-inner.css-11p8nt5',
  19. '.Button.VoteButton',
  20. '.Zi.Zi--TriangleDown',
  21. 'button[aria-live="polite"]',
  22. '.Button.Menu-item.ContentItem-action.Button--plain',
  23. '.Button.VoteButton.VoteButton--up.FEfUrdfMIKpQDJDqkjte',
  24. '.Popover.ShareMenu.ContentItem-action',
  25. '.Popover.ContentItem-action',
  26. '.CornerButtons',
  27. 'div[id=_scroll-padding-polyfill_]'
  28. ]
  29. var blockid=[
  30. {'.KfeCollection-AnswerTopCard-Container':5}, //盐选回答
  31. {'[class*="AuthorInfo-badgeText"]':2}, //作者简介
  32. ]
  33. hide(idlist);
  34. var backcolor='#ebedf0'; //页面默认颜色
  35. // 使用 MutationObserver 监听 DOM 变化,确保动态加载的元素也被隐藏
  36. var observer = new MutationObserver(function(mutations) {
  37. document.querySelectorAll('div').forEach(div => {div.style.backgroundColor = backcolor;})
  38. block(blockid); //隐藏动态加载的作者、盐选
  39. mutations.forEach(function(mutation) {
  40. // 只有当子节点被添加时,我们才进行隐藏处理
  41. if (mutation.type === 'childList') {
  42. hide(idlist); // 再次调用 hide 函数,隐藏新加载的元素
  43. }
  44. });
  45. });
  46. // 配置 MutationObserver 监听 DOM 树的变化
  47. var config = { childList: true, subtree: true };
  48. // 选取目标节点,通常是 body 元素
  49. var targetNode = document.body;
  50. // 启动观察器
  51. observer.observe(targetNode, config);
  52. var display_width = document.documentElement.clientWidth-10;
  53. var total_width = display_width-100;
  54. var padding = Math.round(display_width/120);
  55. var nod = document.createElement('style');
  56. var str=
  57. 'div.Topstory-container, \n'+ //知乎主页主框
  58. 'div.Topstory-mainColumn, \n'+ //知乎主页左边文章列表框
  59. 'div.Topstory-mainColumn img._1sezuny, \n'+ //知乎主页文章列表图片
  60. 'div.Topstory-mainColumn video, \n'+ //知乎主页文章列表视频
  61. 'div.QuestionHeader-main, \n'+ //知乎答案顶栏
  62. 'div.Question-mainColumn, \n'+ //知乎答案左边文章内容
  63. 'div.css-78p1r9, header.Post-Header, div.Post-RichTextContainer,\n'+ //知乎专栏文章
  64. 'div.Post-Sub.Post-NormalSub>div, \n'+ //知乎专栏评论区
  65. 'div.css-1cqr2ue, \n'+ //知乎答案评论回复
  66. 'div.Search-container, div.SearchMain \n'+ //知乎搜索结果列表
  67. '{width:' +display_width+ 'px !important;} \n'+
  68. 'div.Topstory-container, \n'+ //知乎主页主框
  69. 'div.Pc-feedAd-container, div.Pc-feedAd-card-content-detail, \n'+ //知乎主页广告卡片
  70. 'div.QuestionHeader-main, \n'+ //知乎答案顶栏
  71. 'div.Question-main, \n'+ //知乎答案包括右边栏
  72. 'div.QuestionAnswer-content, \n'+ //知乎答案页主答案
  73. 'div.List-item, \n'+ //知乎答案页后续答案
  74. 'div.css-78p1r9, header.Post-Header, div.Post-RichTextContainer, \n'+ //知乎专栏
  75. 'div.Search-container, div.List-item, ContentItem-actions \n'+ //知乎搜索结果列表
  76. '{padding-left:' +padding+ 'px !important; \n'+
  77. ' padding-right:' +padding+ 'px !important; \n'+
  78. ' margin-left:2px !important; \n'+
  79. ' margin-right:0px !important;} \n'+
  80. 'div.Pc-feedAd-card-content \n'+ //知乎主页广告外框
  81. '{flex-direction:column;} \n'+
  82. 'div.Question-main \n'+ //知乎答案包括右边栏
  83. '{width:' +total_width+ 'px;} \n'+
  84. 'div.Post-content \n'+ //知乎专栏?
  85. '{min-width:' +display_width+ 'px !important;} \n'+
  86. 'div.css-1aq8hf9 {width:' +total_width + 'px !important;} \n'+ //评论框的宽度
  87. 'button[aria-label="关闭"] {left:20px;top:100px;background-color:#4f4f4f}; \n'+ //评论框的关闭按钮
  88. 'div.RichContent-inner \n'+ //知乎搜索结果
  89. '{overflow:hidden !important;} \n'+
  90. 'Button.css-1x9te0t \n'+ //知乎回答评论回复关闭按钮
  91. '{background:teal; right:8px; padding:0px} \n'+
  92. 'div.Card.TopstoryItem.TopstoryItem-isRecommend, \n'+ //知乎主页文章列表卡片
  93. '{padding-left:' +padding+ 'px !important; \n'+
  94. ' padding-right:' + '0px !important; \n'+
  95. ' margin-left:0px !important; \n'+
  96. ' background-color:#b6a8c3 !important; \n'+
  97. ' margin-right:0px !important;} \n'+
  98. '{width:' +display_width+ 'px !important;} \n'+
  99. 'span[itemprop="text"] p \n'+
  100. '{font-size:17px !important;} \n'+
  101. 'div {background:' + backcolor + ';} \n'+
  102. 'Button.Button.Menu-item.ContentItem-action.Button--plain,\n'+
  103. '{width:' +50+ 'px !important;} \n'+
  104. '[class*="Button ContentItem-action"] {left:30px;padding-left:30px !important;} \n'+ //评论按钮稍往右移
  105. 'span.RichContent-collapsedText,div.css-p1wstz {left:20px;position:absolute;padding-left:20px; left:10px;padding-right:10px; !importan} \n' //收起按钮放左边
  106. ;
  107. nod.innerHTML=str;
  108. document.getElementsByTagName('head')[0].appendChild(nod);
  109. const colors = ['#f4d2c3', '#9bb5da', '#9bdaaf', '#ebedf0'];
  110. const text=['开心橙','忧郁蓝','苹果绿','灰太郎']
  111. addbutton(colors);
  112. changecolor(colors);
  113. void(0);
  114. function addbutton(colors){
  115. const buttonContainer = document.createElement('div');
  116. buttonContainer.style.position = 'fixed';
  117. buttonContainer.style.top = '10px';
  118. buttonContainer.style.width = display_width-50;
  119. buttonContainer.style.left = '15px';
  120. buttonContainer.style.zIndex = '9999';
  121. buttonContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
  122. buttonContainer.style.border = '1px solid #ccc';
  123. buttonContainer.style.padding = '3px';
  124. buttonContainer.style.borderRadius = '1px';
  125. document.body.appendChild(buttonContainer);
  126. var i=1
  127. colors.forEach(color => {
  128. const button = document.createElement('button');
  129. //button.textContent = color.charAt(0).toUpperCase() + color.slice(1); // 设置按钮文本
  130. button.textContent=text[i-1]
  131. button.style.margin = '5px';
  132. button.style.left = '5px';
  133. button.style.padding = '5px 10px';
  134. button.style.border = '1px solid #000';
  135. button.style.cursor = 'pointer';
  136. button.id=i
  137. buttonContainer.appendChild(button); // 将按钮添加到容器中
  138. i++;
  139. })
  140. }
  141. function block(idlist) { //{'.KfeCollection-AnswerTopCard-Container':5},
  142. idlist.forEach(function (item) {
  143. for (var selector in item) {
  144. var levels = item[selector];
  145. var contentItemActions = document.querySelectorAll(selector);
  146. contentItemActions.forEach(function (element) {
  147. var currentElement = element;
  148. for (var i = 0; i < levels; i++) {
  149. if (currentElement.parentElement) {
  150. currentElement = currentElement.parentElement;
  151. if (currentElement.tagName === 'DIV') {
  152. if (levels!=5){ //让盐选闪烁
  153. currentElement.style.display = 'none';
  154. }else{ // 让盐选闪烁3次再隐藏
  155. let blinkCount = 0;
  156. const interval = setInterval(() => {
  157. blinkCount++;
  158. if (blinkCount <= 6) { // 切换可见性(奇数次隐藏,偶数次显示)
  159. div.style.backgroundColor='#888888';
  160. div.style.visibility = (div.style.visibility === 'hidden') ? 'visible' : 'hidden';
  161. } else { // 闪烁结束后清除定时器并隐藏元素
  162. clearInterval(interval);
  163. div.style.display = 'none';
  164. }
  165. }, 200); // 每次闪烁间隔 200 毫秒
  166. }
  167. }
  168. } else {
  169. break; // 如果没有父级了,停止查找
  170. }
  171. }
  172. });
  173. }
  174. });
  175. }
  176. function hide(idlist) {
  177. idlist.forEach(function(ids) {
  178. var contentItemActions = document.querySelectorAll(ids);
  179. contentItemActions.forEach(function(element) {
  180. element.style.display = 'none';
  181. });
  182. });
  183. }
  184. function changecolor(colors){
  185. // 定义按钮数据和功能
  186. var i=1
  187. colors.forEach(color => {
  188. var button = document.getElementById(i);
  189. button.onclick = () => {
  190. // 改变所有 div 的背景颜色
  191. document.querySelectorAll('div').forEach(div => {
  192. div.style.backgroundColor = color;
  193. backcolor=color;
  194. });
  195. };
  196. i++
  197. });
  198. }
  199. })();