HTML 属性

有时我们需要添加属性来设置网站的某些功能，无论是控制应用程序的主题，决定文本的方向（dir 属性），还是设置语言（lang 属性）。通常情况下，将这些属性添加到 html 标签中是很实用的，因为它通常是应用程序的容器。

要在 Qwik City 中实现这一点，请转到 src/entry.ssr.tsx 并将它们添加到 containerAttributes 中，如下所示：

export default function (opts: RenderToStreamOptions) {
  return renderToStream(<Root />, {
    manifest,
    ...opts,
    // 使用容器属性在 html 标签上设置属性。
    containerAttributes: {
      lang: "en-us",
      ...opts.containerAttributes,
    },
  });
}

除此之外，您还可以从 opts.serverData 对象（以及嵌套对象）中获取有关请求的信息，例如 request headers、url、route params 等等。通过利用这些信息，现在我们可以做到以下几点：

export default function (opts: RenderToStreamOptions) {
  // 使用这个路由结构 src/routes/[locale]/post/[id]/index.tsx
  const isRTL = opts.serverData?.qwikcity.params.locale === 'ar';
 
  return renderToStream(<Root />, {
    manifest,
    ...opts,
    containerAttributes: {
      dir: isRTL ? 'rtl' : 'ltr'
      ...opts.containerAttributes,
    },
  });
}

Contributors

Thanks to all the contributors who have helped make this documentation better!