氧洛谷 2.2 版本正式发布

· · 科技·工程

经过约一个月的断断续续开发，氧洛谷 2.2 版本终于与大家见面了。

什么是氧洛谷？

氧洛谷是一款使用 UserCSS 对洛谷的样式渲染进行更改美化的脚本，功能类似氩洛谷和 Smart-Luogu。使用前需 安装 Stylus 浏览器插件。

Github 仓库链接：https://github.com/TLEWA/O2-luogu

样式发布链接：https://userstyles.world/style/18339/default-slug

氧洛谷有什么功能？

最主要的功能当然是对洛谷的各方面样式进行美化。与先前流行的各种美化样式不同，氧洛谷支持对样式进行高度自定义，在不更改源码的情况下，仅通过图形化界面就可以对呈现效果进行相当的精细控制，截至 2.2 版本发布，样式具有 541 项可自定义选项。

简单介绍氧洛谷 2.2 版本前的一些主要特色功能：

  1. 支持深色和浅色两款默认样式，可以通过开关一键切换
  2. 对滚动条，卡片背景，阴影，圆角，按钮颜色，文字颜色，钩子颜色，名字颜色，图标颜色的高度控制（比较有意思的是支持自定义 AC 后的庆祝图像）
  3. 对自定义背景的良好支持（在“自定义背景”一栏中填入 url(图片链接) 以进行背景图的自定义，同时支持使用 CSS 的语法进行纯色和渐变色等的自定义）
  4. 加入了各种丝滑的动画，其中最具代表性的有点击按钮时按钮触发动画和类似洛谷有题的页首出现动画。
  5. 对原生洛谷的一些 bug 进行了针对性修复（截至 2.1.4.1 版本具有 19 项，2.2.0.0 版本新增两项），并且全部可开关
  6. 支持类似 Smart-Luogu 的悬浮侧栏，可以一键开关，支持更改悬浮位置比例
  7. 支持类似 Smart-Luogu 的超链接悬浮底线，可以对颜色，高度，动画效果等做高度自定义
  8. 支持将讨论区和文章广场的板块选择栏右置并进行宽度自定义，帮你找回老洛谷前端的感觉。
  9. 支持自定义全局渲染字体，代码块和 Markdown 渲染字体。
  10. 支持自定义代码块高亮，将新老前端的代码块高亮样式基本统一（默认启动的高亮样式为仿 OI-wiki 风格），同时可以选择开启应用括号高亮，支持自定义括号高亮颜色。
  11. 专栏文章阅读时可以开启进度条渲染
  12. 对新老前端的原生渲染样式进行一定程度的统一
  13. 隐藏广告功能

更多玩法，请下载样式自行探索。

2.2 版本更新内容

2.2 版本作为大型版本更新，带来了许多新特性，接下来对主要更新内容一一介绍：

支持使用类 json 格式的配置文件一键导入用户配置

2.2 版本在自定义语法解释方面进行了一定开发，以我制作的仿 Smart-Luogu 主题为例，下面演示一下导入配置文件配置的一般方法：

首先，将 json 格式的配置文件文本复制到剪贴板，打开配置页面：

翻至最底部，找到 “用户自定义样式” 相关输入框，填入复制的配置文件源码，即可应用样式。

如您填入的是 “次要用户自定义样式”，那么自定义样式的应用优先级将会低于您的直接手动配置，且无法更改开关类型的自定义样式。

如您填入的是 “用户自定义样式”，所有自定义样式会根据其序号顺次排列，排序越前应用优先级越高。所有 “用户自定义样式” 类型的配置文件应用优先级均高于手动填写。

支持用户自定义颜色的亚克力 / 毛玻璃效果

调研显示，类似 氩洛谷 Re: 2024 的毛玻璃效果很受欢迎，随着对语法解释功能的开发，氧洛谷现在支持对毛玻璃效果进行自定义。具体语法如下：

图为在默认样式配置下自定义背景图片后使用自定义卡片背景色功能将背景色设置为毛玻璃的实际效果，接下来介绍具体语法：

亚克力效果函数分为 Acrylic_a 和 Acrylic_b 两个版本，相同参数下其预期显示效果没有差异，前者使用伪元素实现效果，后者直接在背景上应用 backdrop-filter，预期性能差异极小，分化成两个函数是为了尽量解决两种实现方式分别对网页原有的层叠和定位造成的负面影响。如果您在使用过程中使用其中一种亚克力效果出现了 bug，将对应自定义框的亚克力实现方法更换成另一种通常可以解决问题，如果问题仍无法解决，请在 Github 提出 Issue。建议首先使用 Acrylic_a 配置亚克力效果（如您是火狐浏览器，可以优先使用 Acrylic_b）。

亚克力函数的参数要求如下：

