洛谷用户的福利！美化洛谷界面

[](https://www.bilibili.com/video/av33050941/) # [在前言之前] 很多人在问 洛谷是怎么弄背景图的，我在这里给出方法，并且详细介绍具体插件脚本的使用。 如果以后有人问，大家可以把这个帖子给他看看。 ``` 2018年10月4日更新： 近日洛谷悄悄改变了UI 为了让更多人成功安装，制作了视频教程以及提供了比较稳定的stylus下载地址。 ——10月4日凌晨 ``` Q:为什么是我介绍? A:因为我是美化脚本的作者的同学 脚本作者[@abc2237512422](https://www.luogu.org/space/show?uid=10513) 非常感谢支持！ --- # [前言] **首先感谢我的同学 @abc2237512422 是他写出了美化的CSS代码** 虽然有一部分人已经在使用 但是因为是我同学 个人觉得还是我发布比较好（当然除了@abc2237512422 自己来发布） --- **使用效果（2018.9.23日截图）**  **10月4日截图**  --- # [stylish及userstyles介绍] ## stylish是什么？ Stylish是一个浏览器扩展插件，目前支持一些主流浏览器。 插件是实现CSS作用于网页。 很多人用F12来修改一些网页元素（大家都试过吧，比如改自己ID颜色什么的 可以这么理解：stylish插件将修改的界面维持 但是只有你自己看得到 后台不会更新 讲认真一点：stylish执行CSS作用于网站前端上，并且实现用户的自定义管理 ## 警告！请不要继续使用stylish插件 ### 已更新新版本stylus插件 ## 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://pan.baidu.com/s/19dyygOKVNzEcbkT_GXJzKA 密码：2rbl - QQ浏览器自带应用商店下载 评论区下方@外太空 提供的下载地址 不推荐大家下载 ## [2]洛谷Material美化脚本 ### 脚本安装界面 点击进入-> https://userstyles.org/styles/157651/material-luogu-material 上面就是下载地址 虽然在stylish社区有其他版本的美化，但是大多数就是劣质版本，个人安利一下大佬abc2237512422的 **功能多 又好看** 进去之后是这个样子的（9月24号的截图）  因为我已经安装了这个脚本，所以一个显示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 # [总结] 原理其实就是CSS。 各位学OI有余力的大神们，也可以自学CSS。 然后可以在userstyles上面发布自己的作品 再https://userstyles.org/ 这个社区上 有很多网站的美化 比如 百度 BZOJ codeforces Vjudge 哔哩哔哩~~（我美化我自己）~~ 等 ***也希望洛谷越办越好！洛谷4界面越来越好看！*** ***也欢迎各路大神美化一下某些OJ！*** --- $$\color{grey}\text{如果还有疑问，请看着这里}$$ # [常见问题FAQs] --- ### Q1:为什么我点了安装还是没用 ### A1:不要使用stylish!或者安装另外一个插件tampermonkey（油猴）,然后打开https://userstyles.org/styles/userjs/157651/material-luogu-material.user.js** ### Q2:为什么我自定义没有用 ### A2:不要使用stylish!或者打开CSS代码自行编辑。 ### Q3:Stylus插件安装之后长什么样子？ ### A3:我的是这个样子的 浏览器是QQ浏览器 ### Q4：你使用是什么样子的啊 ### Q4：大图警告（9月24日截图）   ### （10月4日截图）  --- 感谢阅读，喜欢就点个赞吧