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

前言

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

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

核心逻辑

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

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

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

css 复制代码
display: none;

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

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

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

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

js 复制代码
// ==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)
})()

最终效果

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

总结

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

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

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

相关推荐
IT_陈寒1 小时前
Vue这个特性差点让我加班到凌晨,谁懂啊
前端·人工智能·后端
kyriewen1 小时前
我让AI改一个bug——它偷偷动了5个我没让它碰的地方
前端·javascript·ai编程
小白巨白1 小时前
玫瑰花园管理系统:AI识病+3D可视化,一套面向中小型玫瑰种植园的数字化管理工具
css·人工智能·计算机视觉·html5
遇乐的果园2 小时前
前端学习笔记-vue加载渲染优化
前端·笔记·学习
用户985033593282 小时前
OpenLayers 热力图从原理到 Vue 组件一键接入
前端
颜酱2 小时前
01 | 骨架搭建:FastAPI + Vue 跑通第一个 SSE 流式问答
前端·人工智能·后端
hoLzwEge2 小时前
解码 IDE 智能提示:jsconfig.json 辅助开发全攻略
前端·前端框架
leoZ2312 小时前
记忆系统与 Agent 定制完全指南(四):自定义 Agent 开发(一)
前端·chrome
慧一居士3 小时前
Element Plus 按需引入的配置使用说明和完整示例
前端·vue.js
程序员黑豆3 小时前
鸿蒙应用开发实战:从零学会自定义组件
前端·华为·harmonyos