掘金的广告越来越烦人了，悄悄把它隐藏起来🤫

allen_1998
7,542 阅读3分钟

前言

字节的新产品trae确实不错，但宣传有点太猛了，掘金都被铺天盖地的广告从清纯初恋变成了“花姑娘”。

经常逛掘金的兄弟们对于这点吐槽的都不少，连沸点老哥们摸鱼的心情都被影响了，不过咱们搞前端的，自然要路见不平拔键盘相助。

核心逻辑

首先看一下现在的样子，导航栏和文章开头都被插入了醒目的的牛皮癣：

image.png

顶部的广告还好，至少可以关闭，文章开头的广告是无法关闭的。

看到这里，熟悉前端的朋友肯定都会想到，只要一句：

display: none;

就能让页面元素“消失得无影无踪”。我们只需要写好样式，再用油猴脚本在每次打开页面时自动注入，就可以轻松搞定。

但是如果你以为只有这样，就大错特错了，你会发现导航栏竟然没有随着顶部广告的消失自动移回顶部，包括滚动时也一样😅

image.png

所以我们还需要通过检查元素，一一分析对应的样式，然后对其进行调整:

image.png

下面是完整的脚本代码 👇：

// ==UserScript==
// @name         掘金广告去除
// @namespace    https://greasyfork.org/en/scripts/532890-%E6%8E%98%E9%87%91%E5%B9%BF%E5%91%8A%E5%8E%BB%E9%99%A4
// @version      0.2
// @description  掘金的广告越来越烦人了，悄悄把它隐藏起来
// @author       Allen-1998
// @match        *://juejin.cn/*
// @license      MIT
// @downloadURL https://update.greasyfork.org/scripts/532890/%E6%8E%98%E9%87%91%E5%B9%BF%E5%91%8A%E5%8E%BB%E9%99%A4.user.js
// @updateURL https://update.greasyfork.org/scripts/532890/%E6%8E%98%E9%87%91%E5%B9%BF%E5%91%8A%E5%8E%BB%E9%99%A4.meta.js
// ==/UserScript==

;(function () {
  'use strict'

  const head = document.querySelector('head')
  const style = document.createElement('style')
  style.setAttribute('type', 'text/css')
  style.innerText = `
.top-banners-container,
.main-area.article-area > article > img {
  display: none !important;
}
.view-container .with-global-banner .index-nav-before,
.view-container .with-global-banner .team-content .list-header.sticky,
.view-container .with-global-banner .user-view .list-header.sticky,
.view-container .with-global-banner .view-nav {
  top: 5rem !important;
}
.header-with-banner,
.view-container .with-global-banner .index-nav-before.top,
.view-container .with-global-banner .team-content .list-header.sticky.top,
.view-container .with-global-banner .user-view .list-header.sticky.top,
.view-container .with-global-banner .view-nav.top {
  top: 0 !important;
}
`
  head.append(style)
})()

最终效果

image.png

可以看到牛皮癣已经都被屏蔽掉了，掘金又恢复了初恋那般清爽的样子。

总结

油猴脚本已上传至GreasyFork，点击链接即可一键安装，或者复制code手动添加到自己的油猴插件里。

掘金作为一个平台，需要不断的投入来维护、运营，有广告其实很正常，毕竟大家都是要吃饭的嘛，但过度的广告只会让掘金成为下一个CSDN。作为开发者，只能尽自己所能的维护我们心中那曾经的美好，让掘金保持我们最初相识时候的那个简洁、清爽的样子，想必这也是大部分人被吸引到这个平台的原因之一。

如果你觉得这篇文章对你有所帮助，不要忘记点赞、关注哦～有其他的建议或想法也可以在评论区中指出，欢迎讨论 :)

更新

--- 25.09.09

image.png

image.png

如图，发现广告相关样式涉及到的class比较多，如果每个都要手动重置一下的话很麻烦，所以想到了一种更简单的方式：

  // 要移除的类列表
  const classesToRemove = ['with-global-banner', 'header-with-banner']

  function handleRemove() {
    classesToRemove.forEach((cls) => {
      document.querySelectorAll(`.${cls}`).forEach((el) => {
        el.classList.remove(cls)
      })
    })
  }
  const observer = new MutationObserver(handleRemove)
  observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true, // 监听属性变化
    attributeFilter: ['class'], // 只监听 class
  })
  // 初始化立即执行一次
  handleRemove()

只需要监听dom变更，然后移除所有元素上的相关class，就可以保证始终呈现出没有广告banner时的样子，不熟悉相关api感兴趣的同学也可以查看相关文档链接。

by the way: 其实还有一种方案是可以通过油猴脚本拦截修改ajax的请求或响应内容来屏蔽广告，不得不说前端确实太自由了🫤，通过技术手段屏蔽广告本身也是下下策，不必要的重复推送广告，占据主要内容空间影响到使用体验才是不得不出此下策的根源，衷心希望掘金作为国内为数不多的技术平台还是会越来越好吧！

avatar
文章
阅读
粉丝