今天没写新功能,全在修东西。
修完发现,五个坑里没有一个是我”代码写错了” —— 全是我想事情的时候漏了一块。 记下来,因为漏的那几块比语法错误难发现多了。
坑一:播放器被拉成了一根长条
音乐播放器右下角有个小窗,点上面一个圆点按钮,它会收成一个小圆盘。
结果点下去,没变圆,变成了一根长条 —— 跟卡片一样宽、只有一点点高。
原因藏在一行 CSS 里。播放器自己的样式这样写:
.nmpv3-player.nmpv3-is-minimized { width: 80px; height: 80px; border-radius: 50%;}收起的时候,宽高都是 80 像素,圆角 50% —— 所以是个圆。
而我为了让小窗里塞得下多出来的按钮,加过这么一条:
.nmpv3-player[data-layout="mini"] { width: min(352px, 100%) !important;}我这条带 !important,它那条没带。 于是收起的时候:宽度被我的 352px 覆盖了,
高度还是它自己的 80px。352 × 80,正好是那根长条。
修法就一个词:
.nmpv3-player[data-layout="mini"]:not(.nmpv3-is-minimized) { width: min(352px, 100%) !important;}加上 :not(.nmpv3-is-minimized),收起状态就不受我这条影响。
学到的是:!important 不是”让我的样式生效”,是”让我的样式在任何情况下都生效”。
一个组件有很多状态(收起 / 展开 / 播放中 / 面板打开),我在改一个属性的时候,
得先问一句:这个属性在别的状态下是什么值?
坑二:它还会自己跑到左上角
这个更玄学 —— 偶尔刷新,小窗会出现在左上角。
不是随机漂移,是有条件的:只有浏览器窗口比较窄的时候才出现。
播放器会把”上次拖到哪儿了”存下来,下次打开照着那个坐标摆。恢复之前它会做一次夹取, 确保不跑到屏幕外面:
left = Math.max(8, Math.min(窗口宽 - 播放器宽 - 8, 存下来的 left))看着没问题,对吧?
窗口一窄,窗口宽 - 播放器宽 - 8 就成了负数。Math.min(负数, 存的坐标) 还是负数,
然后 Math.max(8, 负数) —— 得到 8。
横坐标 8,纵坐标同理也是 8。左上角。
这个夹取本来是为了”别跑出屏幕”,结果在窗口太窄的时候,把坐标夹到了另一个极端。
我的修法比较粗暴:不让它拖了,再用 !important 把位置按死在右下角,
顺便把存下来的旧坐标删掉。
坑三:一翻页,音乐就断了
这个是我自己设计的错。
博客的翻页不是真的跳转,是一个叫 swup 的东西只替换页面中间那块内容 —— 导航栏、页脚都不动,所以翻页特别快。
我一开始把播放器写在音乐页里。结果每翻一页,那块内容被换掉,播放器跟着被销毁。 音乐当然就断了。
想通之后特别简单:把播放器挪到”被替换的那块”外面去。
现在它写在最外层的布局里,全站就这一个,swup 碰不到它。 翻到哪一页音乐都在放,而且换页面的时候它还会换形态:
- 音乐页:完整版(歌单、播放模式、歌词)
- 别的页:一条简洁的小条,不挡着看文章
坑四:我把自己的内部文件挂到了公网上
这个是最该打自己的一下。
博客的下载区里有个文件夹叫 public/。这个文件夹里的东西,构建之后会被原样传到网上。
我在里面放了三个文件:
清单.txt—— 写下载项名字和说明的_放文件说明.md—— 讲怎么加文件的vendor/说明.txt—— 讲播放器怎么升级的
这三个全是写给我自己看的操作说明。 里面写着”把你的地址填进去”、“别忘了改这个”。 任何人猜到网址,就能看到。
我实测过,三个都是 HTTP 200 —— 确实挂在公网上。
修法:把它们全挪到 public/ 外面。该给访客看的和该给自己看的分开放。
顺便说一下怎么发现的:不是我看代码看出来的,是我把全站页面的文字抓下来, 搜”内部说法”搜出来的。换个角度扫一遍,比盯着代码看有用。
坑五:加个下载项要改代码 —— 而我打不开那个文件
下载区原来是这样设计的:想加个东西,得打开 download.astro 改一个数组。
问题是我打不开 .astro 文件。 打开就是一堆代码,改错一个标点整个网站都构建不了。
一个要求用户改代码才能用的功能,对不会代码的用户来说就是不存在的。
现在改成两个动作,都不用碰代码:
| 想干什么 | 做什么 |
|---|---|
| 把东西给人下载 | 传到网盘,拿一条分享链接 |
| 写清楚它是什么 | 双击 下载清单.txt 加一行 |
还做了兜底:清单里写了、但忘了配网盘链接的,构建的时候终端会红字提醒你是哪一行, 不会悄悄变成一个点不动的按钮。
最后发现:问题都不在”代码写错了”
五个坑,回头看看:
| 坑 | 真正的原因 |
|---|---|
| 长条播放器 | 我改样式时没考虑”另一个状态” |
| 跑到左上角 | 一段”防出屏”的代码在窄窗口下失效了 |
| 翻页断音乐 | 我把东西放在了会被替换的位置 |
| 内部文件上公网 | 我混了”给我看的”和”给访客看的” |
| 下载要改代码 | 我设计的时候没想过”用户会不会写代码” |
没有一个是语法错误、变量名写错、少个分号这种。 全是”我想事情的时候漏了一块”:
- 漏了别的状态(坑一)
- 漏了极端情况(坑二)
- 漏了运行环境(坑三)
- 漏了谁会看到(坑四)
- 漏了谁会用(坑五)
而且这五个我自己都没发现 —— 是我把页面打开一个个点、点出来的。 代码跑起来不报错,不代表它是对的。
现在的样子
- 下载区:不用碰代码,拖文件 + 写清单就行
- 每个下载项可以同时挂本地和网盘,点”下载”会问一句在哪儿下
- 音乐播放器:全站都在,翻页不断;右下角,收得起来,不会自己乱跑
- 404 页面:以前压根没有,现在跟站内其它页面一个样子
- 网站上不会再有我自己的内部说明文件
至于那些坑 —— 记在这,下次改东西之前先把这五条过一遍。