「洛谷日报第63期」洛谷客户的福利！美化洛谷界面

[在前言之前]

很多人在问 洛谷是怎样弄背景图的，我在这里给出方法，并且详细详情具体插件脚本的使用。

假如以后有人问，大家可以把这个帖子给他看看。

Q:为什么是我详情?

A:由于我是美化脚本的作者的同学

脚本作者@abc2237512422Orz

[前言]

首先感谢我的同学 @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插件安装之后长什么样子？

A3:我的是这个样子的 浏览器是QQ浏览器

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