第一个参数填入带有透明度的颜色（理论上支持 RGBA 通道的图片，未进行详细测试），透明度越高，对背景的毛玻璃混合效果在最终呈现中的占比越高，反之纯色占比越高，在透明度为最高的 1 时，毛玻璃效果不生效。第二个参数填入背景模糊混合半径，值越高代表模糊效果越强，默认值为 10px，当值为 0 时，亚克力效果失效。（特别地，当您使用 Acrylic_a 配置了可能进行动画变换的元素时，请将其它状态的颜色一并配置为失效的 Acrylic_a，否则动画可能不生效）

遵循上述格式进行配置即可获得美丽的亚克力样式。

支持对单独用户的名字颜色进行自定义，同时支持对用户额外添加自定义 badge

具体编写格式可以参照此处，接下来对参数作用和配置效果作一点简要解释。

对于用户自定义 badge，需要提供以下参数：

对于自定义单个用户名字颜色，需要提供以下参数：

填写完如此处的配置后，直接复制后粘贴到配置页最下方的用户自定义 Tag 和名字颜色相关配置框中。

特别地，如果您仅对一个人进行相关自定义，请在配置完成后的 ({something}) 后自行插入一个空表 {}，变为 ({something} {})。

除了用户自定义的 Badge 外，还可以应用脚本官方的 Badge 预设，目前仅有 2025 冬日绘版支持者 Badge 活动。

对封禁用户的相关效果支持可能出现一定 bug。

效果图：

对动态背景的针对性适配

氧洛谷 2.2 版本新增了一些实验性性能优化，尽可能保证在高负载情况下不掉帧，同时经过一段时间的研究后，我探索出了使用动态图片作为背景的一般方法，是时候给你单调乏味的洛谷应用最新最潮的动态壁纸了！

以下内容不仅对氧洛谷适用，理论上任何支持图片背景的 CSS 样式都可以应用相关更改。

由于 CSS 标准的相关限制，除 Safari 浏览器外，其余浏览器不可以直接使用 mp4 等常见的视频文件格式作为动态背景。只能使用 gif，webp，avif 等格式作为动态壁纸的源视频（推荐使用 avif 格式，下述内容以 avif 格式为准）。

要进行视频格式转换，这里推荐 ffmpeg，并使用 svt-av1 库进行编码。

制作好动态壁纸文件后，需要将文件托管到在线网站上，这里推荐 Github。（方法太多，在此不一一列举你还可以自己搓个网盘啥的）

托管完成后，找到对应文件的下载链接，如我在 Github 托管了一张动态壁纸，其对应的下载链接之一为 https://raw.githubusercontent.com/TLEWA/O2-luogu/refs/heads/%E5%89%8D%E7%9E%BB%E5%8A%9F%E8%83%BD%E6%B5%8B%E8%AF%95/imgs/1080p30.avif，将此链接视作普通图片链接填写进 url(something) 即可实现自定义（格式参考此处）。

就这么简单。

最令人捉急的其实是性能和壁纸体积问题，氧洛谷 2.2 对性能进行了一定针对性优化（除了针对性优化，加入了过长专栏区文章文章动态加载等其他优化功能，默认阈值 500 行，可以在 https://www.luogu.com.cn/article/ubd4ucn3 进行测试），对于文件体积问题，请使用基于 AV1 编码的 avif 格式进行改善，否则没有好的办法。

另附一张谷歌浏览器的实验性功能（访问 chrome://flags/）配置表，未经严谨测试，可能带来一定性能提升：

新老前端的平滑过渡功能

由于洛谷用户目前的使用场景经常涉及多个前端互相切换，因此借助最新 CSS 标准，我得以对前端切换进行平滑渐变过渡，默认动画效果和过渡开关均可调整，具体请下载样式进行体验。

如您的浏览器内核较为古老或者为火狐等浏览器，则可能不生效。

支持 Markdown 编辑器语法高亮

在氧洛谷 2.2 版本，完整添加了新老前端的语法高亮，同时尽量保证呈现效果相近（然后底层一些东西不同还是不能做到完全一致），对旧前端 Markdown 编辑器预览框的代码块渲染应用了和其他页面代码块类似的渲染主题，同时全部都可自定义。

下面放两张效果图：

支持在个人主页 - 动态和讨论区等页面显示犇犇/回复确切时间

如题，需要手动开启 在动态使用确切时间显示 与 在讨论区使用确切时间显示 选项，因为一些底层限制，默认显示格式无法更改，见谅。

效果图：

总结

氧洛谷 2.2 版本，作为大版本更新，新功能十分丰富，希望大家多多探索支持。更多没有在本文中提及的特性，恳请大家下载样式后自行探索尝试，最后放一张一键导入了 Smart-Luogu-Reborn 配置的效果图：