HTML 属性

有时，需要在网站中添加属性以启用特定功能，例如控制应用程序主题、使用 dir 属性确定文本方向，或使用 lang 属性设置页面语言。通常，将这些属性添加到 HTML 标签是实用的，因为它通常用作应用程序的容器。

要在 Qwik city 中应用这些属性，请将它们添加到 src/entry.ssr.tsx 文件中的 containerAttributes 中。

export default function (opts: RenderToStreamOptions) {
  return renderToStream(<Root />, {
    manifest,
    ...opts,
    // Use container attributes to set attributes on the html tag.
    containerAttributes: {
      lang: "en-us",
      ...opts.containerAttributes,
    },
  });
}

此外，opts.serverData 对象和嵌套对象允许您访问有关请求的信息，包括 请求头、URL、路由参数等等。利用这些信息，您可以执行以下操作。

export default function (opts: RenderToStreamOptions) {
  // With this route structure 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,
    },
  });
}

贡献者

感谢所有帮助改进本文档的贡献者！