[工程]洛谷新前端左侧导航栏自定义

123asdf123 · 2025-05-21 12:45:03 · Tech. & Eng.

灵感来源：一个差点让我禁言的工单😡。

既然洛谷不加，那我自己加。

现在已经写成了脚本，同时这篇真的是“工程”，我会把简陋的实现方式写出来。

脚本链接在“广告”的末尾。

广告

展示脚本用途的。

你是否想更加丝滑地打开导航栏：

（上面有张图，可能加载不出来。挂 github 上的。）

你是否想所有选项都有图标：

你是否想自定义导航栏展示的东西：

你是否想导航栏分割线上下对齐，从：

变得对齐？

那就试试这个脚本！

这里提供剪贴板版本。

用法说明

就是这个按钮：

然后就可以设置了。

展开样式

• 无：就是洛谷自带的样子。""
• 样式 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 有序且可重。

点击“还原为默认值”可以变成洛谷标准左侧导航栏。

常见问题

为什么改了“导航栏内容”后左侧啥图标也没了？

很可能是因为配置格式错了，尤其注意是否两“框”之间忘打逗号了。实在不行可以还原为默认值。

为什么一个“小框”标题为 undefined？

那个框没填 "name":"..." 导致的。不要名字可以考虑 "name":""，即名字为空字符串。

完全无法使用？

更新浏览器，如果还不能用私信我（可能不在线）。

实现方式

前置：HTML、CSS、javascript。然后你自己就会弄了。

据 ZnPdCo 反馈我才知道依靠 data-v 可能会失效……这个代码在失效后会更新。

基本框架

UI 直接用的洛谷的，直接找段代码拿来改的。

储存配置用的 localStorage。

我事件懒得想用的 onclick，所以要改好些东西。脚本改成全局变量用 onclick 才方便，所以可以看见形如如 window.xxx=function(){xxx} 的东西。

图标和洛谷一样，用的 Font Awesome 的 Classic Regular 版本。储存为 svg 即可。部分要 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 请反馈！

如果有优化欢迎修改，代码逻辑应该比较清晰！