我们从未链接过的那个页面
本站有一个排行榜:最热闹的公开计数器,另有按国家和按语言的分榜。它做好了,译成了十一种语言,有退出选项,而且已经上线一段时间了。
指向它的链接只有两处:排行榜自己内部,以及 sitemap.xml。不在导航栏里,不在页脚里,不在首页上。事先不知道网址的人,没有任何办法走到那儿。
这和那六个没人够得着的成品功能是同一种形状,没被发现的原因也一样:从里面看,一个你能打开的页面,就是一个存在的页面。
加一条链接——以及它翻出来的东西
导航栏构建一次,绘制两次——宽屏上是一行,切换点以下则在汉堡菜单里。加第五个目标只是一行代码。加之前,我们先量了这一行实际会有多宽。
这里能用的浏览器工具不做布局计算——不论哪个宽度、哪个元素,它一律返回 0。所以标签是用 GD 对着一个真实字体文件、按这一行的实际字号量的,每种语言都量。系统字体比用来测量的那一款更窄,所以数字会偏大一点,而对一个上界来说,这正是该偏的方向。
| 语言 | 四个目标 | 五个 |
| 法语 | 982 px | 1 123 px |
| 西班牙语 | 946 px | 1 130 px |
| 中文 | 730 px | 802 px |
汉堡菜单是从 640 px 开始接手的。也就是说,这一行在只有四个目标时就已经需要多达 982 px,而在 640 px 到 980 px 之间,它一直在溢出——这个列表既没有换行也没有溢出保护,而右侧的工具区还用 margin-left: auto 从另一头顶着它。
再加第五项只会让这个区间更宽。切换点因此改到了 1 140 px。
没有被选的那个方案
显而易见的替代方案是让这一行折到第二行去。它因为一个具体原因被否掉了:统计页面上的实时条通过 top: 57px 吸附在视口边上,而这个数字正是导航栏的高度。两行高的导航栏会在每一个统计页面上把自己压到自己底下。挪动切换点则把高度原封不动地留了下来。
新链接的标签直接复用排行榜页面自己的标题,那个标题在十一种语言里都已经有了。不需要第十二个翻译键,而且这个目标在栏里的名字,和你落地那一页上的名字完全一致。