[工程]洛谷新前端左侧导航栏自定义
灵感来源：一个差点让我禁言的工单😡。
既然洛谷不加，那我自己加。
现在已经写成了脚本，同时这篇真的是“工程”，我会把简陋的实现方式写出来。
脚本链接在“广告”的末尾。
广告
展示脚本用途的。
你是否想更加丝滑地打开导航栏：
（上面有张图，可能加载不出来。因为洛谷上传不了动图，挂 github 上的。）
你是否想所有选项都有图标：
你是否想自定义导航栏展示的东西：
你甚至可以把洛谷网校图标移除。
你是否想导航栏分割线上下对齐，从：
变得对齐？
那就试试这个脚本！
这里提供剪贴板版本。
这里提供cnblogs 版本。
用法说明
就是这个按钮：
然后就可以设置了。
展开样式
- 无：就是洛谷自带的样子。
"" - 样式 1：动图里面所说的样子。
"transition: all .25s ease-out;" - 样式 2：延迟一会儿，然后跟样式 1 差不多。
"transition: all .25s cubic-bezier(1, 0, 0.48, 1);" - 样式 3：带一定“反弹”效果。
"transition: all .25s cubic-bezier(0.18, 0.89, 0.32, 1.28);"，也就是out-back。
由于洛谷展开侧边栏只有 0.25 秒，因此我没想出什么其它的看起来不同的动画，欢迎提建议然后追加！
导航栏内容
使用 json 格式。
具体地，最外面一个中括号表示数组，中间有多个“框”，逗号分隔。
每个框最外面是一个大括号，中间要写 {"type":type,"list":id}，其中 type 是 big 和 small 中的一种，表示它是展开后才显示的还是带图标的。如果指定 type 为 small，需要额外指定一个 "name":"..."，将 ... 替换为那个“小框”的标题。
id 为一个序列，外面是中括号，每个元素是一个数字，逗号分隔，例如 [2,6,4,3,1,3]。每个数字表示对应的按钮，按洛谷默认的顺序来标号的，从 0 开始编号：
id |
按钮名字 |
|---|---|
| 0 | 主页 |
| 1 | 题库 |
| 2 | 网校 |
| 3 | 训练题单 |
| 4 | 比赛 |
| 5 | 评测记录 |
| 6 | 讨论区 |
| 7 | 文章广场 |
| 8 | 图片上传 |
| 9 | 云剪贴板 |
| 10 | 主题商店 |
| 11 | 咕值排名 |
| 12 | 等级分排名 |
| 13 | 洛谷有题 |
| 14 | 工单/反馈 |
| 15 | 帮助中心 |
| 16 | 联系我们 |
| 17 | 社区规则 |
注意 id 有序且可重。
点击“还原为默认值”可以变成洛谷标准左侧导航栏。
常见问题
为什么改了“导航栏内容”后左侧啥图标也没了？
很可能是因为配置格式错了，尤其注意是否两“框”之间忘打逗号了。实在不行可以还原为默认值。
为什么一个“小框”标题为
undefined？那个框没填
"name":"..."导致的。不要名字可以考虑"name":""，即名字为空字符串。
完全无法使用？
更新浏览器，如果还不能用私信我（可能不在线）。
实现方式
前置：HTML、CSS、javascript。然后你自己就会弄了。
据 ZnPdCo 反馈我才知道依靠 data-v 可能会失效……这个代码在失效后会更新。
基本框架
UI 直接用的洛谷的，直接找段代码拿来改的。
储存配置用的 localStorage。
我事件懒得想用的 onclick，所以要改好些东西。脚本改成全局变量用 onclick 才方便，所以可以看见形如如 window.xxx=function(){xxx} 的东西。
图标和洛谷一样，用的 Font Awesome 的 Classic Regular 版本。储存为 svg 即可。部分要 pro，找盗版就行了（我脚本里也放了）。顺便说一下洛谷“网校”图标好像也要 pro，不知道是盗版还是真给钱了。
其它没在后面提到的东西为了各种原因应该能想出来。
导航栏分割线上下对齐
注意到把 margin-bottom 改为 0.5em 就对齐了。（应该是，有点忘了……）
nav>.nav-group[data-v-6c9e83f4]::after{
margin:1em 0 0.5em;
}
单选框
洛谷（应该）是检测到变化然后对应位置放出对应图标，但是我懒！
考虑如果是 check，那么 fa-circle display:none，否则 fa-circle-dot display:none。
给 fa-circle 加个 data-u-001 属性，然后给 fa-circle-dot 加个 data-u-002 属性，然后写个 CSS。
input:checked+label>.fa-input[data-u-001]{
display:none
}
input:checked+label>.fa-input[data-u-002]{
display:inline-block;
color:var(--l-radio--color,rgb(var(--lcolor-rgb,var(--lcolor--primary,var(--lcolor--primary,52,152,219)))));
}
input:not(:checked)+label>.fa-input[data-u-002]{
display:none;
}
那句 color 直接复制的洛谷的，显然我懒得写这么长的代码。
展开样式
考虑 transition。
由于洛谷是没鼠标悬浮时 display:none，所以先给它改掉。
考虑没鼠标悬浮时 height:0px，悬浮时恢复原高度。
原高度可以先用 js 预处理。注意直接获取前先用 CSS 把所有的 display:none 去掉！
nav.sidebar:not(:hover) .on-expand[data-v-6c9e83f4]{
display:block;
height:0px !important;
}
.nav-group.on-expand{
上面展开样式中的 transition
}
其它
如果有 BUG 请反馈！
如果有优化欢迎修改，代码逻辑应该比较清晰！
更新日志
v1:第一个版本。
v2:修复了一些失效问题。
浙公网安备 33010602011771号