NoBilibili
// ==UserScript==
// @name NoBilibili
// @namespace https://bbs.tampermonkey.net.cn/
// @version 0.2.0
// @description try to take over the world!
// @author You
// @match https://www.bilibili.com/*
// @match https://search.bilibili.com/*
// ==/UserScript==
(function() {
'use strict';
let myhtml=`
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>好好学习，不要刷短视频，不要玩手机</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #fafafa;
font-family: 'Microsoft YaHei', sans-serif;
}
body::-webkit-scrollbar {
display: none;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background-color: #333;
color: #fff;
padding: 20px 0;
}
header h1 {
font-size: 32px;
text-align: center;
}
nav {
display: flex;
justify-content: center;
margin-top: 20px;
}
nav ul {
list-style: none;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
main {
margin-top: 40px;
}
.hero {
color: #333;
padding: 80px 0;
text-align: center;
}
.hero h2 {
font-size: 48px;
margin-bottom: 20px;
}
.hero p {
font-size: 24px;
margin-bottom: 40px;
}
.cta-btn {
background-color: #333;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-size: 18px;
}
.cta-btn:hover {
background-color: #555;
}
.featured {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 40px;
}
.article {
background-color: #fff;
padding: 20px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
flex-basis: calc(33.33% - 20px);
}
.article h3 {
font-size: 24px;
margin-bottom: 10px;
}
.article p {
font-size: 16px;
margin-bottom: 20px;
}
.article a {
color: #333;
text-decoration: none;
font-size: 16px;
}
.article a:hover {
color: #555;
}
.quote {
background-color: #f9f9f9;
padding: 40px 0;
text-align: center;
}
.quote blockquote {
font-size: 36px;
margin-bottom: 20px;
}
.quote footer {
font-size: 18px;
}
.action {
background-color: #333;
color: #fff;
padding: 80px 0;
text-align: center;
}
.action h2 {
font-size: 48px;
margin-bottom: 20px;
}
.action p {
font-size: 24px;
margin-bottom: 40px;
}
.action .cta-btn {
background-color: #fff;
color: #333;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-size: 18px;
}
.action .cta-btn:hover {
background-color: #eee;
}
footer {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
footer p {
font-size: 16px;
}
@media (max-width: 768px) {
.featured .article {
flex-basis: 100%;
}
}
img {
width: 1000px;
height: 500px;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>好好学习，不要刷短视频，不要玩手机</h1>
</div>
</header>
<main>
<section class="quote">
<div class="container">
<img src="https://cugdemo.oss-cn-hangzhou.aliyuncs.com/2934349b033b5bb5c9ea94968a81c239b6003af31602.png" alt="">
</div>
</section>
<section class="hero">
<div class="container">
<h2>好好学习，不要刷短视频，不要玩手机</h2>
<p>刷短视频、玩手机不仅会浪费时间，还会影响你的学习和工作效率，让你远离成功。因此，我们呼吁大家要好好学习，不要刷短视频，不要玩手机。</p>
<a href="#" class="cta-btn">开始学习</a>
</div>
</section>
<section class="featured">
<div class="container">
<article class="article">
<h3>学习资讯</h3>
<p>了解最新的学习资讯，掌握行业动态和趋势。</p>
<a href="#">查看更多</a>
</article>
<article class="article">
<h3>学习方法</h3>
<p>掌握科学的学习方法，提高学习效率和质量。</p>
<a href="#">查看更多</a>
</article>
<article class="article">
<h3>成功案例</h3>
<p>了解成功者的学习经验和心得，为自己的学习之路提供灵感和启示。</p>
<a href="#">查看更多</a>
</article>
</div>
</section>
<section class="action">
<div class="container">
<h2>开始行动</h2>
<p>现在就开始行动，让自己远离刷短视频和玩手机，专注于学习和工作。</p>
<a href="#" class="cta-btn">立即行动</a>
</div>
</section>
</main>
<footer>
<div class="container">
<p>版权所有 © 2023 好好学习网站</p>
</div>
</footer>
</body>
</html>
`
window.onload=()=>{
// 选择需要观察变动的节点
const targetNode = document.querySelector('.header-channel');
const el=document.querySelector('.bili-feed4-layout')
if(el){
el.innerHTML=myhtml
document.querySelector('.inner-logo').remove()
}
// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true,subtree:true};
const mutate=new MutationObserver(function(mutationsList, observer){
if(document.querySelector('.trending')) document.querySelector('.trending').remove()
if(targetNode){
targetNode.remove()
// mutate.disconnect()
}
})
if(targetNode)
mutate.observe(targetNode,config)
// 以上述配置开始观察目标节点
if(document.querySelector('.search-panel'))
mutate.observe(document.querySelector('.search-panel'), config);
if(document.querySelectorAll('.search-panel')[1])
mutate.observe(document.querySelectorAll('.search-panel')[1], config);
}
})();