HTML属性

特定の機能を有効にするために、Webサイトに属性を追加する必要がある場合があります。たとえば、アプリケーションのテーマを制御したり、dir属性でテキストの方向を決定したり、lang属性でページの言語を設定したりする場合です。通常、これらの属性をHTMLタグに追加するのは、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,
    },
  });
}

貢献者

このドキュメントの改善に貢献してくださったすべての貢献者に感謝します！