联系支持

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

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

← 全部文章

我们从未链接过的那个页面

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

指向它的链接只有两处:排行榜自己内部,以及 sitemap.xml。不在导航栏里,不在页脚里,不在首页上。事先不知道网址的人,没有任何办法走到那儿。

这和那六个没人够得着的成品功能是同一种形状,没被发现的原因也一样:从里面看,一个你能打开的页面,就是一个存在的页面。

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

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

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

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

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

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

没有被选的那个方案

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

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

广告