[在前言之前]
很多人在问 洛谷是怎么弄背景图的,我在这里给出方法,并且详细介绍具体插件脚本的使用。
如果以后有人问,大家可以把这个帖子给他看看。
Q:为什么是我介绍?
A:因为我是美化脚本的作者的同学
脚本作者@abc2237512422 Orz
[前言]
首先感谢我的同学 @abc2237512422 是他写出了美化的CSS代码
虽然有一部分人已经在使用 但是因为是我同学 个人觉得还是我发布比较好(当然除了@abc2237512422 自己来发布)
使用效果(2018.9.23日截图)
[stylish及userstyles介绍]
stylish是什么?
Stylish是一个浏览器扩展插件,目前支持一些主流浏览器。
插件是实现CSS作用于网页。
很多人用F12来修改一些网页元素(大家都试过吧,比如改自己ID颜色什么的
可以这么理解:stylish插件将修改的界面维持 但是只有你自己看得到 后台不会更新
讲认真一点:stylish执行CSS作用于网站前端上,并且实现用户的自定义管理
userstyles是什么?
userstyles是一个stylish脚本的集合网站。
网站链接--> http://userstyles.org
是一个非盈利性网站
在stylish插件被某公司收购之后,userstyles的老总开发了另一个插件,与stylish作用相同,并且与userstyles网站更加匹配。
叫做stylus。
(我推荐stylus不推荐stylish)
在userstyles里面有很多的stylus脚本 而我们着重介绍的洛谷美化,就发布在上面。
Material是什么?
这块内容和设计美学相关,不感兴趣的同学可以跳过,不影响阅读。
中文可以理解成 质感设计。
Material Design是谷歌公司推出的全新的设计语言,谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。
如果你使用Chrome 可以看到一些谷歌的设计,就是符合Material Design设计的要求的。
(其实洛谷很多东西也是Material Design的)
[具体如何使用?]
[1] 下载stylus插件
前段时间stylish爆出了窃取用户资料,因此不推荐使用。
原作者开发了新的插件,命名为stylus,更加符合stylish的使用,与userstyles.org网站更加匹配
stylus插件的下载地址
谷歌浏览器https://userstyles.org/ 首页下载
其他浏览器 再浏览器插件/应用中心(不同浏览器不同名字 说白了就是浏览器插件)搜索stylus,下载安装
如果实在找不到,可以私信我或者作者。(回复慢 不推荐)
[2]洛谷Material美化脚本
厚颜无耻的广告
点击进入-> https://userstyles.org/styles/157651/material-luogu-material
上面就是下载地址
虽然在stylish社区有其他版本的美化,但是大多数就是劣质版本,个人安利一下大佬abc2237512422的
功能多 又好看
进去之后是这个样子的
因为我已经安装了这个脚本,所以一个显示Updata Style
如果没有安装,显示的是Install with stylish 点击即可安装
安装之后再进入洛谷 你就会发现好好看啊……(逃
[3]自定义背景及其他
自定义的方法不止这一种,有些人是通过直接修改CSS代码。这种方法自定义的东西更多,但是对于不会CSS语言的人来说,会导致一些不可知的错误。因此我在这里介绍一下我们abc2237512422给大家提供的自定义选择。
在Updata Style按钮旁边
有一个Customize Settings的按钮
这是一个自定义化的按钮
打开就是这样的
有**主题色 是否使用背景 图片背景 卡片透明度 **(以及一个恶搞的洛谷颜色名字)
主题色 就是洛谷界面上端和其他地方的颜色选择 推荐蓝色或者紫色 不推荐暖色调
是否使用背景 选择使用 你将可以修改下面的选项 并且洛谷背景将会有图片 默认是不使用
图片背景 有2张abc2237512422提供的Material背景,以及网络图片链接,自定义图片 选中旁边的圈即可选择
卡片透明度 从0到1的小数,0为完全透明,1为不透明 推荐0.9 默认0.8
首页名字颜色 你想成为紫名吗?就靠他了!
当你选择完之后 再点一下Updata Style 就可以更新了
进入洛谷,就可以使用了
第二次修改步骤相同
再一次感谢@abc2237512422
如果有任何BUG 欢迎联系@abc2237512422 洛谷ID也是@abc2237512422
[常见问题FAQs]
Q1:为什么我点了安装还是没用
A1:估计是插件与浏览器的匹配或其他原因。我使用的是QQ浏览器,用QQ浏览器自带的应用商店里面下载的。其他浏览器的话不是很清楚,大家可以去问abc2237512422。另外,除了stylus安装之外还有另外一个方法。安装另外一个插件tampermonkey(油猴),然后打开https://userstyles.org/styles/userjs/157651/material-luogu-material.user.js
Q2:为什么我自定义没有用
A2:可能是你插件与网站不匹配 你使用的可能是stylish插件 可以换成stylus插件使用
Q3:Stylus插件安装之后长什么样子?
Q4:abc2237512422是谁
A4:一位大佬,工程开发,插件脚本网站爬虫什么都会,你可以在github,userstyles上看到他的更多作品(比如OI助手) 还有他的博客juruo.tk
Q5:你使用是什么样子的啊
Q5:大图警告
[总结]
原理其实就是CSS。
各位学OI有余力的大神们,也可以自学CSS。
然后可以在userstyles上面发布自己的作品
再https://userstyles.org/ 这个社区上 有很多网站的美化
比如 百度 BZOJ codeforces Vjudge 哔哩哔哩(我美化我自己) 等
也希望洛谷越办越好!洛谷4界面越来越好看!
也欢迎各路大神美化一下某些OJ!
本文发布于洛谷日报,特约作者:哔哩哔哩
原文地址:https://www.luogu.org/blog/41868/material-luogu-material
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.