导读
轻萌化界面
使用教程Head Pic:Baidu Lite 轻萌化界面(背景:P站 62101308)
介绍
你一定会喜欢的简约且好看的百度轻萌化!
GitHub
注意事项
- 百度会为未登录百度账号的设备提供不同的 css 样式文件,在 v1.0.6a 版本中简单修复了这个 css 文件额外带来的部分问题。但仍有一些问题未处理,您可能需要登录百度账号以避免出现不必要的问题。
- 在使用百度主题后也有可能会出现不必要的问题,您可能需要在使用本样式前先关闭百度自带的样式功能才能保证本样式的正常工作
附加功能
- 持续维护的百度样式
- 提供搜索页、新闻页、视频页等多个页面的样式支持
- 卡片半透明化
- 高分屏适配
- 支持自定义图片背景
即将推出的功能
- 即将支持自定义单双栏
- 即将支持自定义卡片分辨率
安装
- 在使用本主题前,请先行安装 Stylus 插件(该链接指向谷歌商店,需要科学上网),使用国产浏览器(如QQ浏览器)可直接在应用商城搜索安装。
- 点击 这里 进入安装页。
- 如果访问速度过慢,请在这里打开
- 点击安装即可。
更新历史
v1.15a - 2023-03-20
Fix
- 修复不安全内容的卡片宽度异常。
v1.15 - 2022-01-19
Fix
- 修复搜索结果列中异常的空行。
- 修复部分搜索词(如 原神)出现的动态视频造成的 header 异常。
- 修复加粗广告提示功能。
v1.14 - 2022-01-18
Fix
- 修复底部相关搜索卡片样式失效的问题。
- 尝试性修复上方搜索结果和搜索工具样式失效的问题。
因步入职场,此后改项目将转为维护模式,新功能优先级降低,同时由于纯 CSS 的局限性,之后会考虑转为制作 Tampermonkey 插件。
v1.13 - 2021-05-11
Fix
- 修复顶部搜索建议样式。
New
- 适配百度新个人中心。
- 现在可以自定义首页顶栏的颜色了。
v1.12 - 2021-02-25
Fix
- 进一步修复了部分情况下相关搜索越界问题。
- 微调部分组件的样式。
- 适配绝大多数搜索结果中的提示内容。
New
- 实验性适配搜索结果中的视频广告。
v1.11 - 2020-11-05
Fix
- 修复了指针悬停在超链接上时会出现复数下划线的问题。
- 实验性修复了搜索结果中百度游戏的异常表现。
- 修复部分页面的样式错误。
- 回滚了新闻页在高分屏设备上的表现,以期适配下版本提供的多栏。
New
- 现在在高分屏(横向分辨率大于1080p)设备上的搜索框会随着搜索结果居中
v1.10 - 2020-10-13
Fix
- 修复了已知的(如贴吧、图片)搜索结果溢出卡片的问题。
- 修复了新闻页改版后不能正常显示的问题。
- 修复了顶部 Tab 位置不正确的问题。
- 修复了已知的(如视频)搜索结果占用过多空间的问题。
- 修复了新闻页标题颜色不正确的问题。
- 修复了搜索结果中部分结果未对齐的问题。
- 修复了视频页样式异常的问题。
New
- 现在可以自定义背景了。
- 去掉百度首页单独的背景图片,现在和结果页使用同一背景。
- 实验性的调整了卡片的宽度,以期解决各种兼容问题。
- 调整了搜索框的长度以匹配卡片的宽度。
v1.09 - 2020-06-29
Fix
- 临时修复了新版百度搜索页的适配问题。
- 修复了搜索结果页搜索框前方异常空白的问题。
New
- 添加图片搜索页面的样式支持。
- 添加视频搜索页面的样式支持。
注意
- 近期百度官方样式修改频繁,在使用本样式时或会遇到异常,我会尽量在短时间内修复,也请您在遇到问题时第一时间联系我。
- 由于本样式最早基于 pan_cao 大大的百度轻样式修改而成,代码迭代过程中出现了冗杂的问题。我会尽快推出完全重置的2.0版本,敬请期待。
- 因百度自带的换肤功能会影响到本样式,因此自该版本开始将会隐藏所有换肤功能的入口。
- 同时,当前版本的样式是基于开启“资讯”功能适配的(因为百度默认显示首页资讯,但实际上使用本样式时不会显示资讯)。换回默认皮肤并且打开“资讯”功能(在百度首页右上角中打开资讯)。
- 因为百度在登录账号时会引入一个不同的css文件,强烈建议您在使用本样式时登录百度账号以确保有优质的体验。
v1.08 - 2020-06-16
Fix
- 修复了搜索结果中百度知道卡片样式异常的问题。
- 修复了搜索结果中百度经验、百度题库占用空间异常的问题。
- 修复了部分搜索结果中,鼠标悬停在带磁贴的条目上会导致样式错位的问题。
- 修复了所有快递相关的搜索结果样式。
- 进一步修复了搜索结果中百度招聘卡片样式的问题。
- 修复了百度首页搜索框和搜索推荐的样式错位问题。
New
- 添加对百度不良信息举报(通过搜索结果页底部的“举报”入口进入)的样式支持。
注意
- 因百度自带的换肤功能会影响到本样式,因此自该版本开始将会隐藏所有换肤功能的入口。
- 同时,当前版本的样式是基于开启“资讯”功能适配的(因为百度默认显示首页资讯,但实际上使用本样式时不会显示资讯)。换回默认皮肤并且打开“资讯”功能(在百度首页右上角中打开资讯)。
- 因为百度在登录账号时会引入一个不同的css文件,强烈建议您在使用本样式时登录百度账号以确保有优质的体验。
v1.07 - 2020-06-12
Fix
- 修复了图片结果的错位问题。
- 修复了部分结果的显示异常问题(如百度招聘)。
- 修复了部分结果图标缺失的问题。
New
- 广告结果现在将被醒目处理。
- 现在支持搜索结果中的“温馨提示”。
v1.06a - 2020-03-23
Fix
- 临时修复了未登陆状态下使用本主题时造成的部分问题。
注意
- 近期发现,在未登录百度账号时,百度会额外引用一个未登录的 css 文件,在最新版本 v1.0.6a 版本中简单修复了这个 css 文件额外带来的部分问题。但仍有一些问题未处理,建议您登录百度账号以避免出现不必要的问题。
- 同样的,在使用百度主题后也有可能会出现不必要的问题,建议您在使用本主题时不要使用百度自带的皮肤功能。
v1.06 - 2020-03-21
咕了大半年终于又开始更新辣!
Fix
- 调整了首页的逻辑,横向分辨率较低的设备上也能够正常使用了。
- 调整了搜索结果页的字体高度,以尝试修复图片结果的图片错位问题。
- 因为本主题在逻辑上隐藏了卡片结果,因此本次更新将“显示卡片”的选项隐藏,避免误触导致错位的问题。
New
- 添加了对 百度产品大全 页面的支持。
- 现在搜索结果的文本对齐为“两端对齐”。
v1.05 - 2019-10-11
- 隐藏了首页的滚动条,现在即便是在小尺寸屏幕下首页也不会出现滚动条了
- 稍微上移了首页的搜索框,但首页的搜索框仍未合理,如果您有更好的想法烦请在下方评论区反馈给我。
- 调整了搜索页的滚动条,因为一页只有 10 个结果,可能会在下个版本考虑隐藏滚动条
- 重做了搜索页的 Tab 样式,现在Tab不再有底部的指示条,同时也不再透明。底部的 Foot 背景色将与Tab相同,以减少色彩的使用(注:这是一个尝试性更新,也有可能会在下个版本恢复指示条)
- 稍微增加了搜索结果卡片的不透明度,使之更易于阅读
- 右上角的用户菜单现在不会再挡住用户名了
v1.04 - 2019-10-01
- 修改了链接匹配方式,以适配“Infiniti 新标签页 Pro”,以及一些通过非标准链接打开的百度页面。 P.S. 但这可能会遇到预料之外的问题。如您遇到了显示问题烦请在下方评论区反馈给我。
v1.03 - 2019-09-25
- 修复了关键词为“携程”、“飞猪”、“去哪儿”时会出现的显示问题
- 修复了关键词为“华为”时会出现的显示问题
v1.02 - 2019-09-14
- 现在出现在顶部的“是不是要搜索”提示框也能正常显示了
- 更换了背景图片的图床
- 增加鸣谢名单
- 合并和分离了部分代码
v1.01 - 2019-09-13
- 修复了在高分屏下titile会移位的问题
- 现在出现在顶部的“相关搜索”也能正常显示了
- 合并和分离了部分代码
版权声明:本文为原创文章,版权归 夕綺Yuuki 所有。
本文链接:https://kira.cool/code-project/80-baidu-lite-moe
本文章采用 CC BY-NC-SA 4.0 International 协议进行许可。这意味着您可以自由的复制、转载和修改,惟须注明文章来源且禁止用于商业目的。
This article is licensed under the CC BY-NC-SA 4.0 International License, which means you are free to copy, distribute, and modify it, but must attribute the source and prohibit commercial use.
本文章中涉及的代码基于 AGPL 3.0 协议进行开源,这意味着您可以在协议范围内自由使用相关代码。
The code included in this article is released under the AGPL 3.0 License, which means you are free to use it within the scope of the license.
Comments 61 条评论
博主 luckycivetcats
大大,我想问问为什么百度搜索框出现了明显的黑线,而且最上面没有但其余四周都有,是正常现象吗?![图片描述](C:\Users\Administrator\Desktop\233.png)
博主 夕綺Yuuki
@luckycivetcats 未能复现该问题
博主 纸灰
楼主大大想问一下为什么现在背景修改不了呀
这个插件很久之前就在用了 并且当时就改了背景图片
这两天想通过更新样式换背景发现无论怎样都是默认背景
已经尝试过的方法:直接上传和图床链接都试过、插件卸载重装、更新样式后重启浏览器
好像都不起作用QUQ
博主 夕綺Yuuki
@纸灰 ![图片描述](https://img.kira.cool/images/2021/04/01/FNkB.jpg)
现在也不行吗,现在的 Stylus 版本默认的主题商店变更成了[33kk.github.io/uso-archive](33kk.github.io/uso-archive),能够直接在 Stylus 上修改图片。我这边多台设备的测试结果都是正常的。
博主 1zrzzbg9
用别人的样式 胡乱改改,配合这个终于可以双栏了٩(ˊᗜˋ*)و
![屏幕截图 2021-03-01 154655.jpg](https://i.loli.net/2021/03/01/I8KweWztLgiZvGq.jpg)
博主 小狯
发现搜索内容为“天眼查”时,页面显示会有不正常,“天眼查”的广告页明显野蛮生长╮(╯▽╰)╭ 。
博主 风陌
大佬,请问一下你的博客背景怎么设置的
博主 夕綺Yuuki
@风陌 给body加个css就行
博主 自我境界线缺失
自定义图片不知道为什么,出现在百度下方
博主 夕綺Yuuki
@自我境界线缺失 请使用网络图片(而不是将图片上传到Stylus)作为临时解决方案
博主 自我境界线缺失
@夕綺Yuuki 目前已经解决了,把图片转换成base64,不知道有没有弊端,图片有10mb左右
博主 美团
期待一下看看能不能弄成双栏|´・ω・)ノ 之前都配合其它样式弄的 现在效果都不行了》》》》
博主 夕綺 ❀
@美团 已经在考虑双栏啦,应该下个版本就能自定义单双栏了~
博主 muishiki
作者大大好,萌新结合之前的搜索栏透明的方法,想再在额外添加一个滑动时搜索栏渐变的效果(大致是在网页顶部时搜索栏透明,页面向下滑动时搜索栏变成半透明),但好像把以前的代码复制过来行不通,自己编写的话难度有点大,请作者大大指导一下应该怎么做
博主 金石热点网
文章写的不错,加油~
博主 ZeroBloodedge
作者大大,最近搜索页面里面,如果结果里有百度贴吧的东西,透明框会溢出来。
博主 夕綺 ❀
@ZeroBloodedge 收到,将会在近期修复
博主 星晨
|´・ω・)ノ作者大大,能不能给顶部栏加上毛玻璃效果呢?
另外,底部栏又该怎么修改?
博主 夕綺 ❀
@星晨 顶栏做成毛玻璃试了下感觉效果一般,需要再斟酌一下。
底部栏有两个,一个是结果页跳转,选择器为“#page”,一个是底部的帮助举报等,选择器为“#foot”。在样式中搜索这两个选择器即可自定义了。
博主 夕綺 ❀
@星晨 不过可能会在下个版本增加毛玻璃的自定义选项。
博主 muishiki
作者大大好,我曾今尝试过用您的萌化主题和另一个萌化主题同时开启,然后就能够达到搜索结果页面完全背景化(就是网页最上方没有白色的那一栏,变成透明的了),现在百度网页模式改了,另一个主题就不能用了,想问问大大能产生这种效果的代码是什么。顺便问一下以后主题更新能追加这种效果吗QAQ
附上另一个主题的地址:https://userstyles.org/styles/169531/g36
博主 夕綺 ❀
@muishiki 1. 如果需要百度首页顶部的导航栏透明,则可以在代码块一中加上:
#s_top_wrap {
background:none;
}
2. 而如果需要搜索结果页顶部透明,则添加:
#head {
background:none;
}
#s_tab {
background:none !important;
}
3. 会考虑加入顶部透明的效果,会考虑在未来的版本中添加用户自定义功能,让用户自由选择时否透明顶部状态栏。
总之感谢您的建议ヾ(≧∇≦*)ゝ
博主 星空
![百度首页](https://i.loli.net/2020/06/29/Dy1TBJcjbrzeqs5.png)
emmmm为啥更新后我的首页变成这样了(ó﹏ò。)
只有我是这样么⌇●﹏●⌇
博主 夕綺 ❀
@星空 您好,请确认一下是否开启了资讯功能,如未打开请打开再试试![开启资讯功能](https://img.kira.cool/images/2020/06/29/sk8.png)
博主 常原
win10自带输入法没打完就被-百家号去搜索了,而且关不掉貌似。。。
博主 夕綺 ❀
@常原 刚刚试了下,没能复现您提到的问题
博主 常原
@常原 我找到问题然后,好像百度的UI有变化我只有一个主题上个图吧!![UI错位](https://cdn.jsdelivr.net/gh/shimakazechan/test/ArticlePicture/Snipaste_2020-06-16_16-32-50.png)
博主 夕綺 ❀
@常原 在下个版本中已经适配了,不过新版本还在测试,今晚或者明天检测下新版本就可以啦
博主 常原
@夕綺 ❀ 好的谢谢维护
博主 ff
怎么修改他的背景图
博主 神代夕綺
@ff **代码块4** 中的 **第 6 行** 是壁纸链接,要更换搜索页的话改这个链接就可以了;如果是主页(baidu.com)就是 **代码块5** 的 **第 9 行**
博主 muishiki
百度首页好像又把顶栏的样式给改了,还是习惯大佬的样式啊 OωO
博主 神代夕綺
@muishiki 发现了,首页的样式变化挺大的,下个版本会调整,先让我咕咕咕一会(x)
博主 蒟蒻awa
感觉那个人物的头被挡住了很不爽QWQ,能不能改个半透明或者将上面再拉上去又或者换个图片?
博主 神代夕綺
@蒟蒻awa 如果你说的是百度首页的搜索栏挡住了背景,则调整代码块1的1413行至1421行(当前版本),其他版本可能会错位几行。
计划于下版本尝试调整搜索框至半透明
博主 蒟蒻awa
大佬,这个挡住了人物的头,强迫症看起来好不舒服QWQ,请求dalao帮助下QWQ
[问题](https://imgchr.com/i/JFkxpQ)
博主 yuan
最近这个主题百度首页的搜索按钮和搜索框出现了一些问题,自己琢磨了下也没解决出来,还望大佬亲自出面解决一下|´・ω・)ノ
博主 神代夕綺
@yuan 能说一下具体是什么问题嘛,以及问题出现时的环境。
博主 aLIEz
搜索666,有个图片挡住下面的标题了
博主 神代夕綺
@aLIEz 搜索结果里百度图片会不正常已经发现了,下个版本会修复的
博主 咔咔咔
百度搜索栏那一行空白看的我纠结症烦了,当然整体还是很好看的
博主 koyomi
兄弟。。。图床崩了。。。
博主 神代夕綺
@koyomi 看了下应该没问题啊,可能当时图床在维护吧,我感觉这个图床还是相当稳定的_(:з」∠)_
博主 koyomi
@神代夕綺 可能是域名被墙了。。。很难受
博主 竟然还有防刷屏的功能
真的有必要设置防刷屏吗。。。而且response的提示信息没有显示给用户啊。。response提交频繁,用户只收到发送失败。。一脸懵逼啊
博主 神代夕綺
@竟然还有防刷屏的功能 放刷屏是是指连续发送会有冷却时间吗…这个主题的评论逻辑我不太喜欢又懒得重做_(:з」∠)_,我会再优化一下评论系统逻辑的。
总之感谢建议!!
博主 我换个人试试
又到你这里来了。。。我自己稍稍优化了一下,也顺便跟你说说。
1.首页的地方拖动滚轮会滚动。我给锁定了。。
2.首页的搜索框会挡住背景妹子的眼睛。。。很不爽,我弄成半透明了。。
3.搜索页的#s_tab我给弄成不透明了,因为半透明会影响看搜索结果。。不太爽。。
4.搜索页右上角用户的下拉菜单会挡住用户名。。看着不爽,我就重新定位了一下下拉菜单。。
就这样
博主 神代夕綺
@我换个人试试 感谢建议~
因为首页那边我个人基本没有使用环境,因此做的比较粗糙见谅_(:з」∠)_,提的这些问题会在下个版本解决的
而首页的搜索框尝试过半透明,但感觉不太好看_(:з」∠)_,我会再考虑一下悬停动画来折衷一下,实在不行再调整成半透明吧(~~或者干脆换张图片好了~~)
搜索页的透明地方会考虑调整的!
然后右上角的下拉菜单我也发现了,应该是原版的百度轻的问题,下个版本也会修复。
博主 koyomi
哇。。我提的建议发不上去啊
博主 koyomi
为啥我会提交评论失败
博主 雨蝶
stylus 据说因为隐私问题,国内很多商店给下架了, 即使用谷歌商店安装了, 360浏览器也会强行禁用。
Stylus (beta) 可以替代它。
————————————————————————————
大佬能否给个简单的设置,或者告诉我源码里哪里是背景图片 QAQ 你的图片很不错,但是看久了会腻啊 我需要经常换背景。
另外,背景图使用在线图片有很大延迟,不爽。
最后, 这个输入框里的图片有点意思 0.0 我现在前端水平仅限于用bootstrap拼网页, 成品惨不忍睹, 大佬有什么好的建议不。|´・ω・)ノ
博主 神代夕綺
@雨蝶 我有标注鸭, 代码块4 中的 第4行 是壁纸链接,要更换搜索页的话改这个链接就可以了;如果是主页(baidu.com)就是 代码块5 的 第8行 _(:з」∠)_。
用在线图片也是不得以,受制于Stylus。
输入框的图片用的是CSS,可以直接看源码,不过要注意好文本框的高度|´・ω・) ノ
博主 蒟蒻awa
@神代夕綺 谢谢大佬,我换了图片,解决了,但还是希望那个选择框改成半透明?那个透明度在哪调啊?
博主 神代夕綺
@蒟蒻awa 如果你指的是“网页、资讯、视频等”的搜索方式选择框,请自行添加“#s_tab”选择器并设置背景,并同时调整代码块4的36至46行(最新版本,旧版本可能会有点变动)。
博主 Kulahala
在用Infinity 新标签页 Plus插件中用百度搜索时,第一个页面为正常百度,且刷新还是一样,样式显示没有此网站样式,而在百度页面进行下一步操作时样式又能使用了
博主 神代夕綺
@Kulahala 看了一下,是infinity Pro的链接有问题。已经修改了,再stylus更新一下就行
博主 Kulahala
额,有时候打开百度这样式不一定会出现
博主 神代千鹤
踩一踩,仰望大佬。。
博主 神代夕綺
@神代千鹤 (/ω\)