Labs · 网站界面
一个比改版更长久的站点。
为那些绝不容许失灵的站点而建 — 政府门户、跨国企业、严肃的运营机构。 亲手编写,自边缘节点以访客自己的语言交付,让它常保活力的 SEO 与自动化 皆编织其中,而非事后外挂。
不是一个套上您徽标的模板。而是一份为它所服务的那一个站点而写的文档。
语义化、无障碍,轻盈到在一个字节的 JavaScript 加载之前便可阅读。 一个站点,一个目的 — 凡其不需,绝不交付。
SEO 不是第二家供应商。结构化数据与干净的标记在页面构建之时便已写就, 好让对的人找到它 — 七种语言,每一种都是真正的页面。
能送达真人的表单、会自我更新的内容、页面背后那份静默的自动化 — 皆是构建的一部分,好让站点在您不盯着时仍持续运转。
来自一个亲手打造的站点的四个数字。
严肃站点的手艺在于克制:选用恰当的标签、它据以渲染的数据,
以及只在值回其重量处才加入的脚本 — 采用浏览器最新的原生 API,不用框架 —
并将 SEO 写入页面本身。
代码保持英文 — 技术的通用语言。
<!-- a page you can read before one byte of JavaScript arrives --> <main id="content"> <h1>Office of the Registry</h1> <nav aria-label="Services"> <a href="/apply">Apply</a> <a href="/status" aria-current="page">Check status</a> </nav> <article> <h2>Your case</h2> <p class="status status--open">Open — in review</p> <time datetime="2026-11-02T09:14:00Z">Updated today</time> </article> </main> <!-- no div soup, no bundle to boot. a landmark, a heading, a link. -->
// the data the page renders from — one shape, every language. the app reads the same. { "case": { "id": "c_7f3a91c4", "status": "open", "locale": "fr", "updated": "2026-11-02T09:14:00Z", "actions": [ { "label": "apply", "href": "/fr/apply" }, { "label": "status", "href": "/fr/status" } ] } }
// JavaScript · added only where it earns its weight — the browser's newest native APIs, no framework customElements.define("case-status", class extends HTMLElement { #case = JSON.parse(this.dataset.case ?? "{}"); // the same JSON the page already shipped with connectedCallback() { // View Transitions API — native to the browser, zero bundle to boot document.startViewTransition?.(() => this.#render()) ?? this.#render(); } #render() { this.textContent = this.#case.status; // enhances markup that already works without it } });
<!-- SEO is not a plugin here — it is written as the page is built --> <link rel="alternate" hreflang="fr" href="https://…/fr/status"> <link rel="alternate" hreflang="ar" href="https://…/ar/status"> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "GovernmentService", "name": "Registry — case status", "availableLanguage": ["en","fr","de","ar","es","ja","zh"], "provider": { "@type": "GovernmentOrganization", "name": "Office of the Registry" } } </script> <!-- found and chosen is the same job as built. -->
为何每逢紧要关头,亲手编写的站点都胜过模板。
一个模板无法量身定制 — 它本就为所有人而造。一个需要一兆字节 才能显示一句话的页面无法做到快 — 那份重量正是它的要害。这正是本页为何没有模板, 也为何没有价目表的原因:我们度量站点须做之事,再按度量所得报价。
在落笔写下第一行之前,先讲明如何守护您的成果。这一部分没有商量余地。
保密协议在此是默认,而非加价项目。您分享的内容仅由一位工程师阅读,再无他人 — 绝不出售、分享或转交。
凭证与记录留在您的屋子里,遵循最小权限原则。凡非必需,我们绝不留存副本, 未经您点头,任何东西都不会离开您的掌控。
在您屋子里运行的一切,皆归您阅读与审计 — 没有需要您蒙眼信任的黑箱。 机房归我们,您运行的归您。
两行足矣 — 它的用途,以及谁须找到它。我们亲自阅读, 亲自回复。
它已经出现在 Zürich 的一块屏幕上 — 不在排队中,不在工单里。 将会打造它的那位工程师正在阅读,并将亲自回信。
·