联系支持

我们通过电子邮件回复,通常两天内。

为防止滥用,Google reCAPTCHA 会检查这次提交,其间会向 Google 传输数据。脚本只在此表单打开时才加载。

← 全部文章

排行榜现在进了导航栏

关于内容及其审核

本文内容

本站有一个排行榜:最热闹的公开计数器,另有按国家和按语言的分榜。它做好了,译成了十一种语言,有退出选项,而且已经上线一段时间了。

在这次改动之前,指向它的链接只有两处:排行榜自己内部,以及 sitemap.xml。不在导航栏里,不在页脚里,不在首页上。想走到那儿,前提是已经知道网址。它现在是导航栏里的第五个去处。

这和那六个难以够到的成品功能是同一种形状,没被发现的原因也一样:从里面看,一个能打开的页面,就是一个存在的页面。差别要等到把指向它的链接数一遍,才显出来。

加一条链接——以及它翻出来的东西

导航栏构建一次,绘制两次——宽屏上是一行,切换点以下则在汉堡菜单里。加第五个目标只是一行代码。加之前,我们先量了这一行实际会有多宽。

这里能用的浏览器工具不做布局计算——不论哪个宽度、哪个元素,它一律返回 0。所以标签是用 GD 对着一个真实字体文件、按这一行的实际字号量的,每种语言都量。系统字体比用来测量的那一款更窄,所以数字会偏大一点,而对一个上界来说,这正是该偏的方向。

语言四个目标五个
法语982 px1 123 px
西班牙语946 px1 130 px
中文730 px802 px
640 px1,140 px法语西班牙语中文

汉堡菜单是从 640 px 开始接手的。也就是说,这一行在只有四个目标时就已经需要多达 982 px,而在 640 px 到 980 px 之间,它一直在溢出——这个列表既没有换行也没有溢出保护,而右侧的工具区还用 margin-left: auto 从另一头顶着它。

再加第五项只会让这个区间更宽。切换点因此改到了 1 140 px。

没有被选的那个方案

显而易见的替代方案是让这一行折到第二行去。它因为一个具体原因被否掉了:统计页面上的实时条通过 top: 57px 吸附在视口边上,而这个数字正是导航栏的高度。两行高的导航栏会在每一个统计页面上把自己压到自己底下。挪动切换点则把高度原封不动地留了下来。

新链接的标签直接复用排行榜页面自己的标题,那个标题在十一种语言里都已经有了。不需要第十二个翻译键,而且这个目标在栏里的名字,和落地页上的名字完全一致。

广告