跳到内容
菜单
语言，当前是简体中文
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

rastrillo 设计系统

设计系统所提供内容的总览。主题：signal。语言：简体中文。

路由

这些片段本身就是一整个响应，而不是响应里的一块。

预先做好、彼此一致的界面元素，在服务器端渲染。

框架自己的词汇把它们叫作 partial：ui.Templates() 返回的是 partial，docs/site/templates.md 也用这个名字。这页上的说法换了，代码里的没换。

这里的链接不可点

链接不可点，示例源码另行提供。

下面每个示例都在自己的框里。

示例内容为英文，示例外壳已翻译。

error-page

错误响应的整个主体：状态码、一句实话、一条回头的路，以及管理员用得上的 500 参考编号。

404 — 找不到

预览 
<div rst-error>
  <p rst-error-status>404</p>
  <h1 rst-error-title>找不到该页面</h1>
  <p rst-error-body>链接可能已过期，或者页面已移动。请检查网址，或回到起始页面。</p>
  <p rst-error-cta><a rst-btn="primary" href="/">起始页面</a></p>
</div>

403 — 无权限

预览 
<div rst-error>
  <p rst-error-status>403</p>
  <h1 rst-error-title>你没有权限查看这个页面</h1>
  <p rst-error-body>你的账户在这里没有访问权限。如果你认为应该有，请联系管理这个网站的人。</p>
  <p rst-error-cta><a rst-btn="primary" href="/">起始页面</a> <a rst-btn href="/posts">返回</a></p>
</div>

422 — 无法处理

预览 
<div rst-error>
  <p rst-error-status>422</p>
  <h1 rst-error-title>提交未成功</h1>
  <p rst-error-body>发送的内容中有些地方不正确。请返回重试；没有保存任何内容。</p>
  <p rst-error-cta><a rst-btn="primary" href="/">起始页面</a> <a rst-btn href="/posts/1/edit">返回</a></p>
</div>

500 — 服务器错误

预览 
<div rst-error>
  <p rst-error-status>500</p>
  <h1 rst-error-title>我们这边出了问题</h1>
  <p rst-error-body>这不是你的问题。问题已记录。请稍后重试；如果一直发生，请提供下方的参考编号。</p>
  <p rst-error-cta><a rst-btn="primary" href="/">起始页面</a></p>
  <p class="rst-mono" rst-error-ref dir="auto">参考编号：k3f9tq</p>
</div>

500 是唯一带参考编号的状态：运维人员可以用它在日志里 grep。

503 — 暂时不可用

预览 
<div rst-error>
  <p rst-error-status>503</p>
  <h1 rst-error-title>我们暂时无法提供服务</h1>
  <p rst-error-body>网站正在更新或者比较繁忙。请过一分钟再试。</p>
  <p rst-error-cta><a rst-btn="primary" href="/">起始页面</a></p>
</div>

其他任何情况——通用的一对

预览 
<div rst-error>
  <p rst-error-status>418</p>
  <h1 rst-error-title>有些地方不对</h1>
  <p rst-error-body>该请求无法完成。请返回重试。</p>
  <p rst-error-cta><a rst-btn="primary" href="/">起始页面</a></p>
</div>

框架目录里写了五种状态的措辞。第六种会回退到通用的一对，而不是把一个缺失的键名摆到读者眼前。

back-nav

往上一级的返回链接，放在详情页或编辑页的上方。

返回一条记录

预览 
<nav rst-back-nav><a href="/orders/1">← Order AB3PX</a></nav>

locale-menu

语言切换器：一个 details 菜单，里面是发往 /_locale 的单字段 POST 表单，这样选择会落进 locale cookie，而读者仍留在同一个路径上。

十二种语言，当前的一种被标出。

预览 
<details rst-dropdown rst-locale name="rst-menus">
  <summary>语言<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></summary>
  <div rst-dropdown-menu>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="en"><input type="hidden" name="return" value="/"><button type="submit" lang="en">English</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ga"><input type="hidden" name="return" value="/"><button type="submit" lang="ga">Gaeilge</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="zh-Hans"><input type="hidden" name="return" value="/"><button type="submit" lang="zh-Hans" aria-current="true">简体中文</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="es"><input type="hidden" name="return" value="/"><button type="submit" lang="es">Español</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="hi"><input type="hidden" name="return" value="/"><button type="submit" lang="hi">हिन्दी</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="pt"><input type="hidden" name="return" value="/"><button type="submit" lang="pt">Português</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="bn"><input type="hidden" name="return" value="/"><button type="submit" lang="bn">বাংলা</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ru"><input type="hidden" name="return" value="/"><button type="submit" lang="ru">Русский</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ja"><input type="hidden" name="return" value="/"><button type="submit" lang="ja">日本語</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="yue"><input type="hidden" name="return" value="/"><button type="submit" lang="yue">廣東話</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="vi"><input type="hidden" name="return" value="/"><button type="submit" lang="vi">Tiếng Việt</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ar"><input type="hidden" name="return" value="/"><button type="submit" lang="ar">العربية</button></form>
  </div>
</details>

这一个会 POST 到 /_locale，那需要一台服务器。本页页眉里的切换器是纯链接的版本。