tangyuxian
文章71
标签34
分类5
美化-个性化百度搜索结果

美化-个性化百度搜索结果

使用脚本注入方式个性化处理搜索结果,屏蔽推广

首先来两张美图,提前预览下最终效果

image-20220503092849142

image-20220503092912031

image-20220503114405105

能够看出来,经过美化后的搜索结果,更清新更美观,而且不仅仅是美观这么简单,还屏蔽掉系统推广等信息.

接下来简单说下实现步骤

一 依赖工具

这种可以修改网页内容信息其实通过的是脚本注入的方式实现,将我们当前的脚本注入到指定网站当中,替换和抓取当前网站元素,然后替换或追加信息,从而实现个性化自定义功能.

这里采用的是tampermonkey这是一款免费的用户脚本管理器,可以通过它来创建脚本,在网站载入时执行.

除了通过官网下载,也可通过浏览器带的扩展程序市场下载:

image-20220503093818755

二 获取和添加脚本

安装好依赖后,便准备开始添加脚本信息.在浏览器顶部位置点击该扩展程序,会有如下界面:

image-20220503094044319

在管理面板中可随时管理已下载安装的脚本.

接下来简单说说创建脚本信息.

image-20220503094833076

创建脚本信息本质是在自执行函数中编写JavaScript脚本,在该脚本中可获取dom元素,追加样式信息来实现一些屏蔽和美化的功能.

写好的脚本保存好后,注意别忘记设置要注入的网站,

image-20220503095259577

三 进一步美化

以下是对百度搜索结果的部分美化

 body{
 position:reactive;
 }
/*自定义背景图*/
 body:before{
 content:'';
 width:100%;
 height:100%;
 position:fixed;
 background-image:url('');
 background-size:100% 100%;
 top:0;
 left:0;
 z-index:0;
 }
/*模糊每一项*/
 .new-pmd.c-container{
 border-radius:10px !important;
 background: linear-gradient(90deg, white, transparent) !important;
 backdrop-filter: blur(15px);
 }
 #wrapper_wrapper #container #content_left>.result, .result-op, .op-vmp-zxenterprise{
 background: linear-gradient(90deg, white, transparent) !important;
 }
 #wrapper_wrapper #container #content_left>.result:hover{
 background:#fff !important;
 }
 .c-container.xpath-log:hover{
 background:#fff !important;
 }
 .blur-search-bg{
 display:none;
 }
 .new-pmd.c-container:hover{
 backdrop-filter: blur(15px) !important;
 background: #fff !important;
 box-shadow:none !important;
 }
 .c-result-content{
 display:none;
 }
/*预选项和翻页*/
 #s_tab,#page,.rs-link_2DE3Q{
 position: relative;
 z-index:2;
 background: linear-gradient(45deg, white, transparent) !important;
 backdrop-filter: blur(5px);
 }
 .rs-col_8Qlx- a{
 background: linear-gradient(45deg, #ffbfaa, transparent) !important;
 color:#fff !important;
 }
 .rs-col_8Qlx- a:hover{
 color:#ffbfaa !important;
 background: linear-gradient(45deg, #fff, transparent) !important;
 }
 .container_l #content_right{
 border-radius:10px !important;
 background: linear-gradient(45deg, #000, transparent) !important;
 padding:10px !important;
 backdrop-filter: blur(15px);
 }
 .container_l #content_right:hover{
 background:none !important;
 }
 #content_right a{
 color:#fff !important;
 }
 .page_2muyV strong{
 background-color: #ffbfaa !important;
 border:none !important;
 border-radius:50%;

}
.page_2muyV a{
background-color: #fff !important;
border:none !important;
border-radius:50%;
color:#ffbfaa !important;
}
.page_2muyV a:hover, .page_2muyV a:hover .page-item_M4MDr{
background: #ffbfaa !important;
color:#fff !important;
}
#page .pc, #page .n{
border:none;
}

匹配移除广告推广

//参照已有的脚本处理
$(".c-container>.f13").each(function () {
    var text = $(this).text();
    if (text.indexOf('广告') != -1) {
        $(this).parents('.c-container').remove();
    }
});
$(".c-span-last span").each(function () {
    var text = $(this).text();
    if (text.indexOf('广告') != -1) {
        $(this).parents('.c-container').remove();
    }
});
$("font[class*=ec_tuiguang] span").each(function () {
    var text = $(this).text();
    if (text.indexOf('广告') != -1) {
        $(this).parents('.c-container').remove();
    }
});

推荐几款不错的百度脚本:

百度去广告,blur毛玻璃

贴吧全能小助手

推荐几个不错的二次元随机图片API

樱花图片

东方project

樱道

本文作者:tangyuxian
本文链接:https://www.tangyuxian.com/2022/05/03/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/%E7%BE%8E%E5%8C%96/%E7%BE%8E%E5%8C%96-%E4%B8%AA%E6%80%A7%E5%8C%96%E7%99%BE%E5%BA%A6%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可